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

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.

• 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.

• Cree el archivo .env en la raíz del Mini Monster Store y copie su clave publicable de Stripe.

• Abra su terminal e instale la librería React 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.

• 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.

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.

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.

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.

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.

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.

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!