¿Cómo conectar Stripe a una tienda en línea hecha con Vue 2?

Eng/Spa 6-min

Hola 👋, en esta guía, te enseñaré cómo conectar Stripe a Vue 2. Esta integración es solo para carritos de compras, no para suscripciones. Si deseas verificar primero el 'backend' de este proyecto hazlo aquí: ¿Cómo Conectar Stripe a Django Rest framework?. Asumiremos que ya sabe cómo trabajar en un entorno Vue js. Si no tienes un proyecto, puedes copiar el mío aquí: Django Shopping Store.

¿Cómo Funciona Stipe?

Stripe recomienda que una vez sepas el subtotal de la compra, lo envíes junto con otros detalles a tu servidor. En tu servidor, calcula el total de la transacción utilizando el "item id" de cada producto, esto para evitar que personas inescrupulosas jueguen con los precios. Una vez tengas los cálculos envíalos a Stripe a través de la función paymentIntent.create(). En Stripe van a recibir la transacción, la marcan como incompleta y te devuelven en el objeto "payment intent" el "client secret". Este "client secret" es de suma importancia, envíalo a la interfaz (Vue js) y guárdalo en el "state". Más tarde, usaremos el client secret para montar el elemento de la tarjeta y que su cliente pueda completar la transacción. Recuerde, al final, borrar el state y el client secret de Stripe.

1. Configura el entorno de trabajo de Stripe.

Para comenzar con Stripe debes abrir una cuenta con Stripe, después de abrir su cuenta, vaya a la sección de desarrolladores y acceda a sus claves API.
En la sección de desarrolladores, encontrarás dos claves: "publishable key" y "secret key", cópialos en tu archivo .env.

frontend/.env

2. Integra Stripe en tu aplicación Vue 2.

• Una vez que haya abierto su cuenta con Stripe, copia el "script tag" de stripe en el "head" de index.html.

frontend/public/index.html

• Inmediatamente después de obtener el subtotal de la transacción, crea el "onclick event" para llamar al servidor y solicitar el payment intent. Usa la función paymentIntent() en diferentes partes de tu app, colocalo en el "login form" y el "guest form".

Para pasar las propiedades del Vue al servidor usamos como intermediario Vuex y Axios. Vuex es el manejador de "state" para aplicacciones de Vuejs y Axios el manejador de HTTP. En el siguiente código, extraiga del estado el objeto de usuario y el carrito de compras. Envíe al servidor el carrito de compras para calcular el total de la transacción según el número de id del producto. Después de enviar estos objetos, reciba la respuesta del servidor con el secreto del cliente y el cálculo de impuestos, envíelos a las mutaciones y guárdelos en el 'state'.

3. Monta el elemento de la tarjeta de Stripe.

Una vez tengamos el "client secret" en el "state" podemos utilizardo para montar el Stripe Card Element. El Card Element le mostrará al cliente el formulario en el cual este insertará su número de tarjeta de crédito. Recuerda que Stripe ya tiene el total de la compra. Con el Card Element, el cliente estará autorizando y finalizando la transacción.

Dentro del "script tag" de Vue, vamos a importar a Vuex para poder acceder al "client secret". Utilize su clave secreta pública de Stripe y la función window.Stripe() para obtener el Stripe Card Element. Su clave secreta pública debe almacenarse en el archivo .env; ¡nunca lo pongas directamente en el código! Una vez que obtengamos el Stripe Card Element, podemos modificar su apariencia Stripe appearance-api.

• La Función displayError() le va a mostrar al cliente si su tarjeta de crédito tiene errores como fondos insuficientes entre otros.

Finalmente enviamos la transacción a través de la función Submit(). Es importante destacar que /thankyou/ es la dirección URL de nuestra última ruta. Esta se encuentra en el directorio bajo Thankyou.vue. Este Proyecto usa Vue Router para moverse fácilmente entre páginas. Importe mapState de Vuex para extraer variables del state y enviarlos al objeto "shipping".

4. Extracción de propiedades de Stripe.

Si necesitas extraer información adicional del cliente, debes hacerlo al final en la página de Thankyou.vue. A través de la función de javascript URLSearchParams(), extraemos el payment_intent_client_secret del URL, este será utilizado por la función de Stripe retrievePaymentIntent() para poder accesar al objeto de la transacción y enviar las propiedades a nuestro servidor. Una vez enviados los valores, rescatamos la respuesta y si todo está bien, vamos a usar las variables de entorno COMMIT_CHECKOUT y CLIENT_SECRET para borrar el state.