Angular中使用checkout.js自定义Stripe支付表单宽高的方法咨询

首先直接给结论：你现在用的是旧版Legacy Stripe Checkout（也就是引入https://checkout.stripe.com/checkout.js的老版本结账组件），官方根本没提供自定义弹窗宽高的配置项，你在paymentHandler.open()方法里写的height、width参数Stripe不会识别，传了也完全不生效。

为什么没法直接改这个弹窗的尺寸 #

旧版Checkout的支付表单是放在Stripe自有域名下的跨域iframe里渲染的，受浏览器同源策略限制，你自己的业务代码没有权限修改iframe内部的元素样式。而且Stripe把这个弹窗的宽高逻辑写死在了内部代码里：桌面端默认宽度固定在480px左右，高度根据展示的表单内容自适应，移动端会自动占满屏幕宽度。就算你强行用CSS改外层遮罩、弹窗容器的尺寸，内部的iframe还是保持原有大小，只会出现内容错位、滚动条错乱，甚至直接阻断支付流程的问题，非常不建议硬改。

可行的实现方案 #

• 迁移到新版Stripe Checkout
  这是目前Stripe官方主推的支付方案，新版Checkout是预构建的托管支付页，自带全响应式适配能力，会自动根据用户的设备屏幕尺寸调整表单大小，根本不需要你手动配置宽高，同时支付合规性、支付成功率都比旧版高很多，接入成本也很低。
• 用Stripe Elements嵌入自定义表单
  如果你需要完全掌控支付表单的尺寸、样式，就用Stripe Elements把卡片输入组件直接嵌到你自己的Angular页面里。这种方式下支付组件放在你自己定义的页面容器中，你可以完全通过自定义CSS设置容器的宽高、边距、配色等所有样式，灵活度最高。Angular项目可以直接搭配@stripe/stripe-js和ngx-stripe库接入，不需要你手动写动态插入script的逻辑，后续维护也更方便。

补充：旧版Legacy Checkout目前Stripe已经停止功能迭代，只做最基础的维护，长期使用的话建议尽早迁移到上述两个方案。

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