To merchants who have built their app on the React Native platform, PhonePe provides a bridge to conveniently integrate its SDK. In this document, we will highlight the steps required to integrate PhonePe SDK with React Native platform for your app. This platform helps merchants to build a seamless and responsive checkout experience for your 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. Once the customer completes the transaction, SDK gives the response back to the merchant app

• **Redirection Flow**: In case the PhonePe app is not installed, an android web view will be launched to complete the transaction. Once the customer completes the transaction, SDK gives the response back to the merchant app

Follow the steps below to integrate PhonePe SDK in React Native app:

## Android Project of React Native

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



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

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



4. Add PhonePeSDKManager and PhonePeSDKPackage in your project (see Appendix at the end of this document).

5. In the pre-existing MainApplication class while creating an instance of ReactNativeHost there is a method getPackages(). In this method add PhonePeSDKPackage class in ReactPackage List.

6. Update onActivityResult method in PhonePeSDKPackage class as per your response the requirement in the react native app.

7. Call startPaymentTransaction method from React Native app to invoke the PhonePe module.

## React Native Code

1. Import NativeModules and NativeEventEmitter from the react-native package



2. Using NativeModule fetch the PhonePeSDKManager of Android project



3. In react native app.js file implement the following piece of code to check whether the 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.

4. Start the process by calling PhonePeSDKManager.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.

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



🚧

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

🚧

Note

Kindly maintain the parameter order sequence

## 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

**PhonePeSDKManager.java**



**PhonePeSDKPackage.java**