Вимоги до кастомної верстки форми

Вимоги до атрибутів

Платформа приймає лише зазначені атрибути елементів. Тому вимога №1 - правильні значення атримутів name на формі.

Атрибути для IE та C2A

Назва	Значення атрибута `name`	Приклад

Назва	Значення атрибута `name`	Приклад
Номер картки ОБ'язковий	`card_num` для цільного вводу номера картки, або `card_num1` `card_num2` `card_num3` `card_num4` для розділення по 4 цифри в 4 поля	`<input type="text" name="card_num" value="" />`
Термін дії, місяць ОБ'язковий	`card_exp_month`	`<select name="card_exp_month"> <option value="" selected="selected">Select</option> <option value="01">01</option> ........ <option value="12">12</option> </select>`
Термін дії, рік ОБ'язковий	`card_exp_year`	`<select name="card_exp_year"> <option value="" selected="selected">Select</option> <option value="2018">2018</option> ......... <option value="2028">2028</option> </select>`
CVV код ОБ'язковий	`cvv2`
Ім'я власника картки не ОБ'язковий	`first_name`
Прізвище власника картки не ОБ'язковий	`last_name`
Адреса не ОБ'язковий	`address`
Місто не ОБ'язковий	`city`
Поштовий індекс не ОБ'язковий	`zip`
Країна не ОБ'язковий	`country`
Штат не ОБ'язковий	`state`
Телефон не ОБ'язковий	`phone`
Email не ОБ'язковий	`email`

Валідація даних

Необхідно мати валідатор для перевірки даних на формі. Обов'язково виконувати перевірку номеру картки по Алгоритму Луна. Свій валідатор має бути коректним та логічним, наприклад, щоб термін дії картки можна було вказати за виключенням сьогоднішньої дати та року. Також відображати помилку, якщо клієнт ввів не весь номер картки, а лише частково.

Після сабміта форми відобразити повідомлення про невірно заповнені дані. Або проводити перевірку js скриптом при заповненні полів.

Після сабміта форми не відображаються помилки, що термін дії меньший сьогоднішньої дати, CVV код та номер картки заповнено не повністю.

Якщо дані провалідовані та вірні - форма має сабмітитись.

Необхідно виділити блок зі стилем, де у випадку деклайна буде відображено причину відмови оплати.

Правильно:

Необхідно, щоб всі ресурси (картинки, сss, js) які використовуються на формі були пристуні в архіві.

Неправильно:

По бажанню замовника використання зовнішніх ресурсів, наприклад, блок з курсом валют на формі, сторонні js, або інші інша інформація можуть бути розміщені лише після розгляду та перевірки.

Бажано:

Небажано:

Для локалізації форми необхідні окремі html файли форми під кожну мову. Опціонально рекомендуємо додати на форму кнопки перемикання мови.

Адаптивність під різні розміри екранів та пристроїв
Loader при сабміті форми, наполегливо рекомендуємо додати, щоб клієнти які очікують завантаження сторінки 3DS не вважали, що сторінка платіжної форми не відповідає
Додати скрипт заборони подвійного кліку на кнопку сабміта для запобіганню незапланованих сценаріїв поведінки
Коректний copy-paste для поля номера картки (для перевірки: 4444 3333 2222 1111, 4444333322221111)
autocomplete="on" для полів вводу e-mail, ПІБ
При необхідності в css додати -webkit-appearance: none та -moz-appearance: none
Автозаповнення даних збережних в браузері