Проблемы платежных страниц

Боли фронтендера при разработке платежных страниц

Кузнецов Андрей
frontend lead, РБС

О компании

Боль №1.

Хотим цифровую клавиатуру для числовых полей

Решения

<input type="number" pattern="[0-9]*" inputmode="numeric">
<input type="tel">

Поиграться с типами инпута http://inputtypes.com/

Итого

Цифровые клавиатуры c type="number" на всех телефонах содержат разный набор кнопок
Поле с type="number" нужно еще дорабатывать для нормальной работы.
Поле с type="number" не позволяет находится в поле другим "не числовым" символам, например, пробелу.

Хотим цифровую клавиатуру даже на вводе CVC / CVV

			.input_cvc { 
			    -webkit-text-security: disc;
			    text-security: disc;
			}

Классическое решение

			$('.input_number').keypress(function (event) {
			    var keycode = event.which;
			    if (!(keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || 
			         (keycode >= 48 && keycode <= 57))) {
			        return false;
			    }
			});

Проверить коды нажатий

Что делают крутые ребята?

Ничего не делают!

Может быть inputmask.js?

Минусы:

Можно установить курсор в середину поля
Бывают проблемы с переходом курсора
Проблемы с вводом на Windows Phone
Много весит

Боль №3. Samsung Galaxy

keyCode может быть всегда 229

Решение

Использовать событие textInput

			$('div').on('textInput', function (e) {
			    $('#textInput').text(e.originalEvent.data);
			});

Болеутоляющее №1.
Сканирование карты из браузера.

			<input type="text" name="cardnumber">
			<input type="text" name="expirationdate">
			<input type="text" name="nameoncard">

Поддержка с iOS 8, Chrome 60

card number, cardnumber, cardnum, ccnum, ccnumber, cc num, creditcardnumber, credit card number, newcreditcardnumber, new credit card, creditcardno, credit card no, card#, card #, cvc2, cvv2, ccv2, security code, card verification, name on credit card, name on card, nameoncard, cardholder, card holder, name des karteninhaber,
card type, cardtype, cc type, cctype, payment type, expiration date, expirationdate, expdate, month. date m, date mo, year, date y, date yr

Болеутоляющее №2.
Payment Request API

Лучшее средство для сбора данных у плательщика!

if (window.PaymentRequest) { ... }

Документация от Google
Демо от Google c конструктором

Использование

			let request = new PaymentRequest(
			    supportedInstruments,
			    details,
			    paymentOptions
			);

Использование.

			// Поддерживаемые способы оплаты
			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
			request.show()
			    .then((paymentResponse) => {
			    // Данные собраны, отправляем запрос на оплату на бек
			    var cardInfo = paymentResponse.details;
			    // AJAX
			    // Eсли успешно оплачено, то
			    paymentResponse.complete('success');
			    // Закрыть окно с ошибкой
			    paymentResponse.complete('fail');
			})
			.catch((err) => {
			   // обработка ситуации когда пользователь закрыл окно
			});