咨询：Flutter中使用webview_flutter实现支付回调URL的事件/函数

在webview_flutter中，处理支付成功/失败的回调URL，核心是通过**NavigationDelegate的onNavigationRequest方法**来拦截跳转请求——支付完成后第三方支付页面会跳转到你预设的回调地址，通过这个方法可以捕获该请求并处理对应逻辑。

基础实现（拦截回调URL） #

示例代码如下：

WebView(
  initialUrl: '你的支付页面访问地址',
  navigationDelegate: (NavigationRequest request) {
    // 替换为你实际的成功/失败回调URL前缀或完整地址
    const successUrlPrefix = 'https://your-domain.com/pay/success';
    const failUrlPrefix = 'https://your-domain.com/pay/fail';

    if (request.url.startsWith(successUrlPrefix)) {
      // 执行支付成功逻辑：关闭WebView、更新订单状态等
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('支付成功')));
      Navigator.pop(context);
      return NavigationDecision.prevent; // 阻止实际跳转，避免加载无关页面
    } else if (request.url.startsWith(failUrlPrefix)) {
      // 执行支付失败逻辑
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('支付失败')));
      Navigator.pop(context);
      return NavigationDecision.prevent;
    }
    // 其他正常页面跳转允许通过
    return NavigationDecision.navigate;
  },
  // 按需配置其他WebView参数，比如启用JS等
)

备选方案（接收JS消息） #

如果支付结果是通过页面内JS传递而非URL跳转，需要开启JS支持并通过javascriptChannels接收消息：

WebView(
  initialUrl: '你的支付页面访问地址',
  javascriptMode: JavascriptMode.unrestricted, // 必须开启JS支持
  javascriptChannels: {
    JavascriptChannel(
      name: 'PayResultChannel', // 与前端JS约定的通道名称
      onMessageReceived: (JavascriptMessage message) {
        // 处理JS传来的结果，比如message.message为"success"或"fail"
        switch (message.message) {
          case 'success':
            // 支付成功逻辑
            break;
          case 'fail':
            // 支付失败逻辑
            break;
        }
      },
    ),
  },
)

此时需要支付页面的JS代码主动调用：window.PayResultChannel.postMessage('success')来传递支付结果。

注意事项 #

• 确保回调URL和你拦截的地址匹配，使用startsWith可以兼容携带订单号等参数的情况
• 如果支付页面需要JS交互，务必开启javascriptMode: JavascriptMode.unrestricted

内容的提问来源于stack exchange，提问作者Dev.s