Cordova Subscription SDK | Cashfree Payments

Setting up SDK Client-side

The Cordova SDK is available on npm. You can download the latest version 1.0.12. The SDK supports Android SDK version 19 and later, and iOS 10.3 and later. To install the SDK, run the following command in your project directory:

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

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

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>phonepe</string>
  <string>tez</string>
  <string>paytmmp</string>
  <string>bhim</string>
  <string>amazonpay</string>
  <string>credpay</string>
</array>

cd ios
pod install --repo-update

Step 1: Creating a subscription Server-side

Before you can process payments, you must create a subscription. Create an API endpoint on your server that generates the subscription and communicates with your frontend.

Always create subscriptions from your backend. This API requires your secret key. Never call it directly from your mobile app.

Use any of the following backend SDKs:

Node

Creating Subscription from Node SDK

Java

Creating Subscription from Java SDK

Golang

Creating Subscription from Golang SDK

Dotnet

Creating Subscription from Dotnet SDK

Python

Creating Subscription from Python SDK

PHP

Creating Subscription from PHP SDK

After you create the subscription, you receive a subscription_id and a subscription_session_id.

Step 2: Opening the subscription checkout payment page Client-side

After creating the subscription, open the payment page so the customer can complete the payment. To complete the payment:

Enable Subscription flow flag in Android Manifest
Create a CFSubscriptionSession object.
Set payment callback.
Initiate the payment

Enable subscription flow flag

Add the following entry inside the <application> tag in your Android manifest file. If you do not enable the cashfree_subscription_flow_enable flag, the SDK will not provide a payment callback.

Add this entry inside the <application> tag, Not inside the <activity> tag.

  <application
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name">

      <meta-data
          android:name="cashfree_subscription_flow_enable"
          android:value="true"
          tools:replace="android:value"/>
  </application>

Create a subscription session

This object contains essential information about the subscription, including the subscription session ID (subscription_session_id) and subscription ID (subscription_id) obtained from creation step. It also specifies the environment (SANDBOX or PRODUCTION).

try {
      let session = {
            subscription_session_id: SESSION_ID,
            subscription_id: ORDER_ID,
            environment: ENV
        }
}
catch (e: any) {
      console.log(e.message);
}

Setup payment callback

You need to set up callback handlers to handle events after payment processing. This must be set before calling doSubscriptionPayment.

onVerify(orderID: string)
onError(error: CFErrorResponse, orderID: string)

Always call setCallback before calling doSubscriptionPayment method of SDK

function onDeviceReady() {
    const callbacks = {
        onVerify: function (result) {
            console.log("Payment Verify: " + JSON.parse(JSON.stringify(result)));
        },
        onError: function (error){
            console.log("Payment Error: " + JSON.parse(JSON.stringify(error)));
        }
    }
    CFPaymentGateway.setCallback(callbacks)
}

Initiate the payment

Call doSubscriptionPayment() to open the Cashfree subscription checkout screen. This will present the user with the payment options and handle the payment process.

function initiateSubscriptionPayment() {
    var cfSubscriptionPayment = {
        "session": {
            "subscription_session_id": SESSION_ID,
            "subscription_id": ORDER_ID,
            "environment": ENV
        }
    }
    CFPaymentGateway.doSubscriptionPayment(cfSubscriptionPayment)
}

Sample code

// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready

document.addEventListener('deviceready', onDeviceReady, false);
const SESSION_ID = 'sub_session_f-e0jnzQa_qQtkFtPZmWmxj1We1Tu5f76DImA4ySE5CklsjjJVTiGbyTGxGM-ZKLUJV8-ft2SBYRmws180vI-nivXWq56qJhfY75AIjY823dgn1bLGUADSgZ1yqN_6spayment' // payment_session_id
const ORDER_ID = 'devstudio_subs_7358099936054719343' // order_id
const ENV = "SANDBOX" // "SANDBOX" or "PRODUCTION"

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

    const callbacks = {
        onVerify: function (result) {
            console.log("Payment Verify: " + JSON.parse(JSON.stringify(result)));
        },
        onError: function (error){
            console.log("Payment Error: " + JSON.parse(JSON.stringify(error)));
        }
    }
    CFPaymentGateway.setCallback(callbacks)
}

function initiateSubscriptionPayment() {
    var cfSubscriptionPayment = {
        "session": {
            "subscription_session_id": SESSION_ID,
            "subscription_id": ORDER_ID,
            "environment": ENV
        }
    }
    CFPaymentGateway.doSubscriptionPayment(cfSubscriptionPayment)
}

Sample GitHub code

Cordova Integration

Github Sample

Ionic Capacitor Integration

Github Sample

Ionic Angular Capacitor Integration

Github Sample

NextJs Capacitor Integration

Github Sample

Sample UPI Test apk

We currently do not provide a dedicated SDK for the Capacitor framework. However, we’ve developed a Capacitor plugin that acts as a wrapper over our Cordova SDK. See the sample Capacitor app.

Step 3: Confirming the payment Server-side

After the payment is completed, confirm the subscription status to verify whether the payment was successful. The user will return to your activity after checkout.

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

Payments

Payment Gateway

Checkout

International Payments

Flowwise

RiskShield

Subscription

Other Products

Developer updates

Cordova Integration

Setting up SDK Client-side

iOS

Step 1: Creating a subscription Server-side

Step 2: Opening the subscription checkout payment page Client-side

Enable subscription flow flag

Create a subscription session

Setup payment callback

Initiate the payment

Sample code

Sample GitHub code

Step 3: Confirming the payment Server-side

​Setting up SDK Client-side

​iOS

​Step 1: Creating a subscription Server-side

​Step 2: Opening the subscription checkout payment page Client-side

​Enable subscription flow flag

​Create a subscription session

​Setup payment callback

​Initiate the payment

​Sample code

​Sample GitHub code

​Step 3: Confirming the payment Server-side

Setting up SDK Client-side

iOS

Step 1: Creating a subscription Server-side

Step 2: Opening the subscription checkout payment page Client-side

Enable subscription flow flag

Create a subscription session

Setup payment callback

Initiate the payment

Sample code

Sample GitHub code

Step 3: Confirming the payment Server-side