嵌入iframe的项目中Add to Google Wallet按钮无法正常工作求助

1. 检查Google Wallet控制台域名配置 #

确保在Google Wallet开发者控制台中，同时添加嵌入iframe的父网站域名和你的项目域名到允许来源列表。Google Wallet会验证请求来源，iframe环境下需同时包含两类域名，否则会触发跨域安全限制。

2. 配置iframe的sandbox属性（若有设置） #

如果父页面给iframe添加了sandbox属性，必须包含以下必要权限：

• allow-scripts：允许iframe内执行脚本（Google Wallet按钮依赖脚本渲染）
• allow-same-origin：避免跨域权限限制，允许iframe访问同源资源
• allow-top-navigation：部分Google Wallet流程需要跳转到顶层页面，需开启该权限

示例正确的iframe标签：

<iframe src="你的项目地址" sandbox="allow-scripts allow-same-origin allow-top-navigation"></iframe>

3. 调整Google Wallet脚本加载方式 #

确保在iframe内部正确加载脚本，避免异步加载导致的初始化异常。建议在页面头部加载脚本，或确保调用gapi.savetoandroidpay.render前脚本已完全加载：

<script src="https://pay.google.com/gp/p/js/pay.js" async></script>
<script>
window.addEventListener('load', function() {
  if (window.gapi && window.gapi.savetoandroidpay) {
    gapi.savetoandroidpay.render('wallet-button', {
      jwt: '你的JWT令牌',
      onSuccess: function() { /* 成功回调逻辑 */ },
      onFailure: function() { /* 失败回调逻辑 */ }
    });
  }
});
</script>

4. 验证JWT令牌的受众配置 #

检查生成JWT时的aud字段，确保其包含iframe父域名或你的项目域名。Google Wallet会验证JWT受众是否与请求来源匹配，iframe环境下需调整该字段覆盖两类域名。

5. 排查跨域Cookie限制 #

若项目依赖Cookie，确保父页面和iframe页面的Cookie设置了正确的SameSite属性（如SameSite=None; Secure），且运行在HTTPS环境下。Google Wallet部分流程需读取Cookie，跨域Cookie限制会引发服务错误。

内容的提问来源于stack exchange，提问作者Arjun R Pillai