Хабрахабр

[Перевод] Стандартный браузерный 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() $` }) cartDecrementButton.addEventListener('click', () => { if (count === 0) return count-- countElement.innerHTML = `${count}$` })
} init()

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

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

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

Следующий код тоже попадает в 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?

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

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

Итоги

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

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть