Cómo agregar Stripe Checkout a una aplicación Next.js
Stripe es una plataforma de procesamiento de pagos que le permite agregar una página de pago preconstruida a un sitio web y aceptar y administrar pagos en línea. Es muy popular debido a su facilidad de uso, documentación extensa, soporte para pagos locales, opciones de personalización y marca, suscripciones, facturación y prevención de fraude.
Con Stripe, puede aceptar pagos de una variedad de fuentes, incluidas tarjetas de crédito y débito, Apple Pay y Google Pay.
Agregar Stripe Checkout a una aplicación Next.js
Puede integrar Stripe Checkout con aplicaciones creadas con diferentes tecnologías, incluida Next.js.
Este tutorial asume que tiene un sitio de comercio electrónico Next.js configurado y solo proporciona una guía sobre cómo agregar el pago de Stripe al sitio.
Configuración de una cuenta de Stripe y recuperación de claves API
Para usar Stripe Checkout, debe crear una cuenta de Stripe y obtener las claves API. Las claves de API constan de una clave publicable y una clave secreta, que utilizará para autenticar las solicitudes de su aplicación a la API de Stripe.
Siga estos pasos para configurar una cuenta de Stripe:
- Vaya al sitio web de Stripe y haga clic en el botón «Registrarse».
- Ingrese su correo electrónico, nombre completo, país y contraseña, y haga clic en el botón «Crear cuenta».
- Verifique su correo electrónico siguiendo las instrucciones en el correo electrónico que Stripe le enviará.
- En el panel de Stripe, haga clic en «Activar pagos» y responda las preguntas para completar el proceso de configuración de la cuenta. Estas preguntas pueden ser sobre el nombre comercial, la dirección y la información bancaria. Para fines de desarrollo, utilice el modo de prueba.
- Copie las claves API de la pestaña «Desarrolladores» en el. env archivo en la carpeta de su aplicación.
Ahora podrá acceder a la cuenta de Stripe utilizando las claves API.
Instalación del paquete Stripe npm
Ejecute este comando para instalar el paquete Stripe npm.
npm install stripe
Importe la biblioteca de Stripe a su página de componentes de pago.
import Stripe from 'stripe';
En la carpeta API, cree un nuevo archivo llamado archivo checkout-session.js. Inicialice el objeto de Stripe con las claves de API que recuperó de su panel de control de Stripe.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
En la función del controlador, obtenga los elementos para verificar desde los parámetros del cuerpo.
export default async function handler(req, res) {
const { item } = req.body;
};
Cree un objeto de sesión de pago para la función del controlador y pase los artículos.
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
item,
],
mode: 'payment',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Esto es lo que significan los nodos que está pasando al objeto de sesión:
- Payment_method_types : los tipos de método de pago que acepta la sesión de pago. Explore la lista de métodos de pago disponibles en la documentación de Stripe .
- line_items : una lista de artículos que el usuario está comprando.
- mode : El modo de la sesión de pago. Si los elementos de pago incluyen al menos un elemento recurrente, pase «suscripción».
- success_url : URL Stripe redirigirá a los usuarios si el pago se realiza correctamente
- cancel_url : la URL Stripe redirigirá a los usuarios si cancelan el pago.
En total, el archivo checkout-session.js debería verse así:
export default async function handler(req, res) {
if (req.method === 'POST') {
const { cart } = req.body;
try {
const session = await stripe.checkout.sessions.create({
line_items: [
cart
],
mode: 'payment',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
Esta función ahora usa el intento/atrapar para redirigir a los usuarios cuando ocurre un error durante el pago. Ahora que ha creado la ruta API que procesará el pago, el siguiente paso es crear un componente de pago para manejar el proceso de pago.
Consulte esta publicación sobre la creación de rutas de API en Next.js para obtener una explicación más detallada de las rutas de API de Next.js.
Creación de un componente de pago
Para procesar el pago, debe instalar la biblioteca @stripe/stripe-js mediante NPM.
npm install @stripe/stripe-js
La biblioteca @stripe/stripe-js es una utilidad de carga que lo ayudará a cargar la instancia de Stripe.js.
Una vez que finalice la instalación, cree un nuevo archivo en su directorio /components llamado /components/checkout.js. Luego llame a la función loadstripe desde la biblioteca @stripe/stripe-js, pasando la clave publicable como argumento.
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() devuelve una promesa que se resuelve con un objeto Stripe recién creado una vez que se ha cargado Stripe.js.
A continuación, agregue una función para crear una sesión de pago en el componente.
export default function Checkout({cart}) {
const handleCheckout = async () => {
try {
const stripe = await stripePromise;
const checkoutSession = await axios.post("/api/checkout-session", {
cart,
});
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
} catch (error) {
console.log(error);
}
};
return (
<div>
</div>
);
}
Esta función usa Axios para llamar a la API que creó en la carpeta /api para recuperar la sesión de pago.
Agregue un botón de pago en la declaración de devolución que activará la función handleCheckout cuando se haga clic.
<button onClick={handleCheckout}>
Checkout
</button>
Puede llamar al componente de pago en la página del carrito.
Manejo de las redirecciones desde Stripe
En la ruta de la API de pago, definió una URL de éxito y una URL de cancelación que debe redirigir a un usuario cuando el proceso es exitoso o falla. La URL de cancelación se asigna a la ruta /cancel, mientras que la URL de éxito se asigna a la ruta /success. Agregue dos componentes en la carpeta /pages llamados éxito y cancele para manejar estas URL.
En pages/success.js, agregue el componente de éxito.
export default function Success() {
return <div>Checkout out successfully</div>;
}
En pages/cancel.js, agregue el componente de cancelación.
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
Ahora, Stripe redirigirá a cualquiera de estas páginas según el estado de pago.
Si usa Next.js 13, consulte este tutorial sobre cómo funciona la carpeta de la aplicación en Next.js 13 para cambiar de la carpeta /pages.
Opciones de personalización adicionales para la página de pago
Desde el panel de control de Stripe, puede personalizar la página de pago para que coincida con el aspecto de su marca. Puede agregar un logotipo, un ícono, un color de marca, un color de acento e incluso usar su propio dominio personalizado. Además, al crear la sesión de pago, puede agregar los métodos de pago que prefiera y también especificar el idioma que Stripe debe mostrar en la página de pago. Todas estas opciones le permiten personalizar el proceso de pago para adaptarlo a su aplicación.
¿Por qué usar Stripe para la página de pago?
Si bien puede crear su propio servicio de procesamiento de pago, usar una plataforma de pago como Stripe suele ser una mejor opción. Stripe Checkout lo ayuda a reducir el tiempo de desarrollo, lo que le permite comenzar a aceptar pagos en poco tiempo.
Además, obtiene funciones adicionales como el cumplimiento de PCI, la recuperación del carro, las capacidades de descuento y la capacidad de recopilar información de envío y enviar facturas posteriores al pago.
Deja una respuesta