Connecting React with the Stripe payment gateway

قمت بتطوير نظام دفع إلكتروني متكامل يربط بين واجهة مستخدم مبنية بـ React وسيرفر خلفي مبني بـ Node.js، مع دمج بوابة الدفع العالمية Stripe. المشروع مصمم ليكون نموذجاً للمتاجر الإلكترونية التي تتطلب درجة عالية من الأمان وسهولة الاستخدام.

المميزات التقنية التي قمت بتنفيذها:

تكامل Stripe Checkout: إعداد عملية دفع احترافية تدعم البطاقات الائتمانية مع معالجة آمنة للبيانات.

الأمن والحماية (Security): تنفيذ أفضل الممارسات الأمنية عبر إخفاء مفاتيح الـ API الحساسة باستخدام Environment Variables ومنع رفعها إلى المستودعات العامة.

بناء REST API: تطوير سيرفر باستخدام Express.js لمعالجة الطلبات، إنشاء الجلسات (Sessions)، وإدارة الردود (Callbacks).

تجربة مستخدم سلسة: ربط الواجهة الأمامية بالخلفية لضمان تحويل المستخدم لصفحة النجاح أو الإلغاء بناءً على حالة العملية.

كود نظيف (Clean Code): تنظيم هيكلية المشروع لفصل منطق العمل (Backend) عن واجهة العرض (Frontend) مما يسهل عملية التطوير المستقبلي.

التقنيات المستخدمة:

Frontend: React.js, Hooks, Axios.

Backend: Node.js, Express.js.

Payment Gateway: Stripe API & SDK.

Security & Tools: Dotenv, CORS, Git, GitHub.