The payment page can be customized through the use of a CSS file. The core page display is based on the BootStrap 3 responsive layout. You should ensure that you are familiar with the underlying styles used within BootStrap before making any CSS changes. For more details on the BootStrap layout, please refer to: 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.