Crear una tienda online moderna requiere mucho más que mostrar productos. También necesitas gestionar un carrito, procesar pagos y ofrecer una experiencia segura para los clientes. Una combinación muy potente para conseguirlo es Next.js + Stripe.
Next.js permite construir aplicaciones web completas utilizando React, mientras que Stripe proporciona herramientas para gestionar pagos online de forma segura.
1. Crear el proyecto
Comenzamos creando una aplicación con Next.js:
npx create-next-app@latest mi-tienda
cd mi-tienda
npm install stripe
Puedes organizar el proyecto utilizando componentes para productos, carrito y botones de compra. Por ejemplo, podrías tener una página principal donde se muestre el catálogo y una sección independiente para el carrito.
2. Crear el catálogo
Los productos pueden almacenarse inicialmente en un archivo, aunque en una tienda real lo recomendable es utilizar una base de datos.
Cada producto podría contener información como:
{
id: 1,
nombre: "Curso de JavaScript",
precio: 49000,
imagen: "/curso.jpg"
}
La interfaz de Next.js se encargará de mostrar estos productos y permitir que el usuario los agregue al carrito.
3. Crear el carrito
El carrito debe mantener los productos seleccionados y sus cantidades. Puedes utilizar React Context, Zustand u otra solución de gestión de estado.
Cuando el usuario termine su selección, tendrá un botón como “Finalizar compra”.
4. Integrar Stripe Checkout
Stripe Checkout permite crear una página de pago prediseñada, alojada por Stripe o integrada en tu aplicación. También admite pagos únicos y suscripciones.
En Next.js puedes crear una ruta del servidor que genere una sesión de Checkout:
const session = await stripe.checkout.sessions.create({
mode: "payment",
line_items: [
{
price: "price_xxxxxxxxx",
quantity: 1
}
],
success_url: "https://mitienda.com/exito",
cancel_url: "https://mitienda.com/cancelado"
});
La clave secreta de Stripe debe permanecer en el servidor y nunca exponerse en el navegador.
5. Confirmar el pago
Después del pago, Stripe puede devolver al cliente a una página de éxito. Sin embargo, para una tienda real es importante utilizar webhooks para recibir eventos de Stripe y confirmar en el servidor que el pago se completó correctamente.
Con esta información puedes actualizar el pedido, reducir el inventario y enviar una confirmación al cliente.
6. Llevar la tienda a producción
Antes de publicar la aplicación debes configurar las variables de entorno, utilizar las claves de producción de Stripe y probar diferentes escenarios de pago.
También puedes aprovechar las funciones de Stripe para métodos de pago adicionales, monedas, protección contra fraude y diferentes experiencias de Checkout.
Conclusión
Next.js + Stripe permite construir una tienda online moderna combinando una interfaz rápida con una infraestructura de pagos especializada. Puedes comenzar con un catálogo sencillo y posteriormente añadir base de datos, autenticación, inventario, cupones, pedidos y un panel administrativo.
El resultado es una arquitectura flexible que puede crecer junto con tu negocio.
