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

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

Majd Muhtaseb04‏/07‏/202512 دقيقة

مقدمة

تشرح هذه المقالة كيفية بناء واجهة متجر إلكتروني بسيطة لا تحتاج لخادم. سنستخدم React للواجهة الأمامية لعرض المنتجات والتعامل مع تفاعلات المستخدم، و Stripe لمعالجة الدفع الآمنة. ستكون منطق الواجهة الخلفية بسيطة وسيتم نشرها في بيئة لا تحتاج لخادم (مثل Netlify Functions أو AWS Lambda) لتحقيق قابلية التوسع وفعالية التكلفة.

الواجهة الأمامية (React)

أولاً، دعنا نقم بإعداد تطبيق React الخاص بنا. يمكنك استخدام create-react-app أو الطريقة المفضلة لديك:

npx create-react-app serverless-storefront-ar
cd serverless-storefront-ar

سنحتاج إلى مكون بسيط لعرض قائمة المنتجات.

// src/components/ProductList.js
import React from 'react';

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

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

export default ProductList;

// src/App.js
import React from 'react';
import ProductList from './components/ProductList';

function App() {
  return (
    <div className="App">
      <h1>متجر إلكتروني لا يحتاج لخادم</h1>
      <ProductList />
    </div>
  );
}

export default App;

الواجهة الخلفية (وظيفة لا تحتاج لخادم)

بالنسبة للواجهة الخلفية، دعنا نقم بإنشاء وظيفة لا تحتاج لخادم تتولى إنشاء جلسة Stripe Checkout. سنقوم بمحاكاة مسار الدفع لتبسيط الأمور. في تطبيق حقيقي، يجب عليك دمج Stripe API بشكل آمن باستخدام مفتاحك السري، وليس ظاهراً في الواجهة الأمامية. هذا المثال لن يعمل بدون مفتاح Stripe سري صالح.

// netlify/functions/create-checkout-session.js  (مثال باستخدام Netlify Functions)

exports.handler = async (event, context) => {
  // استبدل بالمفتاح السري الفعلي لـ Stripe. **لا تقم بتضمينه في التعليمات البرمجية في بيئة الإنتاج.**

  // هذا المثال لا يستخدم استدعاءات Stripe API للتبسيط.
  // في التنفيذ الحقيقي، يجب عليك استخدام Stripe API هنا لإنشاء جلسة دفع.

  const response = {
    statusCode: 200,
    body: JSON.stringify({ sessionId: 'mock_session_id' }), // معرف جلسة محاكي
  };

  return response;
};

دمج Stripe.js (الواجهة الأمامية)

للتكامل مع Stripe، سنستخدم Stripe.js.

// src/components/ProductList.js (محدث)
import React from 'react';

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

const ProductList = () => {

  const handleCheckout = async () => {
    try {
      const response = await fetch('/.netlify/functions/create-checkout-session', {
        method: 'POST',
      });

      const data = await response.json();
      //إعادة التوجيه إلى Stripe Checkout (استبدل بإعادة توجيه Stripe فعلية في تطبيق حقيقي)

      window.location.href = "https://example.com/checkout?sessionId=" + data.sessionId
      console.log("بدأ الدفع، عادة ما يتم إعادة التوجيه إلى Stripe الآن");


    } catch (error) {
      console.error("خطأ في إنشاء جلسة الدفع:", error);
    }
  };

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

export default ProductList;

النشر

انشر تطبيق React ووظيفتك التي لا تحتاج لخادم على منصة مثل Netlify أو Vercel. تأكد من أن وظيفتك التي لا تحتاج لخادم مُهيأة بشكل صحيح للتعامل مع طلبات Stripe API (باستخدام مفتاح API الآمن الخاص بك) في تطبيق حقيقي. ستحتاج أيضاً إلى تكوين خطوات البناء لوظيفة Netlify الخاصة بك لضمان تثبيت جميع التبعيات.

خاتمة

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