إضافة صفحة payment , ربط الموقع مع جوجل او فيسبوك

وعليكم السلام ورحمة الله وبركاته،
بالنسبة لإنشاء صفحة الدفع (Payment) باستخدام React، نعم يمكنك ذلك ، فـ React تُستخدم كثيرًا في مثل هذه الصفحات. لكن ستحتاج إلى تحديد بوابة دفع مثل Stripe أو PayPal، وهي توفر مكتبات جاهزة وتقدملك كود يمكنك إضافته لتسهيل عملية الدمج مع React  وتتعامل معها من الواجهة الأمامية.

و بالنسبة لتسجيل الدخول باستخدام حساب Google أو Facebook، فبإمكانك استخدام مكتبات مثل:

react-oauth/google لتسجيل الدخول بحساب Google

react-facebook-login لتسجيل الدخول بحساب Facebook

وبعد الحصول على بيانات المستخدم من Google أو Facebook، يمكنك إرسال هذه البيانات إلى الباك اند (Back-end) لمزيد من العمليات والتحقق من وجود الحساب أو إنشاء حساب جديد.

يمكنك التطور في الأمر خطوة بخطوة سيكون الأمر سهل إن شاء الله.

وعليكم السلام ورحمة الله وبركاته.

لإنشاء صفحة دفع يتطلب دمج الكود لديك مع مزود خدمة دفع خارجي (Payment Gateway) حيث لا يمكنك معالجة المدفوعات مباشرة في الواجهة الأمامية أو الخلفية بنفسك لأسباب أمنية .

ولذلك يجب عليك أولا اختيار مزود خدمة دفع (Payment Gateway ) والأكثر شهرة وإستخدام هما  Stripe و PayPal وكلاهما يوفر وثائق ممتازة ومكتبات سهلة الاستخدام ل React.

فمثلا لإستخدام :

• Stripe: يمكنك إستخدام مكتبة @stripe/react-stripe-js و @stripe/stripe-js.
• PayPal: يمكنك إستخدام @paypal/react-paypal-js.
  • وهذه هي المكتبة : https://www.npmjs.com/package/@paypal/react-paypal-js
  • و يمكنك تفقد المثال التالي : https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--default

وطريقة العمل هو في الواجهة الأمامية (React) ترسل معلومات الدفع مثل رمز البطاقة "token" الذي تم إنشاؤه بواسطة مكتبة مزود الدفع أو معرف المنتج أو الخدمة الذي تستخدمه إلى الواجهة الخلفية. وفي الواجهة الخلفية يتم إستخدام مفتاح API السري الخاص بك للتواصل مع مزود خدمة الدفع لإنشاء عملية الشحن (charge) أو الدفع. وفي النهاية يتلقى الخادم استجابة من مزود الدفع سواء بنجاح العملية أو فشلها ويرسلها مرة أخرى إلى الواجهة الأمامية. أنصحك بمشاهدة فيديوا على اليوتيوب لهذا الأمر حيث الأمر طويل قليلا ولكنه سهل ولكن يحتاج إلى التركيز والتطبيق.

أما بالنسبة إلى تسجيل الدخول باستخدام حسابات Google أو Facebook فإن هذه العملية تسمى OAuth أو Social Login.

وستحتاج إلى إنشاء تطبيق (App) في Google Developers Console و Facebook Developers لتستطيع إستخدام تلك الخاصيتين التي توفرهم جوجل وفيسبوك .

حيث ستحتاج إلى Client ID و Client Secret لكل منهما وستضيف عن وان URL لإعادة التوجيه (Redirect URI) الخاص بتطبيقك لتوجيه المستخدم بعد نجاح تسجيل الدخول وإستقبال البيانات من جوجل وفيسبوك في هذا العنوان .

ويوجد المكتبات التالية لتساعدك في ذلك وهي المكتبات الأساسية لهم :

• react-google-login أو react-oauth/google .
• react-facebook-login.

وستحتاج إلى قراءة التوثيق الرسمي لهم لمعرفة كيفية الإستخدام.