如何在单个页面上出现两个条纹元素答案

【问题标题】：How to appear two Stripe Element on a single page如何在单个页面上出现两个条纹元素
【发布时间】：2021-12-05 21:13:26
【问题描述】：

我想在同一个 html 上使用两个支付表单 (stripe.js)。 if 只能指定一个，所以会出现最先调用的支付表单，而不会出现另一个。

有没有办法实现？

条纹元素将安装到第一个元素。

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

// first one -> appeared
<div id="card-number-element"></div>


// another one -> not appeared
<div id="card-number-element"></div>

<script>
var cardNumberElement = elements.create("cardNumber");
if (document.getElementById("card-number-element")) {
  cardNumberElement.mount("#card-number-element");
}
</script>

【问题讨论】：

我不确定 Stripe 是否会让您在一个表单中创建多个卡号元素。

标签： javascript html stripe-payments

【解决方案1】：

您的代码有问题：

在同一个页面上绝不应该有多个具有相同id 的 HTML 元素，因此这是不正确的 HTML。（它不会破坏页面，但正如您在下一步中看到的那样，它会导致混乱）

<div id="card-number-element"></div>
<div id="card-number-element"></div>

document.getElementById 将始终只返回一个元素。所以document.getElementById("card-number-element") 只会返回第一个元素。即使有两个。

一种可能的解决方案：

使用唯一的id 值。喜欢card-number-element-1 和card-number-element-2
启用选择两个元素。所以也许我们将相同的class 添加到两个元素并使用getElementsByClasName 来选择它们。
现在剩下的唯一问题是cardNumberElement.mount 是如何工作的——它是否需要每个元素的唯一标识符？让我猜猜它可能。所以我将为每个元素创建一个唯一的 id 并将其传递给 mount 函数。

这是我的尝试。

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

<div id="card-number-element-1"></div>
<div id="card-number-element-2"></div>

<script>
var cardNumberElement = elements.create("cardNumber");
var elementsToMountTo = document.getElementsByClassName("card-number-element");

elementsToMountTo.forEach((element) => {
   cardNumberElement.mount("#" + element.id);
}
</script>

PS：我还没有研究过 Stripe 是如何工作的，所以我不知道如果你像这样运行两次 cardNumberElement.mount 行是否可以工作。

【讨论】：

【解决方案2】：

我曾与 Stripe 合作过几次，但以前没有这样做过，这可能对您有用或给您一个前进的想法..

html id 在页面上必须是唯一的。这就是为什么只制作第一个。

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

// first one
<div id="card-number-element-1"></div>


// another one
<div id="card-number-element-2"></div>

<script>
var cardNumberElement = elements.create("cardNumber");
if (document.getElementById("card-number-element-1")) {
  cardNumberElement.mount("#card-number-element-1");
}
if (document.getElementById("card-number-element-2")) {
  cardNumberElement.mount("#card-number-element-2");
}
</script>

这可能不适用于 Stripe，但不确定它们是否支持这样的多个元素。

【讨论】：

【解决方案3】：

条纹元素无法做到这一点。如果您尝试在同一页面上创建两个相同类型的元素（如card 元素），您将收到此错误：

Can only create one Element of type card

您将需要使用单个卡片元素、使用单独的页面、使用 <iframe> 元素或类似的东西作为解决方法。

【讨论】：