Cordova Integration

​

Cordova Integration Guide

This integration allows you to integrate with a Cashfree Cordova SDK in your app.

The Cordova SDK is hosted on npm.org you can get the sdk here. The example app is located here.

​

Setting Up SDK

Our Flutter SDK 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.

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

Web Checkout is a streamlined payment solution that integrates Cashfree’s payment gateway into your app through our SDK. This implementation uses a WebView to provide a secure, feature-rich payment experience.

Your customers are presented with a familiar web interface where they can enter their payment details and complete their transaction seamlessly. All payment logic, UI components, and security measures are managed by our SDK, eliminating the need for complex custom implementation.

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

1. Create a CFSession object.
2. Create a Web Checkout Payment object.
3. Set payment callback.
4. Initiate the payment using the payment object created

​

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"
};

​

Create a Web Checkout Payment object

This object acceps a CFSession, like the one created in the previous step.

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

​

Setup callback

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

• public void onVerify(result)
• public void onError(error)

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

​

Step 3: Sample Code

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

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

  const callbacks = {
    onVerify: function (result) {
      let details = {
        orderID: result.orderID,
      };
      console.log(details);
    },
    onError: function (error) {
      let errorObj = {
        orderID: result.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",
    },
  });
}

​

UPI Intent Object (Optional)

This flow is for users who want to quickly provide UPI functionality using cashfree’s SDK without handling other modes like Cards or Net banking. This can be achieved by calling the doUPIPayment method instead of doWebCheckoutPayment.

...
function initiateUPIPayment() {
    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"
      }
    })
}

​

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.

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:

1. Open the Network tab in your browser’s developer tools.
2. Click the button and check the console logs.
3. 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.