Xamarin PayTabs binding library is a wrapper for the native PayTabs Android and iOS SDKs, It helps you integrate your Xamarin project with PayTabs.
In this article you will be going to know about:
Plugin Support
- iOS
- Android
Features
- The library 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 tokenization.
Installation
We provide a binding for each platform (iOS & Android)
IOS
- Download the binding library from here.
- Add the library to the app references as a Project or as .Net Assembly
Android
- Download the
PaymentSDK
binding library from here. - Download the
Card Scanning
binding library from here. - Add the libraries to the app references as a Project or as .Net Assembly
Usage For IOS
Pay with Card
- Configure the billing & shipping info, the shipping info is optional
PaymentBillingDetails billingDetails = new PaymentBillingDetails
{
Name = "John Smith",
Email = "[email protected]",
Phone = "+971111111111",
AddressLine = "Address line",
City = "Dubai",
State = "Dubai",
CountryCode = "AE",
Zip = "12345"
};
PaymentShippingDetails shippingDetails = new PaymentShippingDetails
{
Name = "John Smith",
Email = "[email protected]",
Phone = "+971111111111",
AddressLine = "Address line",
City = "Dubai",
State = "Dubai",
CountryCode = "AE",
Zip = "12345"
};
- Create object of
and fill it with your credentials and payment details.PaymentConfiguration
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 info
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);
Pay with Apple Pay
Follow the guide Steps to configure Apple Pay to learn how to configure ApplePay with PayTabs.
Do steps 1 and 2 from Pay with Card although you can ignore Billing & Shipping details and Apple Pay will handle it, also you must pass the merchant name and merchant identifier.
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 payment
_proxy.StartApplePayPaymentWithConfiguration(configuration, this);
Pay with Samsung Pay
Pass Samsung Pay token to the configuration and call startCardPayment
configuration.samsungToken = "{Json token returned from the samsung pay payment}"
Pay with Alternative Payment Methods
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 steps 1 and 2 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
method and handle the transaction detailsStartAlternativePaymentMehtodWithConfiguration
_proxy.StartAlternativePaymentMehtodWithConfiguration(configuration, this);
Usage For Android
Pay with Card
- Configure the billing & shipping information , the shipping information is optional
PaymentBillingDetails billingDetails = new PaymentSdkBillingDetails("Dubai",
"AE",
"[email protected]",
"John Smith",
"+971111111111",
"Dubai","Address line",
"12345");
PaymentSdkShippingDetails shippingDetails = new PaymentSdkShippingDetails("Dubai",
"AE",
"[email protected]",
"John Smith",
"+971111111111",
"Dubai","Address line",
"12345");
- Create object of
and fill it with your credentials and payment details.PaymentConfiguration
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 IPaymentCallback 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 StartCardPayment method
PaymentSdkActivity.StartCardPayment(this,configuration, this);
Pay with Alternative Payment Methods
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 steps 1 and 2 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
method and handle the transaction detailsStartAlternativePaymentMethods
PaymentSdkActivity.StartAlternativePaymentMethods(this, configuration, this);
Tokenization
To enable tokenization (for recurring or any other services that depend on auto-detection from the customers instead of saving credit cards details), please follow the below instructions.
- 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 those parameters, you will receive token and transaction references in the delegate, save them for future usage.
- Pass the token & transaction reference
configuration.Token = token
configuration.TransactionReference = transactionreference
Constants For IOS
The following constants will help you in customizing your configuration.
Tokenize 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 Type
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, ...};
Constants For Android
The following constants will help you in customizing your configuration.
Tokenize 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 Type
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, ...};
Show/Hide Card Scanner
configuration.HideCardScanner = true;
Theme
Use the following guide to customize the colors, font, and logo by configuring the theme and passing it to the payment configuration.
iOS
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;
Android
Use the following guide to customize the colors, font, and logo by configuring the theme and pass it to the payment configuration.
Override strings: To override string you can find the keys with the default values here English, Arabic.
<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>
Demo Application
You can try our demos applications by checking our complete examples: iOS Sample, Android Sample.
License
Simply navigate to the following link to see our LICENSE.