PayTabs Ionic Native library is a wrapper for the native PayTabs Android and iOS SDKs, It helps you integrate with PayTabs seamlessly. 

In this article you will be going to know about:

• Plugin Support

• Installation

  • Android
  • IOS

• Usage

  • Pay with Card
  • Pay with Apple Pay
  • Pay with Samsung Pay
  • Pay with Alternative Payment Methods
• Enums
  • Tokenize types
  • Token formats
  • Transaction Type
  • Alternative Payment Methods

• API

  • startCardPayment(...)
  • startApplePayPayment(...)
  • startAlternativePaymentMethod(...)

• Interfaces

  • PaymentSDKConfiguration
  • PaymentSDKBillingDetails
  • PaymentSDKShippingDetails
  • PaymentSDKTheme

• Demo Application

Plugin Support

•  iOS
•  Android

Installation

npm install [email protected] --save --force npx cap sync

Follow the below steps to complete the installation

Android

• Register plugin in the project MainActivity.java file

import com.getcapacitor.BridgeActivity; import com.getcapacitor.Plugin; import com.paytabs.ionic.plugin.PayTabs; import com.paytabs.ionic.plugin.PayTabsIonicPlugin; import java.util.ArrayList; 
public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); 
    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(PayTabsIonicPlugin.class);
    }});
  } }

IOS

• Navigate to the iOS folder and run the following command:

pod install

import 'paytabs-ionic-native';
import { PaymentSDKBillingDetails, PaymentSDKShippingDetails, PaymentSDKConfiguration, PayTabsIonic } from 'paytabs-ionic-native';

Pay with Card

1. Configure the billing & shipping information, the shipping information is optional

 let billingDetails: PaymentSDKBillingDetails = {
          name: 'John Smith',
          email: '[email protected]',
          phone: '+201111111111',
          addressLine: 'Address line',
          city: 'Dubai',
          state: 'Dubai',
          countryCode: 'AE',
          zip: '1234'
  };

  const shippingDetails: PaymentSDKShippingDetails = {
          name: 'John Smith',
          email: '[email protected]',
          phone: '+201111111111',
          addressLine: 'Address line',
          city: 'Dubai',
          state: 'Dubai',
          countryCode: 'AE',
          zip: '1234'
  };

2. Create object of PaymentSDKConfiguration and fill it with your credentials and payment details.

 let configuration: PaymentSDKConfiguration = {
          profileID: '*profile ID*',
          serverKey: '*server key*',
          clientKey: '*client key*',
          cartID: '12345',
          currency: 'USD',
          cartDescription: 'Flowers',
          merchantCountryCode: 'ae',
          merchantName: 'Flowers Store',
          amount: 20,
          screenTitle:'Pay with Card',
          billingDetails,
          shippingDetails,
  };

Options to show billing and shipping info

	   configuration.showBillingInfo = true
	   configuration.showShippingInfo = true	

3. Start payment by calling startCardPayment method and handle the transaction details

    const result = await PayTabsIonic.startCardPayment(configuration);

Then you can handle the result like that:

 this.handleResult(result);
      handleResult(result: any) {
          if (result.status == 'success') {
            // Handle transaction details here.
            const transactionDetails = result.data;
            console.log('responseCode: ' + transactionDetails.paymentResult.responseCode);
            console.log('transactionTime: ' + transactionDetails.paymentResult.transactionTime);
            console.log('responseMessage: ' + transactionDetails.paymentResult.responseMessage);
            console.log('transactionReference: ' + transactionDetails.transactionReference);
            console.log('token: ' + transactionDetails.token);
          } else if (result.status == 'error') {
            // Handle error here the code and message.
          } else if (result.status == 'event') {
            // Handle events here.
          }
        }

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.

let configuration: PaymentSDKConfiguration = {
          profileID: '*your profile id*',
          serverKey: '*server key*',
          clientKey: '*client key*',
          cartID: '12345',
          currency: 'USD',
          cartDescription: 'Flowers',
          merchantCountryCode: 'ae',
          merchantName: 'Flowers Store',
          amount: 20,
          screenTitle:'Pay with Card',
          merchantName: 'Flowers Store'
          merchantIdentifier = 'merchant.com.bundleID'
  };

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

configuration.simplifyApplePayValidation = true

4. Call startApplePayPayment to start payment

    const result = await PayTabsIonic.startApplePayPayment(configuration);
    this.handleResult(result);

Pay with Samsung Pay

Pass Samsung Pay token to the configuration and call startCardPayment

configuration.samsungToken = "token"

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. check the available APMs in the enum section.
   

configuration.alternativePaymentMethods = [PaymentSDKConstants.AlternativePaymentMethod.stcPay]

3. Start payment by calling startAlternativePaymentMethod method and handle the transaction details

    const result = await PayTabsIonic.startAlternativePaymentMethod(configuration);
    this.handleResult(result);

Enums

Those enums will help you in customizing your configuration.

• Tokenize types 

The default type is none

exports.TokeniseType = Object.freeze({
"none":"none", // tokenise is off
"merchantMandatory":"merchantMandatory", // tokenise is forced
"userMandatory":"userMandatory", // tokenise is forced as per user approval
"userOptinoal":"userOptional" // tokenise if optional as per user approval
});

configuration.tokeniseType = cordova.plugins.CordovaPaymentPlugin.TokeniseType.userOptinoal

• Token formats

The default format is hex32

exports.TokeniseFromat = Object.freeze({"none":"1", 
"hex32": "2", 
"alphaNum20": "3", 
"digit22": "3", 
"digit16": "5", 
"alphaNum32": "6"
});

configuration.tokeniseFormat = cordova.plugins.CordovaPaymentPlugin.TokeniseFromat.hex32

• Transaction Type

The default type is sale

const TransactionType = Object.freeze({"sale":"sale", 
"authorize": "auth"});

configuration.transactionType = cordova.plugins.CordovaPaymentPlugin.TransactionType.sale

• Alternative Payment Methods

AlternativePaymentMethod = Object.freeze({"unionPay":"unionpay", 
"stcPay":"stcpay", 
"valu": "valu", 
"meezaQR": "meezaqr", 
"omannet": "omannet", 
"knetCredit": "knetcredit", 
"knetDebit": "knetdebit", 
"fawry": "fawry"});

configuration.alternativePaymentMethods = [cordova.plugins.CordovaPaymentPlugin.AlternativePaymentMethod.stcPay, ...]

API

• startCardPayment(...)
• startApplePayPayment(...)
• startAlternativePaymentMethod(...)

startApplePayPayment(options: PaymentSDKConfiguration) => any

startApplePayPayment(options: PaymentSDKConfiguration) => any

startAlternativePaymentMethod(options: PaymentSDKConfiguration) => any

Demo Application

You can try our demo application by checking our complete  example.