> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cordova Integration

> Integrate the Cashfree Subscription Cordova SDK from npm to capture mandate authorisations and run recurring billing inside hybrid Cordova or Capacitor apps.

### Setting up SDK  <Badge color="orange">Client-side</Badge>

The Cordova SDK is available on [npm](https://www.npmjs.com/). You can download the latest version [1.0.12](https://www.npmjs.com/package/cordova-plugin-cashfree-pg?activeTab=readme).

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:

<CodeGroup>
  ```shell cordova theme={"dark"}
  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 
  ```

  ```shell capacitor theme={"dark"}
  # 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
  ```
</CodeGroup>

#### iOS

Add this to your application's `info.plist` file.

```shell theme={"dark"}
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>phonepe</string>
  <string>tez</string>
  <string>paytmmp</string>
  <string>bhim</string>
  <string>amazonpay</string>
  <string>credpay</string>
</array>
```

```shell theme={"dark"}
cd ios
pod install --repo-update
```

### Step 1: Creating a subscription <Badge color="green">Server-side</Badge>

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.

<Tip>Always create subscriptions from your backend. This API requires your secret key. Never call it directly from your mobile app. </Tip>
Use any of the following backend SDKs:

<AccordionGroup>
  <Accordion title="Node">
    [Creating Subscription from Node SDK](https://github.com/cashfree/cashfree-pg-sdk-nodejs/blob/main/api.ts#L31393)
  </Accordion>

  <Accordion title="Java">
    [Creating Subscription from Java SDK](https://github.com/cashfree/cashfree-pg-sdk-java/blob/main/src/main/java/com/cashfree/pg/Cashfree.java)
  </Accordion>

  <Accordion title="Golang">
    [Creating Subscription from Golang SDK](https://github.com/cashfree/cashfree-pg/blob/main/api_subscription.go#L1288)
  </Accordion>

  <Accordion title="Dotnet">
    [Creating Subscription from Dotnet SDK](https://github.com/cashfree/cashfree-pg-sdk-dotnet/blob/master/src/cashfree_pg/Client/ApiClient.cs#L9375)
  </Accordion>

  <Accordion title="Python">
    [Creating Subscription from Python SDK](https://github.com/cashfree/cashfree-pg-sdk-python/blob/master/cashfree_pg/api_client.py#L8502)
  </Accordion>

  <Accordion title="PHP">
    [Creating Subscription from PHP SDK](https://github.com/cashfree/cashfree-pg-sdk-php)
  </Accordion>
</AccordionGroup>

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

### Step 2: Opening the subscription checkout payment page <Badge color="orange">Client-side</Badge>

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.
<Note>Add this entry inside the `<application>` tag, Not inside the `<activity>` tag.</Note>

<CodeGroup>
  ```java java theme={"dark"}
    <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>
  ```
</CodeGroup>

#### 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)`.

```javascript theme={"dark"}
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`.

```javascript theme={"dark"}
onVerify(orderID: string)
onError(error: CFErrorResponse, orderID: string)
```

<Tip>Always call setCallback before calling `doSubscriptionPayment` method of SDK</Tip>

```javascript theme={"dark"}
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.

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

### Sample code

```Javascript theme={"dark"}
// 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

<AccordionGroup>
  <Accordion title="Cordova Integration">
    [Github Sample](https://github.com/cashfree/cordova-plugin-cashfree/tree/master/example-cordova)
  </Accordion>

  <Accordion title="Ionic Capacitor Integration">
    [Github Sample](https://github.com/kishan-cashfree/CFSampleCapacitor)
  </Accordion>

  <Accordion title="Ionic Angular Capacitor Integration">
    [Github Sample](https://github.com/kishan-cashfree/SampleIonicAngularCapacitor)
  </Accordion>

  <Accordion title="NextJs Capacitor Integration">
    [Github Sample](https://github.com/kishan-cashfree/NextjsCapacitorCashFreeSample)
  </Accordion>
</AccordionGroup>

[Sample UPI Test apk](https://docs.cashfree.com/docs/cashfree-upi-intent-simulator-apk)

<Note>
  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](https://github.com/droiddevgeeks/CFSampleCapacitor/tree/main).
</Note>

### Step 3: Confirming the payment <Badge color="green">Server-side</Badge>

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.

<Note>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.</Note>