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

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

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

مقدمة

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

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

• Node.js و npm أو yarn مثبتان
• حساب Stripe (لمفاتيح API)

إعداد Next.js

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

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

عرض المنتجات

أنشئ دليل components وملف ProductCard.js:

// components/ProductCard.js
import React from 'react';

const ProductCard = ({ product }) => {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button>أضف إلى السلة</button>
    </div>
  );
};

export default ProductCard;

في ملف pages/index.js:

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

const products = [
  { id: 1, name: 'تي شيرت رائع', price: 25 },
  { id: 2, name: 'قدح رائع', price: 15 },
];

const Home = () => {
  return (
    <div>
      <h1>منتجاتنا</h1>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

export default Home;

دمج Stripe

قم بتثبيت مكتبة Stripe:

npm install @stripe/stripe-js @stripe/react-stripe-js

أنشئ ملف .env.local وأضف مفتاح Stripe القابل للنشر:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_STRIPE_PUBLISHABLE_KEY

أنشئ ملف pages/api/checkout_sessions.js للتعامل مع إنشاء جلسات Stripe checkout:

// pages/api/checkout_sessions.js
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

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) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

هام: تحتاج إلى تعيين STRIPE_SECRET_KEY في متغيرات البيئة الخاصة بك. لا تعرض مفتاحك السري في التعليمات البرمجية من جانب العميل أبدًا!

قم بتحديث ProductCard.js لتضمين زر الدفع:

// components/ProductCard.js
import React from 'react';

const ProductCard = ({ product }) => {

  const handleCheckout = async () => {
    const response = await fetch('/api/checkout_sessions', {
      method: 'POST',
    });

    const data = await response.json();

    if (response.status === 303) {
      window.location.href = data.url;
    } else {
      console.error("فشل الدفع");
    }
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={handleCheckout}>اشتر الآن</button>
    </div>
  );
};

export default ProductCard;

أنشئ pages/success.js و pages/cancel.js للتعامل مع عناوين URL للنجاح والإلغاء. يمكن أن تكون هذه صفحات بسيطة تعرض رسالة للمستخدم.

خاتمة

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

• وظائف عربة التسوق
• مصادقة المستخدم
• تكامل قاعدة البيانات لإدارة المنتجات
• معالجة أخطاء أكثر قوة