Estoy migrando una aplicación del elemento 'tarjeta' de Stripe al elemento 'pago' más nuevo.
Si entiendo correctamente, ahora se requiere el secreto del cliente de PaymentIntent para crear y montar el elemento de pago. Para poder crear el PaymentIntent necesitamos que se haya creado el cliente y el importe.
De los documentos:
Previamente:
const stripe = Stripe('pk_test_qblFNYngBkEdjEZ16jxxoWSM'); const elements = stripe.elements();Ahora:
const stripe = Stripe('pk_test_qblFNYngBkEdjEZ16jxxoWSM'); const options = { clientSecret: '{{CLIENT_SECRET}}', }; const elements = stripe.elements(options);Mi pregunta: la aplicación es una página única en la que los clientes ingresan detalles, seleccionan cantidades (boletos) e ingresan detalles de la tarjeta. Supongo que esto no es factible con el nuevo elemento de pago, ya que el cliente no podrá modificar sus detalles o cambiar la cantidad después de que se haya creado el elemento de pago.
¿Me equivoco?
Muchas gracias.
Imagen del formulario existente para el contexto:

Correcto, en este flujo debe recopilar los detalles de la tarjeta en último lugar una vez que el cliente esté listo para finalizar su pago. Este sería el enfoque recomendado en el que no les permite cambiar la cantidad en ese momento y cargar su tarjeta a medida que recopila los detalles de la tarjeta.
De lo contrario, la mejor opción es permanecer en el elemento de la tarjeta para recopilar los detalles de su tarjeta por adelantado y solo confirmar en el siguiente paso una vez que estén listos para finalizar.
Solo me pregunto si alguna vez encontraste una solución. Estoy en el mismo barco, y este hilo es lo único que encontré en Google para este escenario.
¿Es posible falsificar un paymentIntent de pago en la carga de la página y luego crear uno nuevo/actualizar con información del formulario?
Editar:
Mala redacción anterior. Nada falso en esto. Simplemente cree la intención de paymentIntent inicial en la carga de la página. Utilice el clientSecret devuelto al inicializar elements y paymentElement .
// setup Stripe elements fetch('/config.php', { method: 'get', headers: { 'Content-Type': 'application/json' } }) .then((response) => { return response.json(); }) .then((response) => { return setupElements(response.publishableKey) }) var setupElements = function(publishableKey){ stripe = Stripe(publishableKey); // endpoint to create PI and return client secret fetch('/setup-elements.php', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify(order) }) .then(function (response) { return response.json() }) .then(function (data) { elements = stripe.elements({clientSecret:data.clientSecret}); const paymentElement = elements.create("payment"); paymentElement.mount("#payment-element"); }) } El elemento de pago debe mostrarse ahora. Actualice/etc. el paymentIntent según sea necesario.