Nerd Level Tech logo
|
الدرس 3 من 18

بناء مجموعة بداية SaaS

تكامل الفوترة ولوحة التحكم

5 دقيقة للقراءة

ما ستبنيه

نظام فوترة كامل مع:

  • دفع اشتراك Stripe
  • بوابة العملاء لإدارة الخطط
  • معالجة Webhook لأحداث الاشتراك
  • دعم الفوترة القائمة على الاستخدام
  • لوحة تحكم احترافية مع التحليلات
  • تدفقات ترقية/تخفيض الخطة

الوقت للإكمال: ~60 دقيقة بمساعدة AI

الخطوة 1: إعداد Stripe

أولاً، أعد تكامل Stripe:

Set up Stripe integration for SaaS billing:

1. src/lib/stripe/client.ts
   - Initialize Stripe SDK
   - Type-safe configuration

2. src/lib/stripe/prices.ts
   - Define pricing plans (Free, Starter $19/mo, Pro $49/mo, Enterprise)
   - Map to Stripe Price IDs
   - Feature lists for each plan

3. Environment variables needed:
   - STRIPE_SECRET_KEY
   - STRIPE_PUBLISHABLE_KEY
   - STRIPE_WEBHOOK_SECRET
   - STRIPE_STARTER_PRICE_ID
   - STRIPE_PRO_PRICE_ID

AI يُنشئ:

// src/lib/stripe/client.ts
import Stripe from 'stripe';
import { env } from '@/lib/env';

export const stripe = new Stripe(env.STRIPE_SECRET_KEY, {
  apiVersion: '2024-12-18.acacia',
  typescript: true,
});

// src/lib/stripe/prices.ts
export const PLANS = {
  free: {
    name: 'مجاني',
    price: 0,
    priceId: null,
    features: [
      'مشروع واحد',
      '100 توليد AI/شهرياً',
      'دعم المجتمع',
    ],
    limits: {
      projects: 1,
      aiGenerations: 100,
      teamMembers: 1,
    },
  },
  starter: {
    name: 'مبتدئ',
    price: 19,
    priceId: process.env.STRIPE_STARTER_PRICE_ID,
    features: [
      '5 مشاريع',
      '1,000 توليد AI/شهرياً',
      'دعم البريد الإلكتروني',
      'وصول API',
    ],
    limits: {
      projects: 5,
      aiGenerations: 1000,
      teamMembers: 3,
    },
  },
  pro: {
    name: 'احترافي',
    price: 49,
    priceId: process.env.STRIPE_PRO_PRICE_ID,
    features: [
      'مشاريع غير محدودة',
      '10,000 توليد AI/شهرياً',
      'دعم أولوية',
      'وصول API',
      'تكاملات مخصصة',
      'تعاون الفريق',
    ],
    limits: {
      projects: -1, // غير محدود
      aiGenerations: 10000,
      teamMembers: 10,
    },
  },
  enterprise: {
    name: 'مؤسسات',
    price: null, // تسعير مخصص
    priceId: null,
    features: [
      'كل شيء في Pro',
      'توليد AI غير محدود',
      'دعم مخصص',
      'ضمان SLA',
      'عقود مخصصة',
      'SSO/SAML',
    ],
    limits: {
      projects: -1,
      aiGenerations: -1,
      teamMembers: -1,
    },
  },
} as const;

export type PlanKey = keyof typeof PLANS;

الخطوة 2: تدفق الدفع

أنشئ تجربة الدفع:

Create Stripe checkout flow:

1. src/app/api/stripe/checkout/route.ts
   - Create checkout session for plan upgrade
   - Include success/cancel URLs
   - Set customer metadata (orgId, userId)

2. src/lib/stripe/actions.ts
   - createCheckoutSession(orgId: string, priceId: string)
   - Server action with proper validation

3. src/components/pricing/pricing-card.tsx
   - Display plan features
   - "Current Plan" badge for active plan
   - Upgrade/Downgrade button
   - Contact sales for Enterprise

الخطوة 3: معالجة Webhook

عالج أحداث Stripe:

Create Stripe webhook handler:

1. src/app/api/stripe/webhook/route.ts
   - Verify webhook signature
   - Handle events:
     - checkout.session.completed
     - customer.subscription.updated
     - customer.subscription.deleted
     - invoice.payment_failed
   - Update database subscription records

2. src/lib/stripe/webhook-handlers.ts
   - Separate handler functions for each event type
   - Proper error handling and logging

الخطوة 4: بوابة العملاء

فعّل إدارة الفوترة ذاتية الخدمة:

Create Stripe Customer Portal integration:

1. src/app/api/stripe/portal/route.ts
   - Create portal session
   - Redirect to Stripe-hosted portal
   - User can update payment, cancel, view invoices

2. src/components/billing/manage-subscription-button.tsx
   - Button that opens customer portal
   - Loading state

الخطوة 5: بناء لوحة التحكم

أنشئ لوحة تحكم احترافية:

Create dashboard pages and components:

1. src/app/(dashboard)/dashboard/page.tsx
   - Welcome message with user name
   - Quick stats cards (projects, usage, team members)
   - Recent activity feed
   - Quick actions

2. src/components/dashboard/stats-cards.tsx
   - Animated stat cards with icons
   - Usage progress bars
   - Click to drill down

3. src/components/dashboard/usage-chart.tsx
   - Line chart of AI generations over time
   - Use Recharts or Chart.js
   - Last 30 days view

4. src/components/dashboard/activity-feed.tsx
   - Recent actions (created project, invited member, etc.)
   - Relative timestamps
   - User avatars

Use Tailwind + shadcn/ui for consistent styling.

الخطوة 6: صفحة إعدادات الفوترة

أنشئ واجهة إدارة الفوترة:

Create billing settings page:

1. src/app/(dashboard)/settings/billing/page.tsx
   - Current plan display
   - Usage overview
   - Plan comparison table
   - Upgrade/downgrade buttons
   - Payment method display
   - Invoice history link

2. src/components/billing/current-plan.tsx
   - Plan name and price
   - Next billing date
   - "Manage Subscription" button (portal)

3. src/components/billing/plan-comparison.tsx
   - Feature comparison table
   - Highlight current plan
   - CTA buttons for each plan

الخطوة 7: تتبع الاستخدام

نفّذ قياس الاستخدام:

Create usage tracking system:

1. src/lib/usage/track.ts
   - trackUsage(orgId: string, metric: string, amount: number)
   - Increment usage counters

2. src/lib/usage/check.ts
   - checkLimit(orgId: string, metric: string)
   - Return { allowed: boolean, current: number, limit: number }

3. src/lib/db/schema.ts (add)
   - usage_records table
   - Daily/monthly aggregation

4. Use in API routes:
   - Check limits before AI operations
   - Return 429 if over limit
   - Include usage info in response headers

الخطوة 8: اختبار تدفق الفوترة

قائمة التحقق للاختبار:

Test the complete billing flow:

1. وضع اختبار Stripe
   - استخدم مفاتيح API الاختبارية
   - بطاقة الاختبار: 4242 4242 4242 4242

2. تدفق الدفع
   - [ ] المستخدم المجاني يمكنه الترقية إلى Starter
   - [ ] مستخدم Starter يمكنه الترقية إلى Pro
   - [ ] الدفع يُعيد التوجيه بشكل صحيح
   - [ ] صفحة النجاح تُظهر التأكيد

3. معالجة Webhook
   - [ ] استخدم Stripe CLI للاختبار المحلي
   - [ ] الاشتراك يُنشأ عند checkout.session.completed
   - [ ] الخطة تُحدث عند subscription.updated
   - [ ] يُعالج الإلغاء

4. بوابة العملاء
   - [ ] البوابة تُفتح بشكل صحيح
   - [ ] يمكن تحديث طريقة الدفع
   - [ ] يمكن إلغاء الاشتراك
   - [ ] يعود للتطبيق بشكل صحيح

5. حدود الاستخدام
   - [ ] الخطة المجانية محدودة بشكل صحيح
   - [ ] الاستخدام يزداد عند استدعاءات API
   - [ ] يُرجع 429 عند تجاوز الحد

قائمة التحقق للنشر

قبل البث المباشر:

  • التبديل إلى مفاتيح Stripe الحية
  • تكوين نقطة نهاية webhook في لوحة Stripe
  • إعداد علامة بوابة عملاء Stripe
  • إنشاء معرفات الأسعار للإنتاج
  • الاختبار ببطاقة حقيقية (استرداد بعد ذلك)
  • تفعيل حماية الاحتيال (Radar)
  • إعداد تنبيهات الاستخدام

النقاط الرئيسية

  1. webhooks Stripe ضرورية - لا تثق بجانب العميل لحالة الاشتراك
  2. بوابة العملاء تقلل الدعم - دع المستخدمين يخدمون أنفسهم في تغييرات الفوترة
  3. تتبع الاستخدام يُمكن النمو - حدود خطط وتسعير قائمة على البيانات
  4. وضع الاختبار أولاً - اختبر دائماً بشكل شامل قبل البث المباشر
  5. AI يُسرع التكامل - إعداد فوترة معقد في ساعات، ليس أيام

ما التالي

تهانينا! لقد بنيت مجموعة بداية SaaS كاملة مع المصادقة والمنظمات والفوترة ولوحة التحكم. في الوحدة 2، ستتعلم بناء تطبيقات الموبايل بمساعدة AI.

CTA: تابع إلى الوحدة 2: بناء تطبيقات الموبايل مع AI لإنشاء تطبيقات موبايل متعددة المنصات باستخدام React Native وExpo.

:::

اختبار

الوحدة 1: بناء مجموعة بداية SaaS

خذ الاختبار