Flutter InAppWebView调用Razorpay时UPI应用不显示问题求助

针对你用flutter_inappwebview: ^5.7.1加载Razorpay支付URL时无法唤起Paytm、GPay等UPI应用的问题，以下是几个可行的解决方法：

1. 拦截UPI协议链接并手动唤起外部应用 #

InAppWebView默认不会自动处理upi://这类自定义Scheme的链接，需要主动拦截并调用系统能力启动对应的UPI应用。

步骤： #

• 先添加url_launcher依赖到pubspec.yaml：

dependencies:
  flutter_inappwebview: ^5.7.1
  url_launcher: ^6.1.12 # 版本可根据实际情况调整

• 修改InAppWebView的配置，添加链接拦截逻辑：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

// 你的页面Widget
InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的Razorpay支付页面URL")),
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    final uri = navigationAction.request.url!;
    // 拦截所有upi开头的链接
    if (uri.scheme == 'upi') {
      if (await canLaunchUrl(uri)) {
        // 启动外部应用处理UPI请求
        await launchUrl(uri, mode: LaunchMode.externalApplication);
        // 返回CANCEL让InAppWebView不再加载该链接
        return NavigationActionPolicy.CANCEL;
      }
    }
    // 其他链接正常由InAppWebView加载
    return NavigationActionPolicy.ALLOW;
  },
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
      useShouldOverrideUrlLoading: true, // 必须开启这个才能触发拦截回调
    ),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true, // 提升Android端WebView性能与兼容性
    ),
  ),
)

2. 配置AndroidManifest.xml权限与Intent过滤器 #

确保你的应用有权限查询和启动外部UPI应用，同时声明支持UPI链接的处理：

在android/app/src/main/AndroidManifest.xml中添加以下内容：

<!-- 基础网络权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 允许查询设备上的所有应用（Android 11+ 需要） -->
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />

<!-- 在你的MainActivity中添加Intent过滤器 -->
<activity
    android:name=".MainActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 声明支持UPI协议 -->
        <data android:scheme="upi" />
    </intent-filter>
</activity>

3. 模拟Chrome浏览器的User-Agent #

部分支付网关会根据请求的User-Agent判断是否为浏览器环境，进而决定是否展示UPI应用唤起选项。可以将InAppWebView的UA设置为Chrome移动端的UA：

initialOptions: InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    userAgent: "Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36",
    javaScriptEnabled: true,
    useShouldOverrideUrlLoading: true,
  ),
)

以上方法可以组合使用，一般拦截UPI链接+配置Manifest就能解决大部分问题。如果还是不行，再尝试修改UA。

内容的提问来源于stack exchange，提问作者Amit Pandey