Верх страницы
Обложка к записи Начинаем работать с Payment Request API
Время для прочтения: 0 мин. 18 сек.

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

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, OpenCart, DLE, Laravel, Moonshine, Symfony, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Timofey
Timofey
2 лет назад

А как сделать чтобы после платежа вылезло окно alert(‘отправленно’); ?

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы