Skip to main content

​
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:
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:
  1. Enable Subscription flow flag in Android Manifest
  2. Create a CFSubscriptionSession object.
  3. Set payment callback.
  4. 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

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.