Начинаем работать с 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% из них совершается при помощи мобильных браузеров, а не приложений.

Ссылки

Источник: https://www.kobzarev.com/programming/payment-request-api/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: