Flutter中IFrame加载页面时Apple Pay按钮不显示问题

直接访问目标网页时，Apple Pay按钮能正常显示并使用，但通过Flutter的HtmlElementView加载IFrame后，按钮就消失了。虽然已经在IFrame配置里加了allow="payment"属性，问题还是没解决。

可能的解决办法： #

• 补全IFrame的支付权限配置
  试试把allow属性改成更完整的声明，或者显式添加支付请求权限：

  IFrameElement iframe = IFrameElement()
    // ...其他配置
    ..allow = "payment *"
    ..setAttribute('allowpaymentrequest', 'true');
  

  有些环境下，单独的allow="payment"可能不足以触发Apple Pay的环境检测，显式声明allowpaymentrequest能覆盖更多场景。

• 检查目标网页的Apple Pay显示逻辑
  不少网站的Apple Pay按钮是通过JS动态判断环境后渲染的，IFrame环境下可能被误判为不支持。让网页开发者排查：

  • 是否在检测window.PaymentRequest时，忽略了IFrame的权限状态
  • 是否存在window.top !== window.self时隐藏按钮的逻辑

• 移动端换用webview_flutter插件
  如果是移动端Flutter项目，放弃HtmlElementView，改用官方的webview_flutter插件。它对支付场景的兼容性更好，不需要手动配置IFrame权限：

  WebView(
    initialUrl: '<WEB URL GOES HERE>',
    javascriptMode: JavascriptMode.unrestricted,
  )
  

• 验证安全与跨域限制
  Apple Pay对环境有严格要求：

  • 目标网页必须是HTTPS协议
  • 确认目标网页的X-Frame-Options或Content-Security-Policy允许被你的Flutter页面嵌入
  • iOS系统可能对IFrame内的支付请求有额外限制，可测试在Safari直接打开IFrame链接是否能显示按钮

问题截图对比 #

原代码 #

@override
Widget build(BuildContext context) {
  ui.platformViewRegistry.registerViewFactory(
    'test-view-type',
    (int viewId) {
      IFrameElement iframe = IFrameElement()
        ..width = '640'
        ..height = '660'
        ..allow = "payment"
        ..src = <WEB URL GOES HERE>
        ..style.border = 'none';

      return iframe;
    });

  return Scaffold(
    body: Column(
      children: [
        Text('Testing Iframe with Flutter'),
        HtmlElementView(viewType: 'test-view-type'),
      ],
    ));
}

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