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>

CodePudding user response：

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.

CodePudding user response：

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>

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

CodePudding user response：

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.