> ## 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 Payment Gateway Cordova SDK to add web checkout and UPI Intent flows to your hybrid Cordova or Capacitor app on Android and iOS. 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](https://merchant.cashfree.com/merchants/signup). * Log in to the [Merchant Dashboard](https://merchant.cashfree.com/auth/login) and generate an **App ID** and **Secret Key**. Learn how to [generate API keys](/api-reference/authentication#generate-api-keys). * Ensure your application complies with Cashfree's [Integrity standards](/payments/online/mobile/misc/cashfree_integrity). Applications that don't meet the required integrity standards may be restricted from using production services. The Cordova integration consists of three essential steps: Create an order Open the checkout page 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](/api-reference/payments/sdk#payment-sdk) to simplify the integration process. ```javascript javascript theme={"dark"} 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); }); } ``` ```python python theme={"dark"} 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={"dark"} 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 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={"dark"} 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={"dark"} 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={"dark"} \Cashfree\Cashfree::$XClientId = ""; \Cashfree\Cashfree::$XClientSecret = ""; \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={"dark"} 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](/api-reference/payments/latest/orders/create). ## 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](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 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: ```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 ``` #### iOS configuration Add this to your application's `info.plist` file: ```xml theme={"dark"} LSApplicationQueriesSchemes tez phonepe paytmmp credpay bhim amazonpay upi navipay mobikwik myairtel popclubapp super kiwi ``` For iOS, run the following commands: ```bash theme={"dark"} cd ios pod install --repo-update ``` ### 2. Select a payment flow The Cordova SDK offers the following payment flows: 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. 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: 1. Create a `CFSession` object. 2. Set up 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={"dark"} 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: ```typescript theme={"dark"} onVerify(result) onError(error) ``` ```typescript theme={"dark"} 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 ```typescript theme={"dark"} 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); } ``` 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. ```typescript theme={"dark"} 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: ```typescript theme={"dark"} 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", }, }); } ``` ```typescript theme={"dark"} 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: [GitHub Sample](https://github.com/cashfree/cordova-plugin-cashfree/tree/master/example-cordova) [GitHub Sample](https://github.com/kishan-cashfree/CFSampleCapacitor) [GitHub Sample](https://github.com/kishan-cashfree/SampleIonicAngularCapacitor) [GitHub Sample](https://github.com/kishan-cashfree/NextjsCapacitorCashFreeSample) [Sample UPI Test apk](https://docs.cashfree.com/docs/cashfree-upi-intent-simulator-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](https://github.com/droiddevgeeks/CFSampleCapacitor/tree/main). ## 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. ```go golang theme={"dark"} version := "2023-08-01" response, httpResponse, err := cashfree.PGFetchOrder(&version, "", nil, nil, nil) if err != nil { fmt.Println(err.Error()) } else { fmt.Println(httpResponse.StatusCode) fmt.Println(response) } ``` ```javascript javascript theme={"dark"} cashfree .PGFetchOrder("") .then((response) => { console.log("Order fetched successfully:", response.data); }) .catch((error) => { console.error("Error:", error.response.data.message); }); ``` ```php php theme={"dark"} $x_api_version = "2023-08-01"; try { $response = $cashfree->PGFetchOrder($x_api_version, ""); print_r($response); } catch (Exception $e) { echo 'Exception when calling PGFetchOrder: ', $e->getMessage(), PHP_EOL; } ``` ```java java theme={"dark"} import com.cashfree.*; //other code try { Cashfree.XClientId = ""; Cashfree.XClientSecret = ""; Cashfree.XEnvironment = Cashfree.SANDBOX; Cashfree cashfree = new Cashfree(); String xApiVersion = "2023-08-01"; ApiResponse responseFetchOrder = cashfree.PGFetchOrder(xApiVersion, "", null, null, null); System.out.println(response.getData().getOrderId()); } catch (ApiException e) { throw new RuntimeException(e); } ``` ```python python theme={"dark"} 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 = "" Cashfree.XClientSecret = "" 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) ``` ```csharp csharp theme={"dark"} using cashfree_pg.Client; using cashfree_pg.Model; Cashfree.XClientId = ""; Cashfree.XClientSecret = ""; Cashfree.XEnvironment = Cashfree.SANDBOX; var cashfree = new Cashfree(); var xApiVersion = "2023-08-01"; try { var result = cashfree.PGFetchOrder(xApiVersion, ">", 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={"dark"} 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. 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 | snippets/related-topics-loader.mdx