WebView page not available - “Upi:// ”

Question

I have a shopping website with base on WordPress with Woo-commerce, and installed UPI Payment Plugin. and also I have make Android APP for my website using Web View.

****Problem****

WebView everything worked correctly but I used UPI payment link in one page to redirect to upi payments ("upi://pay?pn=DevShop&pa=eshop@kotak&tr=40766&tn=OrderID40766&am=1149&cu=INR") like this link and I'm getting ERR_UNKNOWN_URL_SCHEME error

I want My UPI Payment Link as above when clicked it open in default UPI APP like BHIM, PayTM, PhonePe or etc.. and Rest will handle through the above apps. following are the links of targeted apps.

https://play.google.com/store/apps/details?id=com.google.android.apps.nbu.paisa.user

https://play.google.com/store/apps/details?id=in.org.npci.upiapp

https://play.google.com/store/apps/details?id=net.one97.paytm

https://play.google.com/store/apps/details?id=com.phonepe.app

https://play.google.com/store/apps/details?id=com.mobikwik_new

https://play.google.com/store/apps/details?id=com.freecharge.android

Following is my Code in MainActivity.java

package com.shop.dev;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends AppCompatActivity {

  private WebView myWebView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      myWebView = (WebView) findViewById(R.id.webView);
      WebSettings webSettings = myWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      webSettings.setAppCacheEnabled(true);
      myWebView.loadUrl("http://192.168.1.14/mzdec");
      myWebView.setWebViewClient(new WebViewClient());
  }

  @Override
  public void onBackPressed() {
      if(myWebView.canGoBack()) {
          myWebView.goBack();
      } else {
          super.onBackPressed();
      }
  }
}

Following is my Code in AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>

<application    android:allowBackup="true"    android:icon="@mipmap/ic_launcher"    android:label="@string/app_name"    android:roundIcon="@mipmap/ic_launcher_round"    android:supportsRtl="true"    android:usesCleartextTraffic="true"    android:theme="@style/AppTheme">

<activity android:name=".MainActivity">

    <intent-filter>

        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

</activity>

</application>

Help to resolve the Error.

Following are the Error When Payment Made via UPI Link.

Answer 1

I too faced the same problem and resolved it by adding one if-condition

 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("upi:")) {    //To allow link which starts with upi://
           return true;
       }
                view.loadUrl(url);
                return true;
            }

If you want to show an app chooser as well to display all those apps that support UPI payment then you can use following code:

 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("upi:")) {    //To allow link which starts with upi://
       Intent intent = new Intent(Intent.ACTION_VIEW);  // To show app chooser
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                    return true;
                }
                view.loadUrl(url);
                return true;
            }

Answer 2

i'm sharing what worked for me. Hope the same with you. Added some code to the same that you've posted. Look for it within the webview client.

public class MainActivity extends AppCompatActivity {
    private WebView myWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      myWebView = (WebView) findViewById(R.id.webView);
      WebSettings webSettings = myWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      webSettings.setAppCacheEnabled(true);
      myWebView.loadUrl("http://192.168.1.14/mzdec");
      myWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView wv, String url) {
                if (url.startsWith("upi:")) {
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                    return true;
                }
                return false;
            }
        });
    }

    @Override
    public void onBackPressed() {
        if(myWebView.canGoBack()) {
            myWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Answer 3

Finally, we resolved the issue; it is purely based on an issue with WebView module of node. Update the below code in the node module of the WebView.

File Path: node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewClient.java

Import the cross-ponding Android files:

import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.net.Uri;
import android.widget.Toast;

@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    final String url = request.getUrl().toString();
    Intent intent;
    try {
        if (url.contains("upi://pay?pa")) {
            intent = new Intent(Intent.ACTION_VIEW);
            intent.setData(Uri.parse(url));
            view.getContext().startActivity(intent);
            return true;
        }

    } catch (ActivityNotFoundException e) {
        view.stopLoading();
        Toast.makeText(view.getContext(), "UPI supported applications not found", Toast.LENGTH_SHORT).show();
        view.loadUrl("javascript:(function() { document.getElementsByClassName(\"intent-off\")[0].click();})()");
    }
    return this.shouldOverrideUrlLoading(view, url);
}