آلية عمل Payment Request API

تعرَّف على آلية عمل 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() التي تعرض مستخدم تطبيق الدفع من واجهة pyplot.

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

إنّ الشكل الذي ستظهر به واجهة مستخدم تطبيق الدفع متروك تمامًا لتطبيق الدفع. المستخدم. بعد موافقة العميل على إجراء عملية دفع، يتمّ تمرير كائن JSON. إلى التاجر يحتوي على جميع المعلومات المطلوبة لتحويل الأموال. ويمكن للتاجر عندئذٍ إرسالها إلى مقدّم خدمة الدفع (PSP) لمعالجة الدفعة.

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

التالي

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