Инструменты страницы
Требования к платёжной странице
Страница должна содержать ряд необходимых объектов, а также ряд полей для ввода платёжной информации с определённым названием.
Название страницы
Название обычной страницы – 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)