如何检测Flutter WebView中用户是否跳转至Stripe支付成功页面？

你可以通过给WebViewController设置navigationDelegate来拦截页面跳转请求，以此判断是否跳转到了支付成功页面。具体实现如下：

修改后的完整代码 #

class _MaxPageState extends State<MaxPage> {
  late final WebViewController controller;
  final String successPay = "https://link_to_success_pay";

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) {
          // 检测跳转的URL是否匹配支付成功页面
          if (request.url.startsWith(successPay)) {
            // 支付成功后的逻辑：弹窗提示、更新本地状态、返回上一页等
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text("支付成功！")),
            );
            // 可选：阻止WebView加载成功页面，直接在应用内处理后续流程
            return NavigationDecision.prevent;
          }
          // 允许其他页面正常跳转
          return NavigationDecision.navigate;
        },
      ))
      ..loadRequest(
        Uri.parse('https://link_to_my_stripe_payment'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        backgroundColor: ThemeColor.darkBlack,
        title: const Text(
          "Upgrade Account",
        ),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

关键逻辑说明 #

• setNavigationDelegate：webview_flutter 4.x版本中用于监听页面导航事件的核心API，可拦截所有跳转请求。
• onNavigationRequest回调：每次WebView发起跳转时触发，request参数包含目标URL，通过它可以精准判断跳转去向。
• URL匹配规则：用startsWith（或根据实际需求改用contains）匹配成功页面地址，确保判断准确。
• NavigationDecision返回值：
  • NavigationDecision.prevent：阻止WebView加载目标页面，适合直接在应用内处理支付成功流程的场景。
  • NavigationDecision.navigate：允许WebView正常加载成功页面，若需要展示Stripe官方成功页可选择此选项。

额外提示 #

仅靠前端跳转判断存在被篡改的风险，建议同时在后端对接Stripe的Webhook进行支付结果二次验证，保障交易安全。

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