Cordova Payment SDK | Cashfree Payments

Cashfree’s Cordova SDK provides a payment solution that integrates the payment gateway into your Cordova and Capacitor applications, supporting both Android and iOS platforms. The SDK offers multiple checkout flows including web checkout and UPI Intent checkout.

This document includes instructions for both Cordova and Capacitor SDK integrations.

Key benefits

The Cordova SDK offers the following advantages for your payment integration:

Multiple checkout flows: Provides web checkout and UPI Intent checkout options to suit different integration needs.
Cross-platform support: Seamlessly supports Android (SDK version 19+) and iOS (deployment target 11+) platforms.
Secure and compliant: Securely handles payment processing with built-in security measures managed by the SDK.

Prerequisites

Ensure you complete the following tasks before starting the integration:

Create a Cashfree Merchant Account.
Log in to the Merchant Dashboard and generate an App ID and Secret Key. Learn how to generate API keys.
Ensure your application complies with Cashfree’s Integrity standards. Applications that don’t meet the required integrity standards may be restricted from using production services.

The Cordova integration consists of three essential steps:

Step 1

Create an order

Step 2

Open the checkout page

Step 3

Confirm the payment

The step-by-step guide for each step of the integration process is as follows:

Step 1: Create an order Server-side

To integrate the Cashfree Payment Gateway, you must first create an order. Complete this step before you process any payments. Configure an endpoint on your server to handle order creation. You can’t call this API from the client-side.

Create orders through your server as this API requires your secret key. Don’t call it 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.

import { Cashfree, CFEnvironment } from "cashfree-pg";

const cashfree = new Cashfree(
	CFEnvironment.PRODUCTION,
	"{Client ID}",
	"{Client Secret Key}"
);

function createOrder() {
	var request = {
		order_amount: "1",
		order_currency: "INR",
		customer_details: {
			customer_id: "node_sdk_test",
			customer_name: "",
			customer_email: "example@gmail.com",
			customer_phone: "9999999999",
		},
		order_meta: {
			return_url:
				"https://test.cashfree.com/pgappsdemos/return.php?order_id=order_123",
		},
		order_note: "",
	};

	cashfree
		.PGCreateOrder(request)
		.then((response) => {
			var a = response.data;
			console.log(a);
		})
		.catch((error) => {
			console.error("Error setting up order request:", error.response.data);
		});
}

from cashfree_pg.models.create_order_request import CreateOrderRequest
from cashfree_pg.api_client import Cashfree
from cashfree_pg.models.customer_details import CustomerDetails


Cashfree.XClientId = {Client ID}
Cashfree.XClientSecret = {Client Secret Key}
Cashfree.XEnvironment = Cashfree.XSandbox
x_api_version = "2023-08-01"

def create_order():
        customerDetails = CustomerDetails(customer_id="123", customer_phone="9999999999")
        createOrderRequest = CreateOrderRequest(order_amount=1, order_currency="INR", customer_details=customerDetails)
        try:
            api_response = Cashfree().PGCreateOrder(x_api_version, createOrderRequest, None, None)
            print(api_response.data)
        except Exception as e:
            print(e)

import com.cashfree.*;

Cashfree.XClientId = {Client Key};
Cashfree.XClientSecret = {Client Secret Key};
Cashfree.XEnvironment = Cashfree.SANDBOX;

static void createOrder() {
  CustomerDetails customerDetails = new CustomerDetails();
  customerDetails.setCustomerId("123");
  customerDetails.setCustomerPhone("9999999999");

  CreateOrderRequest request = new CreateOrderRequest();
  request.setOrderAmount(1.0);
  request.setOrderCurrency("INR");
  request.setCustomerDetails(customerDetails);
  try {
    Cashfree cashfree = new Cashfree();
    ApiResponse<OrderEntity> response = cashfree.PGCreateOrder("2023-08-01", request, null, null, null);
    System.out.println(response.getData().getOrderId());

  } catch (ApiException e) {
    throw new RuntimeException(e);
  }
}

import (
  cashfree "github.com/cashfree/cashfree-pg/v3"
)

func createOrder() {

clientId := {Client ID}
clientSecret := {Client Secret Key}
cashfree.XClientId = &clientId
cashfree.XClientSecret = &clientSecret
cashfree.XEnvironment = cashfree.SANDBOX

request := cashfree.CreateOrderRequest{
		OrderAmount: 1,
		CustomerDetails: cashfree.CustomerDetails{
			CustomerId:    "1",
			CustomerPhone: "9999999999",
		},
		OrderCurrency: "INR",
		OrderSplits:   []cashfree.VendorSplit{},
	}
	version := "2023-08-01"
	response, httpResponse, err := cashfree.PGCreateOrder(&version, &request, nil, nil, nil)
	if err != nil {
		fmt.Println(err.Error())
	} else {
		fmt.Println(httpResponse.StatusCode)
		fmt.Println(response)
    }
}

using cashfree_pg.Client;
using cashfree_pg.Model;

Cashfree.XClientId = {Client ID};
Cashfree.XClientSecret = {Client Secret Key};
Cashfree.XEnvironment = Cashfree.PRODUCTION;
var cashfree = new Cashfree();
var xApiVersion = "2023-08-01";

void CreateOrder() {
    var customerDetails = new CustomerDetails("123", null, "9999999999");
    var createOrdersRequest = new CreateOrderRequest(null, 1.0, "INR", customerDetails);
    try {
        // Create Order
        var result = cashfree.PGCreateOrder(xApiVersion, createOrdersRequest, null, null, null);
        Console.WriteLine(result);
        Console.WriteLine(result.StatusCode);
        Console.WriteLine((result.Content as OrderEntity));
    } catch (ApiException e) {
        Console.WriteLine("Exception when calling PGCreateOrder: " + e.Message);
        Console.WriteLine("Status Code: " + e.ErrorCode);
        Console.WriteLine(e.StackTrace);
    }
}

\Cashfree\Cashfree::$XClientId = "<x-client-id>";
\Cashfree\Cashfree::$XClientSecret = "<x-client-secret>";
\Cashfree\Cashfree::$XEnvironment = Cashfree\Cashfree::$SANDBOX;

$cashfree = new \Cashfree\Cashfree();

$x_api_version = "2023-08-01";
$create_orders_request = new \Cashfree\Model\CreateOrdersRequest();
$create_orders_request->setOrderAmount(1.0);
$create_orders_request->setOrderCurrency("INR");
$customer_details = new \Cashfree\Model\CustomerDetails();
$customer_details->setCustomerId("123");
$customer_details->setCustomerPhone("9999999999");
$create_orders_request->setCustomerDetails($customer_details);

try {
    $result = $cashfree->PGCreateOrder($x_api_version, $create_orders_request);
    print_r($result);
} catch (Exception $e) {
    echo 'Exception when calling PGCreateOrder: ', $e->getMessage(), PHP_EOL;
}

curl --location 'https://sandbox.cashfree.com/pg/orders' \
--header 'X-Client-Secret: {{clientKey}}' \
--header 'X-Client-Id: {{clientId}}' \
--header 'x-api-version: 2025-01-01' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--data-raw '{
  "order_amount": 10.10,
  "order_currency": "INR",
  "customer_details": {
    "customer_id": "USER123",
    "customer_name": "joe",
    "customer_email": "joe.s@cashfree.com",
    "customer_phone": "+919876543210"
  },
  "order_meta": {
    "return_url": "https://b8af79f41056.eu.ngrok.io?order_id=order_123"
  }
}'
  }

}'

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: Open the checkout page Client-side

Once the order is created, the next step is to open the payment page so the customer can make the payment.

1. Set up the SDK

The Cordova SDK is hosted on npm. You can download the latest version 1.0.12. The Cordova SDK supports Android SDK version 19 and above and iOS minimum deployment target of 11 and above.

Capacitor SDK: The code snippet below also includes Capacitor SDK integration instructions.

Navigate to your project and run the following command:

npm install cordova-plugin-cashfree-pg
# or install with latest tag
npm install cordova-plugin-cashfree-pg@latest

# Add Plugin
cordova plugin add cordova-plugin-cashfree-pg

# With Ionic Cordova platform
ionic cordova plugin add cordova-plugin-cashfree-pg 

# Install with capacitor tag
npm install cordova-plugin-cashfree-pg@capacitor

# Ionic Capacitor setup

# Install Core library (once per project)
npm install @awesome-cordova-plugins/core
# Install Awesome Cordova Plugins TypeScript wrapper for CashFree PG
npm install @awesome-cordova-plugins/cashfree-pg
# Update native platform project(s) to include newly added plugin
ionic cap sync

iOS configuration

Add this to your application’s info.plist file:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>tez</string>
  <string>phonepe</string>
  <string>paytmmp</string>
	<string>credpay</string>
  <string>bhim</string>
  <string>amazonpay</string>
  <string>upi</string>
	<string>navipay</string>
	<string>mobikwik</string>
	<string>myairtel</string>
	<string>popclubapp</string>
	<string>super</string>
	<string>kiwi</string>
</array>

For iOS, run the following commands:

cd ios
pod install --repo-update

2. Select a payment flow

The Cordova SDK offers the following payment flows:

Web Checkout

In this flow, the SDK provides a webview-based checkout implementation to facilitate a quick integration with the payment gateway. Your customers can fill in the necessary details in the web page and complete the payment. This mode handles all the business logic and UI components to make the payment smooth and easy to use.

UPI Intent Checkout

This flow is for merchants who want to provide UPI Intent functionality using Cashfree’s mobile SDK. In this flow, the SDK provides a pre-built native Android screen to facilitate integration with the payment gateway. Your customers see a list of UPI apps installed on their phone which they can select to initiate payment. This mode handles all the business logic and UI components to make the payment smooth and easy to use. The SDK allows you to customise the UI in terms of colour coding and fonts.

3. Complete the payment

To complete the payment, follow these steps:

Create a CFSession object.
Set up 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"
};

Set up the payment callback

The SDK exposes a CFCallback interface 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 the doPayment method of the SDK.

Initiate the payment

Web Checkout

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

UPI Intent Checkout

This flow is for merchants who want to 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)
}

Sample code

Complete code examples demonstrating the implementation of both Web Checkout and UPI Intent Checkout flows are shown below:

Web Checkout

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

UPI Intent Checkout

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

You can explore working integration examples for various frameworks on GitHub:

Cordova Integration

GitHub Sample

Ionic Capacitor Integration

GitHub Sample

Ionic Angular Capacitor Integration

GitHub Sample

Next.js Capacitor Integration

GitHub Sample

Sample UPI Test apk

Cashfree doesn’t currently provide a dedicated SDK for the Capacitor framework. However, a Capacitor plugin has been developed that acts as a wrapper over the Cordova SDK. See the sample Capacitor app.

Step 3: Confirm the payment Server-side

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 server. Before delivering the goods or services, ensure you check the order status from your server and verify it 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.

version := "2023-08-01"
response, httpResponse, err := cashfree.PGFetchOrder(&version, "<order_id>", nil, nil, nil)
if err != nil {
	fmt.Println(err.Error())
} else {
	fmt.Println(httpResponse.StatusCode)
	fmt.Println(response)
}

cashfree
	.PGFetchOrder("<order_id>")
	.then((response) => {
		console.log("Order fetched successfully:", response.data);
	})
	.catch((error) => {
		console.error("Error:", error.response.data.message);
	});

$x_api_version = "2023-08-01";
try {
    $response = $cashfree->PGFetchOrder($x_api_version, "<order_id>");
    print_r($response);
} catch (Exception $e) {
    echo 'Exception when calling PGFetchOrder: ', $e->getMessage(), PHP_EOL;
}

import com.cashfree.*;
//other code

try {
    Cashfree.XClientId = "<x-client-id>";
    Cashfree.XClientSecret = "<x-client-secret>";
    Cashfree.XEnvironment = Cashfree.SANDBOX;

    Cashfree cashfree = new Cashfree();
    String xApiVersion = "2023-08-01";

    ApiResponse<OrderEntity> responseFetchOrder = cashfree.PGFetchOrder(xApiVersion, "<order_id>", null, null, null);
    System.out.println(response.getData().getOrderId());
} catch (ApiException e) {
    throw new RuntimeException(e);
}

from cashfree_pg.models.create_order_request import CreateOrderRequest
from cashfree_pg.api_client import Cashfree
from cashfree_pg.models.customer_details import CustomerDetails
from cashfree_pg.models.order_meta import OrderMeta

Cashfree.XClientId = "<x-client-id>"
Cashfree.XClientSecret = "<x-client-secret>"
Cashfree.XEnvironment = Cashfree.SANDBOX
x_api_version = "2023-08-01"

try:
    api_response = Cashfree().PGFetchOrder(x_api_version, "order_3242X4jQ5f0S9KYxZO9mtDL1Kx2Y7u", None)
    print(api_response.data)
except Exception as e:
    print(e)

using cashfree_pg.Client;
using cashfree_pg.Model;

Cashfree.XClientId = "<x-client-id>";
Cashfree.XClientSecret = "<x-client-secret>";
Cashfree.XEnvironment = Cashfree.SANDBOX;
var cashfree = new Cashfree();
var xApiVersion = "2023-08-01";

try {
    var result = cashfree.PGFetchOrder(xApiVersion, "<order_id>>", null, null);
    Console.WriteLine(result);
    Console.WriteLine(result.StatusCode);
    Console.WriteLine((result.Content as OrderEntity));
} catch (ApiException e) {
    Console.WriteLine("Exception when calling PGFetchOrder: " + e.Message);
    Console.WriteLine("Status Code: " + e.ErrorCode);
    Console.WriteLine(e.StackTrace);
}

curl --request GET \
     --url https://sandbox.cashfree.com/pg/orders/{order_id} \
     --header 'accept: application/json' \
     --header 'x-api-version: 2025-01-01'
     --header 'x-client-id: "YOUR APP ID GOES HERE"'
     --header 'x-client-secret: "YOUR SECRET KEY GOES HERE'

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 application, you can view the error codes that are exposed by the SDK.

Click to show error codes

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 doesn’t 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

​Key benefits

​Prerequisites

Step 1

Step 2

Step 3

​Step 1: Create an order Server-side

API request for creating an order

​Step 2: Open the checkout page Client-side

​1. Set up the SDK

​iOS configuration

​2. Select a payment flow

​3. Complete the payment

​Create a session

​Set up the payment callback

​Initiate the payment

​Sample code

​Sample GitHub code

​Step 3: Confirm the payment Server-side

​Testing

​Error codes

Key benefits

Prerequisites

Step 1: Create an order Server-side

Step 2: Open the checkout page Client-side

1. Set up the SDK

iOS configuration

2. Select a payment flow

3. Complete the payment

Create a session

Set up the payment callback

Initiate the payment

Sample code

Sample GitHub code

Step 3: Confirm the payment Server-side

Testing

Error codes