en:integration:paymentpage:paymentpage

Requirements for the payment page

The page must contain a number of necessary objects, as well as a number of fields with specific names for entering payment information.

Page name

Normal page name – payment_ <ln> .html,

The name of the page for a mobile device is mobile_payment_ <ln> .html,

where <ln> is the two-letter locale of the page in ISO 639-1 encoding (for example, ru – Russian, en – English).

Page header

The page header must contain the following scripts:

The standard set:

<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
The extended set:

<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: "Service is temporarily unavailable. Try again later.",
  messageTimeRemaining: "#MIN #: # SEC # left until the end of the session",
  getFeeEnabled: true,
  bindingCheckboxEnabled: true,
  agreementCheckboxEnabled: true,
  emailEnabled: true
});
</script>

The fields of a script of the extended type must be filled in the following way:

language – the value of the language name that matches the one selected for the page header
messageAjaxError – the message about an internal Ajax error (that occurs, for example, when there is no access to the system)
messageTimeRemaining – a message of the session counter. It must include the «#MIN#» and «#SEC#» keywords, which in real time will be replaced by minutes and seconds indicating the time remaining before the end of the session.
getFeeEnabled – display the commission on the page;
bindingCheckboxEnabled – display of the bindingBlock with which the used card can be kept on record
agreementCheckboxEnabled – display of the consent block on the page;
emailEnabled – display of the Email block on the page.

Page body

All blocks and elements described below in this paragraph must be placed in the body of the page, unless explicitly stated otherwise.

<div id="orderNumber"></div>

the block containing the unique order number

<div id="amount"></div>

the block containing the order amount

<div id="description"></div>

the block containing the order description

Payment form

The page must contain the payment form:

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

All of the above hidden fields are required.

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

The form must also contain fields for entering information for processing the payment:

The field for entering the credit card number

<select name="MM" id="month">
    <option value="01" selected> 1 - January</option>
    <option value="02"> 2 - February</option>
    <option value="03"> 3 - March</option>
    <option value="04"> 4 - Aprile</option>
    <option value="05"> 5 - May</option>
    <option value="06"> 6 - June</option>
    <option value="07"> 7 - July</option>
    <option value="08"> 8 - August</option>
    <option value="09"> 9 - September</option>
    <option value="10">10 - October</option>
    <option value="11">11 - November</option>
    <option value="12">12 - December</option>
</select> /
<select name="YYYY" id="year">
</select>

Month selector and year selector (auto-populated on page load) for credit card expiration

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

The field for entering the cardholder name

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

the field for entering the cvc/cvv/cid -code

<button name="SendPayment" type="button" id="buttonPayment">Pay</button>

the button for the payment confirmation.

After the payment form, the following code should be placed below:

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

The following objects must also be placed on the payment page::

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

the block where errors are displayed (for example, incorrect card data)

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

the block where the message is displayed about the time remaining till the end of the payment session.

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

the block where the information message is displayed on switching from the payment page to the final page.

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

the block where the progress indicator of the request to the server is displayed (upon confirmation of payment and subsequent access to the server)

If you intend to use an IFrame, then you need to add a block to the body of the page:

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

If all the requirements are met, on paying for an order, on the payment page you will see:

- order amount

- the order number in the store system

- the order description (displayed only in the description field is filled in)