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

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

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

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

Назва	Значення атрибута `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`	<input type="password" name="cvv2" value="" maxlength="3" />
Ім'я власника картки НЕ ОБ'ЯЗКОВИЙ	`first_name`	<input type="text" name="first_name" value="" />
Прізвище власника картки НЕ ОБ'ЯЗКОВИЙ	`last_name`	<input type="text" name="last_name" value="" />
Адреса НЕ ОБ'ЯЗКОВИЙ	`address`	<input type="text" name="address" value="" />
Місто НЕ ОБ'ЯЗКОВИЙ	`city`	<input type="text" name="city" value="" />
Поштовий індекс НЕ ОБ'ЯЗКОВИЙ	`zip`	<input type="text" name="zip" value="" />
Країна НЕ ОБ'ЯЗКОВИЙ	`country`	<select name="country"> <option value="">Select please</option> <option value="UA" selected="selected">Ukraine</option> ...................... <option value="GB">United Kingdom</option> <option value="US">United States of America</option> </select>
Штат НЕ ОБ'ЯЗКОВИЙ	`state`	<select name="state"> <option value="">Select please</option> <option value="NA" selected="selected">Non US/Canada/Australia</option> <optgroup label="US States"> <option value="WA">Washington</option> </optgroup> </select>
Телефон НЕ ОБ'ЯЗКОВИЙ	`phone`	<input type="text" name="phone" value="" />
Email НЕ ОБ'ЯЗКОВИЙ	`email`	<input type="text" name="email" value="" />

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

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

Приклад вірної реалізації валідації

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

Приклад невірної реалізації валідації

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

Сабміт даних

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

Місце для помилок

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

Правильно:

<div class="row">
  <div class="span8 offset2">
    <div class="alert alert-error msg-error">ALERT MESSAGE HERE</div>
  </div>
</div>

Ресурси форми

Заборонено мініфіцирувати файли.

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

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

<link type="text/css" rel="stylesheet" href="../resources/css/validator.css" />

Зовнішні ресурси

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

Бажано:

<link type="text/css" rel="stylesheet" href="../resources/css/base.css" />
<script type="text/javascript" src="../resources/js/jquery.js"></script>

Небажано:

<link type="text/css" rel="stylesheet" href="http://mysite.com/resources/css/base.css" />
<script type="text/javascript" src="http://mysite.com/resources/js/myscript.js"></script>

Локалізація

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

Правки після релізу

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