Last update 20/04/2016

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 types of 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 the applying a custom HTML and CSS to your content. All you need is to tell us where to inject the "PAYMENT ZONE" that will take care of the payment on your page.

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

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


6.1 Template hosted by Ingenico ePayments

By using a demo template on the hosted payment page, you can customize its design in a much more advanced way than by simply using your logo, title and colour fields.

You fully design your own template page, leaving just one area in that page to be completed by our system.

You 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. 
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: 

  • You can stop here if you choose not to customize your e-Commerce page. To find out more about customizing your e-Commerce page with our Demo template, proceed to the following section.
  • 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>).

Customize our Demo template to create your own e-Commerce pages

The demo templates are fully customizable:

1. Light customization: Add your logo to the payment page header

a. Ensure you have a transparent .png version of your logo. 
b. Delete the “logo.png” file in the zip file.
c. Rename your logo image to "logo.png".
d. Go to Configuration > Template > File manager > Upload to upload it to our platform. (Note that the virus scanner might take some time to run before your files are made available.) 

2. Medium customization: Adapt the main colours of the payment pages to match your brand

a. Open main.css using a text editor or any other appropriate tool. 

b. Locate the following elements of the page and replace with your chosen colour(s) with the following codes:


Item Code Note
Payment confirmation button: Text and background colours body {
  color: #ColourValue;
  background: #ColourValue;
}
1 and 2 on the above image.
Replace #ColourValue with the colour value of your choice.
Payment confirmation button: Text and background colours  h1.title{
    color: #ColourValue;
    background: #ColourValue;
}
3 and 4 on the above image.
Replace #ColourValue with the colour value of your choice.
Payment confirmation button: Text and background colours input[name=payment]{
    background-color: #ColourValue;
    color: #ColourValue;
}
5 and 6 on the above image.
Replace #ColourValue with the colour value of your choice.
3. Heavy customization: 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.1.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.1.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 Ingenico ePayments.

Example:

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

6.1.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.1.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.2 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. Should this not be feasible for you, we strongly recommend you to host your template files with Ingenico ePayments, using a static template and our Template File Manager. Do bear in mind, however, that this way your template may lose some of its dynamic behaviour (depending on your integration).

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

An example of a dynamic template page is available at the following address: https://secure.ogone.com/ncol/template_standard.htm

6.2.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.2.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.2.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 Ingenico ePayments 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.3 Mobile template

You can optimize the display of the payment page on mobile devices (smartphones, tablets etc.) by applying a template page, enriched with style sheets, as explained in the next chapters.

6.3.1 Layout parameters

Below are the fields which can be customised by providing details in a request:

<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="BUTTONBGCOLOR" value="">
<input type="hidden" name="BUTTONTXTCOLOR" value="">
<input type="hidden" name="LOGO" value="">
<input type="hidden" name="FONTTYPE" value="">

Field

Description

Default value

TITLE Title of the page Title
BGCOLOR Background colour white
TXTCOLOR Text colour black
TBLBGCOLOR Background colour for the right columns whitle
TBLTXTCOLOR Text colour for the right columns black
BUTTONBGCOLOR Button background colour n/a
BUTTONTXTCOLOR Button text colour black
LOGO

URL/filename of the logo you want to display on the payment page

Go to Logo hosting for more information on how/where to host your logo and how to refer to it in your order form.

-
FONTTYPE

Font family

Verdana

6.3.2 Template

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 dynamic template page. The URL must be absolute (contain the full path), it cannot be relative. Any component included in the template page must also have an absolute URL.

Important: To comply with the latest PCI-DSS (2015), you are required to host the template items used for the payment page in an environment with the highest PCI certification. Therefore, we recommend you to host your files with Ingenico ePayments, using File Manager.

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>

Go to Example templates to get some inspiration with the templates we've created, or simply create your own template based on ours.

6.3.3 Style sheets (css)

For ease of managing and understanding of CSS we divided the template CSS into four main parts:

Note: Although the example images below do reflect which elements will be affected by the css, the style (colours, images etc.) used may differ from what's described in the accomanying example codes.


Header

Using this style you can modify the header part of the payment page as shown below:

Element(s)

- Lock Part

.securedBG
{
background: #797979;
}
.secured
{
padding: 8px 20px 0px 40px;
color: #ffffff;
width: 235px;
margin: 0 auto;
background: url("lock.png") 5px no-repeat #797979;
height: 30px;
}

- Order Summary

table.ncoltable1
{
width: 100%;
margin: 0 auto;
min-width: 300px !important;
}
td.ncoltxtl
{
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
text-align : left !important;
font-weight : bold !important;
vertical-align:bottom;
}
td.ncoltxtr
{
text-align: left;
font-weight: normal;
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
}

 

Payment detail

Using this style you can customise the Payment Details section as shown below:

td.ncolinput
{
text-align: left;
font-weight: normal;
font-size: 14px;
font-family: open-sans ,Verdana,sans-serif;
display: block;
box-shadow: none !important;
}
input.ncol
{
background-color: #ffffff;
height: 40px;
font-size: 14px;
text-align: center;
padding: 0px;
font-family: open-sans ,Verdana,sans-serif;
margin: 0 35px 20px;
border-bottom: 1px solid #999999;
border-radius: 0px;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}
td.ncoltxtl2
{
text-align: left;
font-family: open-sans ,Verdana,sans-serif;
white-space: nowrap;
display: block;
font-size: 14px;
background-color:#ffffff;
}

 

Footer

Using this style you can set the footer part of the payment page:

Element(s)

td.ncollogoc
{
text-align: center;
font-weight: normal;
font-size: 14px;
padding: 2px;
vertical-align: top !important;
}
td.ncollogoc IMG
{
width: 90px;
height: 55px;
margin-right: 4px;
}
.ncollogoc td .ncol
{
width: auto;
padding-right: 10px;
padding-left: 10px;
cursor:pointer;
}
.ncollogoc input.ncol
{
margin-top:10px !important;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}

 

Payment Status Section

Using this section you can customise the look and feel of the payment status page as shown here:

Element(s)

td.ncoltxtc
{
background-color:#ffffff;
color:#999999;
padding: 0px;
text-align: left;
font-weight: normal;
font-size: 14px;
border-top: 0px solid #ffffff;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtc h3
{
text-align: center;
font-weight: normal !important;
padding: 5px;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtmessage
{
background-color: #ffffff;
color: #999999;
text-align: left;
font-weight: normal;
}

 

This is what the resulting page would look like:

6.3.4 Example pages

To get you started, we've created two pages ourselves.

The first one is a branded version which you can use as an example:

https://secure.ogone.com/ncol/StandardMobileTemplate.htm

You can also use the "stripped" version hereafter as a base to create your own template:

https://secure.ogone.com/ncol/StandardMobileTemplate_generic.htm

The same two templates with additional files (fonts, images) are available in a downloadable zip here.

6.4 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 Ingenico ePayments account and go to "Configuration" > "Template" > "File Manager".

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

6.4.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.4.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.4.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.4.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.5 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 static template
    If you select "Allow usage of static template", you must enter one or more values in the Trusted static template name. These values will then be used as input for a check that will compare it with the information received by Ingenico ePayments during the payment process.
  • 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, or if the static template is also not allowed, then the default Ingenico ePayments template will be used.

If a default static or dynamic template is configured in your account (requested beforehand to our Customer Care team), then one of the two options (Allow usage of static template / Allow usage of dynamic template) must be enabled. The template URL should also be configured as a trusted template. If the Trusted static template name and Trusted dynamic template url input fields are left blank, by default all templates are trusted. 

By default, "Enable JavaScript check on template" and "Allow usage of static template" are enabled. The Trusted static template name will be pre-configured with your website host name.

6.6 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 recommend you to use our Template File Manager to host your files securely with us.

6.7 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, Ingenico ePayments discourages the use of iframe, and the usage thereof is your responsibility. Ingenico ePayments 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.

This website uses cookies to be able to give you the best user experience. If you don't want to accept these cookies, we allow you to change the cookie settings. Click 'Accept' to allow all cookies from this website.

Cookie settings

Introduction

Functional

Functional cookies are required for the website to operate correctly. These cookies cannot be disabled.

Optimized

Optimization cookies allow us to analyze site usage so we can measure and improve our website.
This is the default level.

Personalized

Personalization cookies are used for social media and advanced personalization. They allow us to show you information related to your company.


Example functionality allowed

  • Store country preference
  • Store language preference

Example functionality not allowed

  • Saving personal data
  • Anonymous tracking via Google Analytics
  • Tracking for remarketing purposes

Example functionality allowed

  • Store country preference
  • Store language preference
  • Anonymous tracking via Google Analytics

Example functionality not allowed

  • Saving personal data
  • Tracking for remarketing purposes

Example functionality allowed

  • Store country preference
  • Store language preference
  • Anonymous tracking via Google Analytics
  • Serve content relevant to your interests
  • Serve ads relevant to your interests
  • Tracking for remarketing purposes

Example functionality not allowed

  • Saving personal data