To merchants who have built their app on the Flutter platform, PhonePe provides a bridge to conveniently integrate PhonePe SDK. On this page, we will highlight the steps required to integrate PhonePe SDK with the Flutter platform for your app. This platform helps you to build a seamless and responsive checkout experience for your application.

This integration will support the following flows:

  • **App Inoke Flow**: In case the PhonePe app is installed, it 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, PhonePe SDK will open a web-view to process transactions and give the response back to your app.

Follow the steps below to integrate PhonePe SDK in the Flutter app:

## Android Project of Flutter

  1. Add the below code to 'repositories' section of your project level build.gradle file





  1. 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

  1. Add below lines of code inside application tag in the AndroidManifest.xml file





  1. Add CheckoutActivity in your project (see Appendix at the end of this document).

  2. Add OnActivityResult method in CheckoutActivity class as per your response requirement in the Flutter app.

## Flutter App Code

  1. Import the services package in the main.dart file of the Flutter app.





  1. Declare method channel to communicate with the native code from the Flutter App.





  1. In the main.dart file add the following to check whether PhonePe app is installed or Not:





Note

  1. Install the PhonePe PreProd app. Refer to this [link](🔗).

  2. 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.

  1. In the main.dart file add the following code to initiate the payment process. Pass all the parameters as shown below:





Below code calls the native method to initiate the payment process:





  • **base64EncodedBody** - pass the encoded payload request

  • **checksum** - pass the checksum value

  • **apiEndPoint** - 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.

  • **uiCallbackValue** - This is a variable that will receive a user interface callback response from the startPaymentTransaction method.



/_This callback indicates only about completion of UI flow. Inform your server to make the transaction status call to get the status. Update your app with the success/failure status._/

Note

  • If data returns **User Completed** it indicates the payment has been completed.

  • If data returns **User Cancelled** it indicates the payment has been canceled just in case if the user presses the back button or aborts the transaction.

  • 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

## References

  • 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](🔗).

## Appendix

**CheckoutAcitivity.java**





**Main.dart**