UPI Intent in JS SDK

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.

Note: If you using Cashfree Mobile SDK, then please follow cashfree official mobile sdk docs.

Feature Flag based solution

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.

Android

Android

// Override shouldOverrideUrlLoading method in your webview.
@Override
public boolean shouldOverrideUrlLoading(WebView view, String request) {
   if (request != null) {
         if((request.startsWith("upi://pay") 
             || request.startsWith("tez://") 
             || request.startsWith("gpay://")
             || request.startsWith("paytmmp://")
             || request.startsWith("phonepe://")){
                // Open UPI app from here
                final Intent intent = new Intent();
                intent.setAction(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));
                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
         if((url.startsWith("upi://pay")
            || url.startsWith("tez://")|| url.startsWith("gpay://")
            || url.startsWith("paytmmp://")
            || url.startsWith("phonepe://")) {
          Linking.canOpenURL(url).then(supported => {
                  if (supported) {
                        Linking.openURL(url);
                  }else{
                      console.log("Not able to open")
                  }
                });
                return false;
          }
        return true;
}}

Flutter

Dart

// Override shouldOverrideUrlLoading method in your webview.
shouldOverrideUrlLoading: (controller, navigationAction) async {
          var uri = navigationAction.request.url!;
          if (["upi", "tez","gpay", "paytmmp","phonepe"].contains(uri.scheme)) {
            print("Opening PSP app");
            await launchUrl(uri);
            return NavigationActionPolicy.CANCEL;
          }
          return NavigationActionPolicy.ALLOW;
}

To enable this flag, please fill out the Support Form. they will enable this flag.

Code based solution

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