Flutter WebView中Stripe结账链接无法加载问题排查求助

1. 修复代码中的核心错误 #

你的initState里错误调用了runJavaScript(widget.url)——这个方法是用来执行JavaScript代码的，并非加载URL，执行无效的JS代码会直接干扰页面正常加载。直接移除这一行即可：

修改后的初始化代码：

@override
void initState() {
  super.initState();
  _controller = WebViewController()
    ..clearCache()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {},
        onPageStarted: (String url) {},
        onPageFinished: (_) {
          Helpers.logc("finished loading $_");
        },
        onWebResourceError: (WebResourceError error) {
          Helpers.logc(error.errorType ?? "", error: true);
          // 新增：打印更详细的错误信息辅助排查
          Helpers.logc(error.description ?? "无错误描述", error: true);
          Helpers.logc("错误码: ${error.errorCode}", error: true);
        },
      ),
    )
    ..loadRequest(Uri.parse(widget.url));
}

2. 配置匹配原生浏览器的用户代理 #

Stripe可能会识别WebView的默认用户代理并限制加载，可设置与测试设备原生浏览器一致的用户代理：

_controller = WebViewController()
  // ...其他配置
  ..setUserAgent("Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36")
  ..loadRequest(Uri.parse(widget.url));

注：可在设备原生Chrome中访问about:version查看当前用户代理，直接复制使用即可。

3. 开启第三方Cookie权限 #

Stripe结账流程依赖第三方Cookie完成会话管理，WebView默认可能禁用该权限，需手动开启：

_controller = WebViewController()
  // ...其他配置
  ..setCookiePolicy(CookiePolicy.acceptThirdPartyCookies)
  ..loadRequest(Uri.parse(widget.url));

4. 允许混合内容加载（若存在） #

如果Stripe链接中包含HTTP+HTTPS混合资源，需配置WebView允许混合内容：

Android平台（需依赖webview_flutter_android） #

import 'package:webview_flutter_android/webview_flutter_android.dart';

// 初始化controller后添加
if (_controller.platform is AndroidWebViewController) {
  (_controller.platform as AndroidWebViewController).setMixedContentMode(MixedContentMode.alwaysAllow);
}

iOS平台 #

在Info.plist中添加配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

5. 检查基础权限配置 #

• Android：确保AndroidManifest.xml中添加网络权限

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：确认Info.plist已配置网络访问权限

6. 调整缓存策略（可选） #

当前代码调用了clearCache()，若Stripe依赖缓存加载必要资源，可尝试注释掉这一行后测试。

内容的提问来源于stack exchange，提问作者Zaza.codes