# 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
```