اطّلِع على آخر المعلومات حول "الدفعات على الويب".
أصبحت ميزة "الدفعات على الويب" متاحة للجميع في المتصفّحات منذ عام 2016. تتوفّر الآن الميزة الأساسية، وهي Payment Request API، على متصفّحات متعددة، مثل Chrome وSafari وEdge وFirefox قريبًا. إذا كنت حديث العهد بميزة "الدفعات على الويب"، يمكنك الاطّلاع على "نظرة عامة على الدفع على الويب" لبدء استخدام هذه الميزة.
منذ إطلاق Payment Request API وPayment Handler API، تم إجراء العديد من التغييرات على مواصفاتهما المعنيّة. لن تؤدي هذه التغييرات إلى إيقاف رمزك البرمجي الذي يعمل بشكلٍ سليم، ولكننا ننصحك بملاحظتها. تلخّص هذه المشاركة هذه التعديلات وستستمر في تجميع التغييرات في واجهات برمجة التطبيقات.
الطريقة الجديدة: hasEnrolledInstrument()
في الإصدار السابق من Payment Request API، تم استخدام canMakePayment()
للتحقّق من توفّر أداة الدفع لدى المستخدم. في تعديل قيد الإصدار
مؤخرًا على المواصفات، تم استبدال canMakePayment()
بعلامة
hasEnrolledInstrument()
بدون تغيير وظيفتها.
تحظى طريقة hasEnrolledInstrument()
بتوافق تام من جميع المتصفحات الرئيسية.
نفَّذ Chrome هذه الطريقة في الإصدار 74، وWebkit
وGecko يتضمّنان أخطاء تتعلّق بالتنقّل، ولكنهما لم نفِّذَا الطريقة حتى حزيران (يونيو) 2019.
لاستخدام طريقة hasEnrolledInstrument()
الجديدة، استبدِل الرمز الذي يبدو على النحو التالي:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
باستخدام رمز يبدو على النحو التالي:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
لم تعُد canMakePayment()
تتحقّق من توفّر أداة القياس.
بما أنّ hasEnrolledInstrument()
يتولّى الآن التحقّق من أدوات الدفع الخاصة بالمستخدم،
canMakePayment()
تم تعديله للتحقّق فقط من توفّر تطبيق الدفع.
يرتبط هذا التغيير في canMakePayment()
بتنفيذ
hasEnrolledInstrument()
. اعتبارًا من حزيران (يونيو) 2019، تم تنفيذ هذه الميزة في الإصدار 74 من Chrome، ولكن
ليس في أي متصفّحات أخرى. تأكَّد من توفّر hasEnrolledInstrument()
الطريقة في متصفّح المستخدم قبل محاولة استخدامها.
// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
// `canMakePayment()` behavior change corresponds to
// `hasEnrolledInstrument()` availability.
request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
console.log("Cannot check for payment app availability without checking for instrument presence.");
}
تمّت إزالة languageCode
من طريقة الدفع basic-card
تمت إزالة PaymentAddress.languageCode
من عناوين الشحن
وعناوين إرسال الفواتير لحساب basic-card
. ولن تتأثّر عناوين إرسال الفواتير الخاصة بطرُق الدفع
الأخرى (مثل Google Pay).
تم تنفيذ هذا التغيير في الإصدار 74 من Chrome وFirefox وSafari.
يقبل PaymentRequest.show()
الآن detailsPromise
اختياريًا.
يسمح PaymentRequest.show()
للتاجر بعرض واجهة مستخدم لطلب الدفع قبل معرفة المبلغ الإجمالي النهائي. أمام التاجر عشر ثوانٍ لحلّ المشكلة detailsPromise
قبل انتهاء مهلة الانتظار. هذه الميزة مخصّصة لإجراء جولة سريعة من جانب الخادم.
تم طرح هذه الميزة في الإصدار 75 من Chrome وSafari.
// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
return;
}
// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
// Find out the exact total amount and call
// `resolveDetailsPromise(details)`.
// Use a 3 second timeout as an example.
window.setTimeout(function() {
resolveDetailsPromise(details);
}, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);
PaymentRequestEvent.changePaymentMethod()
تتيح ميزة Payment Handler API
PaymentRequestEvent.changePaymentMethod()
لمعالِجات الدفع (مثل Google Pay) لتشغيل معالج الحدث
onpaymentmethodchange
. يعرض العنصر changePaymentMethod()
وعدًا يحلّ محلّ
استجابة التاجر
التي تتضمّن معلومات أسعار معدّلة (مثل إعادة احتساب الضريبة).
يتوفّر كلّ من حدثَي PaymentRequestEvent.changePaymentMethod()
وpaymentmethodchange
في الإصدار 76 من Chrome، وقد نفّذ Webkit حدث
paymentmethodchange
في ميزة
معاينة التكنولوجيا.
// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
if (evt.changePaymentMethod === undefined) {
// Not implemented in this version of Chrome.
return;
}
// Notify merchant that the user selected a different payment method.
evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
.then((responseFromMerchant) => {
if (responseFromMerchant === null) {
// Merchant ignored the 'paymentmethodchange' event.
return;
}
handleResponseFromMerchant(responseFromMerchant);
})
.catch((error) => {
handleError(error);
});
}));
});
مثال على التاجر:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
تحسين التطوير المحلي
يضيف Chrome 76 تحسنَين صغيرَين لزيادة إنتاجية المطوّرين. إذا كانت بيئة التطوير
المحلية تستخدم شهادة موقَّعة ذاتيًا، يمكنك الآن استخدام الخيار
--ignore-certificate-errors
في سطر الأوامر للسماح لمتصفّح Chrome باستخدام واجهات برمجة التطبيقات Web
Payments API في بيئة التطوير. إذا كنت تُطوّر باستخدام
خادم ويب محلي لا يتيح استخدام بروتوكول HTTPS، يمكنك أيضًا استخدام العلامة
--unsafely-treat-insecure-origin-as-secure=<origin>
لجعل Chrome يتعامل مع
مصدر HTTP على أنّه HTTPS.