note

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

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

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

note

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

Атрибути для 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="" />
note

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

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

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

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

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

note

Сабміт даних

Сабміт даних

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

note

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

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

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

Правильно:

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

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

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

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

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

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

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

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

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

По бажанню замовника використання зовнішніх ресурсів, наприклад, блок з курсом валют на формі, сторонні 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>
note

Локалізація

Локалізація

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

note

Рекомендації

Рекомендації

  • Адаптивність під різні розміри екранів та пристроїв

  • Loader при сабміті форми, наполегливо рекомендуємо додати, щоб клієнти які очікують завантаження сторінки 3DS не вважали, що сторінка платіжної форми не відповідає

  • Додати скрипт заборони подвійного кліку на кнопку сабміта для запобіганню незапланованих сценаріїв поведінки

  • Коректний copy-paste для поля номера картки (для перевірки: 4444 3333 2222 1111, 4444333322221111)

  • autocomplete="on" для полів вводу e-mail, ПІБ

  • При необхідності в css додати -webkit-appearance: none та -moz-appearance: none

  • Автозаповнення даних збережених в браузері

note

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

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

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