Flutter应用如何从Web支付网关返回并跳转至PaymentResultScreen

1. return_url该填什么？ #

直接用自定义URL Scheme，格式为[你的应用标识]://[路径]，比如：

• 支付结果返回：yourapp://payment-result
• 取消支付返回：yourapp://payment-cancel

这个Scheme是你自己定义的，用来让系统识别并唤起你的Flutter应用，而非跳转外部网页。

2. 关联PaymentResultScreen与return_url的配置 #

需要分别配置Android、iOS系统权限，再在Flutter中处理路由跳转：

Android配置（修改android/app/src/main/AndroidManifest.xml） #

在<activity>标签内添加intent-filter，让系统识别你的URL Scheme：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 匹配自定义的URL Scheme -->
    <data android:scheme="yourapp" />
</intent-filter>

iOS配置（修改ios/Runner/Info.plist） #

添加以下配置，声明你的URL Scheme：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>yourapp</string>
</array>

Flutter路由关联 #

在MaterialApp的onGenerateRoute中处理URL Scheme跳转：

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith('yourapp://payment-result') ?? false) {
      // 解析URL中的支付状态参数
      final uri = Uri.parse(settings.name!);
      final status = uri.queryParameters['status'];
      return MaterialPageRoute(
        builder: (context) => PaymentResultScreen(paymentStatus: status),
      );
    }
    if (settings.name?.startsWith('yourapp://payment-cancel') ?? false) {
      return MaterialPageRoute(
        builder: (context) => PaymentResultScreen(paymentStatus: 'cancel'),
      );
    }
    // 其他路由处理逻辑
    return null;
  },
);

3. 唤起应用并展示PaymentResultScreen #

步骤1：修改表单中的return_url #

把原表单里的return_url和cancel_url替换成自定义URL Scheme：

static String testHtmlString = '''
<form action="https://www.mybank.com/eng/payments" method="post">
  <input type="hidden" name="merchant_id" value="2481000974560100">
  <input type="hidden" name="merchant_key" value="4sl4o153ihep1m7sdf6f0c5h781ad84j">
  <input type="hidden" name="return_url" value="yourapp://payment-result?status=success">
  <input type="hidden" name="cancel_url" value="yourapp://payment-cancel?status=cancel">
  <input type="hidden" name="notify_url" value="https://www.example.com/notify"> <!-- notify_url仍用后端接口，接收银行异步通知 -->
  <input type="hidden" name="amount" value="100.00">
  <input type="hidden" name="item_name" value="Test Product">
  <input type="submit" value="PAY NOW">
</form>
''';

步骤2：WebView中监听URL跳转 #

使用webview_flutter包（先在pubspec.yaml添加依赖），监听WebView的URL变化，检测到自定义Scheme时关闭WebView并跳转结果页：

WebView(
  initialUrl: Uri.dataFromString(testHtmlString, mimeType: 'text/html').toString(),
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('yourapp://')) {
      // 解析URL参数
      final uri = Uri.parse(request.url);
      final status = uri.queryParameters['status'];
      // 关闭当前WebView页面，跳转到结果页
      Navigator.pop(context);
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PaymentResultScreen(paymentStatus: status),
        ),
      );
      return NavigationDecision.prevent; // 阻止WebView加载该URL
    }
    return NavigationDecision.navigate;
  },
);

补充说明 #

• notify_url不能用自定义Scheme，必须填写你的后端接口地址，用于接收银行的异步支付结果通知（避免用户直接关闭页面导致前端未收到结果）。
• 测试Scheme可用性：
  • Android：用adb命令adb shell am start -W -a android.intent.action.VIEW -d "yourapp://payment-result?status=success" com.yourapp.package
  • iOS：在Safari地址栏输入yourapp://payment-result?status=success

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