[شرح] : إضافة خاصية الدفع عن طريق PayPal في مواقع الويب

[محروم.كوم]

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

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

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

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



توجه إلى Merchant Services ستظهر لك صفحة جديدة مثل هده



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



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

سيعيك الموقع كودا مثل هذا

رمز Code:




























الكود بسيط يحتاج لقراءته فقط حتى تفهمه... سأشرحه أهم أجزاءه بالتفصيل فلا تقلق:

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

Business : هو الدومين المستخدم في باي بال و الذي سيتم استقبال الأموال عليه

Item Number: معلومات تظهر للمشتري عند شرائه الخدمة

Currency Code: و هي العملة المستخدمة في الدفع،يمكنك تغييرها إن شئت

Item Name: و هي تسمية الزر التي وضعناها سابقا

Amount: و تمثل قيمة المال الذي سيتم إرسالها لك بعد انهاء عملية الشراء و الدفع.

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

بعد آخر input نضع السطر التالي


رمز Code:

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

رمز Code:

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

رمز Code:


Make a Donation to Almaggeek


Fill out the form and send us a few dollars for your favourite tutorial:













Donation / Contribution?







Donation

Contribution





Which tutorial are you donating for?




The PayPal Form Tutorial

The Amazon S3 Tutorial

Some Other Tutorial





How much do you want to donate?


$





























مبروك فقد اخذتم فكرة حول كيفية الدفع عن طريق باي بال :icon31: __DEFINE_LIKE_SHARE__