¿Cómo construir un sistema de suscripción con Stripe y Vue js?

Por:

Denisse Abreu
Abril 18, 2022 12pm ET

Eng/Spa 5-min

# Configure el entorno de Stripe # Integra Stripe en tu aplicación Vue js # Monte el elemento de la tarjeta de Stripe

Hola 🖐🏼, en esta guía, te mostraré cómo crear un sistema de suscripción con Vue js y Stripe. Nuestro entorno de trabajo es Vue js Options API, Vue Router y Express js como administrador de backend. Para la UI/UX, estoy usando Vuetify. Si está buscando la integración de Vue 3 Composition API, consulta este tutorial: Cree un sistema de suscripción con Vue 3, Vite y Stripe. Si aún no tienes proyecto, puedes copiar mi repositorio Vue 2 aquí: Vue Stripe Subscriptions.

Configure el entorno de Stripe.

Primero, configuremos nuestro entorno. Copie en su archivo env su clave publicable de stripe; puede encontrar esta clave en la sección del desarrollador del Stripe 'Dashboard'. Crea dos productos en la sección de productos del 'Dashboard', el plan Básico por cinco dólares y el plan Premium por diez. Copie los ID de los productos en el archivo env.

Stripe dashboard

Stripe Plan Dashboard

client/.env

Una vez que haya abierto su cuenta con Stripe , copie la etiqueta del script en el encabezado de index.html.

client/public/index.html

Integra Stripe en tu aplicación Vue js.

Nuestro primer movimiento para integrar Stripe a Vue js será realizando el evento 'on-click' cuando el cliente quiera suscribirse. Recopilaremos el correo electrónico y el nombre completo del cliente; en producción, debe recopilar información adicional, como la dirección del cliente.

views/Home.vue

En el siguiente bloque 'try and catch', enviamos, al backend, la información personal del cliente que recopilamos del formulario de registro. Si recibimos una respuesta, empujaremos el plan 'view' con el id del cliente como parámetro. Consulte los Vue Router Docs sobre cómo configurar el paso de parámetros entre 'views'.

views/Home.vue

Cree un archivo en el src, el trabajo de este archivo es enviar solicitudes http al backend con Axios.

src/post-service.js

Después de recibir la respuesta del servidor con la identificación del cliente, Vue Router impulsará el segundo paso; su cliente deberá elegir un plan. Cree dos botones con dos eventos de clic diferentes. Un botón será para suscribirse al plan de cinco dólares y la otra al plan de diez dólares.

views/Plan.vue

La función 'createSubscription' recibirá los parámetros del plan que elija el cliente más los 'props' del paso uno. Esta función enviará, al backend, el id del cliente y el id del precio y creará la suscripción; Si los datos de respuesta son buenos, el 'checkout view' se impulsará con parámetros.

views/Plan.vue

Monte el elemento de la tarjeta de Stripe.

Este es el último paso de la integración frontend, monta el elemento de la tarjeta y crea el 'Submit event'.

views/Checkout.vue

Utilice el secreto del cliente para acceder a la función de Stripe "confirmCardPayment". Dentro de esta función, envíe el método de pago y la información de facturación del cliente; Consulte la lista de parámetros que puede enviar a stripe. Si la suscripción es exitosa, se impulsará el 'ThankYou view' con el id de la suscripción como parámetro.

views/Checkout.vue

Chequea el backend aquí: Sistema de suscripción con Stripe y Express