Implementar Stripe en React

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo implementar la plataforma de pago Stripe en React.

Stripe es una Plataforma de pago segura para realizar transacciones o micro-transacciones online. Nos evitará tener que almacenar datos de tarjetas de crédito y ayudará a cumplir con la GDPR.

Otra de sus ventajas es la comisión baja que cobra en cada transacción.

Lo primero que vamos a hacer es crear una cuenta en Stripe. Vamos a la página y creamos la cuenta.

Recomiendo que utilices modo prueba para las primeras transacciones.

Ahora iremos al apartado de Desarrolladores:

Y claves API:

Crearemos la clave publicable y la secreta, y las copiaremos.

Ahora vamos a React e instalamos la dependencia:

npm i @stripe/react-stripe-js --save

Una vez instalado, vamos a crear un checkout para ello tenemos que crear un nuevo producto.

Vamos a Stripe y abrimos el «Catálogo de Productos»

Rellenamos todos los datos solicitados:

Y copiamos el código de pago generado en el producto price_XXXXXXXXXXXX.

Ahora vamos a nuestro React y creamos una función nueva llamada Stripe.tsx

import { loadStripe } from '@stripe/stripe-js';

const test = true;

function getStripePublicKey() {
    if (test) {
        return "pk_TEST"
    } else {
        return "pk_live_REAL"
    }
}

export enum Productos {
    PRODUCTO = "producto",
}

function obtenerProducto(producto: Productos) {
    if (test) {//Tests
        switch (producto) {
            case Productos.PRODUCTO:
                return "price_TEST";
        }
    } else {
        switch (producto) {
            case Productos.PRODUCTO:
                return "price_REAL";
        }
    }
}

export function pago_producto(producto: Productos) {
    const stripe = loadStripe(getStripePublicKey());
    const usarProducto = obtenerProducto(producto);

    stripe.then((stripeData) => {
        stripeData?.redirectToCheckout({
            lineItems: [{ price: usarProducto, quantity: 1 }],
            mode: 'payment',
            successUrl: 'https://URL_PAGO_REALIZADO',
            cancelUrl: 'https://URL_PAGO_CANCELADO',
        });
    });

}

He creado una estructura enum para diferenciar los distintos productos que se puedan tener.

Luego he creado una variable que definirá el entorno de prueba true/false y según esa variable devolverá un código de compra y conexión a Stripe.

Finalmente indico que es de tipo payment (mode), puede ser payment/subscription

Debes cambiar successUrl y cancelUrl con dos URLs dónde indiques el estado del pago.

Y para usarlo pondremos:

pago_producto(Producto.PRODUCTO);

En nuestro caso, en modo prueba, nos abrirá la compra:

Para que funcione en modo producción tendremos que añadir nuestro dominio final como redirección permitida dentro de Stripe. Para ello vamos a https://dashboard.stripe.com/settings/checkout

Ahora tendremos que validar las compras. Para ello os enseño en el siguiente tutorial cómo validar las compras con PHP usando un webhook.