Стандартный браузерный API Payment Request

Знаете ли вы о том, что во многих современных браузерах имеется встроенный API, который называется Payment Request? Этот API описан в стандарте W3C, который направлен на поддержку работы с платёжной и контактной информацией. Вот обзор стандарта на ресурсе developers.google.com. Обзор реализации этого API на сайте MDN говорит о том, что Payment Request даёт разработчику браузерные средства, которые позволяют пользователям связывать предпочитаемые ими платёжные системы и платформы с интернет-магазинами. Это повышает удобство выполнения платежей за товары и услуги, ускоряя и упрощая этот процесс. В частности, например, API Payment Request позволяет пользователю ввести свои платёжные данные и адрес лишь один раз, а не вводить одни и те же сведения на каждом сайте. Выполнение оплаты на всех сайтах, поддерживающих этот API, будет выглядеть для пользователя одинаково. У API Payment Request есть и другие ценные возможности. Среди них — решение проблем с доступностью платёжных инструментов для пользователей с ограниченными возможностями, синхронизация платёжных данных между различными устройствами пользователей, стандартизированные средства обработки ошибок.



Материал, перевод которого мы сегодня публикуем, посвящён демонстрации практического использования API Payment Request. Сразу же стоит отметить, что API Payment Request — это экспериментальная технология, которая вполне может измениться в будущем. Однако автор этого материала говорит, что она, несмотря на это, достойна того, чтобы с ней ознакомиться. Он уверен в том, что эту технологию ждёт светлое будущее, и в том, что изменения, которые могут быть в неё внесены, не слишком сильно повлияют на основные принципы работы с ней.

Основы

От широкого распространения API Payment Request выиграют все, кто принимает участие в создании и использовании систем для проведения интернет-платежей. В частности, для программистов и владельцев сайтов это будет означать облегчение создания систем приёма платежей, а для пользователей — упрощение и ускорение процесса оплаты товаров и услуг.

Для использования этого API в JavaScript-коде сначала нужно создать объект PaymentRequest. Выглядит команда его создания так:

new PaymentRequest(methodData: fn, details: fn, options?);

Конструктору PaymentRequest передаётся два обязательных параметра и один необязательный:

• Параметр methodData представляет собой массив объектов, содержащих информацию о поставщике платёжных услуг. Это, например — сведения о поддерживаемых методах платежа.
• Параметр details — это объект, который содержит сведения о конкретном платеже. Например — общая сумма платежа, сумма налога, стоимость доставки.
• Параметр options, необязательный, представляет собой объект, содержащий дополнительные сведения о платеже.

В документации с MDN можно найти сведения о том, что API Payment Request можно пользоваться только с применением HTTPS. Это совершенно очевидно, учитывая то, с чем именно работает этот API.

Вот как выглядит процесс взаимодействия пользователя с API Payment Request.

Использование API Payment Request

Как видите, система выполнения платежей интегрирована прямо в браузер. Это означает, что для выполнения платежа не нужно использовать небезопасные операции перенаправления, не нужно и обращаться к неким внешним API. Всё происходит непосредственно в браузере.

Вот проект, в котором представлена реализация экрана, демонстрирующего пользователю список сохранённых данных платёжных карт.

Сохранённые карты

Рассмотрим практический пример работы с API Payment Request.

Обзор проекта

Если вы хотите самостоятельно поэкспериментировать с проектом, который мы будем разбирать — можете выполнить у себя следующую команду:

git clone https://github.com/indreklasn/payments-request-api-example.git && yarn && yarn start

Она клонирует соответствующий репозиторий, устанавливает зависимости проекта и запускает сервер, доступный по адресу localhost:3000. Обратите внимание на то, что рассматриваемое нами приложение запускается в локальной системе в исследовательских целях.

Главная страница приложения устроена очень просто. Она имитирует фрагмент интерфейса интернет-магазина, позволяющий «положить в корзину» некий товар. Для запуска процесса оформления покупки нужно нажать на кнопку BUY.

Страница приложения

Мы имеем дело с очень простым приложением. Поэтому всю логику, имеющую отношение к интерфейсу «интернет-магазина» и к платежам, мы можем разместить в файле app.js:

let count = 0
const cartIncrementButton = document.getElementById('cartIncrement')
const cartDecrementButton = document.getElementById('cartDecrement')
const countElement = document.getElementById('count')
const buyButton = document.getElementById('purchase')

function init() {
  
  countElement.innerHTML = count
  cartIncrementButton.addEventListener('click', () => {
    count++
    countElement.innerHTML = `${count}$`
  })
  
  cartDecrementButton.addEventListener('click', () => {
    if (count === 0) return 
    count--
    countElement.innerHTML = `${count}$`
  })
}

init()

Здесь мы получаем ссылки на элементы DOM, в частности, на кнопки увеличения и уменьшения количества «товара», и привязываем к ним обработчики событий. В соответствующий элемент страницы выводится итоговое количество.

Кнопку cartIncrementButton из нашего кода можно представить себе в виде кнопки, которая позволяет добавить некий товар в корзину. Кнопка cartDecrementButton позволяет убирать товар из корзины, а в элементе countElement выводится цена всех товаров, которые были положены в корзину.

Реализация системы выполнения платежей

Следующий код тоже попадает в app.js. Он представляет собой реализацию обработчика события, которое возникает при нажатии на кнопку BUY (она в коде называется buyButton):

buyButton.addEventListener('click', () => {
  
  const request = new PaymentRequest(
    buildSupportedPaymentMethodData(), 
    buildShoppingCartDetails()
  );

})

После того, как пользователь нажмёт кнопку BUY, мы создаём новый экземпляр объекта PaymetnRequest. Мы используем тут пару функций, которые возвращают то, что нужно передать конструктору объекта. Это — функции buildSupportedPaymentMethodData и buildShoppingCartDetails.

Первый аргумент конструктора представлен вызовом функции buildSupportedPaymentMethodData. Она возвращает массив объектов, представляющих собой поддерживаемые методы платежей. Эта функция объявлена в app.js:

function buildSupportedPaymentMethodData() {
  // Пример поддерживаемых методов платежей:
  return [{
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: ['visa', 'mastercard'],
      supportedTypes: ['debit', 'credit']
    }
  }];

Второй аргумент конструктора, buildShoppingCartDetails, представляет собой вызов функции, которая формирует сведения, необходимые для оформления покупки.

В состав этих сведений может входить, например, описание приобретаемого товара, его стоимость, общая сумма покупки. Код функции buildShoppingCartDetails также находится в app.js:

function buildShoppingCartDetails() {
  return {
    id: 'count-order',
    displayItems: [
      {
        label: 'Example item',
        amount: {currency: 'USD', value: '1.00'}
      }
    ],
    total: {
      label: 'Total',
      amount: {currency: 'USD', value: count }
    }
  };
}

Обратите внимание на то, что эта функция возвращает объект, а не массив объектов.

Теперь мы готовы к тому, чтобы показать пользователю окно для выполнения платежа. Вызовем метод .show() объекта request. Этот вызов вернёт промис. Если вы не знакомы с промисами — взгляните на этот материал. Код, опять же, находится в app.js:

buyButton.addEventListener('click', () => {
  const request = new PaymentRequest(
    buildSupportedPaymentMethodData(),
    buildShoppingCartDetails()
  );
  request.show().then(paymentResponse => {
    console.log(paymentResponse)
  })
})

В результате, после того, как мы нажмём на кнопку BUY, мы должны увидеть то, что показано на следующем рисунке.

Рассмотрение платежа пользователем

На этом шаге вам, вероятно, понадобится добавить в систему сведения о банковской карте. Я рекомендую использовать тут тестовую карту VISA. Введите в соответствующие поля номер карты, ваше имя и адрес. Мы всего лишь тестируем API, поэтому введённые данные могут и не быть реальными.

Номер тестовой карты Visa

Ввод сведений о карте

Обработка платежа

После того, как мы ввели в систему сведения о карте и подтвердили платёж, мы получаем объект PaymentResponse, возвращённый из промиса.

Вызовем его метод .complete() для того чтобы указать пользователю на то, что всё идёт как надо. Вот как это выглядит в коде:

buyButton.addEventListener('click', () => {

  const request = new PaymentRequest(buildSupportedPaymentMethodData(), buildShoppingCartDetails());
  request.canMakePayment().then(result => {

    if (result) {
      request.show().then(paymentResponse => {
        console.log(paymentResponse.details)
        // Здесь выполняется обработка платежа. Мы, в тестовых целях, просто сообщаем пользователю о том, что операция прошла успешно.

        paymentResponse.complete('success')
          .then(() => thankYouMessage.style.opacity = 1)
      })
    }
    
  })
})

Вот и всё! Только что мы рассмотрели код, который необходим для реализации простейшей корзины интернет-магазина.

Вот полная демонстрация работы приложения.

Демонстрация работы приложения

→ Тут можно найти исходный код проекта.

О поддержке API Payment Request браузерами

Вот сведения о поддержке API Payment Request с caniuse.com.

Какие браузеры поддерживают API Payment Request?

Как можно видеть, этот API является сравнительно новым, поэтому он пока не отличается особенно широкой поддержкой браузеров. Хорошо то, что его поддерживают Chrome, Safari, Firefox и Edge. Вы, наверняка, пользуетесь хотя бы одним из этих браузеров, поэтому вполне можете испытать всё то, о чём мы говорили выше.

Надо отметить, что вполне очевидно то, что в сфере поддержки API Payment Request браузерами нужно выполнить ещё много работы. Особенно это касается мобильных браузеров. Поэтому я, если бы использовал сейчас этот API, не рассчитывал бы пока на его работу на мобильных устройствах.

Итоги

У API Payment Request есть все шансы стать распространённой и востребованной технологией. Поэтому, если эта технология вас заинтересовала — вот, вот, вот и вот — материалы, которые могут помочь вам лучше в ней разобраться.

Уважаемые читатели! Рассматриваете ли вы возможность использования API Payment Request в своих проектах?