Cómo agregar un campo adicional en formulario de Checkout de Stripe

jsanchez · 20 Feb 2021

Hola a todos,

Os escribo porque me he estado peleando un buen rato con este asunto y no termino de encontrarle una solución... a ver si alguien puede ayudarme!

Desde la web oficial de Stripe, a la hora de generar un formulario de Checkout, cuando creo un producto, posteriormente le doy a "Obtén el fragmento de código de Checkout" y funciona todo OK. El problema que tengo es que en el formulario que aparece por defecto solo me aparece para que el cliente cumplimente el campo del "correo electrónico".

Necesito agregar un campo más y no lo consigo. Entiendo que debería de ser desde la opción del "Metadatos"... pero no termino de conseguirlo 🙁

¿alguien se ha tropezado con esto? Os pongo una foto donde indico que es lo que intento hacer...

BotBeta · 3 Ene 2024

jsanchez dijo:
Hola a todos,

Os escribo porque me he estado peleando un buen rato con este asunto y no termino de encontrarle una solución... a ver si alguien puede ayudarme!

Desde la web oficial de Stripe, a la hora de generar un formulario de Checkout, cuando creo un producto, posteriormente le doy a "Obtén el fragmento de código de Checkout" y funciona todo OK. El problema que tengo es que en el formulario que aparece por defecto solo me aparece para que el cliente cumplimente el campo del "correo electrónico".

Necesito agregar un campo más y no lo consigo. Entiendo que debería de ser desde la opción del "Metadatos"... pero no termino de conseguirlo 🙁

¿alguien se ha tropezado con esto? Os pongo una foto donde indico que es lo que intento hacer...

Hola,

Para agregar un campo adicional en el formulario de Checkout de Stripe, puedes utilizar la opción de "Metadatos" como mencionaste. Sin embargo, debes tener en cuenta que los metadatos son información adicional que se guarda con la transacción, no campos que se muestran en el formulario de Checkout.

Si necesitas agregar un campo adicional en el formulario de Checkout para que el cliente lo complete, tendrías que utilizar la API de Stripe para crear un formulario personalizado.

Aquí te muestro un ejemplo básico de cómo podrías hacerlo utilizando HTML y JavaScript:

1. Agrega un formulario en tu página con los campos que desees, por ejemplo:

Insertar CODE, HTML o PHP:

<form id="stripe-form">
   <input type="text" id="nombre" name="nombre" placeholder="Nombre">
   <input type="email" id="correo" name="correo" placeholder="Correo electrónico">
   <button type="button" id="checkout-button">Pagar</button>
</form>

2. Luego, agrega el siguiente código JavaScript para interactuar con la API de Stripe:

Insertar CODE, HTML o PHP:

<script src="https://js.stripe.com/v3/"></script>
<script>
   var stripe = Stripe('TU_CLAVE_PUBLICA_DE_STRIPE');
   var elements = stripe.elements();

   var style = {
      base: {
         fontSize: '16px',
         color: '#32325d',
      }
   };

   var cardElement = elements.create('card', { style: style });
   cardElement.mount('#card-element');

   document.getElementById('checkout-button').addEventListener('click', function () {
      stripe.createToken(cardElement).then(function (result) {
         if (result.error) {
            // Manejo de errores
            console.error(result.error.message);
         } else {
            // Envío del token a tu backend para procesar el pago
            fetch('/procesar-pago', {
               method: 'POST',
               headers: {
                  'Content-Type': 'application/json',
               },
               body: JSON.stringify({
                  nombre: document.getElementById('nombre').value,
                  correo: document.getElementById('correo').value,
                  token: result.token.id,
               }),
            }).then(function (response) {
               return response.json();
            }).then(function (data) {
               // Manejo de la respuesta del backend
               console.log(data);
            });
         }
      });
   });
</script>

Recuerda reemplazar 'TU_CLAVE_PUBLICA_DE_STRIPE' con tu clave pública de Stripe y actualizar la URL y los datos que se envían al backend según tus necesidades.

Espero que esto te ayude a agregar un campo adicional en el formulario de Checkout de Stripe. Si tienes alguna pregunta adicional, no dudes en preguntar.

Cómo agregar un campo adicional en formulario de Checkout de Stripe

jsanchez

Adjuntos

BotBeta