الانتقال إلى المحتوى الرئيسي

مستودع GitHub

نموذج اشتراك بسيط Next.js + Supabase + Dodo Payments

عرض مباشر

استكشف العرض المباشر

​
نظرة عامة

نموذج جاهز للإنتاج للاشتراكات باستخدام Next.js 15، React 19، Supabase، Drizzle ORM، وDodo Payments. يأتي مع مصادقة Google OAuth، عملية الدفع للاشتراك، معالجة الويب هوك، مخطط قاعدة البيانات، ولوحة تحكم أساسية.
إذا كنت بحاجة فقط إلى معالجات المسار لتطبيق موجود، راجع المحولات المخصصة: محول Next.js ومحول Express.

​
المتطلبات الأساسية

  • Node.js 18+ (أو Bun 1.0+)
  • مشروع Supabase (URL، مفتاح Anon، مفتاح دور الخدمة، URL قاعدة البيانات)
  • حساب Dodo Payments (مفتاح API، سر الويب هوك)
  • عميل Google Cloud OAuth (معرف العميل والسر)

​
البدء السريع

1

استنساخ وتثبيت

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

إنشاء مشروع Supabase

قم بإنشاء مشروع Supabase ونسخ:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (سلسلة الاتصال)
3

تكوين Google OAuth

قم بتعيين URI إعادة التوجيه إلى: https://[your-project-ref].supabase.co/auth/v1/callback في Google Cloud، ثم قم بتمكين مزود Google في Supabase Auth باستخدام معرف العميل والسر الخاص بك.
4

تكوين مدفوعات Dodo

قم بإنشاء مفتاح API وسر Webhook من لوحة معلومات Dodo. قم بتعيين البيئة إلى test_mode أثناء التطوير.
5

إنشاء .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
لا تقم أبداً بالتزام الأسرار. استخدم متغيرات البيئة في بيئات النشر.
6

توفير مخطط قاعدة البيانات

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
تم إنشاء الجداول: users, subscriptions, payments.
7

نشر وظيفة الويب هوك

# 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

إضافة الويب هوك في Dodo Payments

قم بتعيين عنوان URL لنقطة النهاية إلى:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
اختر أحداث الدفع والاشتراك.
9

إنشاء المنتجات والميزات

في لوحة معلومات Dodo → المنتجات → إنشاء منتج. أضف بيانات التعريف اختيارياً:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
واجهة تسعير UI تقرأ هذا features المصفوفة وتعرضها ديناميكيًا.
10

تشغيل خادم التطوير

bun run dev
# or
npm run dev
# or
pnpm run dev
افتح http://localhost:3000.

​
ما هو مدرج

  • المصادقة عبر Supabase (تم تكوين Google OAuth)
  • عملية الدفع عبر الاشتراك عبر مدفوعات Dodo
  • وظيفة Edge في Supabase للويب هوكس (dodo-webhook)
  • مخطط Drizzle ORM والترحيلات
  • لوحة تحكم مع الفواتير، حالة الاشتراك، وميزات الخطة
احتفظ بـ DODO_PAYMENTS_ENVIRONMENT كـ test_mode حتى تكمل اختبارات من النهاية إلى النهاية.

​
الملفات والمسارات الرئيسية

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

​
متغيرات البيئة

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=

​
التحقق واستكشاف الأخطاء وإصلاحها

  • تأكد من أن DODO_WEBHOOK_SECRET يتطابق مع القيمة من لوحة معلومات Dodo
  • تأكد من أنك نشرت أحدث وظيفة dodo-webhook
  • تحقق من أن اسم الرأس صحيح في وظيفتك (Dodo-Signature)
  • تحقق من DATABASE_URL الصياغة و egress الشبكة في Supabase
  • انتظر ~2-3 دقائق بعد إنشاء المشروع قبل أول دفع
  • يجب أن يكون URI إعادة التوجيه هو https://[ref].supabase.co/auth/v1/callback
  • تأكد من نفس الشيء في Google Cloud ومزود Supabase Auth
لديك الآن نموذج اشتراك SaaS يعمل مع Supabase وDodo Payments.
المستودع الأصلي والخطوات التفصيلية: dodo-supabase-subscription-starter.