العودة للمقالات

بناء واجهة متجر إلكتروني بلا خادم باستخدام Next.js و Stripe

Majd Muhtaseb22‏/05‏/202512 دقيقة

مقدمة

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

إعداد Next.js

أولاً ، قم بإنشاء مشروع Next.js جديد:

npx create-next-app my-ecommerce-store
cd my-ecommerce-store

عرض المنتجات

لنقم بإنشاء قائمة منتجات بسيطة. للتبسيط ، سنقوم بتضمين بيانات المنتج مباشرة في الكود. في تطبيق حقيقي ، ستقوم بجلب هذه البيانات من قاعدة بيانات أو نظام إدارة محتوى (CMS).

قم بإنشاء ملف components/ProductList.js:

// components/ProductList.js
const products = [
  { id: 1, name: "تي شيرت", price: 20 },
  { id: 2, name: "قدح", price: 10 },
  { id: 3, name: "ملصق", price: 5 },
];

const ProductList = () => (
  <ul>
    {products.map((product) => (
      <li key={product.id}>
        {product.name} - ${product.price}
      </li>
    ))}
  </ul>
);

export default ProductList;

تحديث pages/index.js:

// pages/index.js
import ProductList from '../components/ProductList';

const Home = () => {
  return (
    <div>
      <h1>مرحباً بكم في متجرنا!</h1>
      <ProductList />
    </div>
  );
};

export default Home;

دمج Stripe

قم بتثبيت مكتبة JavaScript الخاصة بـ Stripe:

npm install @stripe/stripe-js

إنشاء جلسة دفع (Checkout Session)

سنحتاج إلى دالة بلا خادم (مسار API في Next.js) لإنشاء جلسة دفع Stripe. قم بإنشاء pages/api/checkout_sessions.js:

// pages/api/checkout_sessions.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: '2023-10-16',
});

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.checkout.sessions.create({
        line_items: [
          {
            price_data: {
              currency: 'usd',
              product_data: {
                name: 'تي شيرت', // استبدل ببيانات المنتج الديناميكية
              },
              unit_amount: 2000, // السعر بالسنتات
            },
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancel`,
      });

      res.redirect(303, session.url);
    } catch (err) {
      console.error(err);
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

هام:

• قم بتعيين STRIPE_SECRET_KEY في ملف .env.local الخاص بك. احصل على هذا من لوحة معلومات Stripe الخاصة بك.
• يجب أن يشير success_url و cancel_url إلى صفحات تقوم بإنشائها في تطبيق Next.js الخاص بك للتعامل مع المدفوعات الناجحة والملغاة.

تنفيذ زر الدفع

أضف زر الدفع إلى قائمة المنتجات الخاصة بك:

// components/ProductList.js (updated)
import { loadStripe } from '@stripe/stripe-js';

const products = [
  { id: 1, name: "تي شيرت", price: 20 },
  { id: 2, name: "قدح", price: 10 },
  { id: 3, name: "ملصق", price: 5 },
];

const ProductList = () => {
  const handleCheckout = async () => {
    const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
    const response = await fetch('/api/checkout_sessions', {
      method: 'POST',
    });
    const session = await response.json();

    if (response.ok) {
      stripe.redirectToCheckout({ sessionId: session.id });
    } else {
      console.error('Checkout failed:', session.message);
      alert('فشل الدفع. يرجى المحاولة مرة أخرى.');
    }
  };

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} - ${product.price}
          <button onClick={handleCheckout}>ادفع</button>
        </li>
      ))}
    </ul>
  );
};

export default ProductList;

هام:

• قم بتعيين NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY في ملف .env.local الخاص بك. احصل على هذا من لوحة معلومات Stripe الخاصة بك. تأكد من أن هذا المفتاح يبدأ بـ NEXT_PUBLIC_ حتى يتمكن Next.js من عرضه في المتصفح.

خاتمة

هذا هو التنفيذ الأساسي لواجهة متجر إلكتروني بلا خادم باستخدام Next.js و Stripe. يمكنك توسيع هذا عن طريق إضافة ميزات مثل:

• جلب بيانات المنتج من قاعدة بيانات أو نظام إدارة محتوى.
• تنفيذ مصادقة المستخدم.
• إضافة عربة تسوق.
• التعامل مع الشحن والضرائب.

تذكر التعامل مع الأخطاء والاعتبارات الأمنية بعناية عند بناء تطبيق إنتاج.