نظرة عامة على Payment Request API

Eiji Kitamura

عندما يحاول أحد العملاء شراء منتج من موقعك الإلكتروني، يجب أن يطلب الموقع منه تقديم معلومات الدفع، ومعلومات أخرى اختيارية، مثل خيار الشحن المفضّل. يمكنك تحقيق ذلك بسرعة باستخدام Payment Request API (PR API).

بنية الدفع الأساسية

يتطلّب إنشاء عنصر PaymentRequest مَعلمتَين: طرق الدفع وتفاصيل الدفع. بالإضافة إلى ذلك، تتوفّر مَعلمة ثالثة لخيارات الدفع وهي اختيارية. يمكن إنشاء طلب أساسي على النحو التالي:

const request = new PaymentRequest(paymentMethods, paymentDetails);

ألقِ نظرة على طريقة إنشاء كل مَعلمة واستخدامها.

طرق الدفع

المَعلمة الأولى، paymentMethods، هي قائمة بطرق الدفع المتوافقة في متغيّر مصفوفة. يتألف كل عنصر في المصفوفة من مكوّنين، هما supportedMethods وdata (اختياري).

بالنسبة إلى supportedMethods، على التاجر تحديد معرّف طريقة الدفع، مثل https://bobbucks.dev/pay. يعتمد توفّر data ومحتواه على محتوى supportedMethods وتصميم مقدّم تطبيق الدفع.

يجب أن يقدّم مقدّم تطبيق الدفع كلا النوعين من المعلومات.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

تفاصيل الدفع

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

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

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

التحقّق ممّا إذا كانت طريقة الدفع متاحة

يتحقّق Chrome مما إذا كان المستخدم والبيئة جاهزَين لإجراء عملية دفع أثناء إنشاء عنصر PaymentRequest.

للتحقّق مما إذا كان المستخدم والبيئة جاهزَين لإجراء عملية دفع، استدعِ الدالة canMakePayment() قبل بدء إجراء الدفع. يؤدي استدعاء canMakePayment() إلى عرض true إذا كان المتصفّح يتيح طريقة دفع واحدة على الأقل محدّدة في العنصر.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

مزيد من المعلومات عن PaymentRequest.canMakePayment() على MDN

طريقة show()

بعد ضبط المَعلمتَين وإنشاء العنصر request، يمكنك استدعاء الطريقة show() التي تعرض واجهة مستخدم تطبيق الدفع.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

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

أخيرًا، يمكنك إغلاق واجهة مستخدم "طلب الدفع" من خلال إكمال العملية باستخدام response.complete('success') أو response.complete('fail') حسب النتيجة التي يعرضها مقدّم خدمة الدفع.

التالي

مزيد من المعلومات حول Web Payments