The payment page can be customized using a CSS file. The page structure is based on the BootStrap 3 responsive framework, so it is essential to be familiar with BootStrap's core styles before applying any modifications. For further details on the BootStrap layout, please refer to the following resource:http://getbootstrap.com/css/
The page itself is constructed in sections. The top part of the page is where core branding information such as logos should be placed. This is also where the details of the transaction amount are shown.
Below this are the panels for the different payment methods available. If there are multiple payment methods, then the panels are presented as an accordion-style display, where only one panel can be visible at any one time.
The main elements that can be styled are as follows:
| Element | Class | Description |
|---|---|---|
| div | .container | Wrapper around the content sections, sets the Bootstrap grid system. |
| div | .content_header | Wrapper around the page header (jumbotron) |
| div | .content_body | Wrapper around the main page content (the panels) |
| div | .content_footer | Wrapper around the footer part of the page. |
| div | .jumbotron | Header section containing store name and payment details. |
| div | .panel-heading | Heading displayed when multiple panels are in use. |
| div | .panel-subheader | Individual panel heading |
| h4 | .panel-title | The text element within a panel heading or subheader. |
| div | .panel-body | The main panel content, such as input fields. |
| button | .btn | Core button style used by all buttons. |
| button | .btn-success | Primary action button, default style is green. |
| button | .btn-danger | Cancel button, default style is red. |
| button | .btn-warning | Intermediate action button, default style is orange. |
| div | # collapse_card | Panel for card payments. |
| div | # collapse_qpay | Panel for payment using stored card details. |
| div | # collapse_sadad | Panel for the SADAD payment method. |
| div | # collapse_paypal | Panel for PayPal payments. |
| div | # collapse_mpass | Panel for MasterPass payments. |
You should ensure you do not make any changes to the core Bootstrap classes, as doing so could adversely affect the payment page display. You should not change any of the following elements:
| Element | Class | Description |
|---|---|---|
| div | .container | Wrapper around the content sections, sets the Bootstrap grid system. |
| div | .content_header | Wrapper around the page header (jumbotron) |
| div | .content_body | Wrapper around the main page content (the panels) |
| div | .content_footer | Wrapper around the footer part of the page. |
| div | .jumbotron | Header section containing store name and payment details. |
| div | .panel-heading | Heading displayed when multiple panels are in use. |
| div | .panel-subheader | Individual panel heading |
| h4 | .panel-title | The text element within a panel heading or subheader. |
| div | .panel-body | The main panel content, such as input fields. |
| button | .btn | Core button style used by all buttons. |
| button | .btn-success | Primary action button, default style is green. |
| button | .btn-danger | Cancel button, default style is red. |
| button | .btn-warning | Intermediate action button, default style is orange. |
| div | # collapse_card | Panel for card payments. |
| div | # collapse_qpay | Panel for payment using stored card details. |
| div | # collapse_sadad | Panel for the SADAD payment method. |
| div | # collapse_paypal | Panel for PayPal payments. |
| div | # collapse_mpass | Panel for MasterPass payments. |
Page element layout
<div class= " container " >
<div class= " content_header " >
<div class= " jumbotron " ></div>
</div>
<div class= " content_body " >
<div class= " panel-group " id= " single_method " >
<div class= " panel panel-default " >
<div class= " panel-subheader " >
<h4 class= " panel-title " ></h4>
</div>
<div id= " collapse_card " class= " panel-collapse collapse " >
<div class= " panel-body " >
<button class= " btn btn-success " ></button>
<button class= " btn btn-warning " ></button>
</div>
</div>
</div>
</div>
</div>
<div class= " content_footer " ></div>
</div>
The following is for a page with multiple panels.
<div class=”container”>
<div class= " content_header " >
<div class= " jumbotron " ></div>
</div>
<div class= " content_body " >
<div class= " panel-group” id=”accordion " >
<div class= " panel panel-default " >
<div class= " panel-heading " >
<h4 class= " panel-title " ></h4>
</div>
<-- panel-heading only displayed when multiple panels are in use -->
<div class= " panel-subheader " >
<h4 class= " panel-title " ></h4>
</div>
<div id= " collapse_card " class= " panel-collapse collapse " >
<div class= " panel-body " >
<button class= " btn btn-success " ></button>
<button class= " btn btn-warning " ></button>
</div>
</div>
<div class= " panel-subheader " >
<h4 class= " panel-title " ></h4>
</div>
<div id= " collapse_sadad " class= " panel-collapse collapse " >
<div class= " panel-body " >
<button class= " btn btn-success " ></button>
<button class= " btn btn-warning " ></button>
</div>
</div>
<-- panel-subheader & panel-collapse sections repeated as needed -->
</div>
</div>
</div>
<div class= " content_footer " ></div>
</div>
Uploading customisation files
Files can be uploaded using the Additional Files section within the payment page menu in the Merchant Administration System. You can upload the custom CSS file and any required images.
CSS
You can upload your custom style sheet by uploading a file titled ‘custom_pp2.css’
This file must be un-compressed CSS file, must not include any JavaScript, nor any references to other external css files. If it references images then those must be sourced from a secure (https) server. The best option is to upload those images to the payment gateway. To reference an image uploaded to the gateway use the sequence {{FileBase}} to have the correct URL inserted at that point – the URL will change depending on if the page is viewed in test or live mode.
For example, to reference an image uploaded as logo.png you should use the following: url( ” {{FileBase}}logo.png ” )
Images
You can upload image files in gif, jpg or png format for use within the payment page customisation. These can be then be referenced from within your custom CSS. The maximum size of an image file is 256K.