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

Question

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

有没有实现的方法？

The Stripe Element will be mounted to the first one.

<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>

Answer 1

我曾与 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，不确定它们是否支持这样的多个元素。

Answer 2

您的代码有问题：

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

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

document.getElementById 永远只是 return 一个元素。所以 document.getElementById("card-number-element") 只会 return 第一个元素。即使有两个。

一个可能的解决方案：

使用独特的 id 值。喜欢 card-number-element-1 和 card-number-element-2
启用select这两个元素。所以也许我们将相同的 class 添加到两个元素，并使用 getElementsByClasName 到 select 它们。
现在剩下的唯一问题是 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 行是否有效。

Answer 3

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

Can only create one Element of type card

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

Answer 4

我通过卸载当前的并安装新的来做到这一点：

stripe = Stripe(publicKey);
var elements = stripe.elements();
var card = elements.create('card', { style: {} });
card.mount('#card-element'); // <<--- By this line the card will be created


$('#some-button').on('click', function() {
  card.unmount(); // <<--- By this line the current card will be disappeared
  card.mount('card-element-2'); // <<--- And lastly by this line your second card-element will be created here
});

在这里你将做与上一个类似的事情，但这次，第一个 card-element 将显示，第二个将消失

$('#some-button').on('click', function() {
  card.unmount(); // <<--- By this line the second card will be disappeared
  card.mount('card-element'); // <<--- And lastly by this line your first card-element will be created here
});

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

How to appear two Stripe Element on a single page

html

javascript

stripe-payments

您的代码有问题：

一个可能的解决方案：