05b540997e
- Implemented Prisma schema with models for AdminUser, AppSettings, and Snapshot. - Created seed script to initialize the database with an admin user and JWT secret. - Developed admin login page with form handling and error management. - Added API routes for admin login, logout, change password, and JWT verification. - Integrated Stripe for payment intent management in admin orders. - Established middleware for protecting admin routes with JWT authentication. - Created Zustand stores for managing persona and snapshot states.
109 lines
3.3 KiB
Markdown
109 lines
3.3 KiB
Markdown
# Stripe Payment Integration
|
|
|
|
## ملخص التعديلات
|
|
|
|
تم استبدال نظام الدفع التجريبي (Demo) بتكامل حقيقي مع **Stripe** لمعالجة المدفوعات.
|
|
|
|
---
|
|
|
|
## الملفات الجديدة
|
|
|
|
### 1. `src/app/api/create-payment-intent/route.ts`
|
|
- API Route على السيرفر لإنشاء Stripe PaymentIntent
|
|
- يستقبل المبلغ بالدرهم (AED) ويحوله لأصغر وحدة (فلس)
|
|
- يرسل metadata تشمل الـ persona واللون وإيميل العميل
|
|
|
|
### 2. `.env.example`
|
|
- ملف مرجعي يحتوي على أسماء المتغيرات المطلوبة لمفاتيح Stripe
|
|
|
|
---
|
|
|
|
## الملفات المعدّلة
|
|
|
|
### 3. `src/store/useOrderStore.ts`
|
|
**قبل:**
|
|
```ts
|
|
export interface PaymentInfo {
|
|
cardNumber: string;
|
|
expiry: string;
|
|
cvv: string;
|
|
nameOnCard: string;
|
|
}
|
|
```
|
|
|
|
**بعد:**
|
|
```ts
|
|
export interface PaymentInfo {
|
|
paymentIntentId: string;
|
|
clientSecret: string;
|
|
status: 'idle' | 'processing' | 'succeeded' | 'failed';
|
|
errorMessage: string;
|
|
}
|
|
```
|
|
|
|
- تمت إضافة action جديد: `createPaymentIntent()` — يستدعي الـ API Route وينشئ PaymentIntent
|
|
- تم تعديل `setPayment()` ليقبل `Partial<PaymentInfo>` للتحديث التدريجي
|
|
|
|
---
|
|
|
|
### 4. `src/components/checkout/PaymentStep.tsx`
|
|
**قبل:** فورم يدوي يجمع بيانات البطاقة (رقم، تاريخ انتهاء، CVV، اسم) — بدون معالجة حقيقية
|
|
|
|
**بعد:** يستخدم `<PaymentElement>` من Stripe Elements — يعرض واجهة دفع آمنة تدعم:
|
|
- بطاقات الائتمان/الخصم
|
|
- Apple Pay
|
|
- Google Pay
|
|
- طرق دفع أخرى حسب إعدادات حساب Stripe
|
|
|
|
---
|
|
|
|
### 5. `src/components/checkout/ReviewStep.tsx`
|
|
**قبل:** زر "Place Order" كان يعمل `setTimeout(1500)` فقط (محاكاة)
|
|
|
|
**بعد:** يستدعي `stripe.confirmPayment()` لتأكيد الدفع الحقيقي عبر Stripe، مع عرض رسائل الخطأ إذا فشل الدفع
|
|
|
|
---
|
|
|
|
### 6. `src/components/CheckoutOverlay.tsx`
|
|
- تم تحميل Stripe.js عبر `loadStripe()`
|
|
- يتم إنشاء PaymentIntent تلقائياً عند الدخول لخطوة الدفع
|
|
- يتم تغليف خطوتي Payment و Review بـ `<Elements>` provider من Stripe
|
|
|
|
---
|
|
|
|
### 7. `src/store/useOrderStore.test.ts`
|
|
- تم تحديث الـ tests لتتوافق مع الـ `PaymentInfo` الجديد
|
|
|
|
---
|
|
|
|
## الحزم المضافة
|
|
|
|
```
|
|
stripe — Stripe SDK (سيرفر)
|
|
@stripe/stripe-js — Stripe.js loader (كلاينت)
|
|
@stripe/react-stripe-js — React components (Elements, PaymentElement)
|
|
```
|
|
|
|
---
|
|
|
|
## الإعداد
|
|
|
|
1. أنشئ ملف `.env.local` في root المشروع:
|
|
|
|
```env
|
|
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
|
|
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxx
|
|
```
|
|
|
|
2. احصل على المفاتيح من: https://dashboard.stripe.com/apikeys
|
|
|
|
3. للتجربة استخدم مفاتيح الـ test (`pk_test_` / `sk_test_`)
|
|
|
|
---
|
|
|
|
## تدفق الدفع الجديد
|
|
|
|
```
|
|
Config → Shipping → [Payment Intent Created] → Payment (Stripe Elements) → Review → confirmPayment() → Confirmed
|
|
```
|