En este artículo, aprenderemos a integrar «Stripe Checkout » con React con Hooks y Node js. Sin embargo, si prefieres usar Angular, aquí tienes una guía que hemos creado para ello.
También te puede interesar: «Angular 12: características, desapreciaciones y migración»
¿Qué es Stripe Checkout?
Stripe Checkout es una página de pago totalmente responsiva y segura alojada por Stripe. Le permite recibir pagos rápidamente y eliminar la fricción de desarrollar una página de pago que cumpla las normas.
Objetivo
Hoy aprenderemos a:
1. Cómo crear un producto en el panel de Stripe.
2. Integrar ese producto en nuestro componente React js checkout.
3. Comuníquese correctamente con nuestro servidor y rediríjase a la página de pago de Stripe.
Requisitos previos
- Conocimientos básicos de React js y React Hooks.
- Nodejs versión 10 o posterior
- React 16.8 o posterior
Crear un producto
Sin embargo, antes de empezar a codificar, vamos a crear un producto de muestra que mostraremos en nuestra página de pago.
1. Crear una cuenta Stripe
Nota: Todos los datos y claves relacionados con el producto se crearán en «modo de prueba» para desarrolladores. Los datos confidenciales para producción deben guardarse de forma segura en sus archivos .env.
- Vaya al sitio web de Stripe y cree una cuenta.
- Al crear su cuenta, se le dirigirá a la página de su panel de control.
2. Crear un producto
Para ello, haga clic en el botón Productos y haga clic en el botón «Añadir producto». Puede rellenar los detalles del producto como se muestra a continuación.
Además, asegúrese de guardar el producto y copiar el ID de la API de precios para su uso posterior.
Integración de Stripe Checkout
La integración de nuestro producto Stripe requiere dos pasos: Configurar nuestro servidor node y llamar a la API de nuestro producto stripe en nuestra app React.
1. Crear-react-app
Vamos a crear nuestro proyecto usando create-react-app usando el comando de abajo:
npx create-react-app stripe-react-app2. Configurar un servidor Node Express
A continuación, tenemos que configurar nuestro servidor de nodos. Para ello, instalaremos express y simultáneamente. Concurrently nos permitirá ejecutar nuestro servidor node y nuestra aplicación React al mismo tiempo. npm i concurrently; npm i express
3. Instalar Stripe
Para utilizar Stripe en nuestra aplicación, instalaremos tres paquetes: stripe, react-stripe y stripe-js.
Aquí está la versión final de nuestro archivo package.json.
{
"name": "stripe-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.4.1",
"@stripe/stripe-js": "^1.17.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"concurrently": "^6.2.1",
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"stripe": "^8.169.0",
"web-vitals": "^1.0.1"
},
"homepage":"http://localhost:3000/",
"proxy": "http://localhost:5000",
"scripts": {
"start-client": "react-scripts start",
"start-server": "node server.js",
"start": "concurrently "yarn start-client" "yarn start-server",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Observará cómo establecemos valores para proxy y página de inicio. Del mismo modo, también utilizamos concurrentemente para iniciar nuestro servidor node y react app al mismo tiempo.
7. Servidor.js
Crear un archivo server.js en nuestro directorio home. Dentro de nuestro archivo server.js, vamos a
- Instanciar los paquetes necesarios
- Crear una ruta API: create-checkout-session. En esta ruta, definiremos
payment_method_types, price, quantity, and the success_url and cancel_url
La versión final del archivo server.js será
const stripe = require('stripe')('sk_test_***************************************');
const express = require('express');
const app = express();
app.use(express.static('.'));
const YOUR_DOMAIN = 'http://localhost:3000/checkout';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: [
'card'
],
line_items: [
{
// TODO: replace this with the `price` of the product you want to sell
// price: '{{PRICE_ID}}',
price: 'price_*************',
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}?success=true`,
cancel_url: `${YOUR_DOMAIN}?canceled=true`,
});
res.redirect(303, session.url)
});
app.listen(5000, () => console.log('Running on port 5000'));
Puedes encontrar tu clave API secreta en tu panel de control. Empieza por: sk_test. También puede utilizar el ID de precio de su producto en este archivo.
Frontend: React App
En esta sección, construiremos nuestros componentes frontales. Nuestro frontend constará de nuestra página principal que albergará la ficha de producto y una página de resultados que mostrará si la compra se ha realizado correctamente o no.
8. Tarjeta de producto
- En primer lugar, crearemos un componentes dentro de la carpeta src que albergará los archivos de nuestro frontend.
- A continuación, cree los archivos ProductDisplay.js y Message.js . El ProductDisplay.js mostrará la ficha del producto y el Message.js mostrará el mensaje obtenido de nuestro Stripe Checkout.
export const ProductDisplay = () => (
<div className="wrapper">
<div className="product-img">
<img
src="https://cdn.pixabay.com/photo/2017/12/20/09/36/orchid-3029574_1280.jpg"
alt="Orchid Flower"
height="420"
width="327"
/>
</div>
<div className="product-info">
<div className="product-text">
<h1>Orchid Flower</h1>
<h2>POPULAR HOUSE PLANT</h2>
<p>
The Orchidaceae are a diverse and
<br />
widespread family of flowering plants,
<br />
with blooms that are often
<br />
colourful and fragrant.{" "}
</p>
</div>
<form action="/create-checkout-session" method="POST">
<div className="product-price-btn">
<p>
<span>$20</span>
</p>
<button type="submit">buy now</button>
</div>
</form>
</div>
</div>
);
ProductDisplay.jsexport const Message = ({ message }) => (
<section>
<p>{message}</p>
<a className="product-price-btn" href="/">
<button type="button">Continue</button>
</a>
</section>
);
Message.js Y aquí está nuestro archivo App.js donde ambos componentes son llamados.
import React, { useState, useEffect } from "react";
import "./App.css";
import { ProductDisplay } from "./components/ProductDisplay";
import { Message } from "./components/Message";
export default function App() {
const [message, setMessage] = useState(");
useEffect(() => {
// Check to see if this is a redirect back from Checkout
const query = new URLSearchParams(window.location.search);
if (query.get("success")) {
setMessage(" Yay! Order placed! You will receive an email confirmation confirming your order.");
}
if (query.get("canceled")) {
setMessage(
"Order canceled -- please try again."
);
}
}, []);
return message ? <Message message={message} /> : <ProductDisplay />;
}
Estructura del proyecto
Esta es la estructura final del proyecto:
Ejecute npm start para iniciar el proyecto.
Puedes encontrar un par de números de tarjeta de prueba proporcionados por Stripe aquí que puedes utilizar para probar la página de pago de Stripe.
Resumen
Ahí lo tienen. Con Stripe Checkout y React, puedes crear una experiencia de comercio electrónico perfecta para tus clientes.
Espero que haya disfrutado leyendo este artículo. No dude en compartir y añadir sus valiosos comentarios.
Siempre estamos deseosos de escuchar las opiniones de otros desarrolladores.
Unimedia Technology
Aquí en Unimedia Technology tenemos un equipo de React Developers que pueden ayudarte a desarrollar tus integraciones de stripe más complejas.
