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