Apple Pay按钮在外部域名Iframe中无法显示的解决咨询

问题根源 #

你遇到的跨域错误是因为Safari的严格同源策略限制，加上Stripe JS与Apple Pay的域名绑定机制：当你的结账页被嵌入外部域名的iframe时，Stripe的JS资源（来自js.stripe.com）无法与父域名的iframe正常交互，同时Apple Pay的域名验证逻辑也会因为iframe的跨域环境触发限制。

具体解决方案 #

1. 配置Stripe允许外部域名访问

Stripe需要明确授权外部域名加载你的结账页并使用Apple Pay按钮：

• 登录Stripe后台，进入「Settings > Payment methods > Apple Pay」
• 在「Allowed domains」列表中，添加嵌入你结账页的外部域名（比如https://external-domain.com）
• 确保你的主域名https://example.com已经在列表中，且已正确上传Apple Pay的验证文件（.well-known/apple-developer-merchantid-domain-association）

2. 调整iframe的权限属性

外部域名的iframe标签必须添加必要的权限声明，才能让Safari允许支付相关操作：

<iframe src="https://example.com/checkout" 
        allow="payment"
        sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms"
        width="100%" height="600">
</iframe>

• allow="payment"：明确告知浏览器该iframe需要支付功能权限
• sandbox属性：开放必要的脚本、同源访问、导航和表单权限，避免过度限制导致Stripe JS无法运行

3. 验证Apple Pay的域名绑定逻辑

确保你的结账页在iframe中发起Apple Pay请求时，使用的是已注册的example.com商户ID。如果Stripe检测到请求来自未授权的域名（即使是iframe场景），也会阻止按钮加载。

额外排查点 #

• 检查Safari控制台是否有Apple Pay域名验证相关的错误，如果有，确认Stripe后台的允许域名列表已包含外部域名
• 确保外部域名和你的结账页都使用HTTPS（这是Apple Pay的强制要求）

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