Integración de Stripe Checkout con React

stripe + react
Este post se lo mostrará: Cómo crear un producto en su panel de Stripe. Integramos ese producto en nuestro componente React js checkout Se comunica correctamente con nuestro servidor y redirige a la página de pago de Stripe.

Índice

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.
/&gt;</figure>
</div>

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.

width=
width=

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-app

2. 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.js
export 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:

width=

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.

Demo

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.

Recuerde que en Unimedia somos expertos en tecnologías emergentes, así que no dude en ponerse en contacto con nosotros si necesita asesoramiento o servicios. Estaremos encantados de ayudarle.

Unimedia Technology

Su socio de desarrollo de software

Somos una consultora tecnológica de vanguardia especializada en arquitectura y desarrollo de software a medida.

Nuestros servicios

Suscríbase a nuestras actualizaciones

Mantente al día, informado y ¡demos forma juntos al futuro de la tecnología!

Lecturas relacionadas

Profundice con estos artículos

Descubra más opiniones expertas y análisis en profundidad de Unimedia en el ámbito del desarrollo de software y la tecnología.

Let’s make your vision a reality!

Simply fill out this form to begin your journey towards innovation and efficiency.

Hagamos realidad tu visión.

Sólo tienes que rellenar este formulario para iniciar tu viaje hacia la innovación y la eficiencia.