Saltar al contenido principal

Repositorio de GitHub

Plantilla mínima de suscripción de Next.js + Supabase + Dodo Payments

Demo en vivo

Explora la demo desplegada

​
Descripción general

Una plantilla lista para producción para suscripciones utilizando Next.js 15, React 19, Supabase, Drizzle ORM y Dodo Payments. Viene con Google OAuth, checkout de suscripción, manejo de webhooks, esquema de base de datos y un panel básico.
Si solo necesitas manejadores de rutas para una aplicación existente, consulta los adaptadores dedicados: Adaptador de Next.js y Adaptador de Express.

​
Requisitos previos

  • Node.js 18+ (o Bun 1.0+)
  • Proyecto de Supabase (URL, clave Anon, clave de rol de servicio, URL de base de datos)
  • Cuenta de Dodo Payments (clave API, secreto de webhook)
  • Cliente de Google Cloud OAuth (ID de cliente y secreto)

​
Inicio rápido

1

Clonar e instalar

git clone https://github.com/dodopayments/dodo-supabase-subscription-starter.git
cd dodo-supabase-subscription-starter
# choose one
bun install
# or
npm install
# or
pnpm install
2

Crear proyecto de Supabase

Crea un proyecto de Supabase y copia:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (Cadena de conexión)
3

Configurar Google OAuth

Establece la URI de redirección a: https://[your-project-ref].supabase.co/auth/v1/callback en Google Cloud, luego habilita el proveedor de Google en Supabase Auth usando tu ID de cliente y secreto.
4

Configurar Dodo Payments

Genera una clave API y un secreto de webhook desde el panel de Dodo. Establece el entorno a test_mode mientras desarrollas.
5

Crear .env.local

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role

# Database
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres

# Dodo Payments
DODO_PAYMENTS_API_KEY=your-dodo-api-key
DODO_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_ENVIRONMENT=test_mode
Nunca cometas secretos. Usa variables de entorno en entornos de despliegue.
6

Provisionar esquema de base de datos

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Tablas creadas: users, subscriptions, payments.
7

Desplegar función de webhook

# login (one-time)
bunx supabase login
# or
npx supabase login

# deploy the edge function
bun run deploy:webhook --project-ref [your-project-ref]
# or
npm run deploy:webhook -- --project-ref [your-project-ref]
# or
pnpm run deploy:webhook --project-ref [your-project-ref]
cURL
curl -X POST \
  'https://[your-project-ref].supabase.co/functions/v1/dodo-webhook' \
  -H 'Content-Type: application/json' \
  -H 'Dodo-Signature: <signature>' \
  -d '{"type":"payment.succeeded","data":{}}'
8

Agregar webhook en Dodo Payments

Establece la URL del endpoint a:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Selecciona eventos de pago y suscripción.
9

Crear productos y características

En el panel de Dodo → Productos → Crear Producto. Opcionalmente agrega metadatos:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
La UI de precios lee este features array y lo renderiza dinámicamente.
10

Ejecutar el servidor de desarrollo

bun run dev
# or
npm run dev
# or
pnpm run dev
Abre http://localhost:3000.

​
Qué incluye

  • Autenticación a través de Supabase (Google OAuth configurado)
  • Checkout de suscripción a través de Dodo Payments
  • Función Edge de Supabase para webhooks (dodo-webhook)
  • Esquema y migraciones de Drizzle ORM
  • Panel con facturas, estado de suscripción y características del plan
Mantén DODO_PAYMENTS_ENVIRONMENT como test_mode hasta que completes las pruebas de extremo a extremo.

​
Archivos y rutas clave

supabase/functions/dodo-webhook/
  index.ts            # webhook handler verifying signatures
  deno.json           # permissions

​
Variables de entorno

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

​
Verificación y solución de problemas

  • Asegúrate de que DODO_WEBHOOK_SECRET coincida con el valor del panel de Dodo
  • Confirma que desplegaste la última dodo-webhook función
  • Verifica que el nombre del encabezado sea correcto en tu función (Dodo-Signature)
  • Verifica la sintaxis de DATABASE_URL y la salida de red de Supabase
  • Espera ~2–3 minutos después de la creación del proyecto antes del primer push
  • La URI de redirección debe ser https://[ref].supabase.co/auth/v1/callback
  • Asegúrate de que sea la misma en Google Cloud y el proveedor de Auth de Supabase
Ahora tienes un SaaS de suscripción funcionando con Supabase y Dodo Payments.
Repositorio original y pasos detallados: dodo-supabase-subscription-starter.