在iframe中加载Stripe Checkout页面失败，求可行的集成解决方案

报错信息：Stripe Checkout is not able to run in an iFrame. Please redirect to Checkout at the top level.

Stripe官方出于PCI合规、支付安全及反欺诈要求，明确禁止将托管版Stripe Checkout页面嵌入iframe使用，不存在合法合规的绕开限制实现iframe内嵌的方案。

以下是可实现站内支付体验的官方合规替代方案：

• 整页跳转托管Checkout #

这是Stripe官方首推的集成方案，后端创建Checkout会话后拿到会话地址，直接调用window.location.replace(checkoutSessionUrl)跳转到官方Checkout页，用户支付完成后会自动跳转回你预先配置的成功/取消回调地址，集成成本极低，自动适配所有支付方式和端设备。

• 嵌入式Checkout（Embedded Checkout） #

如果需要用户全程不离开你的站点，可选择Stripe官方推出的嵌入式Checkout组件，不需要整页跳转，直接在你站点的DOM节点中渲染完整的Checkout能力，既保留了托管Checkout的所有功能（多支付方式支持、自动风险控制、地址填充等），又无需自行开发支付表单，开发成本远低于自定义集成。
示例初始化代码：

// 引入Stripe SDK
import { loadStripe } from "@stripe/stripe-js";
// 初始化Stripe实例
const stripe = await loadStripe("你的Stripe公钥");
// 后端创建Checkout会话后返回客户端密钥
const clientSecret = "{{CHECKOUT_SESSION_CLIENT_SECRET}}";
// 挂载嵌入式Checkout到页面容器
const elements = stripe.elements({ clientSecret });
const checkoutElement = elements.create("checkout");
checkoutElement.mount("#checkout-container");

• 自定义Stripe Elements支付表单 #

如果需要高度自定义支付页样式和交互逻辑，可使用Stripe Elements组件库自行搭建支付表单，所有支付逻辑都在你站点内完成，完全可控。

提示：使用Elements仅需你的站点满足PCI DSS SAQ A合规等级，不需要额外的合规审计成本。

报错截图参考：

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