kassam/yslootahrobotics
1
1
Fork 0
forked from hazem/yslootahrobotics
Code Pull Requests Activity
yslootahrobotics/STRIPE_INTEGRATION.md
Najjar\NajjarV02 05b540997e feat: add admin authentication and management features 
- 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.
2026-04-13 17:57:59 +04:00

3.3 KiB
Raw Blame History

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

قبل:

export interface PaymentInfo {
  cardNumber: string;
  expiry: string;
  cvv: string;
  nameOnCard: string;
}

بعد:

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 المشروع:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxx

  1. احصل على المفاتيح من: https://dashboard.stripe.com/apikeys

  2. للتجربة استخدم مفاتيح الـ test (pk_test_ / sk_test_)

تدفق الدفع الجديد

Config → Shipping → [Payment Intent Created] → Payment (Stripe Elements) → Review → confirmPayment() → Confirmed