Cordova Integration
Learn more about the cordova sdk integration in your app
Cashfree’s integrity standards
Before proceeding with the SDK integration, please ensure that your application complies with Cashfree’s Integrity. Applications that don’t meet the required integrity standards may be restricted from using production services.
For further guidance, refer to the Cashfree Integrity.
Setting up SDK
The Cordova SDK is hosted on npm. You can get the sdk here.
Our Cordova SDK 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
iOS
For iOS run the following commands
Installing the plugin
When using the Cordova platform
When using the Cordova platform
When using the Ionic Cordova platform
When using the Ionic Cordova platform
When using an Ionic Capacitor
When using an Ionic Capacitor
Step 1: Creating an order
The first step in the Cashfree 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.
API Request for creating an order
Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.
You can find the SDKs here.
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.
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:
Web Checkout
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.
UPI Intent Checkout
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.
To complete the payment, we can follow the following steps:
- Create a
CFSession
object. - Set
payment callback
. - 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)
.
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:
Initiate the payment
Web Checkout
Web Checkout
UPI Intent Checkout
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.
Step 3: Sample Code
Web Checkout
Web Checkout
UPI Intent Checkout
UPI Intent Checkout
Sample Github Code
Cordova Integration
Cordova Integration
Ionic Capacitor Integration
Ionic Capacitor Integration
Ionic Angular Capacitor Integration
Ionic Angular Capacitor Integration
NextJs Capacitor Integration
NextJs Capacitor Integration
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 for the sample capacitor app.
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.
To verify an order you can call our /pg/orders
endpoint from your backend. You can also use our SDK to achieve the same.
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.
Click to show error codes
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 |