طلب الدفع API المستعرض القياسي

هل تعلم أن العديد من المتصفحات الحديثة لديها واجهة برمجة تطبيقات مدمجة تسمى طلب الدفع؟ تم وصف واجهة برمجة التطبيقات هذه في معيار W3C ، الذي يهدف إلى دعم العمل باستخدام معلومات الفوترة والاتصال. فيما يلي نظرة عامة على المعيار على developers.google.com. تشير مراجعة تنفيذ واجهة برمجة التطبيقات هذه على موقع MDN الإلكتروني إلى أن "طلب الدفع" يوفر للمتصفح أدوات التطوير التي تسمح للمستخدمين بربط أنظمة الدفع والأنظمة الأساسية المفضلة لديهم مع المتاجر عبر الإنترنت. وهذا يزيد من راحة إجراء مدفوعات للسلع والخدمات ، وتسريع هذه العملية وتبسيطها. على وجه الخصوص ، على سبيل المثال ، تسمح واجهة برمجة تطبيقات طلب الدفع للمستخدم بإدخال معلومات الفوترة وعنوانه مرة واحدة فقط ، وعدم إدخال نفس المعلومات في كل موقع. سيبدو الدفع على جميع المواقع التي تدعم واجهة برمجة التطبيقات هذه للمستخدم. تشتمل واجهة برمجة تطبيقات طلب الدفع على ميزات قيمة أخرى. من بينها - حل المشكلات المتعلقة بتوفر أدوات الدفع للمستخدمين ذوي الإعاقة ، وتزامن بيانات الدفع بين أجهزة المستخدم المختلفة ، وأدوات معالجة الأخطاء القياسية.



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

الأساسيات

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

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

 new PaymentRequest(methodData: fn, details: fn, options?); 

PaymentRequest تمرير مُنشئ PaymentRequest وواحد اختياري:

• المعلمة methodData هي مجموعة من الكائنات التي تحتوي على معلومات حول موفر خدمة الدفع. هذه ، على سبيل المثال ، هي معلومات حول طرق الدفع المعتمدة.
• معلمة details هي كائن يحتوي على معلومات حول دفعة محددة. على سبيل المثال ، المبلغ الإجمالي للدفع ، ومبلغ الضريبة ، وتكلفة الشحن.
• معلمة options ، اختيارية ، هي كائن يحتوي على معلومات دفع إضافية.

يمكنك العثور على معلومات في الوثائق مع MDN تفيد بأنه لا يمكن استخدام واجهة برمجة تطبيقات طلب الدفع إلا باستخدام HTTPS. هذا واضح إلى حد كبير بالنظر إلى ما يعمل هذا API.

إليك ما يبدو عليه تفاعل المستخدم مع واجهة برمجة تطبيقات طلب الدفع.


باستخدام API طلب الدفع

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

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


البطاقات المحفوظة

فكر في مثال عملي للعمل مع واجهة برمجة تطبيقات طلب الدفع.

نظرة عامة على المشروع

إذا كنت ترغب في تجربة المشروع بنفسك ، والذي سنقوم بتحليله ، يمكنك تنفيذ الأمر التالي:

 git clone https://github.com/indreklasn/payments-request-api-example.git && yarn && yarn start 

تقوم باستنساخ المستودع المناسب ، وتثبيت تبعيات المشروع ، وبدء تشغيل الخادم ، المتاح في localhost:3000 . يرجى ملاحظة أن التطبيق قيد النظر يتم إطلاقه في النظام المحلي لأغراض البحث.

الصفحة الرئيسية للتطبيق بسيطة جدا. يحاكي جزءًا من واجهة متجر على الإنترنت يتيح لك "وضع سلة" بمنتج معين. لبدء عملية السحب ، انقر على زر BUY .


صفحة التطبيق

نحن نتعامل مع تطبيق بسيط جدا. لذلك ، يمكننا وضع كل المنطق المتعلق بواجهة "المتجر عبر الإنترنت" والمدفوعات في ملف app.js :

 let count = 0 const cartIncrementButton = document.getElementById('cartIncrement') const cartDecrementButton = document.getElementById('cartDecrement') const countElement = document.getElementById('count') const buyButton = document.getElementById('purchase') function init() {   countElement.innerHTML = count  cartIncrementButton.addEventListener('click', () => {    count++    countElement.innerHTML = `${count}$`  })   cartDecrementButton.addEventListener('click', () => {    if (count === 0) return    count--    countElement.innerHTML = `${count}$`  }) } init() 

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

يمكن cartIncrementButton زر cartIncrementButton من الكود الخاص بنا كزر يتيح لك إضافة بعض المنتجات إلى العربة. يسمح cartDecrementButton زر cartDecrementButton بإزالة البضائع من السلة ، وفي عنصر العناصر ، يتم عرض سعر كل البضائع التي تم وضعها في السلة.

تنفيذ نظام الدفع

يحصل الكود التالي أيضًا على app.js إنه تطبيق لمعالج الأحداث الذي يحدث عند النقر فوق الزر BUY (يطلق عليه buyButton في الكود):

 buyButton.addEventListener('click', () => {   const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  ); }) 

بعد أن ينقر المستخدم على الزر BUY ، نقوم بإنشاء مثيل جديد لكائن PaymetnRequest . نستخدم هنا اثنين من الوظائف التي ترجع ما يجب تمريره إلى مُنشئ الكائن. هذه هي وظائف buildSupportedPaymentMethodData و buildShoppingCartDetails .

يتم تمثيل الوسيطة الأولى إلى المُنشئ بواسطة استدعاء دالة buildSupportedPaymentMethodData . تقوم بإرجاع مجموعة من الكائنات التي تدعم طرق الدفع. تم الإعلان عن هذه الوظيفة في app.js :

 function buildSupportedPaymentMethodData() {  //    :  return [{    supportedMethods: 'basic-card',    data: {      supportedNetworks: ['visa', 'mastercard'],      supportedTypes: ['debit', 'credit']    }  }]; 

الوسيطة الثانية إلى المُنشئ ، buildShoppingCartDetails ، هي استدعاء دالة تنشئ المعلومات اللازمة لإتمام عملية الشراء.

قد تتضمن هذه المعلومات ، على سبيل المثال ، وصفًا للبضائع المشتراة وقيمتها ومجموع مبلغ الشراء. رمز دالة buildShoppingCartDetails أيضًا في app.js :

 function buildShoppingCartDetails() {  return {    id: 'count-order',    displayItems: [      {        label: 'Example item',        amount: {currency: 'USD', value: '1.00'}      }    ],    total: {      label: 'Total',      amount: {currency: 'USD', value: count }    }  }; } 

لاحظ أن هذه الوظيفة تقوم بإرجاع كائن ، وليس مجموعة من الكائنات.

نحن الآن على استعداد لتظهر للمستخدم نافذة لإجراء عملية الدفع. استدعاء الأسلوب .show() للكائن request . هذه الدعوة سوف تعيد الوعد. إذا لم تكن على دراية بالوعود ، ألق نظرة على هذه المادة. الرمز ، مرة أخرى ، في app.js :

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  );  request.show().then(paymentResponse => {    console.log(paymentResponse)  }) }) 

نتيجة لذلك ، بعد أن نضغط على زر BUY ، يجب أن نرى ما هو مبين في الشكل التالي.


دفع المستخدم النظر

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


رقم بطاقة اختبار التأشيرة


أدخل تفاصيل البطاقة

معالجة الدفع

بعد إدخال معلومات البطاقة في النظام وتأكيد الدفع ، نحصل على كائن PaymentResponse من الوعد.

نحن ندعو طريقة .complete () لإعلام المستخدم بأن كل شيء يسير كما ينبغي. إليك ما يبدو في الكود:

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(buildSupportedPaymentMethodData(), buildShoppingCartDetails());  request.canMakePayment().then(result => {    if (result) {      request.show().then(paymentResponse => {        console.log(paymentResponse.details)        //    . ,   ,     ,    .        paymentResponse.complete('success')          .then(() => thankYouMessage.style.opacity = 1)      })    }     }) }) 

هذا كل شئ! لقد درسنا للتو الرمز المطلوب لتنفيذ أبسط سلة لمتجر على الإنترنت.

هنا هو مظاهرة كاملة للتطبيق.


مظاهرة التطبيق

→ هنا يمكنك العثور على الكود المصدري للمشروع.

حول دعم متصفحات API طلب الدفع

فيما يلي معلومات دعم واجهة برمجة تطبيقات طلب الدفع من خلال caniuse.com.


ما المتصفحات التي تدعم واجهة برمجة تطبيقات طلب الدفع؟

كما ترون ، واجهة برمجة التطبيقات هذه جديدة نسبيًا ، لذلك لا يوجد بها دعم متصفح واسع بشكل خاص. الشيء الجيد هو أنه مدعوم من Chrome و Safari و Firefox و Edge. من المحتمل أنك تستخدم واحدًا على الأقل من هذه المتصفحات ، بحيث يمكنك بسهولة تجربة كل ما تحدثنا عنه أعلاه.

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

النتائج

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

أعزائي القراء! هل تفكر في استخدام واجهة برمجة تطبيقات طلب الدفع في مشروعاتك؟