اشتراكات Stripe

فلنبدأ بإنشاء عملية دفع باستخدام Stripe Checkout لتفعيل الاشتراكات، وترك مهمة منح الوصول للمستخدم على الـ webhook الخاص بنا.¶

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

يجب أن تكون قد أعددت حساب Stripe وقاعدة بيانات جاهزة.

الإعداد¶

من لوحة تحكم Stripe، اذهب إلى [More +] > [Product Catalog] > [+ Add Product].
أدخل اسم المنتج وحدد سعرًا شهريًا (أو حسب نموذج عملك)، ثم اضغط [Save Product].
بعد حفظ المنتج، انتقل إلى قسم [Pricing] وانسخ رقم تعريف السعر (يبدأ بـ price_).
ثم أضف هذا الرقم إلى أول خطة موجودة في المصفوفة stripe.plans داخل ملف config.js.

إعداد الصفحة¶

افتح ملف /dashboard/page.js والصق فيه الكود التالي:

import ButtonAccount from "@/components/ButtonAccount";
import ButtonCheckout from "@/components/ButtonCheckout";
import config from "@/config";

export const dynamic = "force-dynamic";

export default async function Dashboard() {
  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <ButtonAccount />

        <h1 className="text-3xl md:text-4xl font-extrabold">
          Subscribe to get access:
        </h1>

        <ButtonCheckout
          mode="subscription"
          priceId={config.stripe.plans[0].priceId}
        />
      </section>
    </main>
  );
}

تجربة الدفع¶

بعدها، افتح الرابط التالي في المتصفح: http://localhost:3000/dashboard

سجّل الدخول، واضغط على زر الدفع، وجرّب بطاقة الاختبار: 4242 4242 4242 4242.

معالجة الوصول¶

الـ webhook الموجود في /api/webhook/stripe/route.js يستمع لأحداث Stripe، ويعالج من خلالها منح أو منع الوصول للمستخدم.

راجع المتغير hasAccess داخل مخطط المستخدم User.js (في NextAuth) أو has_access في جدول profiles في Supabase.

✅ ملاحظة: يجب أن يكون لديك Webhook يعمل محليًا على جهازك حتى تتم العملية بنجاح أثناء وضع التطوير.

تخصيص الـ Webhook¶

يمكنك تعديل الكود داخل /api/webhook/stripe/route.js لإضافة منطق مخصص مثل:

إرسال رسائل "سلة مشتريات متروكة"
خصم الرصيد من المستخدم
إرسال إشعارات معينة

إدارة الاشتراك¶

يمكن للمستخدم إدارة اشتراكه (إلغاء، تعديل وسيلة الدفع...) من خلال المكوّن <ButtonAccount />.