To merchants who have built their app on an ionic platform, PhonePe provides a bridge to conveniently integrate PhonePe SDK for the Android platform. In this document, we will highlight the steps required to integrate PhonePe SDK with an Ionic bridge for your app. This bridge helps you build a seamless and responsive checkout experience for your Android application.
This integration will support the following flows:
**App Flow**: In case the PhonePe app is installed, The bottom pop up PhonePe payment page called QCLite flow will be launched to complete the transaction and give the response back to your app.
**Redirection Flow**: In case the PhonePe app is not installed, The android web view will be launched to complete the transaction and give the response back to your app.
## Android Project of Ionic app
Add the below code to 'repositories' section of your project level build.gradle file
Add the below line to the 'dependencies' section of your app build.gradle.
<!-- SNAPSHOT implementation 'phonepe.intentsdk.android.snapshot:IntentSDK:1.6.6-SNAPSHOT2’ RELEASE implementation 'phonepe.intentsdk.android.release:IntentSDK:1.6.6’ For, SDK version 1.6.5, We have compileSdkVersion: 28, minSdkVersion: 14, targetSdkVersion: 28 For, SDK version 1.6.6, We have compileSdkVersion: 29, minSdkVersion: 24, targetSdkVersion: 29 For, SDK version 1.6.7, We have compileSdkVersion: 28, minSdkVersion: 21, targetSdkVersion: 28 For, SDK version 1.6.8, We have compileSdkVersion: 28, minSdkVersion: 21, targetSdkVersion: 28 -->
For, SDK version 1.6.8
We have compileSdkVersion: 28, minSdkVersion: 21, targetSdkVersion: 28
Add below lines of code inside the application tag in the AndroidManifest.xml file
Add PhonePeSDKPlugin to your project (see Appendix at the end of this document).
In the pre-existing MainApplication class while creating an instance of IonicHost there is a method onCreate(). In this method add PhonePeSDKPlugin class in ionic Package List.
Update handleOnActivityResult method in PhonePeSDKPlugin class as per your response the requirement in the ionic native app.
Call the **startPaymentTransaction** method from your Ionic Native app to invoke the PhonePe module.
## Ionic Native Code
Import Plugins from the capacitor package.
Declare PhonePeSDKPlugin as per the ionic standards.
In the ionic app.js
Install the PhonePe PreProd app. Refer to this [link](🔗).
If returns **true** then display the PhonePe option on the checkout page or if returns false then do not display the PhonePe option on the checkout page.
Remove the listener from the PhonePeSDKPlugin object: isPhonePeAvailableListener.remove();
Initiate the payment process by calling PhonePeSDKPlugin.startPaymentTransaction with the appropriate parameters.
**base64EncodedBody** - pass the encoded payload request
**checksum** - pass the checksum value
**endPoint** - pass the endpoint
**xCallbackUrl** - This can be “” or else you can send your custom callback URL where you will receive the server to server callback response to your custom callback URL. Once the response is received you have to validate the checksum and invalid amount. Refer to this [link](🔗) for more details.
Once you receive the UI callback from the **handleOnActivityResult** method. Kindly perform the following:
Inform merchant server about the completion of the transaction flow from merchant app
Merchant server should check the status with server to server callback or make the Check Transaction Status API call to the PhonePe server to check the transaction status (Even for User Cancelled callback)
The app should get the transaction status from the backend
Based on the result, the merchant must inform the user about the success or failure status of the transaction
For Accept Payment API, Refer to this [link](🔗).
Use the Check Transaction Status API to check the status of the payment transaction. Refer to this [link](🔗).
For refund API, Refer to this [link](🔗).