Начинаем работать с Payment Request API
Оплата товаров через интернет может оказаться страшной головной болью, не так ли? Вас постоянно заставляют вводить одни и те же реквизиты банковских карт и контактные данные.
Особенно тяжело это дается на мобильном телефоне. Как давно вы в последний раз отказывались от покупки вещи по причине сложностей с заполнением формы оплаты? У меня такое было прошлой ночью.
Не меньше боли возникало и у программистов, реализующих непростые интерфейсы с кучей проверок. Но теперь все стало намного проще.
В последнем релизе браузера Samsung Internet появилась долгожданная поддержка Payment Request API. Этот API позволяет очень просто организовать оплату на сайте, используя нативный UI устройства, с указанием деталей карты, вариантами доставки, адресами и контактными данными.
Теперь ваши пользователи смогут быстрее оформлять заказы, сохраняя свои платежные данные надежно в своем браузере и используя их повторно в любом приложении, поддерживающим эту технологию.
И не нужно будет тратить огромные суммы денег и кучу времени на программистов, разработку интерфейса и процесса валидации данных.
Как это работает
В основе API лежит метод new PaymentRequest
. Перед началом работы необходимо проверить наличие данного API в браузере пользователя:
if ( window.PaymentRequest ) { // API есть - круто! } else { // Показать фолбек, например, // в виде формы оплаты }
А после клика юзером по кнопке оплаты покажем нативный UI и обработаем результат:
// Поддерживаемые способы оплаты var methodData = [{ supportedMethods: ['visa', 'mastercard', 'alipay'] }]; // Детали платежа var details = { total: { label: 'Покупка слона', amount: { currency: 'RUB', value: '99.99' } }, displayItems: [{ label: 'Голова слона', amount: {currency: 'RUB', value: '39.99'} }, { label: 'Тело слона', amount: {currency: 'RUB', value: '60.00'} }] }; // Настройки var options = { requestShipping: false, requestPayerEmail: true, requestPayerPhone: true }; // Показать UI new PaymentRequest( methodData, details, options ) .show() .then(function(uiResult) { processPayment(uiResult); }) .catch(function(error) { handlePaymentError(error); });
Моделируем процесс оплаты с двухсекундной задержкой:
Легко? Вы можете попробовать онлайн демку и посмотреть исходный код примера на Github.
Это только маленькая доля всех тех возможностей, что предоставляет API, более развернутый пример (стоимость доставки,контакты, адреса) можно посмотреть в репозитории команды Google Chrome, а также в замечательном руководстве от Ruadhán O’Donoghue.
Payment Request API доступен только в безопасном контексте.
Поддержка браузерами
На данный момент, Payment Request API поддерживается в следующих браузерах: Samsung Internet, Chrome 53+ для Android и частично в Edge — одним словом, использовать можно уже прямо сейчас, следуя принципу прогрессивного улучшения, добавляя фолбек в виде обычной формы для заполнения реквизитов, для браузеров без поддержки этого API.
По статистике большинство интернет покупок осуществляется при помощи мобильных устройств и, что самое удивительное, 66% из них совершается при помощи мобильных браузеров, а не приложений.
Ссылки
- How to take payments on the web with the Payment Request API
- Bringing Easy and Fast Checkout with Payment Request API
- Mobile Payments with the Payment Request API
А как сделать чтобы после платежа вылезло окно alert(‘отправленно’); ?
Смотрите пример на гитхабе