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
- Configure the billing & shipping info, the shipping info is optional
let billingDetails = new cordova.plugins.CordovaPaymentPlugin.PaymentSDKBillingDetails(name= "John Smith",
email= "email@test.com",
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@test.com",
phone= "9731111111",
addressLine= "address line",
city= "Dubai",
state= "Dubai",
countryCode= "ae", // ISO alpha 2
zip= "1234")
- 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
-
Follow the guide Steps to configure Apple Pay to learn how to configure ApplePay with PayTabs.
-
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"
- 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
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.
-
Do the steps 1 and 2 from Pay with Card.
-
Choose one or more of the payment methods you want to support.
configuration.alternativePaymentMethods = [AlternativePaymentMethod.stcPay]
- 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.