آلية عمل Payment Request API

تعرّف على طريقة عمل Payment Request API على مستوى عالٍ.

إيجي كيتامورا

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

عندما يحاول أحد العملاء شراء سلعة من موقعك الإلكتروني، يجب أن يطلب الموقع الإلكتروني من العميل تقديم معلومات الدفع، بالإضافة إلى معلومات أخرى اختياريًا، مثل خيار الشحن المفضّل. يمكنك تحقيق ذلك بسهولة وسرعة باستخدام 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' }
  }
};

التحقّق من توفُّر طريقة الدفع

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

عند استدعاء canMakePayment()، يتحقّق مما إذا كان المتصفّح يتيح استخدام طريقة دفع واحدة على الأقل محدّدة في العنصر.

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 إلى التاجر يتضمّن جميع المعلومات المطلوبة لتحويل الأموال. ويمكن للتاجر بعد ذلك إرسالها إلى مقدّم خدمة الدفع (PSP) لمعالجة الدفعة.

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

التالي

مزيد من المعلومات حول الدفعات على الويب