Cordova PayTabs Plugin

Cordova PayTabs Plugin is a wrapper for the native PayTabs Android and iOS SDKs, It helps you integrate with PayTabs payment gateway.

Plugin Support:

• [x] iOS
• [x] Android

Installation

$ cordova plugin add com.paytabs.cordova.plugin

Android - Prerequisites

Open gradle.properties and set the flags useAndroidX and enableJetifier with true.

android.useAndroidX=true
android.enableJetifier=true

Usage

Pay with Card

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

let billingDetails = new cordova.plugins.CordovaPaymentPlugin.PaymentSDKBillingDetails(name= "John Smith",
                                  email= "[email protected]",
                                  phone= "9731111111",
                                  addressLine= "address line",
                                  city= "Dubai",
                                  state= "Dubai",
                                  countryCode= "ae", // ISO alpha 2
                                  zip= "1234")
let shippingDetails = new cordova.plugins.CordovaPaymentPlugin. PaymentSDKShippingDetails(name= "John Smith",
                                  email= "[email protected]",
                                  phone= "9731111111",
                                  addressLine= "address line",
                                  city= "Dubai",
                                  state= "Dubai",
                                  countryCode= "ae", // ISO alpha 2
                                  zip= "1234")
                                              

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

let configuration = new cordova.plugins.CordovaPaymentPlugin.PaymentSDKConfiguration();
    configuration.profileID = "*your profile id*"
    configuration.serverKey= "*server key*"
    configuration.clientKey = "*client key*"
    configuration.cartID = "545454"
    configuration.currency = "AED"
    configuration.cartDescription = "Flowers"
    configuration.merchantCountryCode = "ae"
    configuration.merchantName = "Flowers Store"
    configuration.amount = 20
    configuration.screenTitle = "Pay with Card"
    configuration.billingDetails = billingDetails
    configuration.forceShippingInfo = false

Options to show billing and shipping info

	configuration.showBillingInfo = true
	configuration.showShippingInfo = true

1- Pay with card

Start payment by calling startCardPayment method and handle the transaction details

cordova.plugins.CordovaPaymentPlugin.startCardPayment(configuration, function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });

2- Pay with Token

Start payment by calling startTokenizedCardPayment method and handle the transaction details

cordova.plugins.CordovaPaymentPlugin.startTokenizedCardPayment(configuration,
"Token",
"TransactionReference",
 function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });

3- Pay with 3DS Secured Token

Start payment by calling start3DSecureTokenizedCardPayment method and handle the transaction details

let cardInfo = new PaymentSDKSavedCardInfo("Card mask", "cardType")
cordova.plugins.CordovaPaymentPlugin.start3DSecureTokenizedCardPayment(configuration, cardInfo, "token",
function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });

4- Pay with saved card

Start payment by calling startPaymentWithSavedCards method and handle the transaction details

cordova.plugins.CordovaPaymentPlugin.startPaymentWithSavedCards(configuration, support3DsBool,
function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });

Pay with Apple Pay

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

2. Do the 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.merchantApplePayIdentifier = "com.merchant.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

cordova.plugins.CordovaPaymentPlugin.startApplePayPayment(configuration, function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });

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 the steps 1 and 2 from Pay with Card.

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

configuration.alternativePaymentMethods = [AlternativePaymentMethod.stcPay]

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

cordova.plugins.CordovaPaymentPlugin.startAlternativePaymentMethod(configuration, function (result) {
        if (result["status"] == "success") {
            // Handle transaction details here.
            var 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.
          }
    }, function (error) {
        console.log(error)
    });
     

Query transaction

You can check the status of a transaction

1- first create PaymentSDKQueryConfiguration

var configuration = new cordova.plugins.CordovaPaymentPlugin.PaymentSDKQueryConfiguration(
    "ServerKey",
    "ClientKey",
    "Country Iso 2",
    "Profile Id",
    "Transaction Reference"
);

2- Call cordova.plugins.CordovaPaymentPlugin.queryTransaction and pass the needed argument

cordova.plugins.CordovaPaymentPlugin.queryTransaction(configuration, function (result) {
      if (result["status"] == "success") {
          // Handle transaction details here.
          var 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.
        }
  }, function (error) {
      console.log(error)
  });

Enums

Those enums will help you in customizing your configuration.

• Tokenise 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 types

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, ...]

Demo application

Check our complete sample.

License

See LICENSE.

PayTabs

Support | Terms of Use | Privacy Policy