Будьте в курсе новинок веб-платежей.
Веб-платежи общедоступны в браузерах с 2016 года. Основная функция — API запроса платежа — теперь доступна в нескольких браузерах: Chrome, Safari, Edge и вскоре Firefox. Если вы новичок в веб-платежах, для начала ознакомьтесь с «Обзором веб-платежей» .
С момента запуска API запроса платежа и API обработчика платежей в их соответствующие спецификации было внесено довольно много изменений. Эти изменения не нарушат ваш рабочий код, но мы рекомендуем вам обратить на них внимание. В этом посте суммируются эти обновления, и мы продолжим накапливать изменения API.
Новый метод: hasEnrolledInstrument()
В предыдущей версии 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 года он реализован в Chrome 74, но не в других браузерах. Обязательно проверьте, доступен ли метод 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) не затрагиваются.
Это изменение реализовано в Chrome 74, Firefox и Safari .
PaymentRequest.show() теперь принимает необязательное detailsPromise
PaymentRequest.show() позволяет продавцу представить пользовательский интерфейс запроса платежа до того, как станет известна окончательная сумма. У продавца есть десять секунд, чтобы решить detailsPromise до истечения таймаута. Эта функция предназначена для быстрого обмена данными на стороне сервера.
Эта функция появилась в Chrome 75 и 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()
Функция API обработчика платежей PaymentRequestEvent.changePaymentMethod() позволяет обработчикам платежей (например, Google Pay) запускать обработчик событий onpaymentmethodchange . changePaymentMethod() возвращает обещание, которое превращается в ответ продавца с обновленной информацией о цене (например, перерасчет налога).
И PaymentRequestEvent.changePaymentMethod() , и событие paymentmethodchange доступны в Chrome 76, а 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 использовать API веб-платежей в вашей среде разработки. Если вы разрабатываете с использованием локального веб-сервера, который не поддерживает HTTPS, вы также можете использовать флаг --unsafely-treat-insecure-origin-as-secure=<origin> чтобы Chrome обрабатывал источник HTTP как HTTPS.