cashfree_pg_sdk_cordova

Cordova/Ionic/Phonegap bindings for Cashfree's SDKs

Official Cordova/Ionic/Phonegap plugin for integrating Cashfree's checkout.

Supported platforms

• Android
• iOS

Note :: This plugin doesn't support capacitor ionic framework. It does support cordova ionic framework.

Installation:

Install the plugin

cd your-project-folder
cordova plugin add cashfree_pg_sdk_cordova

Step 1: Generate Token (From Backend)

You will need to generate a token from your backend and pass it to app while initiating payments. For generating token you need to use our token generation API.

Please note that this API is called only from your backend as it uses secretKey. Thus this API should never be called from App.

Request Description

For production/live usage set the form action to: https://api.cashfree.com/api/v2/cftoken/order

For test usage set the form action to: https://test.cashfree.com/api/v2/cftoken/order

You need to send orderId, orderCurrency and orderAmount as a JSON object to the API endpoint and in response a token will received. Please see the description of request below.

curl -XPOST -H 'Content-Type: application/json'
-H 'x-client-id: <YOUR_APP_ID>'
-H 'x-client-secret: <YOUR_SECRET_KEY>'
-d '{
  "orderId": "<ORDER_ID>",
  "orderAmount":<ORDER_AMOUNT>,
  "orderCurrency": "INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'

Request Example

Replace YOUR_APP_ID and YOUR_SECRET_KEY with actual values.

curl -XPOST -H 'Content-Type: application/json' -H 'x-client-id: YOUR_APP_ID' -H 'x-client-secret: YOUR_SECRET_KEY' -d '{
  "orderId": "Order0001",
  "orderAmount":1,
  "orderCurrency":"INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'

Response Example

{
  "status": "OK",
  "message": "Token generated",
  "cftoken": "v79JCN4MzUIJiOicGbhJCLiQ1VKJiOiAXe0Jye.s79BTM0AjNwUDN1EjOiAHelJCLiIlTJJiOik3YuVmcyV3QyVGZy9mIsEjOiQnb19WbBJXZkJ3biwiIxADMwIXZkJ3TiojIklkclRmcvJye.K3NKICVS5DcEzXm2VQUO_ZagtWMIKKXzYOqPZ4x0r2P_N3-PRu2mowm-8UXoyqAgsG"
}

The cftoken is the token that is used authenticate your payment request that will be covered in the next step.

Usage code

Create order object

var params = {
    "appId": "<your x-client-id>",
    "orderId": "<order id>",
    "orderAmount": "<amount in string>",
    "orderNote": "<order note string>",
    "customerName": "<customer name string>",
    "customerPhone": "<customer phone string>",
    "customerEmail": "<customer email string>",
    "notifyUrl": "<notify url>",
    "orderCurrency": "<order currency>",
    "stage": "TEST/PROD",
    "tokenData": "<ordertoken>",
}

Web Checkout

Initiate and handle payment response

PgCordovaWrapper.startPaymentWEB(params,
    (success) => {

    }, (error) => {

    });

• params: Order object from above here
• function(success) => void: A success function.
• function(error) => void: A error function.

Seamless Web Checkout

When you have a requirement for a customised payment flow, you can use seamless integration. You can implement the payment page as per your requirement and then use our SDK to authorise the payment. Once the payment details are collected the OTP or the two-factor authentication page will open in a webview. After the payment is confirmed the webview closes and you will receive a response.

The following sections describe the additional parameters for each of the payment methods:

Credit/Debit Card
Add the following parameters to the params map before invoking the startPaymentWEB() method to initiate a seamless card transaction.

params.put( "paymentOption", 'card');
params.put( "card_number", '4434260000000008'); //Replace Card number
params.put( "card_expiryMonth", '05'); // Card Expiry Month in MM
params.put( "card_expiryYear", '2021'); // Card Expiry Year in YYYY
params.put( "card_holder", 'John Doe'); // Card Holder name
params.put( "card_cvv", '123'); // Card CVV

Net Banking
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless net banking transaction. All valid bank codes are available here.

params.put( "paymentOption", 'nb');
params.put( "paymentCode", '3333'); // Put correct bank code here

Wallet
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless wallet transaction. All valid wallet codes are available here.

params.put( "paymentOption", 'wallet');
params.put( "paymentCode", '4001'); // Put correct wallet code here

UPI
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless UPI transaction.

params.put( "paymentOption", 'upi');
params.put( "upi_vpa", 'testsuccess@gocash'); // Put correct upi vpa here

Paypal
Add the following parameters to params map before invoking startPaymentWEB() method to initiate a seamless Paypal transaction.

params.put('paymentOption', "paypal");

UPI Intent

Initiate and handle payment response

PgCordovaWrapper.startPaymentUPI(params,
    (success) => {

    }, (error) => {

    }); 

• params: Order object from above here
• function(success) => void: A success function.
• function(error) => void: A error function.

Seamless UPI Intent

When you want to show your own customised payment screen with specific UPI payment applications, you can use our seamless UPI integration method. Here customers click on the required application and make the payment. You can implement the payment page as per your requirement and then use our SDK to authorise the payment.

var map = {
    ... // required params
    'appName':`-upi app 'id' here-` // upi app id the user selected from function
}

The following section describes the additional parameters required for UPI seamless integration.

You get the appName value from the id parameter specified in the getUPIApps function.

Other Functionalities

Get Upi Apps

This function returns a list of

PgCordovaWrapper.getUPIApps(
    (success) => {

    }, (error) => {

    });

• function(success) => void: A success function.
• function(error) => void: A error function.

Response

Returns a Object with a List of Map containing upi apps installed in the user device.

Response Parameters:

• displayName: Display name of the app to be used to show in the UI, This is a string encoded in Base64 with NO_WRAP.
• id: UPI app id to be used in UPI seamless Flow (with key appName).
• icon: Icon of the UPI app encoded in Base64 to show in the UI.

Sample response parsed to JSON:

[
   {
      "displayName": "Gpay",
      "id": "com.google.android.apps.nbu.paisa.user",
      "icon": "iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAAAXNSR0IArs4c6QAA... (in base64)"
      },
   {
      "displayName": "PHONEPE",
      "id": "com.phonepe.app",
      "icon": "iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAAAXNSR0IArs4c6QAA... (in base64)"
   }
]