إدارة معاملات الدفع مع عامل الخدمات

كيفية تعديل تطبيق الدفع المستند إلى الويب ليتوافق مع Web Payments وتوفير تجربة مستخدم أفضل للعملاء

Eiji Kitamura

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

تشير "تغييرات مَعلمات الدفع في وقت التشغيل" إلى مجموعة من الأحداث التي تتيح للتاجر ومعالج الدفع تبادل الرسائل أثناء تفاعل المستخدم مع معالج الدفع. مزيد من المعلومات حول التعامل مع معلومات الدفع الاختيارية باستخدام عامل الخدمة

تلقّي حدث طلب دفع من التاجر

عندما يختار العميل الدفع باستخدام تطبيق الدفع المستند إلى الويب ويستدعي التاجر PaymentRequest.show()، سيتلقّى عامل الخدمة حدث paymentrequest. أضِف أداة معالجة الأحداث إلى عامل الخدمة لتسجيل الحدث والاستعداد للإجراء التالي.

[payment handler] service-worker.js:

…
let payment_request_event;
let resolver;
let client;

// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
  if (payment_request_event) {
    // If there's an ongoing payment transaction, reject it.
    resolver.reject();
  }
  // Preserve the event for future use
  payment_request_event = e;
…

يحتوي PaymentRequestEvent المحفوظ على معلومات مهمة حول هذه المعاملة:

افتح نافذة معالج الدفع لعرض الواجهة الأمامية لتطبيق الدفع المستند إلى الويب

عند تلقّي حدث paymentrequest، يمكن لتطبيق الدفع فتح نافذة معالج الدفع من خلال استدعاء PaymentRequestEvent.openWindow(). ستعرض نافذة معالج الدفع واجهة تطبيق الدفع للعملاء حيث يمكنهم إثبات ملكية الحساب واختيار عنوان الشحن وخياراته والموافقة على الدفع. سنتناول كيفية كتابة رمز الواجهة الأمامية في مقالة التعامل مع الدفعات على الواجهة الأمامية للدفع (ستتوفّر قريبًا).

مرِّر وعدًا محفوظًا إلى PaymentRequestEvent.respondWith() حتى تتمكّن من تنفيذه بنتيجة دفع في المستقبل.

[payment handler] service-worker.js:

…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver is provided below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw