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