المدفوعات عبر الإنترنت مع Square and React

إذا كان التفكير في تنفيذ المدفوعات عبر الإنترنت يرعبك، فأنت لست وحدك. مهما كان الأمر مخيفًا، فإن ضمان حصولك على أموال هو أهم جزء في بناء عمل تجاري عبر الإنترنت. لحسن الحظ، أخذنا الكثير من التخمينات في بناء تدفق للدفع عبر الإنترنت.

جعلت Square Web Payments SDK معالجة المدفوعات عبر الإنترنت أسهل من أي وقت مضى. يتيح لك SDK إنشاء تدفق الدفع الخاص بك ومعالجة المدفوعات بأمان. والأفضل من ذلك، إذا كنت تقوم ببناء تطبيق React ، فإن رد فعل-مربع-ويب-مدفوعات- sdk يوفر غلاف React الذي يبسط العملية وصولاً إلى عدد قليل من المكونات.

في هذا البرنامج التعليمي، سنعرض كيف يمكنك إنشاء تدفق دفع مخصص خاص بك باستخدام react-square-web-payments-sdk. سنستخدم Next.js لإنشاء نموذج دفع في الواجهة الأمامية، بالإضافة إلى معالجة الدفع في النهاية الخلفية باستخدام Square Payments API. بنهاية هذا البرنامج التعليمي، سيكون لديك تدفق دفع كامل الوظائف يقبل بطاقات الائتمان و Google Pay و Apple Pay. حان الوقت لكسب المال.

ابدء

ملاحظة: نظرًا لأن المدفوعات تتطلب كلاً من كود الواجهة الأمامية والخلفية، فإننا نستخدم Next.js لأنه يوفر إطار عمل مكدس كامل. سيتطلب هذا البرنامج التعليمي فهمًا أساسيًا لكل من React و Next.js. يمكن العثور على جميع الكود الخاص بهذا البرنامج التعليمي في Github repo .

للبدء، قم إما بفتح مشروع Next.js الحالي الخاص بك أو إنشاء تطبيق Next.js جديد تمامًا عن طريق التشغيل

ملاحظة: في وقت كتابة هذا التقرير، أعلن Vercel مؤخرًا عن إصدار Next.js 13. هذا البرنامج التعليمي متوافق مع كل من Next.js 12 و Next.js 13، لذلك لا داعي للقلق بشأن الإصدار الذي تستخدمه.

مع إنشاء مشروعنا، فإن أول شيء يتعين علينا القيام به هو تثبيت react-square-web-payments-sdkالحزمة عن طريق التشغيل

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

سأضيف أيضًا بعض الأنماط إلى الحاوية الخاصة بنا divلتوسيط Home.module.cssالنموذج على الصفحة.

ستلاحظ أن PaymentFormالمزود يتطلب ثلاث دعائم. دعونا نلقي نظرة على كل منهم.

  • applicationId: هذا هو معرف تطبيق Square الخاص بك. يمكنك العثور على هذه القيمة في Square Developer Dashboard.
  • locationId: هذا هو المعرف الخاص بموقع عملك المحدد. أفضل طريقة للعثور على هذا المعرف هي تشغيل طلب “قائمة المواقع” عبر Square API Explorer . يمكنك البحث في بيانات الاستجابة لرؤية معرّفات جميع مواقعك.
  • cardTokenizeResponseReceived: أعدك أن هذا ليس معقدًا كما يبدو. هذه وظيفة رد اتصال سيتم تشغيلها بعد إنشاء رمز مميز لطريقة الدفع. إذا كان هذا يبدو وكأنه حفنة من الثرثرة، فلا تقلق. لنأخذ استراحة سريعة للحديث عن الترميز.

ترميز الدفع

رمز الدفع هو عملية أخذ معلومات دفع حساسة واستبدالها برقم تم إنشاؤه غير حساس يسمى رمزًا مميزًا. نقوم بذلك لحماية معلومات الدفع الخاصة بالمستخدمين وإضافة مستوى من الأمان. إذا كنت قلقًا بشأن كيفية تنفيذ الترميز، فلا تقلق. سكوير يعتني بهذا من أجلك. كل ما عليك فعله هو توفير وظيفة تستخدم الرمز بمجرد إنشائه. هذا هو المكان cardTokenizeResponseReceivedالذي يأتي فيه. في النهاية، سنقوم بتعريف هذه الوظيفة لمعالجة مدفوعاتنا بالرمز المميز، ولكن في الوقت الحالي، دعونا نبقيها بسيطة ونقوم بتسجيل الرمز المميز والمشتري في وحدة التحكم.

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

قبول الدفع ببطاقة الائتمان

من خلال التهيئة الخاصة بنا PaymentForm، يمكننا الآن إضافة طريقة دفع إلى نموذجنا. يجب أن تكون أي طريقة دفع جيدة قادرة على قبول بطاقة ائتمان، بحيث تكون هذه هي طريقة الدفع الأولى التي نضيفها. للقيام بذلك، دعنا نستورد CreditCardالمكون من لدينا react-square-web-payments-sdkثم نضيف المكون كعنصر تابع لملف PaymentForm.

مدهش. أضاف هذا المكون على الفور طريقة آمنة ومأمونة لقبول الدفع ببطاقة الائتمان. في الوقت الحالي، إذا حاولت إدخال رقم بطاقة الائتمان والنقر فوق “دفع”، فسنقوم cardTokenizeResponseReceivedبتشغيل رمز الدفع وتسجيله في وحدة التحكم. يمكنك الرجوع إلى مستندات Sandbox Payment الخاصة بأرقام بطاقات الائتمان Sandbox التي يمكنك استخدامها للاختبار.

هذه خطوة رائعة نحو الوظائف، ولكن من المحتمل أن هذا النموذج الافتراضي لا يتناسب تمامًا مع جمالية تطبيقك. لحسن الحظ، CreditCard يسمح لنا المكون بتطبيق أنماط لتتناسب مع موضوع تطبيقنا بشكل أفضل قليلاً.

لا تزال هناك احتمالات بأن هذا لا يتناسب مع جمالية تطبيقك، لكني أردت أن أوضح أن مظهر نموذجنا قابل للتخصيص تمامًا. لا تتردد في التحقق من مستندات response-square-web-payments-sdk للاطلاع على جميع الدعائم والأنماط المختلفة التي يمكنك تطبيقها لتغيير شكل ومظهر النموذج الخاص بك.

معالجة الدفع

يمكن الآن أن تقبل نموذج الدفع لدينا بطاقة ائتمان، لكننا لم نحصل بعد على مدفوعاتنا. نحتاج الآن إلى معالجة الدفع باستخدام Square Payments API. يجب إجراء معالجة الدفع هذه على الخادم، لذلك سنستفيد من مسارات واجهة برمجة تطبيقات Next.js لإنجاز ذلك.

قم بإعداد الخادم

أولاً، دعنا ننشئ مجلدًا جديدًا في دليلنا pages يسمى api. داخل apiالمجلد ، قم بإنشاء ملف جديد يسمى pay.js. هذا هو المكان الذي سنكتب فيه نقطة النهاية المخصصة لدينا لمعالجة الدفع.

نظرًا لأننا سنستخدم Square Payments API، فنحن بحاجة إلى تثبيت Square Node.js SDK.

يمكن العثور على قيمة رمز الوصول الخاص بك في Square Developer Dashboard ، ضمن التطبيق المحدد الخاص بك.

ملاحظة: نحن بحاجة إلى إبقاء رمز الوصول الخاص بنا مخفيًا، لذلك نقوم بتخزينه في متغير بيئة. لمزيد من المعلومات حول كيفية إنشاء متغيرات البيئة في مشروع Next.js، راجع وثائق Next.js.

تعامل مع الطلب

مذهل. لقد وضعنا جميع إعداداتنا في مكانها الصحيح، لذلك دعنا نمضي قدمًا ونكتب وظيفة معالج الطلب التي ستكون مسؤولة عن معالجة الدفع. يهدف هذا المعالج إلى التعامل مع طلب POST، لذلك سنريد أولاً التحقق method من الكائن لدينا req. إذا كان طلب POST، فيمكننا بعد ذلك تشغيل createPayment الطريقة من ملف paymentsApi.

دعنا نلقي نظرة على جسم الطلب الذي نمرره إلى createPaymentالطريقة.

  • idempotencyKey: سلسلة فريدة تحدد هذا الطلب. لإنشاء سلسلة فريدة، نستخدم الوظيفة randomUUID من وحدة التشفير Node.js. لا تنس استيراد هذا في الأعلى.
  • sourceId: الرقم التعريفي لمصدر الأموال للدفع. في حالتنا، سيكون هذا هو رمز الدفع الذي تم إنشاؤه بواسطة نموذج الدفع Square. سنقدم هذا الرمز المميز في نص طلب POST.
  • amount Money: كائن يحدد مقدار المال الواجب دفعه. في حالتنا نحدد العملة لتكون بالدولار الأمريكي، ويكون المبلغ بأصغر فئة من نوع العملة. لذا فإن القيمة 100 تمثل 100 سنت، أو 1.00 دولار.

ملاحظة: يمكنك رؤية جميع الخيارات التي يمكنك تمريرها إلى هذه الطريقة في مرجع API.

أخيرًا، بعد أن ننتظر نتيجة إنشاء الدفع، نرسل النتيجة مرة أخرى إلى العميل برمز الحالة 200.

إرسال طلب POST

تم إنشاء نقطة نهاية معالجة الدفع المخصصة لدينا. نحتاج الآن إلى الاستفادة منه عن طريق إرسال طلب POST إلى نقطة النهاية من نموذج الدفع الخاص بنا. للقيام بذلك، سنقوم بإعادة النظر في cardTokenizeResponseReceived الدعامة التي رأيناها سابقًا على مزودنا PaymentForm. مرة أخرى، هذه الخاصية هي وظيفة رد نداء يتم تنفيذها بمجرد تحويل دفعاتنا إلى رموز رمزية.

لإرسال طلب POST الخاص بنا، سنستخدم Fetch API ونضمّن رمزنا المميز في bodyطلبنا.

تذكر أنه سيتم استخدام رمزنا المميز sourceId كطريقتنا createPayment.

اوشكت على الوصول

على الرغم من أن الكود الخاص بنا قد يبدو جيدًا في هذه المرحلة، إذا حاولنا إنشاء دفعة الآن، فسنواجه هذا الخطأ على الخادم TypeError: Do not know how to serialize a BigInt:. يحدث هذا الخطأ لأن قيم BigInt لا يتم تسلسلها في JSON افتراضيًا. لإصلاح هذا،حتاج إلى العودة إلى ملفنا pay.jsوتحديد toJSONطريقتنا الخاصة لإرجاع سلسلة.

الآن طريق API جاهز للانطلاق.

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

لتأكيد معالجة الدفع، يجب أن نتمكن أيضًا من رؤيته في علامة تبويب المعاملات في لوحة معلومات البائع في وضع الحماية.

ويوجد لدينا ذلك. لقد نجحنا في تنفيذ معالجة الدفع الشاملة.

محافظ رقمية – Apple و Google Pay

كلما زادت الطرق التي نسمح بها لعملائنا بالدفع لنا، كان ذلك أفضل. لهذا السبب، يمكن لـ SDK لمدفوعات الويب التعامل مع أكثر بكثير من مجرد مدفوعات بطاقات الائتمان. يمكننا أيضًا دمج المحافظ الرقمية مثل Apple و Google Pay في نموذج الدفع الخاص بنا. مع الإعداد الذي لدينا حاليًا، لا يتطلب الأمر سوى بضعة أسطر من التعليمات البرمجية لإضافة طرق الدفع هذه. دعونا نرى كيف يمكننا إعداد هذه.

إذا كنت تتذكر، قلت سابقًا أن مزودنا PaymentFromيتطلب ثلاث دعائم. في الواقع، إنها أربعة. لإضافة محافظ رقمية، PaymentFormيتطلب مزودنا دعامة إضافية واحدة تسمى createPaymentRequest. تُستخدم هذه الخاصية لالتقاط تفاصيل دفع المحفظة الرقمية. لأغراضنا، سنقدم التفاصيل الأساسية.

يمكنك رؤية جميع الخيارات المختلفة التي يمكنك توفيرها لهذه الدعامة في مستندات response-square-web-payments-sdk .

الآن يمكننا استيراد المكونات ApplePayوالمكونات GooglePayوإضافتها كأطفال إلى جانب CreditCardالمكون الخاص بنا.

ملاحظة: لن يظهر لك زر Apple Pay. من أجل دعم Apple Pay ، ستحتاج أولاً إلى تسجيل مجال Sandbox الخاص بك مع Apple . ضع في اعتبارك أن طريقة الدفع هذه ستكون متاحة فقط على متصفحات Safari التي تدعم Apple Pay.

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

خاتمة

ويوجد لدينا ذلك. لقد أنشأنا تدفقًا شاملاً لمعالجة الدفع يقبل بطاقات الائتمان والمحافظ الرقمية. كما ترون، فإن رد فعل مربع ويب-payments-sdk يبسط بشكل كبير تنفيذ قبول المدفوعات ومعالجتها. ما كان مرعبًا ومخيفًا في يوم من الأيام أصبح الآن متاحًا ويمكن التحكم فيه. لذا انطلق ودمج هذا التدفق في طلبك وابدأ في جني الأموال. لا يسعنا الانتظار لرؤية ما تقوم ببنائه.

المصدر: developer

شاهد المزيد:

ربح المال من الانترنت

ما هي استضافة المواقع الإلكترونية

متخصص سيو

ترجمة هولندي عربي

افضل شركات الاستضافة

تحسين محركات البحث SEO 2023

قوالب ووردبريس عربية

أفضل اضافات ووردبريس

أنت تستخدم إضافة Adblock

يعتمد موقع انشاء على الاعلانات كمصدر لدعم الموقع، يجب عليك ايقاف تشغيل حاجب الاعلانات لمشاهدة المحتوي