Xamarin PayTabs binding library is a wrapper for the native PayTabs Android and iOS SDKs, It helps you integrate your Xamarin project with PayTabs.
Library Support:
- iOS
- Android
- The libaray offers a ready-made card payment screen.
- Card Scanner for quick & easy entry of card details (iOS 13.0+).
- Handle the missing required billing and shipping details.
- Logo, colors, and fonts become easy to be customized.
- Apple Pay and SamsunPay are supported.
- Support dark mode.
- Alternative payment methods supported.
- Support tokenisation.
We created a binding for each platform (iOS & Android)
Install-Package Paytabs.Xamarin.Ios -Version 1.1.0
- Install-Package Paytabs.Xamarin.Android -Version 1.0.8
- Install-Package Xamarin.Android.Device.YearClass
- donwload CardScanBindingLib.dll and add it as a reference in your project
in your project info.plist add Privacy - Photo Library Usage Description key .. we use camera to enable camera card scanning
- Configure the billing & shipping info, the shipping info is optional
PaymentBillingDetails billingDetails = new PaymentBillingDetails
{
Name = "John Smith",
Email = "email@domain.com",
Phone = "+971111111111",
AddressLine = "Address line",
City = "Dubai",
State = "Dubai",
CountryCode = "AE",
Zip = "12345"
};
PaymentShippingDetails shippingDetails = new PaymentShippingDetails
{
Name = "John Smith",
Email = "email@domain.com",
Phone = "+971111111111",
AddressLine = "Address line",
City = "Dubai",
State = "Dubai",
CountryCode = "AE",
Zip = "12345"
};
- Create an object of
PaymentConfiguration
and fill it with your credentials and payment details.
PaymentConfiguration configuration = new PaymentConfiguration
{
ProfileID = "*Profile Id*",
ServerKey = "*Server key*",
ClientKey = "*Client Key*",
MerchantCountryCode = "AE",
Currency = "USD",
Amount = 130,
CartID = "123456",
CartDescription = "Buy 2 Flowers",
MerchantName = "Flowers Store",
ScreenTitle = "Pay with Card",
};
- Setting the billing info
configuration.BillingDetails = billingDetails;
- Options to show billing and shipping ifno
configuration.ShowBillingInfo = true;
configuration.ShowShippingInfo = true;
- Implement the IPaymentCallback interface to handle the payment details & events callback.
public partial class ViewController : IPaymentCallback
{
[Export("paymentManagerWithDidFinishTransaction:error:")]
public void PaymentManagerWithDidFinishTransaction(PaymentTransactionDetails transactionDetails, NSError error)
{
if (error == null)
{
string result = "Transaction Details:";
result += "\nResponseCode: " + transactionDetails.PaymentResult.ResponseCode;
result += "\nResponseMessage: " + transactionDetails.PaymentResult.ResponseMessage;
result += "\nTransactionReference: " + transactionDetails.TransactionReference;
if (transactionDetails.Token != null)
{
result += "\nToken: " + transactionDetails.Token;
}
Console.WriteLine(result);
}
else
{
Console.WriteLine(error.LocalizedDescription);
}
}
[Export("paymentManagerWithDidCancelPayment:")]
public void PaymentManagerWithDidCancelPayment(NSError error)
{
Console.WriteLine("Cancel Event Handled");
}
[Export("paymentManagerWithDidStartPaymentTransaction:")]
public void PaymentManagerWithDidStartPaymentTransaction(UIViewController rootViewController)
{
Console.WriteLine("Payment Proccess Started");
}
}
- Call StartCardPayment method
- Define a variable of type PaymentSDKProxy
private PaymentSDKProxy _proxy;
- Call the StartCardPayment method
_proxy.StartCardPaymentWithConfiguration(configuration, this);
-
Follow the guide Steps to configure Apple Pay to learn how to configure ApplePay with PayTabs.
-
Do the steps 1, 2, and 3 from Pay with Card, although you can ignore Billing & Shipping details and Apple Pay will handle it, you must add the merchant name and merchant Apple Pay indentifier to the configuration.
configuration.MerchantName = "Flowers Store";
configuration.MerchantApplePayIdentifier = "merchant.com.bundleID";
- To simplify ApplePay validation on all user's billing info, pass SimplifyApplePayValidation parameter in the configuration with true.
configuration.SimplifyApplePayValidation = true;
- Call
StartApplePayPayment
to start the payment.
_proxy.StartApplePayPaymentWithConfiguration(configuration, this);
It becomes easy to integrate with other payment methods in your region like STCPay, OmanNet, KNet, Valu, Fawry, UnionPay, and Meeza, to serve a large sector of customers.
-
Do the steps 1, 2, and 3 from Pay with Card.
-
Choose one or more of the payment methods you want to support.
configuration.AlternativePaymentMethods = new string[] { AlternativePaymentMethod.StcPay, ... };
- Start payment by calling
StartAlternativePaymentMehtodWithConfiguration
method and handle the transaction details
_proxy.StartAlternativePaymentMehtodWithConfiguration(configuration, this);
Follow the below instructions to enable the tokenisation.
- Request token
configuration.TokeniseType = TokeniseType.UserOptional; // read more about the tokeniseType in the constants section
configuration.TokenFormat = TokeniseFromat.Hex32Format; // read more about the tokenFormat in the constants section
After passing the above parameters, you will receive token and transaction reference in the callback, save them for future usage.
- Pass the token & transaction reference
configuration.Token = token
configuration.TransactionReference = transactionreference
configuration.HideCardScanner = true;
Create an instance from the class PaymentTheme
and configure its fonts and colors.
PaymentTheme theme = new PaymentTheme
{
BackgroundColor= "4853b8", // color hex value
PrimaryColor = "956596"
};
configuration.Theme = theme;
The following constants will help you in customizing your configuration.
- Tokenise types
The default type is none
TokeniseType {
None,
MerchantMandatory,
UserMandatory,
UserOptional;
}
configuration.TokeniseType = TokeniseType.UserOptional;
- Transaction classes
The default class is ecom
TransactionClass {
Ecom,
Recurring;
}
configuration.TransactionClass = TransactionClass.Recurring;
- Token formats
The default format is hex32
TokeniseFromat {
None,
Hex32,
AlphaNum20,
Digit22,
Digit16,
AlphaNum32;
}
configuration.TokenFormat = TokeniseFromat.Hex32;
- Transaction types
The default type is sale
TransactionType {
Sale,
Authorize;
}
configuration.TransactionType = TransactionType.Sale;
- Alternative payment methods
AlternativePaymentMethod {
UnionPay,
StcPay,
Valu,
MeezaQR,
Omannet,
KnetCredit,
KnetDebit,
Fawry;
}
configuration.alternativePaymentMethods = new string[] { AlternativePaymentMethod.StcPay, ...};
- Configure the billing & shipping info, the shipping info is optional
PaymentBillingDetails billingDetails = new PaymentSdkBillingDetails("Dubai",
"AE",
"email@domain.com",
"John Smith",
"+971111111111",
"Dubai","Address line",
"12345");
PaymentSdkShippingDetails shippingDetails = new PaymentSdkShippingDetails("Dubai",
"AE",
"email@domain.com",
"John Smith",
"+971111111111",
"Dubai","Address line",
"12345");
- Create an object of
PaymentConfiguration
and fill it with your credentials and payment details.
PaymentSdkConfigurationDetails configuration = new PaymentSdkConfigBuilder("*Profile ID*",
"*Server Key*", "*Client Key*", 44.0, "USD")
.SetCartId("123")
.SetCartDescription("yyif")
.SetMerchantCountryCode("AE")
.SetBillingData(billDetails)
.SetShippingData(shippingDetails)
.Build();
- Setting the billing info
configuration.BillingDetails = billingDetails;
- Options to show billing and shipping info
configuration.ShowBillingInfo = true;
configuration.ShowShippingInfo = true;
- Implement the ICallbackPaymentInterface interface to handle the payment details & events callback.
public void OnError(PaymentSdkError error)
{
Console.WriteLine(error.Msg);
}
public void OnPaymentCancel()
{
Console.WriteLine("OnPaymentCancel");
}
public void OnPaymentFinish(PaymentSdkTransactionDetails paymentSdkTransactionDetails)
{
Console.WriteLine(paymentSdkTransactionDetails);
}
- Call the StartCardPayment method
PaymentSdkActivity.StartCardPayment(this,configuration, this);
-
Do the steps 1, 2, and 3 from Pay with Card.
-
Choose one or more of the payment methods you want to support.
IList<PaymentSdkApms> apms = new List<PaymentSdkApms>();
apms.Add(PaymentSdkApms.StcPay);
configuration.AlternativePaymentMethods = apms;
- Start payment by calling
StartAlternativePaymentMethods
method and handle the transaction details
PaymentSdkActivity.StartAlternativePaymentMethods(this, configuration, this);
The following constants will help you in customizing your configuration.
- Tokenise types
The default type is none
PaymentSdkTokenise {
None,
MerchantMandatory,
UserMandatory,
UserOptional;
}
configuration.TokeniseType = TokeniseType.UserOptinoal;
- Transaction classes
The default class is ecom
PaymentSdkTransactionClass {
Ecom,
Recurring;
}
configuration.TransactionClass = TransactionClass.Recurring;
- Token formats
The default format is hex32
PaymentSdkTokenFormat {
None,
Hex32,
AlphaNum20,
Digit22,
Digit16,
AlphaNum32;
}
configuration.TokenFormat = TokeniseFromat.Hex32;
- Transaction types
The default type is sale
PaymentSdkTransactionType {
Sale,
Auth;
}
configuration.TransactionType = TransactionType.Sale;
- Alternative payment methods
AlternativePaymentMethod {
UnionPay,
StcPay,
Valu,
MeezaQr,
OmanNet,
KnetCredit,
KnetDebit,
Fawry;
}
configuration.alternativePaymentMethods = new string[] { AlternativePaymentMethod.StcPay, ...};
Follow the below instructions to enable the tokenisation.
- Request token
configuration.TokeniseType = PaymentSdkTokenise.UserOptional // read more about the tokeniseType in the constants section
configuration.TokenFormat = PaymentSdkTokenFormat.Hex32Format // read more about the tokenFormat in the constants section
After passing the above parameters, you will receive token and transaction reference in the callback, save them for future usage.
- Pass the token & transaction reference
configuration.Token = token
configuration.TransactionReference = transactionreference
configuration.HideCardScanner = true;
<resourse>
// to override colors
<color name="payment_sdk_primary_color">#5C13DF</color>
<color name="payment_sdk_secondary_color">#FFC107</color>
<color name="payment_sdk_primary_font_color">#111112</color>
<color name="payment_sdk_secondary_font_color">#6D6C70</color>
<color name="payment_sdk_separators_color">#FFC107</color>
<color name="payment_sdk_stroke_color">#673AB7</color>
<color name="payment_sdk_button_text_color">#FFF</color>
<color name="payment_sdk_title_text_color">#FFF</color>
<color name="payment_sdk_button_background_color">#3F51B5</color>
<color name="payment_sdk_background_color">#F9FAFD</color>
<color name="payment_sdk_card_background_color">#F9FAFD</color>
// to override dimens
<dimen name="payment_sdk_primary_font_size">17sp</dimen>
<dimen name="payment_sdk_secondary_font_size">15sp</dimen>
<dimen name="payment_sdk_separator_thickness">1dp</dimen>
<dimen name="payment_sdk_stroke_thickness">.5dp</dimen>
<dimen name="payment_sdk_input_corner_radius">8dp</dimen>
<dimen name="payment_sdk_button_corner_radius">8dp</dimen>
</resourse>
- Override strings: To override string you can find the keys with the default values here English, Arabic.
Download our sample apps from here iOS Sample, Android Sample.
See LICENSE.