قبول المدفوعات مع Square و Svelte
إذا كان التفكير في تنفيذ المدفوعات عبر الإنترنت يجعل معدتك متوترة، فأنت لست وحدك. قد يكون إنشاء تدفق للدفع عبر الإنترنت أمرًا مخيفًا للغاية. بعد كل شيء، يمكن أن يكون لعملية الدفع غير الآمنة تداعيات خطيرة على عملك. لحسن الحظ، سكوير هنا لمساعدتك في التخفيف عنك من كل ما يقلقك وتشغيلك من خلال تنفيذ مدفوعات آمن ومضمون.
في هذا البرنامج التعليمي، سنأخذك خطوة بخطوة خلال عملية دمج تدفق دفع بسيط وآمن في تطبيقك. سنستخدم Square Web Payments SDK و Square Payments API لتنشيطنا وتشغيلنا حتى تتمكن من البدء في قبول المدفوعات عبر الإنترنت. للمساعدتنا،سنستخدم SvelteKit كإطار عمل لهذا المشروع. SvelteKit هو إطار عمل مكدس كامل يوفر الكثير من الميزات الرائعة التي ستساعد في تبسيط تنفيذ المدفوعات. بحلول نهاية هذا البرنامج الالتعليمي،يكون لديك تدفق دفع كامل الوظائف وآمن يقبل مدفوعات بطاقات الائتمان. إليك ما ستبدو عليه النتيجة النهائية:
قبل التعمق في التفاصيل، تحقق من هذا العرض التوضيحي الذي يسلط الضوء على كل خطوة من خطوات تنفيذ تدفق المدفوعات من البداية إلى النهاية.
الآن بعد أن أصبح لدينا فكرة عامة عن كيفية معالجة دفعة، دعنا نقسم كل خطوة ونتعمق في التفاصيل التي تجعل هذا العمل ناجحًا.
قم بإنشاء نموذج الدفع ببطاقة الائتمان
تتمثل الخطوة الأولى في بناء تدفق الدفع في إنشاء نموذج يقبل بطاقات الائتمان. لحسن الحظ بالنسبة لنا، تهتم Square Web Payments SDK بالكثير من الرفع الثقيل في هذه الخطوة. من أجل استخدام Web Payments SDK، نحتاج إلى إضافة scriptالعلامة التالية إلى headملفنا app.html.
مع إضافة البرنامج النصي الخاص بنا، يمكننا البدء في إنشاء نموذج الدفع الخاص بنا. في +page.svelteملفنا الرئيسي، دعنا نضيف النموذج التالي.
يمكننا أيضًا إضافة بعض CSS لتصميم زرنا.
ستلاحظ أن نموذجنا يشتمل على div” idحاوية بطاقة”. من المفترض أن يكون هذا divعنصرًا نائبًا للمكان الذي سيذهب إليه حقل إدخال البطاقة. سنحتاج إلى استخدام Square Web Payments SDK لإنشاء حقل إدخال آمن في تلك الفتحة. لنفعل هذا في وظيفة تسمى initializePaymentForm.
هناك ثلاثة أشياء تحدث في هذه initializePaymentFormالوظيفة. دعنا نقسمها:
- أولاً، نتحقق للتأكد من
Squareوجود الكائن. يأتي هذا الكائن من هذا البرنامج النصي الذي أضفناه سابقًا في ملفhead. لن يعمل هذا بدون هذا البرنامج النصي. - بعد ذلك، نقوم بتهيئة Web Payments SDK عن طريق الاتصال
Square.payments(appId, locationId). لقد حددت وظيفتناappIdوخارجهاlocationId، فقط في حالة احتياجنا لاستخدامها في أي مكان آخر في تطبيقنا. - أخيرًا، نقوم بتهيئة طريقة الدفع بالبطاقة
payments.card()عن طريق الاتصال بها وتخزينها في متغير يسمىcard. نقوم بعد ذلك بإرفاق بطاقتنا بالعنصر النائبdivمعid“حاوية البطاقة” من أجل عرض إدخال البطاقة على الصفحة.
تبدو وظيفتنا initializePaymentFormرائعة ، لكننا الآن نحتاج إلى تسميتها في مكان ما لإعداد النموذج الخاص بنا. هذه فرصة مثالية لاستخدام كتل انتظار Svelte .
هذه هي الطريقة التي يمكننا بها تنفيذ وظيفتنا initializePaymentForm. أثناء تشغيل الوظيفة، سنرى النص “جارٍ التحميل …” على الشاشة. بمجرد اكتماله، سنرى حقل إدخال البطاقة. إذا ألقت الوظيفة خطأ، فسنعرض رسالة الخطأ بدلاً من ذلك.
رمز رمز طريقة الدفع
حسنًا، لقد تم إعداد نموذج الدفع بالكامل. نحتاج الآن إلى معالجة الدفع عند تقديم النموذج. للقيام بذلك، هناك قطعة أخرى نحتاجها في لغز الدفع هذا: الترميز.
رمز الدفع هو عملية أخذ معلومات دفع حساسة واستبدالها برقم تم إنشاؤه غير حساس يسمى رمزًا مميزًا. نقوم بذلك لحماية معلومات الدفع الخاصة بالمستخدمين وإضافة مستوى من الأمان. إذا كنت قلقًا بشأن كيفية تنفيذ الترميز، فلا تقلق! تعتني Square بهذا الأمر من أجلك من خلال توفير tokenize طريقة يمكنك الاتصال بها على طريقة الدفع الخاصة بك. دعنا نلقي نظرة على كيفية إضافة هذا إلى تطبيقنا.
قد تبدو هذه الوظيفة مخيفة بعض الشيء، لكنها في الحقيقة تقوم بشيء واحد فقط، وهو الحصول على رمز. يمكنك أن ترى أن هذه الوظيفة تأخذ طريقة دفع، ثم تستدعي الطريقة tokenize لاستعادة رمز مميز لتلك الدفعة. ما تبقى من الوظيفة هو معالجة الأخطاء في حالة فشل عملية الترميز لسبب ما. بشرط عدم وجود أي أخأخطاء،قوم هذه الوظيفة بإرجاع الرمز الذي نحتاج إلى إرساله إلى خادمنا لمعالجة الدفع. بالحديث عن ذلك، دعونا نلقي نظرة على كيفية القيام بذلك الآن.
أرسل الرمز إلى الخادم
حسنًا، لدينا الآن طريقة لترميز طريقة الدفع الخاصة بنا. دعنا نمضي قدمًا ونرسل هذا الرمز المميز إلى خادمنا حيث ستتم معالجته. سنرغب في القيام بذلك في أي وقت يرسل فيه المستخدم نموذج الدفع بالنقر فوق الزر “ادفع 1.00 دولار”، لذلك دعونا نرفق وظيفة تسمى handlePaymentMethodSubmissionالتي سنعمل عليها عند الإرسال.
والآن يمكننا تحديد هذه الوظيفة على النحو التالي:
أول شيء نقوم به في وظيفتنا handlePaymentMethodSubmissionهو استخدام tokenize الوظيفة التي كتبناها للتو لإنشاء رمز مميز خاص بنا card. ثم نرسل طلب POST إلى نقطة نهاية الدفع الخاصة بنا ونقوم بتضميننا locationId وفي token ملف body. إذا كنت مرتبكًا بشأن ماهية نقطة نهاية الدفع هذه، فيجب أن تكون كذلك! لم نكتبها بعد! هذه هي الخطوة التالية في خط أنابيب الدفع، لذا دعنا نبدأ في إنشاء نقطة النهاية هذه الآن.
معالجة الدفع باستخدام Payments API
لإنشاء نقطة نهاية API في SvelteKit، نحتاج أولاً إلى إنشاء مجلد ضمن مجلدنا routes يسمى api. ثم، داخل مجلدنا api، قم بإنشاء مجلد آخر يسمى payment. أخيرًا، داخل payment مجلدنا، قم بإنشاء ملف يسمى +server.js. تنشئ بنية المجلد هذه نقطة نهاية API مع المسار /api/payment، حيث سنتعامل مع طلب POST الذي نرسله من العميل. قبل أن نفعل ذلك، نحتاج إلى تهيئة Square Payments API.
Square Payments API
نظرًا لأننا سنستخدم Square Payments API، نحتاج أولاً إلى تثبيت Square Node.js SDK.
مع تثبيت SDK، يمكننا استيراد Client المربع من أعلى ملفنا +server.js. ثم يمكننا تهيئة the paymentsApiمن خلال توفير رمز وصول ونوع بيئة إلى Client.
يمكن العثور على قيمة رمز الوصول إلى Square الخاص بك في لوحة معلومات مطور Square ، ضمن التطبيق المحدد الخاص بك. نحتاج إلى إبقاء رمز الوصول الخاص بنا مخفيًا، لذلك نقوم بتخزينه في متغير بيئة. يستخدم SvelteKit Vite تحت الغطاء، لذلك نحن بحاجة إلى إنشاء متغير بيئتنا في .envملف وإنشاء بادئة به VITE_.
تعامل مع الطلب
مذهل! لقد وضعنا جميع إعداداتنا في مكانها الصحيح، لذلك دعنا نمضي قدمًا ونكتب وظيفة معالج الطلب التي ستكون مسؤولة عن معالجة الدفع. يهدف هذا المعالج إلى التعامل مع طلب POST، لذلك سنقوم بتصدير asyncوظيفة تسمى POST.
لنقطة نهاية مثل هذه، يوفر لنا Sveltekit الوصول إلى requestكائن. يمكننا استدعاء json()التابع على هذا الكائن للحصول على محتويات نص الطلب. في حالتنا هذا هو locationIdو sourceId.
دعنا نتوقف هنا لمدة دقيقة ونلقي نظرة على كل شيء نقوم بتضمينه في نص الطلب لفهم ما يفعله كل منهم.
idempotencyKey: سلسلة فريدة تحدد هذا الطلب. لإنشاء سلسلة فريدة، نستخدم الوظيفةrandomUUIDمن وحدة التشفير Node.js. لا تنس استيراد هذا في الأعلى.sourceId: الرقم التعريفي لمصدر الأموال للدفع. في حالتنا، سيكون هذا هو رمز الدفع الذي تم إنشاؤه بواسطة نموذج الدفع Square. سنقدم هذا الرمز المميز في نص طلب POST.amountMoney: كائن يحدد مقدار المال الواجب دفعه. في حالتنا، نحدد العملة لتكون بالدولار الأمريكي والمبلغ في أصغر فئة من نوع العملة. لذا فإن القيمة 100 تمثل 100 سنت أو 1.00 دولار. نحن نقوم بترميز هذه القيمة بشكل ثابت من أجل العرض التوضيحي، ولكن يمكنك أيضًا إرسال هذه القيمة في طلب POST للحصول على أسعار ديناميكية.
أخيرًا، بعد أن ننتظر نتيجة إنشاء الدفع، نرسل النتيجة مرة أخرى إلى العميل باستخدام jsonوظيفة SvelteKit . لا تنس استيراد ذلك في الجزء العلوي أيضًا.
المأزق المشترك
بينما تبدو نقطة النهاية الخاصة بنا مكتملة، إذا حاولنا إنشاء دفعة الآن، فسنواجه هذا الخطأ على الخادم TypeError: Do not know how to serialize a BigInt:. يحدث هذا الخطأ لأن قيم BigInt لا يتم تسلسلها في JSON افتراضيًا. لإصلاح ذلذلك،حتاج إلى تحديد طريقتنا الخاصة toJSON لإرجاع سلسلة نصية.
اعرض النتيجة
نحن على وشك الانتهاء، ولكن هناك قطعة أخيرة أود إضافتها لتوفير تجربة مستخدم أكثر اكتمالاً. ترسل نقطة نهاية واجهة برمجة التطبيقات (API) الخاصة بنا ردًا إلى عميلنا، لكن عميلنا لا يفعل أي شيء مع هذه الاستجابة حتى الآن. دعنا نضيف بعض الوظائف لإبلاغ المستخدم بما إذا تمت معالجة الدفع بنجاح أم لا.
أولاً، سننشئ متغيرًا يسمى paymentStatusالذي سيخزن سلسلة تشير إلى حالة الدفع.
الآن يمكننا تحديد قيمة paymentStatusبناءً على الاستجابة التي نتلقاها من طلب POST الخاص بنا.
وأخيرًا، يمكننا إضافة هذه النتيجة إلى صفحتنا.
سننثر بعض CSS لرسالة حالة الدفع أيضًا:
ستقدم الصفحة الآن ملاحظات لمستخدمينا حول ما إذا تمت معالجة مدفوعاتهم بنجاح أم لا.
خاتمة
للتلخيص، قمنا في هذا البرنامج التعليمي بتغطية الخطوات الخمس المطلوبة لإنشاء تدفق دفع كامل من البداية إلى النهاية. استخدمنا Square Web Payments SDK و Square Payments API لقبول ومعالجة مدفوعات المستخدم. علاوة على ذذلك،تم ربط كل هذا معًا باستخدام Sveltekit كإطار عمل خاص بنا.
هذه بداية رائعة، ولكن هناك الكثير الذي يمكنك فعله باستخدام SDK لمدفوعات الويب. لم نذهب حتى إلى إمكانات إضافية مثل التصميم المخصص والمحافظ الرقمية. يهدف هذا البرنامج التعليمي إلى تزويدك بأساس متين يمكنك من خلاله البدء في إضافة ميزات إضافية. لا يسعنا الانتظار لرؤية ما تبنيه من هنا.
المصدر: developer
قد يهمك:
