Vai al contenuto principale

Repository GitHub

Boilerplate minimale per sottoscrizioni Next.js + Supabase + Dodo Payments

Demo dal vivo

Esplora la demo distribuita

​
Panoramica

Un boilerplate pronto per la produzione per le sottoscrizioni utilizzando Next.js 15, React 19, Supabase, Drizzle ORM e Dodo Payments. Include Google OAuth, checkout per sottoscrizioni, gestione dei webhook, schema del database e un dashboard di base.
Se hai bisogno solo di gestori di route per un’app esistente, consulta gli adattatori dedicati: Next.js Adaptor e Express Adaptor.

​
Requisiti

  • Node.js 18+ (o Bun 1.0+)
  • Progetto Supabase (URL, chiave anonima, chiave di ruolo del servizio, URL del database)
  • Account Dodo Payments (chiave API, segreto webhook)
  • Client OAuth di Google Cloud (ID client e segreto)

​
Avvio rapido

1

Clona e installa

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

Crea progetto Supabase

Crea un progetto Supabase e copia:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (stringa di connessione)
3

Configura Google OAuth

Imposta l’URI di reindirizzamento su: https://[your-project-ref].supabase.co/auth/v1/callback in Google Cloud, quindi abilita il provider Google in Supabase Auth utilizzando il tuo ID client e segreto.
4

Configura Dodo Payments

Genera una chiave API e un segreto webhook dal dashboard di Dodo. Imposta l’ambiente su test_mode durante lo sviluppo.
5

Crea .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
Non commettere mai segreti. Utilizza variabili di ambiente negli ambienti di distribuzione.
6

Provisiona lo schema del database

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Tabelle create: users, subscriptions, payments.
7

Distribuisci la funzione 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

Aggiungi webhook in Dodo Payments

Imposta l’URL dell’endpoint su:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Seleziona eventi di pagamento e sottoscrizione.
9

Crea prodotti e funzionalità

Nel dashboard di Dodo → Prodotti → Crea prodotto. Facoltativamente aggiungi metadati:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
L’UI dei prezzi legge questo features array e lo rende dinamicamente.
10

Esegui il server di sviluppo

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

​
Cosa è incluso

  • Autenticazione tramite Supabase (Google OAuth configurato)
  • Checkout per sottoscrizioni tramite Dodo Payments
  • Funzione Edge di Supabase per webhook (dodo-webhook)
  • Schema e migrazioni Drizzle ORM
  • Dashboard con fatture, stato della sottoscrizione e funzionalità del piano
Mantieni DODO_PAYMENTS_ENVIRONMENT come test_mode fino a quando non completi i test end-to-end.

​
File e percorsi chiave

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

​
Variabili di ambiente

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=

​
Verifica e risoluzione dei problemi

  • Assicurati che DODO_WEBHOOK_SECRET corrisponda al valore del dashboard di Dodo
  • Conferma di aver distribuito l’ultima dodo-webhook funzione
  • Verifica che il nome dell’intestazione sia corretto nella tua funzione (Dodo-Signature)
  • Controlla la sintassi di DATABASE_URL e l’egress della rete Supabase
  • Aspetta ~2–3 minuti dopo la creazione del progetto prima del primo push
  • L’URI di reindirizzamento deve essere https://[ref].supabase.co/auth/v1/callback
  • Assicurati che sia lo stesso in Google Cloud e nel provider Supabase Auth
Ora hai un SaaS per sottoscrizioni funzionante scaffolato con Supabase e Dodo Payments.
Repository originale e passaggi dettagliati: dodo-supabase-subscription-starter.