اضافة بوابات الدفع

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

نحن نقدر طلبك هذا وسأقوم بإيصاله إلى إدارة الأكاديمية لبحثه ومحاولة إضافة بوابات الدفع في التحديثات القادمة إن شاء الله.

لم يتم استخدام stripe و paypal هنا في دورة جافاسكريبت أو أى بوابة دفع لأنه لم يتم إنشاء متجر أو مشروع بحاجة بوابة دفع وستجد في دورة بايثون بالفعل تم شرح إستخدام stripe و paypal لأنه تم إنشاء مشروع متجر إلكتروني.

لذا يمكنك الإعتماد على المصادر التالية:

كتعريف : ما هي بوابة دفع سترايب stripe؟

ولشرح التمضين وكتابة الكود يوجد قائمة عربية جيدة لكيفية استخدام stripe مع React وExpress ستجدها هنا:

أما المستند الرسمي بالنسبة لـ React SDK فهو التالي:

• https://stripe.com/docs/stripe-js/react

ويتم إستخدام المكتبات لبوابات الدفع والأمر ليس بتلك الصعوبة فمثلا لإستخدام :

• Stripe: يمكنك إستخدام مكتبة @stripe/react-stripe-js و @stripe/stripe-js.
• PayPal: يمكنك إستخدام @paypal/react-paypal-js.
  • وهذه هي المكتبة : https://www.npmjs.com/package/@paypal/react-paypal-js

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

وجميع بوابات الدفع لها نفس المنطق الذي يختلف هو ال API الذي ترسل له المعلومات ولكن أغلب المنطق هو واحد في التعامل.

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

ملاحظتك في محلّها تماما فبوابات الدفع موضوع بالغ الأهمية في تطوير تطبيقات الويب لكن غالبا لا تدرَس بوابات الدفع ضمن دورات JavaScript الأساسية لأنها تعدّ موضوعا تطبيقيا متقدما لكن هذا لا يعني أنه لن يتم إضافته مستقبلا فكلّ شيء وارد.

للبدء من الآن يمكنك الاطلاع على التوثيق الرسمي ل Stripe لكن هو باللغة الإنجليزية فيمكنك البدء بدمج Stripe في مشروع Node.js بسيط باتباع ال Quickstart الرسمي إذ ستجد أمثلة كاملة بالكود.

• https://docs.stripe.com

ومن هنا:

شكرًا على ملاحظتك وإهتمامك، بالفعل، بوابات الدفع مهارة أساسية لا غنى عنها في الواقع العملي، سيتم وضع ذلك في الإعتبار في التحديثات القادمة.

عملية الدفع لا تعتمد على لغة البرمجة بحد ذاتها بقدر ما تعتمد على التكامل مع خدمات خارجية، و في تطبيقات MERN، يتم تقسيم تلك المهمة إلى جزأين لضمان الأمان:

في الواجهة الأمامية من خلال React نستخدم مكتبات مخصصة من بوابة الدفع مثل Stripe Elements لعرض نموذج إدخال آمن، ولا يتم إرسال بيانات البطاقة لخادمك أبدًا، بل تُرسل لبوابة الدفع التي تعيد لك رمز مشفر Token.

وفي الواجهة الخلفية Node.js  وExpress أو Next.js يتم استلام الرمز المشفر من React، وتُستخدم المفاتيح السرية Secret Keys الخاصة بك للاتصال الآمن بـ API بوابة الدفع لتأكيد عملية الخصم، ثم تسجيل نجاح العملية في قاعدة البيانات MongoDB.

في الوقت الحالي تستطيع الإعتماد على يوتيوب لشرح الأمر بشكل عملي لك، ويجب أن  تعتمد على التوثيق الرسمي لبوابات الدفع مثل Stripe حيث يوضح لك خطوة بخطوة كيف تضع الكود في React وكيف تستقبله في Node.js.

وفي حال واجهتك صعوبة تستطيع الاستفسار هنا.