Cordova/Ionic/Phonegap bindings for Cashfree's SDKs
Official Cordova/Ionic/Phonegap plugin for integrating Cashfree's checkout.
Supported platforms
- Android
- iOS
Note :: This plugin doesn't support capacitor ionic framework. It does support cordova ionic framework.
Installation:
Install the plugin
cd your-project-folder
cordova plugin add cashfree_pg_sdk_cordova
Step 1: Generate Token (From Backend)
You will need to generate a token from your backend and pass it to app while initiating payments. For generating token you need to use our token generation API.
Please note that this API is called only from your backend as it uses secretKey. Thus this API should never be called from App.
Request Description
For production/live
usage set the form action to:
https://api.cashfree.com/api/v2/cftoken/order
For test
usage set the form action to:
https://test.cashfree.com/api/v2/cftoken/order
You need to send orderId
, orderCurrency
and orderAmount
as a JSON object to the API endpoint and in response a
token will received. Please see the description of request below.
curl -XPOST -H 'Content-Type: application/json'
-H 'x-client-id: <YOUR_APP_ID>'
-H 'x-client-secret: <YOUR_SECRET_KEY>'
-d '{
"orderId": "<ORDER_ID>",
"orderAmount":<ORDER_AMOUNT>,
"orderCurrency": "INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'
Request Example
Replace YOUR_APP_ID and YOUR_SECRET_KEY with actual values.
curl -XPOST -H 'Content-Type: application/json' -H 'x-client-id: YOUR_APP_ID' -H 'x-client-secret: YOUR_SECRET_KEY' -d '{
"orderId": "Order0001",
"orderAmount":1,
"orderCurrency":"INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'
Response Example
{
"status": "OK",
"message": "Token generated",
"cftoken": "v79JCN4MzUIJiOicGbhJCLiQ1VKJiOiAXe0Jye.s79BTM0AjNwUDN1EjOiAHelJCLiIlTJJiOik3YuVmcyV3QyVGZy9mIsEjOiQnb19WbBJXZkJ3biwiIxADMwIXZkJ3TiojIklkclRmcvJye.K3NKICVS5DcEzXm2VQUO_ZagtWMIKKXzYOqPZ4x0r2P_N3-PRu2mowm-8UXoyqAgsG"
}
The cftoken
is the token that is used authenticate your payment request that will be covered in the next step.
Usage code
Create order object
var params = {
"appId": "<your x-client-id>",
"orderId": "<order id>",
"orderAmount": "<amount in string>",
"orderNote": "<order note string>",
"customerName": "<customer name string>",
"customerPhone": "<customer phone string>",
"customerEmail": "<customer email string>",
"notifyUrl": "<notify url>",
"orderCurrency": "<order currency>",
"stage": "TEST/PROD",
"tokenData": "<ordertoken>",
}
Web Checkout
Initiate and handle payment response
PgCordovaWrapper.startPaymentWEB(params,
(success) => {
}, (error) => {
});
- params: Order object from above here
- function(success) => void: A success function.
- function(error) => void: A error function.
Seamless Web Checkout
When you have a requirement for a customised payment flow, you can use seamless integration. You can implement the payment page as per your requirement and then use our SDK to authorise the payment. Once the payment details are collected the OTP or the two-factor authentication page will open in a webview. After the payment is confirmed the webview closes and you will receive a response.
The following sections describe the additional parameters for each of the payment methods:
Credit/Debit Card
Add the following parameters to the params map before invoking the startPaymentWEB() method to initiate a seamless card transaction.
params.put( "paymentOption", 'card');
params.put( "card_number", '4434260000000008'); //Replace Card number
params.put( "card_expiryMonth", '05'); // Card Expiry Month in MM
params.put( "card_expiryYear", '2021'); // Card Expiry Year in YYYY
params.put( "card_holder", 'John Doe'); // Card Holder name
params.put( "card_cvv", '123'); // Card CVV
Net Banking
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless net banking transaction. All valid bank codes are available here.
params.put( "paymentOption", 'nb');
params.put( "paymentCode", '3333'); // Put correct bank code here
Wallet
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless wallet transaction. All valid wallet codes are available here.
params.put( "paymentOption", 'wallet');
params.put( "paymentCode", '4001'); // Put correct wallet code here
UPI
Add the following parameters to the params map before invoking startPaymentWEB() method to initiate a seamless UPI transaction.
params.put( "paymentOption", 'upi');
params.put( "upi_vpa", 'testsuccess@gocash'); // Put correct upi vpa here
Paypal
Add the following parameters to params map before invoking startPaymentWEB() method to initiate a seamless Paypal transaction.
params.put('paymentOption', "paypal");
UPI Intent
Initiate and handle payment response
PgCordovaWrapper.startPaymentUPI(params,
(success) => {
}, (error) => {
});
- params: Order object from above here
- function(success) => void: A success function.
- function(error) => void: A error function.
Seamless UPI Intent
When you want to show your own customised payment screen with specific UPI payment applications, you can use our seamless UPI integration method. Here customers click on the required application and make the payment. You can implement the payment page as per your requirement and then use our SDK to authorise the payment.
var map = {
... // required params
'appName':`-upi app 'id' here-` // upi app id the user selected from function
}
The following section describes the additional parameters required for UPI seamless integration.
You get the appName value from the id parameter specified in the getUPIApps function.
Other Functionalities
Get Upi Apps
This function returns a list of
PgCordovaWrapper.getUPIApps(
(success) => {
}, (error) => {
});
- function(success) => void: A success function.
- function(error) => void: A error function.
Response
Returns a Object with a List of Map containing upi apps installed in the user device.
Response Parameters:
- displayName: Display name of the app to be used to show in the UI, This is a string encoded in Base64 with NO_WRAP.
- id: UPI app id to be used in UPI seamless Flow (with key appName).
- icon: Icon of the UPI app encoded in Base64 to show in the UI.
Sample response parsed to JSON:
[
{
"displayName": "Gpay",
"id": "com.google.android.apps.nbu.paisa.user",
"icon": "iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAAAXNSR0IArs4c6QAA... (in base64)"
},
{
"displayName": "PHONEPE",
"id": "com.phonepe.app",
"icon": "iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAAAXNSR0IArs4c6QAA... (in base64)"
}
]