Flutter WebView支付后回调：如何捕获Return URL查询参数

一、先配置自定义URL Scheme #

要让支付完成后能跳回你的App，得先给App注册一个专属的URL Scheme：

• iOS端：打开ios/Runner/Info.plist，添加以下配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myflutterpay</string> <!-- 换成你自己的Scheme，比如你的App英文名缩写 -->
    </array>
  </dict>
</array>

• Android端：打开android/app/src/main/AndroidManifest.xml，在MainActivity标签内添加intent-filter：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myflutterpay" /> <!-- 和iOS保持一致 -->
</intent-filter>

二、设置API请求的Return URL #

调用支付API时，把redirection_url字段设为你的Scheme链接，示例如下：

{
"client_id": "abcd",
"redirection_url": "myflutterpay://payment/callback",
"amount": 300,
"order_id": "dsdsassddddddd3"
}

支付完成后，第三方支付系统会自动跳转到这个URL，并在后面拼接交易结果的查询参数（比如status=success&transaction_id=xxx）。

三、WebView内拦截回调跳转 #

在你已实现的WebView流程中，添加导航拦截逻辑，识别并处理回调URL：

WebView(
  initialUrl: paymentRedirectUrl, // API返回的支付页面URL
  navigationDelegate: (NavigationRequest request) {
    // 判断当前跳转URL是否属于我们的回调Scheme
    if (request.url.startsWith('myflutterpay://')) {
      // 拦截跳转，交给App内部处理回调参数
      _handlePaymentCallback(request.url);
      return NavigationDecision.prevent;
    }
    // 其他正常跳转放行
    return NavigationDecision.navigate;
  },
)

四、解析回调参数并处理业务逻辑 #

实现_handlePaymentCallback方法，提取URL里的交易参数并处理：

void _handlePaymentCallback(String callbackUrl) {
  final uri = Uri.parse(callbackUrl);
  // 提取查询参数，具体字段以支付API返回为准
  final transactionId = uri.queryParameters['transaction_id'];
  final paymentStatus = uri.queryParameters['status'];
  final orderId = uri.queryParameters['order_id'];

  // 根据支付状态执行对应逻辑
  if (paymentStatus == 'success') {
    // 支付成功：更新本地订单状态、弹窗提示用户、跳转到订单详情页等
  } else if (paymentStatus == 'failed') {
    // 支付失败：提示用户重新尝试、记录失败原因等
  } else {
    // 支付取消：返回订单列表或首页
  }
}

五、处理App从外部唤起的情况 #

如果用户支付时用了系统浏览器（而非WebView），支付完成后会直接唤起你的App，这时需要在App启动时检查启动URL：

@override
void initState() {
  super.initState();
  // 页面初始化完成后检查启动URL
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _checkInitialCallbackUrl();
  });
}

void _checkInitialCallbackUrl() {
  final initialUri = Uri.base;
  // 判断是否是支付回调的Scheme链接
  if (initialUri.scheme == 'myflutterpay' && initialUri.path == '/payment/callback') {
    _handlePaymentCallback(initialUri.toString());
  }
}

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