ازاي تضيف الدفع الإلكتروني في موقعك في Next.js باستخدام Stripe وتستقبل المدفوعات لحظيا خطوة بخطوة؟

لو عندك موقع أو متجر إلكتروني وعاوز تضيف الدفع الإلكتروني، لازم تستخدم خدمة زي Stripe عشان تستقبل المدفوعات بأمان

في المقال ده هشرحلك إزاي تضيف الدفع الإلكتروني في Next.js باستخدام Stripe API خطوة بخطوة ان شاء الله

أولًا: يعني إيه Stripe وليه نستخدمه؟ 🤔

Stripe هو واحد من أقوى حلول الدفع الإلكتروني اللي بتوفر تكامل سهل مع مواقع الويب وبيخليك تستقبل المدفوعات عن طريق البطاقات البنكية Apple Pay، Google Pay وغيرها.

ثانيا: إزاي نضيف Stripe في Next.js؟ 🛠️

1️⃣ تثبيت الباكدجات الأساسية:

npm install stripe

2️⃣ إنشاء API Route لمعالجة المدفوعات

في Next.js بنستخدم API Routes عشان نتعامل مع عمليات الدفع.

هنضيف ملف جديد في:

📂 pages/api/checkout.js

<br /> import Stripe from "stripe";</p> <p>const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);</p> <p>export default async function handler(req, res) {<br /> if (req.method === "POST") {<br /> try {<br /> const session = await stripe.checkout.sessions.create({<br /> payment_method_types: ["card"],<br /> line_items: [<br /> {<br /> price_data: {<br /> currency: "usd",<br /> product_data: {<br /> name: "منتج تجريبي",<br /> },<br /> unit_amount: 1000,<br /> },<br /> quantity: 1,<br /> },<br /> ],<br /> mode: "payment",<br /> success_url: ${req.headers.origin}/success,<br /> cancel_url: ${req.headers.origin}/cancel,<br /> });</p> <p> res.status(200).json({ id: session.id });<br /> } catch (error) {<br /> res.status(500).json({ error: error.message });<br /> }<br /> } else {<br /> res.setHeader("Allow", "POST");<br /> res.status(405).end("Method Not Allowed");<br /> }<br /> }<br />

📝شرح سريع للي عملناه هنا:

• – أنشأنا Checkout Session فيها تفاصيل المنتج.
• – حددنا طرق الدفع المقبولة (في الحالة دي “Card”).
• – جهزنا روابط النجاح والإلغاء اللي هيرجع ليها المستخدم بعد الدفع.

3️⃣ إنشاء زرار الدفع في الفرونتيند:

📂 components/CheckoutButton.js

لو عايز تضيف زرار شراء باستخدام Stripe Checkout في الموقع، هتمشي علي الخطوات دي:

• تحميل مكتبة Stripe

  أول حاجة، هتستخدم مكتبة @stripe/stripe-js عشان تقدر تتعامل مع Stripe في المتصفح. هتحتاج تحمل loadStripe وتستخدمه عشان تجهز الاتصال بـ Stripe باستخدام المفتاح العام (Public Key) اللي بتاخده من حسابك على Stripe.

• تجهيز زر الشراء

  هتعمل زرار عادي في التطبيق، ولما المستخدم يضغط عليه، هيشتغل حدث (Event Handler) ينفذ الخطوات الجاية:

  • تبعت طلب (Request) لـ API عندك (مثلاً /api/checkout) عشان ينشئ جلسة دفع (Checkout Session).
  • تستقبل sessionId من الرد اللي راجع من الـ API.
  • تستخدم redirectToCheckout عشان تحول المستخدم مباشرة على صفحة الدفع في Stripe.

• إنشاء API خاص بالدفع

  عشان الخطوات اللي فاتت تشتغل، لازم يكون عندك API Route في Next.js (في فولدر pages/api) مسؤول عن إنشاء جلسة الدفع، وده بيتم من خلال مكتبة stripe الخاصة بالسيرفر.

• تجربة الزرار

  بعد ما تخلص، جرب تضغط على الزرار، المفروض هيحولك على صفحة الدفع في Stripe، وهناك تقدر تكمل العملية.

ثالثًا: التعامل مع Webhooks لمتابعة الدفع 💡

بعد ما العميل يدفع إزاي نعرف إن الدفع تم بنجاح؟ هنا بنستخدم Webhooks وهي إشعارات أوتوماتيكية من Stripe لما يحصل تغيير في حالة الدفع.

📂 pages/api/webhooks.js

<br /> import { buffer } from "micro";<br /> import Stripe from "stripe";</p> <p>const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);</p> <p>export default async function handler(req, res) {<br /> if (req.method === "POST") {<br /> const sig = req.headers["stripe-signature"];</p> <p> let event;<br /> try {<br /> const rawBody = await buffer(req);<br /> event = stripe.webhooks.constructEvent(<br /> rawBody.toString(),<br /> sig,<br /> process.env.STRIPE_WEBHOOK_SECRET<br /> );<br /> } catch (err) {<br /> return res.status(400).send(Webhook Error: ${err.message});<br /> }</p> <p> if (event.type === "checkout.session.completed") {<br /> console.log("✅ الدفع تم بنجاح!", event);<br /> // ممكن هنا تحفظ بيانات الدفع في قاعدة البيانات<br /> }</p> <p> res.json({ received: true });<br /> }<br /> }</p> <p>export const config = {<br /> api: {<br /> bodyParser: false,<br /> },<br /> };

📝 شرح سريع للي عملناه هنا:

• – استقبلنا إشعارات Stripe Webhooks لما عملية الدفع تكتمل.
• – عملنا تحقق من التوقيع الأمني عشان نتاكد إن البيانات جاية من Stripe.
• – سجلنا المدفوعات اللي تم تأكيدها.

رابعا: إزاي تجرب الدفع محليًا؟ 🛠️

قبل ما تشغل Webhooks لازم تفتح Stripe CLI عشان تستقبل البيانات محليًا:

stripe listen --forward-to localhost:3000/api/webhooks<br />

وكده أي دفعة هتحصل، هيوصل إشعار للـ API بتاعك فورا

وبكده نكون خلصنا شرحنا عن الدفع الإلكتروني باستخدام Stripe في Next.js

لوعندك سؤال أو استفسار، اكتب في الكومنتات.