Conecta Stripe a un React TypeScript E-commerce

Conecte Stripe a un comercio electrónico con React y TypeScript.

Denisse Avatar

Por:

Denisse Abreu
Agosto 16, 2022 8pm ET

Eng/Spa 7-min

Hola 👋🏼, en este tutorial, te enseñaré cómo conectar Stripe a una tienda de compras React TypeScript. Para esta integración, deberá sentirse cómodo usando React y TypeScript y, por supuesto, tener un sitio web de comercio electrónico. Nuestro entorno de trabajo es React TypeScript, React Router Dom v6 y Express js como administrador de backend. Si no tiene un sitio web de comercio electrónico, puede dar fork a mi Mini Monster Store en mi repositorio de Github.

  • Demo de la integración

Configura tu cuenta de Stripe.

Para comenzar con Stripe, debe 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: clave publicable (publishable key) y clave secreta (secret key); copie la clave secreta en el archivo .env de su servidor.

.env

Stripe dashboard

Conecte el servidor Express js.

Primero, comience instalando la librería de Stripe; Usaré Express js como servidor, pero puede usar su servidor preferido. Consulta la guía de Stripe para los diferentes lenguajes de servidor que puede utilizar.

Instalar a través de npm
npm install stripe --save

Pegue el siguiente código en su index.ts en la raíz del servidor Express js. Si no sabe cómo configurar un servidor Express js con TypeScript, vaya a mi tutorial Crea un proyecto React y Express js con TypeScript y siga la primera parte de cómo configurar Express js TypeScript.

index.ts
  • Cuando su servidor esté listo, abra su terminal y ejecute: npm run dev y comience a escuchar las Solicitudes de API del lado del cliente.

Configura la integración de Stripe.

  • Cree el archivo .env en la raíz del Mini Monster Store y copie su clave publicable de Stripe.
.env
  • Abra su terminal e instale la librería React Stripe.js.
Instalar a través de npm
npm install --save @stripe/react-stripe-js @stripe/stripe-js
  • Vaya a la carpeta Utils y cree la carpeta Stripe; dentro de esta carpeta cree payment-intent-utils.ts; este archivo se encargará de hacer la llamada API al servidor.
Git Bash
$ cd utils $ mkdir stripe $ cd stripe $ touch payment-intent-utils.ts
  • Pegue el siguiente código dentro del archivo payment-intent-utils.ts; Este archivo contiene la llamada Fetch() al servidor con la URL y el monto total de la transacción multiplicado por 100. Recuerda, Stripe no aceptará números decimales.
utils/stripe/payment-intent-utils.ts

Vaya al subtotal card, importe la función paymentIntent() que se encuentra en la carpeta utils, y copie el try and catch dentro de la constante checkout. cuando el cliente haga clic en el botón subtotal, se disparará una llamada al servidor solicitando la clave secreta del cliente. Si la llamada tiene éxito, su cliente será redirigido al checkout route con el secreto del cliente como parámetro. Esta integración utiliza React Router para moverse fácilmente entre las páginas de la tienda de compras.

components/subtotal-card/subtotal-card.tsx

Abra el checkout route e importe la función de react-router-dom useLocation(). Esta función se encargará de obtener el secreto de cliente que enviamos desde el subtotal card; pase este client_secret como prop al checkout card.

routes/checkout.tsx

Vaya a la carpeta components y cree la carpeta payment-form; dentro de esa carpeta, cree el archivo payment-form.tsx. Este archivo será el encargado de mostrar el Elemento de Pago Stripe al cliente. Hay dos componentes input en el formulario de pago solo para mostrar cómo recopilar datos del cliente; Si no sabe cómo hacer componentes input reusables, vaya a la tercera parte de mi tutorial Crea un proyecto React y Express js con TypeScript.

Git Bash
$ cd components $ mkdir payment-form $ cd payment-form $ touch payment-form.tsx
components/payment-form/payment-form.tsx

Ahora viene la parte más difícil; Vaya al checkout card e importe Elements, loadStripe y el PaymentForm; obtenga el client_secret que enviamos desde el checkout route y utilícelo para mostrarle a su cliente el elemento de pago de Stripe. Personaliza el Stripe Appearance para que coincida con su UI.

components/checkout-card/checkout-card.tsx

Después de enviar el formulario de pago, debemos verificar el estado del pago de Stripe. Cree el archivo payment-status.ts y colóquelo dentro de la carpeta Stripe en utils. Este código ejecutará una serie de switch cases para establecer el mensaje de error correspondiente y lógica adicional como vaciar el carrito en una transacción exitosa o retroceder a la página anterior si hay un error.

Git Bash
$ cd utils $ cd stripe $ touch payment-status.ts
utils/stripe/payment-status.ts

La última parte, ¡me alegro que hayas llegado hasta aquí! Vaya al thankyou route e importe la función payment status y colóquela dentro del componente Stripe Elements; hice una alerta sencilla para mostrar al cliente el estado del pago; Puedes hacer algo diferente aquí, ¡hasta la próxima!

routes/thankyou.tsx