تعرَّف على آلية عمل 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' }
}
};
التحقّق من توفّر طريقة الدفع
يتحقّق 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 إلى التاجر يحتوي على جميع المعلومات المطلوبة لتحويل الأموال. ويمكن للتاجر عندئذٍ إرسالها إلى مقدّم خدمة الدفع (PSP) لمعالجة الدفعة.
وأخيرًا، يمكنك إغلاق واجهة مستخدم طلب الدفع من خلال إكمال العملية مع response.complete('success') أو response.complete('fail') بناءً على النتيجة التي يعرضها مقدّم خدمة الدفع.
التالي
مزيد من المعلومات حول الدفعات على الويب