Cashfree Cordova SDK Sample

Description

Sample integration project for Cashfree Payment Gateway's Cordova SDK, facilitating seamless and secure payment processing within your Cordova application.

Supported platforms

• Android
• Cordova

Installation:

Install the plugin

1
2cd your-project-folder
3
4cordova plugin add cordova-plugin-cashfree-pg
5

Step 1: Generate Session ID (From Backend)

You will need to generate a sessionID from your backend and pass it to app while initiating payments.

API Doc Link - https://docs.cashfree.com/reference/createorder

Note: This API is called only from your backend as it uses secretKey. Thus this API should never be called from App.

Step 2: Create a Payment Object

Step 2.1: Create a Drop Payment Object

1const dropPaymentObject = {
2    "components": ["CARD", "UPI", "NB", "WALLET", "PAY_LATER"], //optional
3    "theme": { //optional
4        "navigationBarBackgroundColor": "#E64A19",
5        "navigationBarTextColor": "#FFFFFF",
6        "buttonBackgroundColor": "#FFC107",
7        "buttonTextColor": "#FFFFFF",
8        "primaryTextColor": "#212121",
9        "secondaryTextColor": "#757575"
10    },
11    "session":  { //required
12        "payment_session_id": "order_session_id",
13        "orderID": "order_id",
14        "environment": "SANDBOX" // "SANDBOX" or "PRODUCTION"
15    }
16}

Step 2.2: Create a UPI Payment Object

1const upiPaymentObject = {
2    "theme": { //optional
3        "navigationBarBackgroundColor": "#E64A19", //ios
4        "navigationBarTextColor": "#FFFFFF", //ios
5        "buttonBackgroundColor": "#FFC107", //ios
6        "buttonTextColor": "#FFFFFF", //ios
7        "primaryTextColor": "#212121", 
8        "secondaryTextColor": "#757575", //ios
9        "backgroundColor": "#FFFFFF"
10    },
11    "session":  { //required
12        "payment_session_id": "order_session_id",
13        "orderID": "order_id",
14        "environment": "SANDBOX" // "SANDBOX" or "PRODUCTION"
15    }
16}

Step 2.3: Create a Web Checkout Payment Object

1const webPaymentObject = {
2    "theme": { //optional
3        "navigationBarBackgroundColor": "#E64A19",
4        "navigationBarTextColor": "#FFFFFF"
5    },
6    "session":  { //required
7        "payment_session_id": "order_session_id",
8        "orderID": "order_id",
9        "environment": "SANDBOX" // "SANDBOX" or "PRODUCTION"
10    }
11}

Step 3: SetCallback

Set the callback on the creation of your payment page.

1
2const callbacks = {
3    onVerify: function (result) {
4        console.log("This is in the Application Verify: " + result);
5        const orderId = result.orderID;
6    },
7    onError: function (error){
8        console.log("This is in the Application Error: " + error);
9        const orderID = error.orderID
10        const status = error.status
11        const code = error.code
12        const type = error.type
13        const message = error.message
14    }
15}
16CFPaymentGateway.setCallback(callbacks) // onLoad of the Page

Step 4: Initiate Payment

Step 4.1: Initiate Drop Payment

1CFPaymentGateway.doDropPayment(dropPaymentObject)

Step 4.2: Initiate Web Checkout Payment

1CFPaymentGateway.doWebCheckoutPayment(webPaymentObject)

Step 4.2: Initiate Web Checkout Payment

1CFPaymentGateway.doUPIPayment(upiPaymentObject)

Getting help

If you have questions, concerns, bug reports, etc, you can reach out to us using one of the following

1. File an issue in this repository's Issue Tracker.
2. Send a message in our discord channel. Join our discord server to get connected instantly.
3. Send an email to care@cashfree.com

Getting involved

For general instructions on how to contribute please refer to CONTRIBUTING.

---

Open source licensing and other misc info

1. LICENSE
2. CODE OF CONDUCT