Me gustaría usar dos formas de pago (stripe.js) en el mismo html. Solo se puede especificar un if, por lo que aparecerá el formulario de pago que se llama primero, pero el otro no.
¿Hay alguna manera de implementar?
El elemento Stripe se montará en el primero.
<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>Esto no es posible con Stripe Elements. Si intenta crear dos elementos del mismo tipo (como el elemento de la card ) en la misma página, obtendrá este error:
Can only create one Element of type card Necesitaría usar un solo elemento de tarjeta, usar páginas separadas, usar elementos <iframe> o algo similar como solución alternativa.
He trabajado con Stripe varias veces, pero no lo había hecho antes, esto podría funcionar para usted o darle una idea sobre cómo seguir adelante.
La identificación html tiene que ser única en la página. Por eso solo se fabrica el primero.
<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>Sin embargo, es posible que esto no funcione con Stripe, no estoy seguro de si admiten múltiples elementos como este.
id en la misma página, por lo que este es un HTML incorrecto. (No romperá la página, pero como verá en el siguiente paso, causará confusión) <div id="card-number-element"></div> <div id="card-number-element"></div>document.getElementById siempre devolverá un solo elemento. Entonces document.getElementById("card-number-element") solo devolverá el primer elemento. Incluso cuando hay dos.id únicos. Como elemento-número-de-tarjeta card-number-element-1 card-number-element-2class a ambos elementos y usemos getElementsByClasName para seleccionarlos a ambos.cardNumberElement.mount : ¿requiere un identificador único por elemento? Déjame ADIVINAR que podría ser. Así que tendré una id única por elemento y la pasaré a la función de mount .Aquí está mi intento.
<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> PD: No he investigado cómo funciona Stripe, así que no sé si la línea cardNumberElement.mount funcionará si la ejecutas dos veces así.