cashfree-pg-capacitor

The Cashfree Capacitor SDK allows you to integrate Cashfree Payment Gateway into your application and start collecting payments from your customers. It opens the payment page in a webview. The Capacitor SDK has been designed to minimise the complexity of handling and integrating payments in your Capacitor project.

Click here for more Documentation.

Install

Step 1 (Install the plugin)

Run the following commands in your capacitor project.

npm install cashfree-pg-capacitor
npx cap sync

Step 2 (Configure for Android and iOS)

Android

If the project's targetSdkVersion is 30 or above, add the following to your app Android Manifest file.

<manifest ...> 
	<queries>  
		<intent>  
			<action  android:name="android.intent.action.VIEW"  />  
			<data  android:scheme="upi"  android:host="pay"/>  
		</intent>  
		<package  android:name="com.android.chrome"  />  
	</queries>
<application ...>

also register the plugin in MainActivity.java of your app. Example

import com.cashfree.capacitor.CFBridge;
...
public class MainActivity extends BridgeActivity {  
  
 @Override  
 protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    registerPlugin(CFBridge.class); // register the plugin here
  }  
}

iOS

Add the following code to application's info.plist file.

<key>LSApplicationCategoryType</key> 
<string></string> 
<key>LSApplicationQueriesSchemes</key> 
<array> 
<string>phonepe</string> 
<string>tez</string> 
<string>paytm</string> 
<string>bhim</string> 
</array>

API

• startPaymentWEB(...)
• startPaymentUPI(...)
• getUPIApps()
• getIcon(...)
• transFormUPIResponse(...)

startPaymentWEB()

startPaymentWEB(params: Object | Map<string, string>) => Object  

Parameters

• params : An Object or Map containg Request Parameters.

Returns An Object containing the Response Parameters.

startPaymentUPI()

startPaymentUPI(params: Object | Map<string, string>) => Object  

Parameters

• params : An Object or Map containg Request Parameters.

Returns An Object containing the Response Parameters.

getUPIApps()

getUPIApps() => Object  

Returns An Object containing the list of UPI apps installed in the User Phone supporting UPI intent payment mode.

Response Parameters:

• displayName: Display name of the app to be used to show in the UI.
• 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)” 
	} 
]

getIcon()

getIcon(base64String: string) => string  

Parameters

• base64String : A base64 icon string obtained from 'icon' field of a UPIApp from getUPIApps.

Returns A string prepended with data:image/png;base64, to make it usable as a source for image.

transFormUPIResponse()

This function is created as a helper function specifially for typescript.

transFormUPIResponse(result: any) => UPIApp[]  

Parameters

• result : the response received from getUPIApps.

Returns An array of UPIApp.

Request and Response Parameters

Request Parameters

| Parameter | Required | Description| | --- | ----------- | ----- | |appId|Yes|Your app ID| |orderId|Yes|Order or Invoice ID| |orderCurrency|Yes|Currency code for the order.| |orderAmount|Yes|Bill amount of the order| |orderNote|No|Help text to provide customers with more information about the order.| |customerName|No|Name of the customer| |customerPhone|Yes|Phone number of the customer| |customerEmail|Yes|Email ID of the customer| |notifyUrl|No|Notification URL for server-server communication. Useful when a user's connection drops after completing the payment.| |paymentModes|No|Allowed payment modes for this order. Available values: cc, dc, nb, paypal, upi, wallet.Leave it blank if you want to display all modes.| |tokenData|Yes|Token generated for the payment.| |stage|Yes|Environment of the project setup (TEST or PROD)| |appName|No|UPI app id when invoking seamless UPI intent.|

Response Parameters

These parameters are sent in the response Object. They contain the details of the transaction.

| Parameter | Description | | --- | ----------- | |orderId|Order id for which transaction has been processed. Example, GZ-212.| |orderAmount|Order amount. Example, 256.00| |paymentMode|Payment mode of the transaction.| |referenceId|Cashfree generated unique transaction ID. Example, 140388038803.| |txStatus|Payment status for that order. Values can be, SUCCESS, FLAGGED, PENDING, FAILED, CANCELLED.| |paymentMode|Payment mode used by customers to make the payment. Example, DEBIT_CARD, MobiKwik.| |txMsg|Message related to the transaction. Will have the reason, if payment failed.| |txTime|Time of the transaction.| |type|Fixed value : CashFreeResponse. To identify the response is from Cashfree SDK.| |signature|Response signature, more here.|