Обновления API веб-платежей

Будьте в курсе новостей в сфере веб-платежей.

Eiji Kitamura

Danyao Wang

Rouslan Solomakhin

Веб-платежи стали общедоступными в браузерах с 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() возвращает обещание, которое разрешается в ответ продавца с обновленной информацией о цене (например, перерасчет налога).

paymentmethodchange PaymentRequestEvent.changePaymentMethod() 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.