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:
- Ve a la Sitio web de rayas 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" al archivo .env 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.
banda de instalación de npm
Importe la biblioteca de Stripe a su página de componentes de pago.
importar Raya de'raya';
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.
constante raya = requerir('raya')(proceso.env. RAYA_SECRETO_CLAVE);
En la función del controlador, obtenga los elementos para verificar desde los parámetros del cuerpo.
exportarpor defectoasíncronofunciónmanipulador(requerimiento, res) {
constante { elemento } = req.cuerpo;
};
Cree un objeto de sesión de pago para la función del controlador y pase los elementos.
constante sesión = esperar stripe.checkout.sessions.create({
tipos_de_método_de_pago: ['tarjeta'],
artículos de línea: [
artículo,
],
modo: 'pago',
URL_de_éxito: `${req.headers.origen}/?success=true`,
cancel_url: `${req.headers.origen}/?canceled=true`,
});
Esto es lo que significan los nodos que está pasando al objeto de sesión:
- tipos_de_método_de_pago: Los tipos de método de pago que acepta la sesión de pago. Explore la lista de métodos de pago disponibles en el Documentación de bandas.
- artículos de línea: Una lista de artículos que el usuario está comprando.
- modo: El modo de la Sesión de Pago. Si los elementos de pago incluyen al menos un elemento recurrente, pase "suscripción".
- éxito_url: URL Stripe redirigirá a los usuarios si el pago es exitoso
- cancelar_url: La URL Stripe redirigirá a los usuarios si cancelan el pago.
En total, el archivo checkout-session.js debería verse así:
exportarpor defectoasíncronofunciónmanipulador(requerimiento, res) {
si (método requerido 'CORREO') {
constante { carrito } = req.cuerpo;intentar {
constante sesión = esperar stripe.checkout.sessions.create({
artículos de línea: [
carro
],
modo: 'pago',
URL_de_éxito: `${req.headers.origen}/success`,
cancel_url: `${req.headers.origen}/cancele`,
});
res.redireccionar(303, sesión.url);
} atrapar (Error) {
res.status (err.statusCode || 500).json (err.mensaje);
}
} demás {
res.setHeader('Permitir', 'CORREO');
res.status(405).fin('Método no permitido');
}
}
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.
Mira esta publicación en creando rutas API en Next.js para obtener una explicación más detallada de las rutas 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 instalar @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.
importar { carga de banda } de'@stripe/stripe-js';
constante stripePromise = cargarStripe(
proceso.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.
exportarpor defectofunciónVerificar({carro}) {
constante handleCheckout = asíncrono () => {
intentar {
constante raya = esperar rayaPromesa;constante sesión de pago = esperar axios.post("/api/sesión-de-pago", {
carro,
});constante resultado = esperar raya.redirectToCheckout({
ID de sesión: checkoutSession.data.id,
});
si (resultado.error) {
alerta (resultado.error.mensaje);
}
} atrapar (error) {
consola.log (error);
}
};
devolver (
</div>
);
}
Esta función utiliza 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.
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.
exportarpor defectofunciónÉxito() {
devolver<división>Pagar con éxitodivisión>;
}
En pages/cancel.js, agregue el componente de cancelación.
exportarpor defectofunciónCancelar() {
devolver<división>Ocurrió un error durante el pagodivisión>;
}Ahora, Stripe redirigirá a cualquiera de estas páginas según el estado de pago.
Si está utilizando Next.js 13, consulte este tutorial sobre cómo funciona la carpeta de aplicaciones en Next.js 13 para cambiar desde 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.