إضافة خاصية الدفع عن طريق PayPal في مواقع الويب

ﻻ اعتقد أني امزح ان قلت بأن هذا أول درس في الويب العربي يتحدث عن طريقة برمجة زر للدفع عن طريق البنك الإلكتروني PayPal،و إن شاء الله لن يكون الأخير ففي جعبتي الكثير ﻷقدمه للويب العربي على الأقل حتى نواكب أولئك الذين يصدرون لنا كل شيء...كل شيء.

في هذا الدرس أو المقال سنقوم ببرمجة أو بالأحرى إعادة تصميم لزر الدفع عن طريق بنك باي بال الإلكتروني،بسبب أن  الزر الذي يقدمه البنك للمطورين غير عملي أو بالأحرى غير جميل و غير متوافق مع تصميمات مواقع الويب الحديثة...

سنأخذ مثاﻻ عن زر التبرع في باي بال و نفس الخطوات عليك اتباعها إن اردت استخدام زر الدفع،أتمنى لكم فهما سهلا...لنبدأ.

قبل أن ننطلق في الدرس عليك أن تصمم صفحة عن طريق HTML و CSS و هي الصفحة التي سعود إليها المشتري بعد إنهاء العملية و التي تخبره بنجاح العملية  (افترض أن لديك خبرة جيدة جدا في هاتين اللغتين و بالتالي سأترك لك مهمة تصميم و كتابة كود الصفحة بما يتناسب و رؤيتك).

أدخل لحسابك في باي بال 

اعتذر عن جودة الصورة،فلم أجد غيرها،توجه إلى Merchant Services ستظهر لك صفحة جديدة مثل هته

قم باختيار  Buy Now Buttons كما هو موضح في الصورة أعلاه بعدها ستظهر لنا صفحة أخرى لتخصيص زر الدفع كما في الصورة التالية

في خانة الـ Item Name اكتب اسما للزر،في خانة Item ID اكتب رقما تعريفيا للزر،يفضل في هته الحالة اعطاءه الرقم 1 في خانة Price اكتب القيمة التي تريد للمشتري أن يدفعها و أكمل بقية الخانات بالبيانات التي تريد إضافتها في حالة وجودها او يمكنك تركها فارغة،بعدها قم بالضغط على زر Save Change.
سيعيك الموقع كودا مثل هذا

ﻻ تخف من الكود فهو بسيط و يحتاج لقراءته فقط حتى تفهمه... سأشرحه أهم أجزاءه بالتفصيل فلا تقلق:
من الممكن جدا أن ﻻ تحصل على كل تلك الخصائص فهذا الكود خاص بزر بكثير من الخصائص استخدمته من أجل شرح كل الخصائص المتاحة...
Business : هو الدومين المستخدم في باي بال و الذي سيتم استقبال الأموال عليه
Item Number: معلومات تظهر للمشتري عند شرائه الخدمة
Currency Code: و هي العملة المستخدمة في الدفع،يمكنك تغييرها إن شئت
Item Name: و هي تسمية الزر التي وضعناها سابقا
Amount: و تمثل قيمة المال الذي سيتم إرسالها لك بعد انهاء عملية الشراء و الدفع.



الآن علينا تغيير الصفحة التي سيعود إليها المشتري بعد إنهاء عملية الشراء،فنحن ﻻ نريده البقاء في باي بال.
بعد آخر input نضع السطر التالي

الآن سنغير الصورة و نضع زرا عاديا يمكنك تغيير شكله كما تريد و ذلك بتغيير الـ input التي تحمل النوع image بحيث يصبح كالتالي:

 و بالتالي يصبح الكود النهائي كالتالي

ما رأيكم،مبروك فقد اخذتم فكرة حول كيفية الدفع عن طريق باي بال،ﻻ تقلقوا فهذا مجرد بداية الغيث و إن شاء الله سيكون لنا عمل أكثر تعقيدا مع باي بال.
تعبت كثيرا لكتابة هذا المقال،و أتمنى أن أرى آرائكم حوله...ﻻ تنسى مشاركة المقال مع الأصدقاء،دمتم بود،سلام