Ionic Platform - SDK Integration

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

  1. Add the line below to the ‘repositories’ section of your project-level build.gradle file.
maven {
    url ""
  1. Add the line below to the ‘dependencies’ section of your app build.gradle.
implementation ''
  1. Add below lines of code inside the application tag in the AndroidManifest.xml file
<!-- Keep it false in production environment-->

<!-- Keep it false in production environment-->

<!-- Get the App Id from PhonePe-->
  android:value="<your app id given by PhonePe>"/>
  1. Add PhonePeSDKPlugin to your project (see Appendix at the end of this document).

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

  3. Update handleOnActivityResult method in PhonePeSDKPlugin class as per your response
    the requirement in the ionic native app.

  4. Call the startPaymentTransaction method from your Ionic Native app to invoke the PhonePe module.

Ionic Native Code

  1. Import Plugins from the capacitor package.
import { Plugins } from '@capacitor/core';
  1. Declare PhonePeSDKPlugin as per the ionic standards.
const { PhonePeSDKPlugin } = Plugins;
  1. In the ionic app.js
const isPhonePeAvailableListener =
Plugins.PhonePeSDKPlugin.addListener('isPhonePeAvailableListener', (value:any) =>
    /* Display PhonePe option in the checkout page only if variable display returns true */
    console.log('myPluginEvent was fired = '+value.isPhonePeAvailable);



  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.

  3. Remove the listener from the PhonePeSDKPlugin object:

  1. Initiate the payment process by calling PhonePeSDKPlugin.startPaymentTransaction with the
    appropriate parameters.
var data =
    "base64EncodedData": “/* Pass the encoded base 64 data*/“,
    "checksum": “/“* Pass the checksum value */,
    "endpoint": “/* “End point */“,
    "xCallbackUrl": “/* Pass the server url */“

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

  1. Once you receive the UI callback from the handleOnActivityResult method. Kindly perform the
  • 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.


package io.ionic.starter;
import android.content.Intent;
import com.getcapacitor.JSObject;
import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.phonepe.intent.sdk.api.PhonePe;
import com.phonepe.intent.sdk.api.PhonePeInitException;
import com.phonepe.intent.sdk.api.ShowPhonePeCallback;
import com.phonepe.intent.sdk.api.TransactionRequest;
import com.phonepe.intent.sdk.api.TransactionRequestBuilder;
import java.util.HashMap;
    requestCodes = {
    } // register request code(s) for
    intent results
public class PhonePeSDKPlugin extends Plugin {
     * variables
    public static final int PHONEPE_REQUEST = 777;
    public void load() {
        // Called when the plugin is first constructed in the bridge
     * Method to set whether PhonePe app is installed or not and send the event to the Ionic Code
    public void doesPhonePeExists(PluginCall call) {
        try {
            PhonePe.isUPIAccountRegistered(new ShowPhonePeCallback() {
                public void onResponse(boolean b) {
                    JSObject mJSObject = new JSObject();
                    mJSObject.put("isPhonePeAvailable", "" + b);
                    notifyListeners("isPhonePeAvailableListener", mJSObject);
        } catch (PhonePeInitException e) {
     * Method to launch the PhonePe payment page from the Ionic Native code
     * @param call
    public void startPaymentTransaction(PluginCall call) {
        String base64Body = call.getString("base64EncodedData");
        String checksum = call.getString("checksum");
        String endPoint = call.getString("endpoint");
        String xCallbackUrl = call.getString("xCallbackUrl");
        HashMap < String, String > headers = new HashMap();
        headers.put("X-CHANNEL-ID", "phonepe_ionic_sdk");
        TransactionRequest mTransactionRequest;
        if (xCallbackUrl != null && xCallbackUrl.length() != 0 && !xCallbackUrl.isEmpty()) {
            headers.put("X-CALLBACK-URL", xCallbackUrl);
            headers.put("X-CALL-MODE", "POST");
            mTransactionRequest = new TransactionRequestBuilder()
        } else {
            mTransactionRequest = new TransactionRequestBuilder()
        try {
            startActivityForResult(call, PhonePe.getTransactionIntent(mTransactionRequest), 777);
        } catch (PhonePeInitException e) {}
    // in order to handle the intents result, you have to @Override handleOnActivityResult
    protected void handleOnActivityResult(int requestCode, int resultCode, Intent data) {
        super.handleOnActivityResult(requestCode, resultCode, data);
        // Get the previously saved call
        PluginCall savedCall = getSavedCall();
        if (savedCall == null) {
        if (requestCode == PHONEPE_REQUEST) {
            // Send the UI callback to the ionic app

package io.ionic.starter;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
    public void onCreate(Bundle savedInstanceState) {
        // Initializes the Bridge
        this.init(savedInstanceState, new ArrayList < Class << ? extends Plugin >> () {
                // Additional plugins you've installed go here