Время для прочтения: 1 мин. 37 сек.

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

Ссылки

Пошерить
Плюсануть
Отправить
Вотсапнуть

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]