بناء واجهة متجر تجارة إلكترونية بدون خادم باستخدام React و Next.js و Stripe
مقدمة
ستوجهك هذه المقالة خلال إنشاء واجهة متجر تجارة إلكترونية أساسية باستخدام 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 للنجاح والإلغاء. يمكن أن تكون هذه صفحات بسيطة تعرض رسالة للمستخدم.
خاتمة
يوفر هذا فهمًا أساسيًا لبناء واجهة متجر تجارة إلكترونية بدون خادم. يمكنك التوسع في هذا عن طريق إضافة ميزات مثل:
- وظائف عربة التسوق
- مصادقة المستخدم
- تكامل قاعدة البيانات لإدارة المنتجات
- معالجة أخطاء أكثر قوة