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

# Cordova Integration

> Learn more about the cordova sdk integration in your app

## Cordova Integration Guide

<AccordionGroup>
  <Accordion title="Web Checkout">
    In this flow, SDK provides a webview based checkout implementation to facilitate a quick integration with our payment gateway. Your customers can fill in the necessary details in the web page and complete the payment.
    This mode also handles all the business logic and UI Components to make the payment smooth and easy to use.
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    This flow is for merchants who wants to quickly provide UPI Intent functionality using cashfree's mobile SDK. In this flow, SDK provides a pre-built native Android screen to facilitate a quick integration with our payment gateway. Your customers will see a list of UPI apps installed in 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 the merchant to customize the UI in terms of color coding, fonts.
  </Accordion>
</AccordionGroup>

### Setting Up SDK

The Cordova SDK is hosted on npm.org you can get the sdk [here](https://www.npmjs.com/package/cordova-plugin-cashfree-pg). It 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

```shell theme={null}
npm install cordova-plugin-cashfree-pg
```

##### iOS

For iOS run the following commands

```bash theme={null}
cd ios
pod install --repo-update
```

##### Installing the Plugin

<AccordionGroup>
  <Accordion title="When using the Cordova platform">
    ```shell theme={null}
    cordova plugin add cordova-plugin-cashfree-pg
    ```
  </Accordion>

  <Accordion title="When using the Ionic Cordova platform">
    ```shell theme={null}
    ionic cordova plugin add cordova-plugin-cashfree-pg 
    ```
  </Accordion>

  <Accordion title="When using an Ionic Capacitor">
    ```shell theme={null}
    npm install @awesome-cordova-plugins/cashfree-pg 
    mpn install @awesome-cordova-plugins/core
    ```
  </Accordion>
</AccordionGroup>

### Step 1: Creating an Order

The first step in the Telr 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.

<Tip>Order creation must happen from your backend (as this API uses your secret key). Please do not call this directly from your mobile application.</Tip>

##### API Request for Creating an Order

Here's a sample request for creating an order using your desired backend language. Telr offers backend SDKs to simplify the integration process.

You can find the SDKs [here](/api-reference/payments/sdk#payment-sdk).

<CodeGroup>
  ```javascript javascript theme={null}
  import { Cashfree } from "cashfree-pg";

  Cashfree.XClientId = {Client ID};
  Cashfree.XClientSecret = {Client Secret Key};
  Cashfree.XEnvironment = Cashfree.Environment.PRODUCTION;

  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("2023-08-01", request).then((response) => {
      var a = response.data;
      console.log(a)
    })
      .catch((error) => {
        console.error('Error setting up order request:', error.response.data);
      });
  }
  ```

  ```python python theme={null}
  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)
  ```

  ```java java theme={null}
  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);
    }
  }
  ```

  ```go go theme={null}
  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)
      }   
  }
  ```

  ```csharp csharp theme={null}
  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);
      }
  }
  ```

  ```php php theme={null}
  \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;
  }
  ```

  ```bash curl theme={null}
  curl --location 'https://sandbox.cashfree.com/pg/orders' \
  --header 'X-Client-Secret: {{clientKey}}' \
  --header 'X-Client-Id: {{clientId}}' 
  --header 'x-api-version: 2023-08-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",
    }

  }'
  ```
</CodeGroup>

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](/api-reference/payments/latest/orders/create).

### Step 2: Opening the Checkout Page

Once the order is created, the next step is to open the payment page so the customer can make the payment. Cordova SDK offer below payment flow:

<AccordionGroup>
  <Accordion title="Web Checkout">
    In this flow, SDK provides a webview based checkout implementation to facilitate a quick integration with our payment gateway. Your customers can fill in the necessary details in the web page and complete the payment.
    This mode also handles all the business logic and UI Components to make the payment smooth and easy to use.
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    This flow is for merchants who wants to quickly provide UPI Intent functionality using cashfree's mobile SDK. In this flow, SDK provides a pre-built native Android screen to facilitate a quick integration with our payment gateway. Your customers will see a list of UPI apps installed in 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 the merchant to customize the UI in terms of color coding, fonts.
  </Accordion>
</AccordionGroup>

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

1. Create a `CFSession` object.
2. Set `payment callback`.
3. 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)`.

```typescript theme={null}
let session = {
  payment_session_id: "payment_session_id",
  orderID: "order_id",
  environment: "SANDBOX", //"SANDBOX" or "PRODUCTION"
};
```

#### Setup payment callback

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

```typescript theme={null}
onVerify(result)
onError(error)
```

```typescript theme={null}
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);
}
```

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

#### Initiate the Payment

<AccordionGroup>
  <Accordion title="Web Checkout">
    ```typescript theme={null}
    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);
    }
    ```
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    This flow is for merchants who wants to quickly provide UPI functionality using cashfree's mobile SDK without handling other modes like Cards or Net banking.

    ```typescript theme={null}
    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)
    }
    ```
  </Accordion>
</AccordionGroup>

### Step 3: Sample Code

<AccordionGroup>
  <Accordion title="Web Checkout">
    ```typescript theme={null}
    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",
        },
      });
    }
    ```
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    ```typescript theme={null}
    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"
          }
        })
    }
    ```
  </Accordion>
</AccordionGroup>

### 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 have developed a Capacitor plugin that acts as a wrapper over our Cordova SDK. Click [here](https://github.com/droiddevgeeks/CFSampleCapacitor/tree/main) for the sample capacitor app.
</Note>

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

<Note>You must always verify payment status from your backend. Before delivering the goods or services, please ensure you call check the order status from your backend. Ensure you check the order status from your server endpoint.</Note>

To verify an order you can call our `/pg/orders` endpoint from your backend. You can also use our SDK to achieve the same.

<CodeGroup>
  ```go golang theme={null}
  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)
  }
  ```

  ```javascript javascript theme={null}
  let version = "2023-08-01"
  Telr.PGFetchOrder(version, "<order_id>").then((response) => {
      console.log('Order fetched successfully:', response.data);
  }).catch((error) => {
      console.error('Error:', error.response.data.message);
  });

  ```

  ```php php theme={null}
  $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;
  }
  ```

  ```java java theme={null}
  import com.cashfree.*;
  //other code

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

      Telr cashfree = new Telr();
      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);
  }
  ```

  ```python python theme={null}
  from cashfree_pg.models.create_order_request import CreateOrderRequest
  from cashfree_pg.api_client import Telr
  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 = Telr.SANDBOX
  x_api_version = "2023-08-01"

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

  ```

  ```csharp csharp theme={null}
  using cashfree_pg.Client;
  using cashfree_pg.Model;

  Cashfree.XClientId = "<x-client-id>";
  Cashfree.XClientSecret = "<x-client-secret>";
  Cashfree.XEnvironment = Telr.SANDBOX;
  var cashfree = new Telr();
  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);
  }
  ```

  ```bash curl theme={null}
  curl --request GET \
       --url https://sandbox.cashfree.com/pg/orders/{order_id} \
       --header 'accept: application/json' \
       --header 'x-api-version: 2023-08-01'
       --header 'x-client-id: "YOUR APP ID GOES HERE"'
       --header 'x-client-secret: "YOUR SECRET KEY GOES HERE'
  ```
</CodeGroup>

### Testing

You should now have a working checkout button that redirects your customer to Telr 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 application, you can view the error codes that are exposed by the SDK.

<Accordion title="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 does not 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                                                                                                                         |
</Accordion>