Last update 6/09/2018

6. Payment page look and feel

LOOK & FEEL: Build the payment page in a way that it reflects your brand and the needs of your customers at the moment of proceeding to a payment, concluding with a coherent shopping funnel and increasing your conversion. Our payment pages are composed of 2 elements:

  • Static information (e.g. your logo)
  • Payment detail information (e.g. order reference, fields where the customer enters his card details, etc.)

The static information originates from our system’s common layout or a specific merchant template page. Our system adds the payment details dynamically for each transaction. You can customize your payment page down to applying a custom HTML and CSS to your content. All you need to do is tell us where to include the "PAYMENT ZONE" and that will take care of the payment on your page.

SECURED HOSTING: ePDQ proposes a secured hosting for your payment page template which allows you to remain PCI compliant.

Note: You can skip the following demo template customization section if you do not plan to customize your payment page.

6.1 ePDQ Responsive Payment Page template

Our fully responsive payment page template is the perfect and easiest solution for a multi-screen online shopping experience for your customers. It ensures you an optimized conversion on both desktop and mobile devices.


  • To activate the Responsive Payment Page Template from the Back Office, go to Configuration > Template > Template Selector and click "Activate" the responsive payment page.
  • To personalize the template by adding your logo, go to Configuration > Template > File manager and upload your logo which you named: "logo.png".

6.2 Adapt and upload your own customized template

Begin by downloading below the ePDQ Responsive Payment Page template source file to freely customize and fit your specific brand needs. You can fully design your own template page, leaving just one area on that page to be completed by our system. You can also host your template page and files on our secure environment, which we refer to as "static template".

Download our demo template for e-Commerce payment pages

Feel free to try out our demo templates that support both desktop and mobile browsers. You can use them as such or easily customize them further to fit your needs. To that end you can simply open the template css files and adapt the different value to obtain your desired page.
Other than customizing the provided css files, you can also complete the HTML by adding your own header and footer information. Please see Chapter 6.2.2 for more information. For security reasons, do not apply unauthorized external data/files; all files and data must be uploaded to File Manager in order to be used.
 
Once completed, follow these steps to download and apply the templates for free:

  1. Download the zip file.
  2. From the Back Office, go to Configuration > Template > Global configuration > Allow usage of static template > Yes to activate the Static templates.
  3. Go to Configuration > Template > File manager to upload the different files included in the zip file (no folder).
  4. Go to Configuration > Template > Default settings to select your preferred “Default merchant template” for e-Commerce. 

Note: 

  • The platform supports multiple templates. You can overrule the default template for any transaction and select a specific one using the “TP” parameter in your POST request (TP=<full name of the HTML file including extension>).

Design your own payment page. 

Other than customizing the provided css files, you can also complete the HTML by adding your own header and footer information. Please see Chapter 6.2.2 for more information. For security reasons, do not apply unauthorized external data/files; all files and data must be uploaded to File Manager in order to be used.

6.2.1 Hidden fields

The following hidden field is used to transmit the file name of your template page:

Field
Description
TP File name of the template hosted by ePDQ.

Example:

<input type="hidden" name="TP" value="mytemplatefile.html">

6.2.2 Payment zone

The template page can be designed completely to your liking. The only requirement is that it must contain the string "$$$PAYMENT ZONE$$$" indicating the location where our e-Commerce module can add its fields dynamically. It must therefore contain at least the following:

<html>
$$$PAYMENT ZONE$$$
</html>

Important
Do not use BASE tags, frames or FORM tags to encapsulate the $$$PAYMENT ZONE$$$ string.

6.2.3 Style sheets

You can personalise the look and feel of your payment pages by adding style sheets to your template page.

We have defined a class for the various types of tables and cells within our tables as well as a class for the submit buttons.

You need to add the following block of code between the tags <head></head> and change the properties of those classes to fit to the look and feel of your site:

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

When you enter your own layout instructions, you must adhere to the cascading style sheet syntax. We strongly advise you to test it in various browsers, as the way they handle style may differ enormously.

6.3 Template hosted by merchant (Dynamic template)

The dynamic template page allows you to customise the design of the payment pages in a more advanced way than the static template does.

When you use a dynamic template page, you fully design your own template page, leaving just one area in that page to be completed by our system. The URL of your template page needs to be sent to us in the hidden fields for each transaction.

Please bear in mind that using a dynamic template page involves an additional request from our system to look up your template page. This increases the time needed for the payment process.

Important

To comply with the latest PCI-DSS you are required to host your template (and related files) in an environment with the highest PCI certification.

6.3.1 Hidden fields

The following hidden field is used to transmit the URL of your template page:

<input type="hidden" name="TP" value="">

Field
Description
TP URL of the merchant’s dynamic template page. The URL must be absolute (contain the full path), it cannot be relative.
Do not specify any ports in your URL, we only accept ports 443 and 80.
Any component included in the template page must also have an absolute URL.

6.3.2 Payment zone

The template page can be designed completely to your liking. The only requirement is that it must contain the string "$$$PAYMENT ZONE$$$" indicating the location where our e-Commerce module can add its fields dynamically. It must therefore contain at least the following:

<html>
$$$PAYMENT ZONE$$$
</html>

Important
Do not use BASE tags, frames or FORM tags to encapsulate the $$$PAYMENT ZONE$$$ string.

An example of a dynamic template page is available at the following address: https://payments.epdq.co.uk/ncol/template_standard.htm

6.3.3 Dynamic behaviour

The same template page can be used for all orders, or it may be generated dynamically by the merchant’s application according to the order parameters.

To generate the template page dynamically, the merchant can choose between creating a specific page for the order, whose URL is transmitted in the hidden fields, or using a fixed URL but returning a result derived from the order number. To allow this, our system adds the main payment data – including the merchant’s order reference number – when it retrieves the template page:

HTTP request = url_page_template ?ORDERID=...&AMOUNT=...&CURRENCY=…

6.3.4 Style sheets

You can personalise the look and feel of your payment pages by adding style sheets to your template page.

We have defined a class for the various types of tables and cells within our tables as well as a class for the submit buttons.

You need to add the following block of code between the tags <head></head> and change the properties of those classes to fit to the look and feel of your site:

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

When you enter your own layout instructions, you must adhere to the cascading style sheet syntax. We strongly advise you to test it in various browsers, as the way they handle style may differ enormously.

6.3.5 Performance

Our system is configured with a 5-second time-out for the request to retrieve the merchant’s dynamic template page.

We are happy to change this time-out for you, if you submit a support ticket).

If a time-out occurs, our system will use the merchant's static template instead.

If no static template is configured, our system will use the ePDQ default layout as a last resort.

The configured time-out has an impact on both dynamic template requests and post-payment feedback requests (see Direct feedback requests (Post-payment)). Consequently, if the merchant were to change it to e.g. 15 seconds, the feedback request timeout will also increase to 15 seconds.

For each order, our system performs a request to retrieve your dynamic template page. If you have high transaction volumes or a large template page (e.g. your dynamic template page contains a large number of images), these HTTP requests could take a bit longer. Please contact our Sales team for a solution if you have high transaction volumes.

6.4 Mobile template

We have developed a specific template for mobile/smartphones on our platform. In order to use our static mobile template, you need to transmit the URL of the mobile template page using the following hidden field and value:

<input type="hidden" name="TP" value="PaymentPage_1_iPhone.htm">

We can only guarantee that our secure payment pages are compatible with mobile devices. We cannot guarantee that all external pages accessible via our payment pages, e.g. third-party or bank websites, are compatible.

The data entry interface is especially designed for the smaller mobile screen. The look and feel can be customised to your needs by simply adding some hidden fields in the form you send us. The following hidden fields are used to transmit the look-and-feel parameters for the mobile template to our system:

<input type="hidden" name="TITLE" value="">
<input type="hidden" name="BGCOLOR" value="">
<input type="hidden" name="TXTCOLOR" value="">
<input type="hidden" name="TBLBGCOLOR" value="">
<input type="hidden" name="TBLTXTCOLOR" value="">
<input type=”hidden” name=”HDTBLBGCOLOR” value=””>
<input type=”hidden” name=”HDTBLTXTCOLOR” value=””>
<input type=”hidden” name=”HDFONTTYPE” value=””>
<input type="hidden" name="BUTTONBGCOLOR" value="">
<input type="hidden" name="BUTTONTXTCOLOR" value="">
<input type="hidden" name="FONTTYPE" value="">

Field

Description

Default value

TITLE Title of the page -
BGCOLOR Background colour #FFFFFF
TXTCOLOR Text colour #00467F
TBLBGCOLOR Background colour for the right columns #E1EDF4
TBLTXTCOLOR Text colour for the right columns #000000
HDTBLBGCOLOR Background colour for the left columns #00467F
HDTBLTXTCOLOR Text colour for the left columns #FFFFFF
HDFONTTYPE Font family for the left columns Verdana
BUTTONBGCOLOR Button background colour #FFFFFF
BUTTONTXTCOLOR Button text colour #00467F
FONTTYPE

Font family

Verdana

Mobile phone template

6.5 Template File Manager

With the Template File Manager you can easily manage your templates and the various files that come with it.

To start using File Manager, log on to your ePDQ account and go to "Configuration" > "Template" > "File Manager".

Important
It's not possible to simultaneously use files previously uploaded by ePDQ and files uploaded with File Manager in your integration.
Therefore, if you have files that were uploaded by ePDQ in the past, please make sure to upload those files again yourself, using File Manager.

6.5.1 Upload template files

Under "Upload Template Files", select the "Files..." button to browse for the files you wish to upload. You can upload Javascripts, html, css and images (.css, .jpg, .jpeg, .gif, .png, .html, .js), with a maximum of 7 MB per file, and 10 MB in total.

Make your selection and then confirm.

6.5.2 Check and manage uploaded files

After the upload is done, you'll see your uploaded files on the same page in the "Uploaded files" section.

The files will first have the "Validating" status, during which some necessary security/virus checks are being performed.

You can use the files once its status has changed to "Validated".

Click the refresh button  to check the current status of your files / click the delete  button to delete the file permanently.

A file will get the "Refused" status if it didn't pass the security check. This can be due to a virus or if the extension of the file is wrong for instance. 

6.5.3 Default merchant template

Under Default settings > Default merchant template, you can configure the template you want to apply on the e-Commerce hosted payment page.

If you don't select a default template, the platform's default template is used.



6.5.4 Integration

In your templates you refer to your uploaded files with a code following this structure: $$$TP RESOURCES URL$$$/[your file name].

Note:  If you want to use a resource in a CSS file, you should reference the following code: "./[your file name] instead.

Example:

To refer to your uploaded template in your e-Commerce integration, you send the template file name with the "TP" parameter.

Example: TP=mytemplatefile.html

When you have a basic e-Commerce integration using a logo on top of the page, you need to refer to the uploaded logo by sending the filename along with the "LOGO" parameter.

Example: LOGO=mycompanylogo.png

6.6 Template security control

To protect your customers against fraudulent activities, such as the manipulation of sensitive card data (card number, CVC), different security checks for the merchant template were made available.

In your Technical information page > Global security parameters tab > Template section, the following settings can be configured:

  • Enable Javascript check on template
    You can enable this feature to detect Javascript usage on the template page. If Javascript is detected, the template will be blocked and the default template will be used instead.
  • Allow usage of dynamic template (optional, depending on your subscription)
    If you select "Allow usage of dynamic template", you must configure the Trusted website host name hosting the dynamic template field. This field can contain multiple web hosts, separated by semicolons, but they should all contain the full URL, e.g. http://www.website.com/. The sub-directories can be left out, so if the dynamic template is http://www.website.com/templates/nl/template1.htm, it suffices to configure http://www.website.com as trusted web host.

    Additionally you can also configure one or more fully trusted dynamic template urls, separated by semicolons, in the Trusted dynamic template url field.

If a dynamic template is submitted with a transaction, but dynamic templates are not allowed, then the template will be blocked and our system will use the static template instead.
If there is no static template configured, then the default ePDQ template will be used. By default, "Enable JavaScript check on template" are enabled. 

6.7 Secure environment padlock

The URL used to connect the customer to our platform uses a secure protocol (https). All the communication between our e-Commerce platform and the customer is securely encrypted.

However, the small padlock on the browser – which indicates to the customer that the site is secure – may not be displayed if some elements (e.g. images) in the template page are not located on a secure server or if some frames on the screen show pages that do not originate from secure sites.

Even if the payment processing communication is encrypted, most browsers will not recognise a secure connection unless all the elements on the screen, including images, sounds, etc. come from secure sites.

For merchants who do not have a secure site, please bear in mind the following rules:

  1. Do not use frames for the payment pages: you can refresh the entire screen with a template page that looks as if you are using frames or allow the payment to be processed in a new window.
  2. Do not link files to the template page (<link> tag) that you use for the payment page. Instead, use the <style> and <script> tags to include styles and scripts into the template page.
  3. Make sure the images in your template are stored on a secure server (the template page can be on a non-secure server, however the images cannot). We offer hosting for these elements (see the image hosting options in your account). 

6.8 Use of payment page in iframe

Iframes allow you to integrate an external web page (such as the payment page) on your website, while maintaining your own URL in the browser.

However, in the current context iframe also has very significant drawbacks:

  • Since the URL is the merchant's URL, it could be a simple http (instead of an https) and the padlock icon may not appear in the browser. This could cause customers to doubt the security of the webshop.
  • Some payment methods (such as PayPal, Giropay, Sofort and Bancontact/Mister Cash) use redirections, which may give poor layout results and/or navigation misbehaviour.

As a result, ePDQ discourages the use of iframe, and the usage thereof is your responsibility. ePDQ strongly encourages the use of a Dynamic Template instead.

If you still wish to pursue the integration of iframe, we strongly recommend the following:

  • Use iframe only on the payment method selection page (and beyond)
  • Use pop-ups for external payment methods whenever possible, to ensure the visibility of third-party web applications.

*Call Charges: The following is a guide to call charge information from Business landlines within the UK.

Barclaycard is a trading name of Barclays Bank PLC. Barclays Bank PLC is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority (Financial Services Register number: 122702). Registered in England. Registered No. 1026167. Registered office: 1 Churchill Place, London E14 5HP

Barclays Bank PLC subscribes to the Lending Code which is monitored and enforced by the Lending Standards Board. Further details can be found at www.lendingstandardsboard.org.uk escape arrow


© Barclaycard 2016