如何在单个页面中加载两个 Stripe Element 支付组件

问题根因 #

Stripe Element 仅会挂载到选择器匹配的第一个节点上，加上你当前的写法存在两个问题：

1. HTML 规范要求ID全局唯一，你给两个支付容器使用了重复的card-number-elementID，document.getElementById默认只会返回匹配到的第一个DOM节点
2. 单个Stripe Element实例只能挂载到一个DOM节点上，你仅创建了一个实例，无法同时复用给多个容器

实现方案 #

遵循两个核心规则即可：所有挂载容器使用唯一ID、每个容器对应单独创建Stripe Element实例，示例代码如下：

<script src="https://js.stripe.com/v3/"></script>

<!-- 第一个支付表单卡片容器：使用唯一ID -->
<div id="card-number-element-1"></div>

<!-- 第二个支付表单卡片容器：使用唯一ID -->
<div id="card-number-element-2"></div>

<script>
// 初始化Stripe实例，替换为你自己的Stripe公钥
const stripe = Stripe('你的Stripe公钥');
const elements = stripe.elements();

// 为第一个容器创建并挂载Element实例
const cardNumberElement1 = elements.create("cardNumber");
if (document.getElementById("card-number-element-1")) {
  cardNumberElement1.mount("#card-number-element-1");
}

// 为第二个容器单独创建新的Element实例并挂载
const cardNumberElement2 = elements.create("cardNumber");
if (document.getElementById("card-number-element-2")) {
  cardNumberElement2.mount("#card-number-element-2");
}
</script>

注意事项 #

• 如果你的表单还包含卡过期日、CVC等其他Stripe Element，也需要遵循同样的规则：每个对应容器使用唯一ID，单独创建实例挂载
• 后续提交支付请求时，需要对应使用对应表单的Element实例调用支付确认接口，不可混用实例

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