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

Response Parameters

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