Cordova Integration

Cordova Integration Guide

Setting Up SDK

The Cordova SDK is hosted on npm.org you can get the sdk here. It supports Android SDK version 19 and above and iOS minimum deployment target of 11 and above. Navigate to your project and run the following command

npm install cordova-plugin-cashfree-pg

iOS

For iOS run the following commands

cd ios
pod install --repo-update

Installing the Plugin

Step 1: Creating an Order

The first step in the Cashfree Payment Gateway integration is to create an Order. You need to do this before any payment can be processed. You can add an endpoint to your server which creates this order and is used for communication with your frontend.

Order creation must happen from your backend (as this API uses your secret key). Please do not call this directly from your mobile application.

API Request for Creating an Order

Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.

You can find the SDKs here.

After successfully creating an order, you will receive a unique order_id and payment_session_id that you need for subsequent steps.

You can view all the complete api request and response for /orders here.

Step 2: Opening the Checkout Page

Once the order is created, the next step is to open the payment page so the customer can make the payment. Cordova SDK offer below payment flow:

To complete the payment, we can follow the following steps:

Create a CFSession object.
Set payment callback.
Initiate the payment using the payment object.

Create a Session

This object contains essential information about the order, including the payment session ID (payment_session_id) and order ID (order_id) obtained from Step 1. It also specifies the environment (sandbox or production).

let session = {
  payment_session_id: "payment_session_id",
  orderID: "order_id",
  environment: "SANDBOX", //"SANDBOX" or "PRODUCTION"
};

Setup payment callback

The SDK exposes an interface CFCallback to receive callbacks from the SDK once the payment flow ends. The callback supports two methods:

onVerify(result)
onError(error)

function onDeviceReady() {
  const callbacks = {
    onVerify: function (result) {
      let details = {
        orderID: result.orderID,
      };
      console.log(details);
    },
    onError: function (error) {
      let errorObj = {
        orderID: error.orderID,
        status: error.status,
        code: error.code,
        type: error.type,
        message: error.message,
      };
      console.log(errorObj);
    },
  };
  CFPaymentGateway.setCallback(callbacks);
}

Always call setCallback before calling doPayment method of SDK

Initiate the Payment

let webCheckoutPaymentObject = {
  theme: {
    navigationBarBackgroundColor: "#E64A19",
    navigationBarTextColor: "#FFFFFF",
  },
  session: {
    payment_session_id: "payment_session_id",
    orderID: "order_id",
    environment: "SANDBOX", //"SANDBOX" or "PRODUCTION"
  },
};

function initiateWebPayment() {
  CFPaymentGateway.doWebCheckoutPayment(webCheckoutPaymentObject);
}

This flow is for merchants who wants to quickly provide UPI functionality using cashfree’s mobile SDK without handling other modes like Cards or Net banking.

let upiIntentCheckoutPaymentObject = {
  "theme": {
    "navigationBarBackgroundColor": "#E64A19", //ios
    "navigationBarTextColor": "#FFFFFF", //ios
    "buttonBackgroundColor": "#FFC107", //ios
    "buttonTextColor": "#FFFFFF", //ios
    "primaryTextColor": "#212121", 
    "secondaryTextColor": "#757575", //ios
    "backgroundColor": "#FFFFFF"
	},
  "session": {
    "payment_session_id": "payment_session_id",
    "orderID": "order_id",
    "environment": "SANDBOX" //"SANDBOX" or "PRODUCTION"
	}
}

function initiateUPIPayment() {
    CFPaymentGateway.doUPIPayment(upiIntentCheckoutPaymentObject)
}

Step 3: Sample Code

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  console.log("Running cordova-" + cordova.platformId + "@" + cordova.version);
  let webElement = document.getElementById("onWeb");
  webElement.addEventListener("click", (e) => initiateWebPayment());

  const callbacks = {
    onVerify: function (result) {
      let details = {
        orderID: result.orderID,
      };
      console.log(details);
    },
    onError: function (error) {
      let errorObj = {
        orderID: error.orderID,
        status: error.status,
        code: error.code,
        type: error.type,
        message: error.message,
      };
      console.log(errorObj);
    },
  };
  CFPaymentGateway.setCallback(callbacks);
}

function initiateWebPayment() {
  CFPaymentGateway.doWebCheckoutPayment({
    theme: {
      navigationBarBackgroundColor: "#E64A19",
      navigationBarTextColor: "#FFFFFF",
    },
    session: {
      payment_session_id: "payment_session_id",
      orderID: "order_id",
      environment: "SANDBOX",
    },
  });
}

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    let upiElement = document.getElementById("onUPI");
    upiElement.addEventListener("click", (e) => initiateUPIIntentCheckoutPayment());

    const callbacks = {
       onVerify: function (result) {
         let details = {
           "orderID": result.orderID
         }
         console.log(details);
       },
        onError: function (error){
          let errorObj = {
            "orderID": error.orderID,
            "status": error.status,
            "code": error.code,
            "type": error.type,
            "message": error.message
          }
          console.log(errorObj);
        }
    }
    CFPaymentGateway.setCallback(callbacks)
}

function initiateUPIIntentCheckoutPayment() {
    CFPaymentGateway.doUPIPayment({
      "theme": {
        "navigationBarBackgroundColor": "#E64A19", //ios
        "navigationBarTextColor": "#FFFFFF", //ios
        "buttonBackgroundColor": "#FFC107", //ios
        "buttonTextColor": "#FFFFFF", //ios
        "primaryTextColor": "#212121", 
        "secondaryTextColor": "#757575", //ios
        "backgroundColor": "#FFFFFF"
      },
      "session": {
        "payment_session_id": "payment_session_id",
        "orderID": "order_id",
        "environment": "SANDBOX" //"SANDBOX" or "PRODUCTION"
      }
    })
}

Sample Github Code

Sample UPI Test apk

Step 4: Confirming the Payment

Once the payment is completed, you need to confirm whether the payment was successful by checking the order status. Once the payment finishes, the user will be redirected back to your activity.

You must always verify payment status from your backend. Before delivering the goods or services, please ensure you call check the order status from your backend. Ensure you check the order status from your server endpoint.

To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same.

Testing

You should now have a working checkout button that redirects your customer to Cashfree Checkout. If your integration isn’t working:

Open the Network tab in your browser’s developer tools.
Click the button and check the console logs.
Use console.log(session) inside your button click listener to confirm the correct error returned.

Error Codes

To confirm the error returned in your android application, you can view the error codes that are exposed by the SDK.

The following are some of the error codes that are exposed by the SDK:

ERROR CODES	MESSAGE
MISSING_CALLBACK	The callback is missing in the request.
ORDER_ID_MISSING	The “order_id” is missing in the request.
CARD_EMI_TENURE_MISSING	The “emi_tenure” is missing or invalid (It has to be greater than 0).
INVALID_UPI_APP_ID_SENT	The id sent is invalid. The value has to be one of the following: “tez://”,“phonepe://”,“paytm://”,“bhim://. Please refer the note in CFUPI class for more details
INVALID_PAYMENT_OBJECT_SENT	The payment object that is set does not match any payment mode. Please set the correct payment mode and try again.
WALLET_OBJECT_MISSING	The CFWallet object is missing in the request
NETBANKING_OBJECT_MISSING	The CFNetbanking object is missing in the request.
UPI_OBJECT_MISSING	The CFUPI object is missing in the request.
CARD_OBJECT_MISSING	The CFCard object is missing in the request.
INVALID_WEB_DATA	The url seems to be corrupt. Please reinstantiate the order.
SESSION_OBJECT_MISSING	The “session” is missing in the request
PAYMENT_OBJECT_MISSING	The “payment” is missing in the request
ENVIRONMENT_MISSING	The “environment” is missing in the request.
ORDER_TOKEN_MISSING	The “order_token” is missing in the request.
CHANNEL_MISSING	The “channel” is missing in the request.
CARD_NUMBER_MISSING	The “card_number” is missing in the request.
CARD_EXPIRY_MONTH_MISSING	The “card_expiry_mm” is missing in the request.
CARD_EXPIRY_YEAR_MISSING	The “card_expiry_yy” is missing in the request.
CARD_CVV_MISSING	The “card_cvv” is missing in the request.
UPI_ID_MISSING	The “upi_id” is missing in the request
WALLET_CHANNEL_MISSING	The “channel” is missing in the wallet payment request
WALLET_PHONE_MISSING	The “phone number” is missing in the wallet payment request
NB_BANK_CODE_MISSING	The “bank_code” is missing in the request

Payments

Payment Gateway

Checkout

Flowwise

RiskShield

Other Products

Developer updates

Cordova Integration