Инструменты страницы

Требования к платёжной странице

Страница должна содержать ряд необходимых объектов, а также ряд полей для ввода платёжной информации с определённым названием.

Название страницы

Название обычной страницы – payment_<ln>.html,

Название страницы для мобильного устройства - mobile_payment_<ln>.html,

где <ln> - двухбуквенное обозначение локали страницы в кодировке ISO 639-1 (например, ru – русский, en - английский).

Заголовок страницы

В заголовке страницы должны подключаться следующие скрипты:

Стандартный вариант:

<script type="text/javascript"src="../../js/jquery-2.2.4.min.js"></script>

<script type="text/javascript"src="../../js/jquery-migrate-1.1.1.js"></script>

<script type="text/javascript" src="../../js/jquery.url.js"></script>
<script type="text/javascript" src="../../js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.11.4.custom.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../js/jquery.checkbox.min.js"></script>
<script type="text/javascript" src="../../js/payment.utils.js"></script>
<script type="text/javascript" src="js/localization.js"></script>
<script type="text/javascript" src="../../js/1.0/jquery.main.js"></script>
<script type="text/javascript" src="../../js/1.1/additional.js"></script>
<script type="text/javascript" src="../../js/jquery.payment_new.js"></script>
<script type="text/javascript" src="../../js/1.0/jquery.page.js"></script>
<script>
$(document).payment({
});
</script>

min.js
Расширенный вариант:

<script type="text/javascript"src="../../js/jquery-2.2.4.min.js"></script>

<script type="text/javascript"src="../../js/jquery-migrate-1.1.1.js"></script>

<script type="text/javascript" src="../../js/jquery.url.js"></script>
<script type="text/javascript" src="../../js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.11.4.custom.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../js/jquery.checkbox.min.js"></script>
<script type="text/javascript" src="../../js/payment.utils.js"></script>
<script type="text/javascript" src="js/localization.js"></script>
<script type="text/javascript" src="../../js/1.0/jquery.main.js"></script>
<script type="text/javascript" src="../../js/1.1/additional.js"></script>
<script type="text/javascript" src="../../js/jquery.payment_new.js"></script>
<script type="text/javascript" src="../../js/1.0/jquery.page.js"></script>
<script>
$(document).payment({
  language: "ru",
  messageAjaxError: "Сервис временно недоступен. Попробуйте позднее.",
  messageTimeRemaining: "До окончания сессии осталось #MIN#:#SEC#",
  getFeeEnabled: true,
  bindingCheckboxEnabled: true,
  agreementCheckboxEnabled: true,
  emailEnabled: true
});
</script>

Поля расширенного вида скрипта должны быть заполнены следующим образом:

  • language – значение название языка, совпадающее с выбранным для названия страницы;
  • messageAjaxError – сообщение о внутренней ошибки Ajax (возникает например при отсутствии доступа к системе);
  • messageTimeRemaining – сообщение счётчика сессии. В нём обязательно должны быть указаны ключевые слова «#MIN#» и «#SEC#», которые в реальном времени будут заменять на минуты и секунды, обозначающие время до окончания сессии;
  • getFeeEnabled - Отображение комиссии на странице;
  • bindingCheckboxEnabled - Отображение блока bindingBlock с помощью которого можно запомнить данные веденной карты;
  • agreementCheckboxEnabled - Отображение блока согласия на странице;
  • emailEnabled - Вывод на странице блока Email.

Тело страницы

Все блоки и элементы, описанные ниже в данном параграфе, обязательно должны быть размещены в теле страницы, если явно не указано иное.

<div id="orderNumber"></div>
блок, где содержится уникальный номер заказа

<div id="amount"></div>
блок, где содержится сумма оплаты заказа

<div id="description"></div>
блок, где содержится описание заказа.

Платёжная форма

Страница должна содержать платежную форму:

<form name="PaymentForm" action="#" method="post" id="formPayment">
  <input type="hidden" id="expiry" >
  <input type="hidden" id="mdOrder" >
</form>

Все указанные выше hidden-поля обязательны.

<input name="$PAN" id="iPAN" maxlength="19" type="text" autocomplete="off" />

Форма также должна содержать поля для ввода информации для проведения платежа:

Поле для ввода номера кредитной карты

<select name="MM" id="month">
    <option value="01" selected> 1 - январь</option>
    <option value="02"> 2 - февраль</option>
    <option value="03"> 3 - март</option>
    <option value="04"> 4 - апрель</option>
    <option value="05"> 5 - май</option>
    <option value="06"> 6 - июнь</option>
    <option value="07"> 7 - июль</option>
    <option value="08"> 8 - август</option>
    <option value="09"> 9 - сентябрь</option>
    <option value="10">10 - октябрь</option>
    <option value="11">11 - ноябрь</option>
    <option value="12">12 - декабрь</option>
</select> /
<select name="YYYY" id="year">
</select>

Селектор месяца и селектор года (заполняется автоматически при загрузке страницы) истечения срока действия кредитной карты

<input name="TEXT" id="iTEXT" maxlength="90" type="text" autocomplete="off" />

Поле ввода имени владельца карты (Cardholder name)

<input name="$CVC" id="iCVC" maxlength="3" type="password" autocomplete="off" />

поле ввода cvc/cvv/cid -кода

<button name="SendPayment" type="button" id="buttonPayment">Оплатить</button>

кнопка подтверждения оплаты.

После формы оплаты, ниже должен быть размещён следующие код:

<form id="acs" method="post" action="">
    <input type="hidden" id="MD" name="MD"/>
    <input type="hidden" id="PaReq" name="PaReq"/>
    <input type="hidden" id="TermUrl" name="TermUrl"/>
</form>

На странице оплаты должны быть также размещены следующие объекты:

<div id="errorBlock" style="color:red;"></div>

блок, где отображаются ошибки (например, неверные данные по карте)

<div id="numberCountdown"></div>

блок, где отображается сообщение о том, сколько ещё времени до конца сессии оплаты.

<div id="infoBlock"></div>

блок, где отображается информационное сообщение при переходе со страницы оплаты на итоговую страницу.

<div id="indicator" style="display:none;"><img src="../../img/ajax-loader.gif" height="19" width="220" alt="indicator"></div>

блок, где отображается индикатора прогресса выполнения запроса к серверу (при подтверждении оплаты и последующему обращению к серверу)

Если предполагается использование IFrame, то в тело страницы необходимо добавить блок:

<iframe name="iframe_name" id="iframe_id" src="formUrl" style="width: 100%; height: 700px; border: 0 none;" scrolling="no" frameborder="0"></iframe>

При выполнении всех требований на платежной странице при оплате заказа будут отображаться:

- сумма заказа

- номер заказа в системе магазина

- описание заказа (отображается только при заполнении поля description)