Saltar al contenido principal

​
Descripción General

La plantilla mínima de Next.js proporciona un punto de partida listo para usar para integrar Dodo Payments con tu aplicación Next.js. Esta plantilla incluye sesiones de pago, manejo de webhooks, portal de clientes y componentes de UI modernos para ayudarte a comenzar a aceptar pagos rápidamente.
Este boilerplate utiliza Next.js 16 App Router con TypeScript, Tailwind CSS 4, y el @dodopayments/nextjs adaptador.

​
Características

  • Configuración Rápida - Comienza en menos de 5 minutos
  • Integración de Pagos - Flujo de pago preconfigurado utilizando @dodopayments/nextjs
  • UI Moderna - Página de precios limpia y con tema oscuro usando Tailwind CSS
  • Manejador de Webhooks - Endpoint de webhook listo para usar para eventos de pago
  • Portal del Cliente - Gestión de suscripciones con un clic
  • TypeScript - Totalmente tipado con tipos mínimos y enfocados
  • Checkout Pre-llenado - Demuestra cómo pasar datos del cliente para mejorar la experiencia del usuario

​
Requisitos Previos

Antes de comenzar, asegúrate de tener:
  • Node.js 20.9+ (requerido para Next.js 16)
  • Cuenta de Dodo Payments (para acceder a las claves de API y Webhook desde el panel de control)

​
Inicio Rápido

1

Clona el Repositorio

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
2

Instala Dependencias

npm install
3

Obtén Credenciales de API

Regístrate en Dodo Payments y obtén tus credenciales desde el panel de control:
¡Asegúrate de estar en Modo de Prueba mientras desarrollas!
4

Configurar Variables de Entorno

Crea un .env archivo en el directorio raíz:
cp .env.example .env
Actualiza los valores con tus credenciales de Dodo Payments:
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode
Nunca comitas tu .env archivo en el control de versiones. Ya está incluido en .gitignore.
5

Añadir Tus Productos

Actualiza src/lib/products.ts con tus IDs de producto reales de Dodo Payments:
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

Ejecuta el Servidor de Desarrollo

npm run dev
¡Abre http://localhost:3000 para ver tu página de precios!

​
Estructura del Proyecto

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​
Personalización

​
Actualiza la Información del Producto

Edita src/lib/products.ts para modificar:
  • IDs de producto (desde tu panel de Dodo)
  • Precios
  • Características
  • Descripciones

​
Pre-llenar Datos del Cliente

En src/app/components/ProductCard.tsx, reemplaza los valores codificados con tus datos de usuario reales: 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
Actualiza el Portal de Clientes

En src/app/components/Header.tsx, reemplaza el ID de cliente codificado: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Puedes completar una compra de prueba para obtener el ID de cliente para pruebas.

​
Eventos de Webhook

El boilerplate demuestra cómo manejar dos eventos de webhook en src/app/api/webhook/route.ts:
  • onSubscriptionActive - Activado cuando una suscripción se vuelve activa
  • onPaymentSucceeded - Activado cuando un pago es exitoso
Agrega tu lógica de negocio dentro de estos manejadores: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Agrega más eventos de webhook según sea necesario. Para el desarrollo local, puedes usar herramientas como ngrok para crear un túnel seguro a tu servidor local y usarlo como tu URL de webhook.

​
Despliegue

​
Construir para Producción

npm run build
npm start

​
Desplegar en Vercel

[ Desplegar con Vercel ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) ¡No olvides agregar tus variables de entorno en el panel de Vercel!

​
Actualiza la URL de Webhook

Después de desplegar, actualiza tu URL de webhook en el Panel de Dodo Payments: 
https://example.com/api/webhook

​
Solución de Problemas

Elimina node_modules y reinstala las dependencias:
rm -rf node_modules package-lock.json
npm install
Causas comunes:
  • ID de producto inválido - verifica que exista en tu panel de Dodo
  • Clave API incorrecta o configuración de entorno en .env
  • Revisa la consola del navegador y la terminal en busca de errores
Para pruebas locales, usa ngrok para exponer tu servidor:
ngrok http 3000
Actualiza la URL de webhook en tu panel de Dodo a la URL de ngrok. Recuerda actualizar tu archivo .env con la clave de verificación de webhook correcta.
Reemplaza el CUSTOMER_ID codificado en src/app/components/Header.tsx con un ID de cliente real de tu panel de Dodo.O integra tu sistema de autenticación y base de datos para obtener el ID de cliente dinámicamente.

​
Aprende Más

​
Soporte

¿Necesitas ayuda con la plantilla?