'How to appear two Stripe Element on a single page

I would like to use two payment forms(stripe.js) on the same html. Only one if can be specified, so the payment form that is called first will be appeared, but the another will not.

Is there any ways to implement?

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


Solution 1:[1]

Problems with your code:

  1. There should never be multiple HTML elements with the same id on the same page so this is incorrect HTML. (It will not break the page but as you see in the next step it'll cause confusion)
<div id="card-number-element"></div>
<div id="card-number-element"></div>
  1. document.getElementById will always just return a single element. So document.getElementById("card-number-element") will only return the first element. Even when there are two.

One possible solution:

  1. use unique id values. Like card-number-element-1 and card-number-element-2
  2. Enable selecting both elements. So maybe we add the same class to both elements and use getElementsByClasName to select them both.
  3. Now the only question that remains is how cardNumberElement.mount works - does it require a unique identifier per element? Let me just GUESS that it might. So I'm gonna have a unique id per element and pass that to the mount function.

Here's my attempt.

<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: I have not looked into how Stripe works so I dunno if the line cardNumberElement.mount will work if you run it two times like this.

Solution 2:[2]

This is not possible with Stripe Elements. If you try two create two of the same type of Element (like the card Element) on the same page you will get this error:

Can only create one Element of type card

You would need to use a single Card Element, use separate pages, use <iframe> elements, or something along those lines as a workaround.

Solution 3:[3]

I've worked with Stripe a few times but not done this before, this might work for you or give you an idea on moving forward..

The html id has to be unique on the page. That's why only the first one is getting made.

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

This might not work with Stripe however, not sure if they support multiple elements like this.

Solution 4:[4]

I did this by unmounting the current one and mounting the new one:

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
});

And here you will do similar to the previous one but this time, the first card-element will be shown and the second one will be disappeared

$('#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
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Justin Michael
Solution 3
Solution 4 kodfire

Related Questions