UPI Intent in JS SDK

Enable UPI Intent inside the Cashfree JS SDK web checkout embedded in Android, React Native, Flutter, and Cordova apps using feature flags and URL handlers.

Merchants integrating the Cashfree Web checkout using Cashfree JS SDK. But they are unable to see the UPI intent option on the checkout page as the Cashfree checkout page is opening on Webview.

This document provides guidance for merchants developing their applications on platforms such as Android, React Native, Flutter, Cordova who have integrated the Cashfree JS SDK.

If you are using Cashfree Mobile SDK, refer to Mobile SDK.

Before testing UPI Intent, ensure you are testing on a device that has the relevant UPI apps installed and SIM binding is completed in the UPI PSP app (such as PhonePe, GPay, or Paytm) on that device. A UPI app that is installed but not SIM-bound does not appear as a payment option on the checkout page.

Feature flag based solution Client-side

Our checkout page provides the capability to display default UPI apps, including PhonePe, GPay, and Paytm, along with an option to pay via any UPI app. This feature ensures that these UPI apps are visible on the checkout page, regardless of whether they are installed on the user’s device.

When a user selects a UPI app, merchants are responsible for handling the redirection. Only a minimal code snippet is required on the merchant’s side to handle the UPI app click and manage the subsequent redirection process.

iOS

iOS

// Override webView(_:decidePolicyFor:decisionHandler:) method in your WKNavigationDelegate.
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
guard let url = navigationAction.request.url, let scheme = url.scheme else {
decisionHandler(.allow)
return
}

      if (["upi",
          "tez",
          "gpay",
          "paytmmp",
          "phonepe",
          "amazonpay",
          "credpay",
          "bhim",
          "navipay",
          "mobikwik",
          "myairtel",
          "popclubapp",
          "super",
          "kiwi",
          "simplypayupi",
          "whatsapp-consumer",
          "tnupi",
          "postpe",
          "imobile",
          "payzapp",
          "fpupi",
          "snapmint"].contains(scheme)) {
              // Open UPI app from here
              if UIApplication.shared.canOpenURL(url) {
                  UIApplication.shared.open(url, options: [:], completionHandler: nil)
              } else {
                  //handle no app scenario
              }
              decisionHandler(.cancel)
              return
      }
      decisionHandler(.allow)
  }

iOS requires every scheme checked with canOpenURL to be declared upfront in your app’s info.plist, otherwise the check silently returns false. For the full iOS SDK v4 UPI Intent configuration, see the iOS SDK v4 UPI Intent documentation.

Info.plist

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>upi</string>
  <string>tez</string>
  <string>gpay</string>
  <string>paytmmp</string>
  <string>phonepe</string>
  <string>amazonpay</string>
  <string>credpay</string>
  <string>bhim</string>
  <string>navipay</string>
  <string>mobikwik</string>
  <string>myairtel</string>
  <string>popclubapp</string>
  <string>super</string>
  <string>kiwi</string>
  <string>simplypayupi</string>
  <string>whatsapp-consumer</string>
  <string>tnupi</string>
  <string>postpe</string>
  <string>imobile</string>
  <string>payzapp</string>
  <string>fpupi</string>
  <string>snapmint</string>
</array>

Android

On Android 11 and later (API level 30+), apps must declare which packages they intend to query before they can detect installed UPI applications. Add the following <queries> block to your AndroidManifest.xml:

AndroidManifest.xml

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="upi" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tez" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="gpay" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="phonepe" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="paytmmp" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="credpay" />
    </intent>
</queries>

Without this declaration, queryIntentActivities returns an empty list on Android 11 and later, and UPI apps do not appear.

Android

// Override shouldOverrideUrlLoading method in your webview.
@Override
public boolean shouldOverrideUrlLoading(WebView view, String request) {
    if (request != null) {
        if (request.startsWith("intent://")) {
            try {
                final Intent intent = Intent.parseUri(request, Intent.URI_INTENT_SCHEME);
                intent.setAction(Intent.ACTION_VIEW);
                PackageManager pm = getPackageManager();
                if (!pm.queryIntentActivities(intent, 0).isEmpty()) {
                    startActivity(intent);
                } else {
                    // handle no app scenario
                }
            } catch (URISyntaxException e) {
                // malformed intent uri, ignore/log
            }
            return true;
        }

        if (request.startsWith("upi://pay")
                || request.startsWith("tez://")
                || request.startsWith("paytmmp://")
                || request.startsWith("phonepe://")
                || request.startsWith("amazonpay://")
                || request.startsWith("credpay://")
                || request.startsWith("bhim://")
                || request.startsWith("navipay://")
                || request.startsWith("mobikwik://")
                || request.startsWith("myairtel://")
                || request.startsWith("popclubapp://")
                || request.startsWith("super://")
                || request.startsWith("kiwi://")
                || request.startsWith("simplypayupi://")
                || request.startsWith("whatsapp-consumer://")
                || request.startsWith("tnupi://")
                || request.startsWith("snapmint://")
        ) {
            final Intent intent = new Intent();
            intent.setAction(Intent.ACTION_VIEW);
            intent.setData(Uri.parse(request));
            PackageManager pm = getPackageManager();
            final List<ResolveInfo> resInfo = pm.queryIntentActivities(intent, 0);
            if (!resInfo.isEmpty()) {
                startActivity(intent);
            } else {
                // handle no app scenario
            }
            return true;
        }
    }
    return false;
}

React-Native

JS

// Override onShouldStartLoadWithRequest method in your webview.
onShouldStartLoadWithRequest={event => {
  const url = event.url;
  const upiSchemePrefixes = [
    "upi://pay",              // default
    "intent://",               // Android only
    "tez://",                  // gpay
    "paytmmp://",               // paytm
    "phonepe://",               // phonepe
    "bhim://",                  // bhim
    "credpay://",               // cred
    "amazonpay://",             // amazonpay
    "navipay://",               // navi
    "mobikwik://",               // mobikwik
    "myairtel://",               // airtel
    "popclubapp://",             // pop
    "super://",                  // supermoney
    "kiwi://",                   // kiwi
    "simplypayupi://",           // simplypay
    "whatsapp-consumer://",      // whatsapp
    "tnupi://",                  // tataneu
    "postpe://",                 // bharatpe
    "imobile://",                // imobile
    "payzapp://",                // payzapp
    "fpupi://",                  // fampay
    "snapmint://",               // snapmint
  ];

  if (upiSchemePrefixes.some(prefix => url.startsWith(prefix))) {
    Linking.canOpenURL(url)
      .then(supported => {
        if (supported) {
          return Linking.openURL(url);
        }
        console.log("Not able to open");
      })
      .catch(err => {
        console.log("Failed to open UPI link", err);
      });
    return false;
  }
  return true;
}}

Flutter

// Override shouldOverrideUrlLoading method in your webview.
shouldOverrideUrlLoading: (controller, navigationAction) async {
  final uri = navigationAction.request.url;
  if (uri == null) return NavigationActionPolicy.ALLOW;

  const upiSchemes = {
    'upi',                // default
    'intent',             // Android only
    'tez',                 // gpay
    'paytmmp',              // paytm
    'phonepe',              // phonepe
    'bhim',                 // bhim
    'credpay',              // cred
    'amazonpay',            // amazonpay
    'navipay',              // navi
    'mobikwik',              // mobikwik
    'myairtel',              // airtel
    'popclubapp',            // pop
    'super',                 // supermoney
    'kiwi',                  // kiwi
    'simplypayupi',          // simplypay
    'whatsapp-consumer',     // whatsapp
    'tnupi',                 // tataneu
    'postpe',                // bharatpe
    'imobile',               // imobile
    'payzapp',               // payzapp
    'fpupi',                 // fampay
    'snapmint'               // snapmint
  };

  if (upiSchemes.contains(uri.scheme)) {
    print("Opening PSP app: ${uri.scheme}");
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri, mode: LaunchMode.externalApplication);
    } else {
      print("No app found to handle $uri");
    }
    return NavigationActionPolicy.CANCEL;
  }
  return NavigationActionPolicy.ALLOW;
}

To enable this feature flag on your account, submit a request through the Support Form, and our team will enable it for you. Once enabled, it may take 30–40 minutes for the supported UPI apps to reflect on the checkout.

Code based solution Client-side

You have to write some custom logic in your mobile app while opening Cashfree checkout page. When you are loading Webview, Please register JS bridge with name Android and implement few of its method.

Android

Sample code

React-Native

In this case, you have to write android native module Native Module

Use these native module in you JS/TS code JS code

Sample Usage

Flutter

In this case, you have to write android native module Native Module

Use these native module in you Dart code Dart Code

Sample Usage

iOS

When loading WebView, register JS bridge with name nativeProcess and implement the required methods.

Sample code

Related topics

• Android Sample Code
• React Native Sample
• Flutter Sample
• Mobile SDK Docs