@clickpay.sa/cordova.plugin.clickpay NPM

Cordova ClickPay Plugin

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

Plugin Support:

iOS
Android

Installation

$ cordova plugin add '@clickpay.sa/cordova.plugin.clickpay'

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 ClickPay.
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.PaymentSdkConfigurationDetails(
    "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.

Overriding Resources:

to override fonts Please add your custom fonts files with these names

payment_sdk_primary_font.tff && payment_sdk_secondary_font.tff

to override strings, colors or dimens add the resource you need to override from below resources with the value you want

Theme

Use the following guide to customize the colors, font, and logo by configuring the theme and pass it to the payment configuration.

UI guide

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>

See the common issues from here

common issues

Notes

1- Please configure the IPN to avoid loosing any of the transaction status.

License

See LICENSE.

ClickPay

Support | Terms of Use | Privacy Policy

ecosystem:cordova cordova-ios cordova-android clickpay clickpay cordova payment

@everything-registry/sub-chunk-177 @infinitebrahmanuniverse/nolb-_cli

1 year ago

1 year ago

1 year ago

1 year ago