Требования к кастомной верстке

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

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

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

<input type="text" name="card_num" value="" />

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

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

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

<input type="text" name="first_name" value="" />

<input type="text" name="last_name" value="" />

<input type="text" name="address" value="" />

<input type="text" name="city" value="" />

<input type="text" name="zip" value="" />

<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>

<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>

<input type="text" name="phone" value="" />

<input type="text" name="email" value="" />

Параметры формы оплаты в 1 клик

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

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

Необходимо иметь валидатор для проверки данных на форме. Обязательно выполнять проверку номера карты по Алгоритму Луна. Свой валидатор должен быть корректный и логичный, например, чтобы срок действия карты можно было указать не ранее сегодняшнего месяца и года. Или показывать ошибку, если пользователь ввел не весь номер карты, а лишь частично.

 Правильная реализация валидации

После сабмита формы отображаются сообщения о неверных карточных данных. Или, при вводе карточных данных js валидатор проверяет их на правильность.

 Неправильная реализация валидации

После сабмита формы не отображаюся сообщения о ошибках: Expiration date меньше текущей даты, код проверки подлинности неверной длины, номер карты неверной длины.

Сабмит формы

Если данные провалидированы и верны - форма должна сабмититься.

Место для отображения причины деклайна

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

Правильно:

<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 файл. Опционально рекомендуем добавить на форму кнопки переключения языков.

Рекомендации

• Адаптация под разные разрешения экрана

• Loader при сабмите формы

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

• autocomplete="on" для полей ввода e-mail, ФИО

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

• Автозаполнение номера карты из сохраненных в браузере

Последующие правки