Versions Compared

Old Version 10

changes.mady.by.user Tech Platon

Saved on

compared with

New Version Current

changes.mady.by.user Tech Platon

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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

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

Назва

Значення атрибута name

Приклад

Номер картки

Status
colourGreen
titleОБ'язковий

card_num для цільного вводу номера картки,
або
card_num1
card_num2
card_num3
card_num4
для розділення по 4 цифри в 4 поля

Code Block
languagehtml
<input type="text" name="card_num" value="" />

Термін дії, місяць

Status
colourGreen
titleОБ'язковий

card_exp_month

Code Block
languagehtml
<select name="card_exp_month">
  <option value="" selected="selected">Select</option>
  <option value="01">01</option>
  ........
  <option value="12">12</option>
</select>

Термін дії, рік

Status
colourGreen
titleОБ'язковий

card_exp_year

Code Block
languagehtml
<select name="card_exp_year">
  <option value="" selected="selected">Select</option>
  <option value="2018">2018</option>
  .........
  <option value="2028">2028</option>
</select>

CVV код

Status
colourGreen
titleОБ'язковий

cvv2

Code Block
languagehtml
<input type="password" name="cvv2" value="" maxlength="3" />

Ім'я власника картки

Status
colourYellow
titleне ОБ'язковий

first_name

Code Block
languagehtml
<input type="text" name="first_name" value="" />

Прізвище власника картки

Status
colourYellow
titleне ОБ'язковий

last_name

Code Block
languagehtml
<input type="text" name="last_name" value="" />

Адреса

Status
colourYellow
titleне ОБ'язковий

address

Code Block
languagehtml
<input type="text" name="address" value="" />

Місто

Status
colourYellow
titleне ОБ'язковий

city

Code Block
languagehtml
<input type="text" name="city" value="" />

Поштовий індекс

Status
colourYellow
titleне ОБ'язковий

zip

Code Block
languagehtml
<input type="text" name="zip" value="" />

Країна

Status
colourYellow
titleне ОБ'язковий

country

Code Block
languagehtml
<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>

Штат

Status
colourYellow
titleне ОБ'язковий

state

Code Block
languagehtml
<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>

Телефон

Status
colourYellow
titleне ОБ'язковий

phone

Code Block
languagehtml
<input type="text" name="phone" value="" />

Email

Status
colourYellow
titleне ОБ'язковий

email

Code Block
languagehtml
<input type="text" name="email" value="" />

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

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

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

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

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

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

Сабміт даних

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

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

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

Правильно:

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

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

Warning

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

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

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

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

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

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

Бажано:

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

Небажано:

Code Block
<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 файли форми під кожну мову. Опціонально рекомендуємо додати на форму кнопки перемикання мови.

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

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

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

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

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

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

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

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

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

Note

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