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

  1. Download the binding library from here.
  2. Add the library to the app references as a Project or as .Net Assembly

Android

  1. Download  the PaymentSDK binding library from here.
  2. Download  the Card Scanning binding library from here.
  3. Add the libraries to the app references as a Project or as .Net Assembly


Usage For IOS


Pay with Card

  1. 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"
        };

                                   

  1. Create 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 info


configuration.ShowBillingInfo = true;
configuration.ShowShippingInfo = true;


  1. 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");
    } }


  1. Call StartCardPayment method
    • Define a variable of type PaymentSDKProxy
      private PaymentSDKProxy _proxy;

    • Call the StartCardPayment method
      proxy.StartCardPaymentWithConfiguration(configuration, this);




Pay with Apple Pay

  1. Follow the guide Steps to configure Apple Pay to learn how to configure ApplePay with PayTabs.

  2. 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";


  1. To simplify ApplePay validation on all user's billing info, pass simplifyApplePayValidation parameter in the configuration with true.
configuration.SimplifyApplePayValidation = true;


  1. 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.

  1. Do steps 1 and 2 from Pay with Card.

  2. Choose one or more of the payment methods you want to support. 

configuration.AlternativePaymentMethods = new string[] { AlternativePaymentMethod.StcPay, ... };


  1. Start payment by calling StartAlternativePaymentMehtodWithConfiguration method and handle the transaction details
_proxy.StartAlternativePaymentMehtodWithConfiguration(configuration, this);

Usage For Android

Pay with Card

  1. 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");

                                   

  1. Create 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;


  1. 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);
}


  1. 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.

  1. Do steps 1 and 2 from Pay with Card.

  2. 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;


  1. Start payment by calling StartAlternativePaymentMethods method and handle the transaction details
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.

  1. 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.

 

  1. 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. 

UI guide


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.