Versions Compared

Old Version 9

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.

Требование к значению аттрибута name для форм

Платформа "понимает" только определенные значения аттрибутов элементов формы. Поэтому, требование №1 - правильные значения аттрибута name на форме.

Параметры эквайринговой или дебетовой формы

...

Наименование

...

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

...

Обязательное поле

...

Пример

...

Номер карты

...

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

Платформа приймає лише зазначені атрибути елементів. Тому вимога №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
...
colour
...
Yellow
...
languagehtml
...
<input type="text" name="phone" value="" />
...
Email
...
email
titleне ОБ'язковий
phone
 Code Block
languagehtml
<input type="text" name="
...
phone" value="" />
Параметры формы оплаты в 1 клик
...
Наименование
...
Значение аттрибута name
...
Обязательное поле
...
Пример
...
Код проверки подлинности
...
cvv2
...
Да
Email
 Status
colourYellow
titleне ОБ'язковий
email
 Code Block
languagehtml
<input type="
...
text" name="
...
email" value="" 
...
/>
Валидация данных
Необходимо иметь валидатор для проверки данных на форме. Обязательно выполнять проверку номера карты по Алгоритму Луна. Свой валидатор должен быть корректный и логичный, например, чтобы срок действия карты можно было указать не ранее сегодняшнего месяца и года. Или показывать ошибку, если пользователь ввел не весь номер карты, а лишь частично.
Для просмотра примера раскройте список
...
titleПравильная реализация валидации
...
Валідація даних
Необхідно мати валідатор для перевірки даних на формі. Обов'язково виконувати перевірку номеру картки по Алгоритму Луна. Свій валідатор має бути коректним та логічним, наприклад, щоб термін дії картки можна було вказати за виключенням сьогоднішньої дати та року. Також відображати помилку, якщо клієнт ввів не весь номер картки, а лише частково.
 Expand
titleПриклад вірної реалізації валідації
Після сабміта форми відобразити повідомлення про невірно заповнені дані. Або проводити перевірку js скриптом при заповненні полів.
Image Modified
 Expand
title
...
Приклад невірної реалізації валідації
Після сабміта форми не відображаються помилки, що термін дії меньший сьогоднішньої дати, CVV код та номер картки заповнено не повністю.
Image Modified
Сабмит формы
Если данные провалидированы и верны - форма должна сабмититься.
Место для отображения причины деклайна
...
Сабміт даних
Якщо дані провалідовані та вірні - форма має сабмітитись.
Місце для помилок
Необхідно виділити блок зі стилем, де у випадку деклайна буде відображено причину відмови оплати.
Правильно:
 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" />
Image Modified
...
Зовнішні ресурси
По бажанню замовника використання зовнішніх ресурсів, наприклад, блок з курсом валют на 
...
формі, 
...
сторонні 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 при сабмите формы
...
Рекомендації
  • Адаптивність під різні розміри екранів та пристроїв
  • Loader при сабміті форми, наполегливо рекомендуємо додати, щоб клієнти які очікують завантаження сторінки 3DS не вважали, що сторінка платіжної форми не відповідає
  • Додати скрипт заборони подвійного кліку на кнопку сабміта для запобіганню незапланованих сценаріїв поведінки
  • Коректний copy-paste для поля номера 
...
  • картки (для 
...
  • перевірки: 4444 3333 2222 1111, 4444333322221111)
  • autocomplete="on" для 
...
  • полів вводу e-mail, 
...
  • ПІБ
  • При 
...
  • необхідності в css 
...
  • додати -webkit-appearance: none
...
Последующие правки
...
  •  та -moz-appearance: none
...
Автозаполнение номера карты из сохраненных в браузере
  • Автозаповнення даних збережних в браузері
Правки після релізу
 Note
Прохання звернути увагу, що якщо після релізу форми згідно вашої верстки у вас виникнуть додаткові побажання щодо змін в ній - використовується правило трьох безкоштовних правок, всі наступні - платні.