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()
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. |