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 adaptador @dodopayments/nextjs.

​
Características

  • Configuración rápida - Comienza en menos de 5 minutos
  • Integración de pagos - Flujo de pago preconfigurado usando @dodopayments/nextjs
  • IU moderna - Página de precios limpia con tema oscuro utilizando Tailwind CSS
  • Manejador de webhooks - Endpoint listo para eventos de pago
  • Portal del cliente - Gestión de suscripciones con un clic
  • TypeScript - Totalmente tipado con tipos mínimos y enfocados
  • Checkout prellenado - Demuestra el envío de datos del cliente para mejorar la experiencia

​
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

Clone the Repository

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

Install Dependencies

npm install
3

Get API Credentials

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

Configure Environment Variables

Crea un archivo .env 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 subas tu archivo .env al control de versiones. Ya está incluido en .gitignore.
5

Add Your Products

Actualiza src/lib/products.ts con tus ID de productos 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

Run the Development Server

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
  • Funcionalidades
  • Descripciones

​
Pre-llenar Datos del Cliente

En src/app/components/ProductCard.tsx, reemplaza los valores codificados con tus datos reales de usuario: 
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 el manejo de dos eventos webhook en src/app/api/webhook/route.ts:
  • onSubscriptionActive - Se activa cuando una suscripción se vuelve activa
  • onPaymentSucceeded - Se activa 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 de API incorrecta o configuración de entorno errónea en .env
  • Revisa la consola del navegador y el terminal en busca de errores
Para pruebas locales, usa ngrok para exponer tu servidor:
ngrok http 3000
Actualiza la URL del webhook en tu panel de Dodo a la URL de ngrok. Recuerda actualizar tu archivo .env con la clave correcta de verificación del webhook.

​
Aprende Más

​
Soporte

¿Necesitas ayuda con la plantilla?