Oney card payment pages customisation
Introduction
WL Sips is a secure multi-channel e-commerce payment solution that complies with the PCI DSS standard. It allows you to accept and manage payment transactions by taking into account business rules related to your activity (payment on despatch, deferred payment, recurring payment, payment in instalments, etc.).
The purpose of this document is to help you customise the Oney card payment pages. You can customise all the payment pages of the Oney process to match your website as closely as possible.
However, we would like to highlight the vital importance of making sure that the customisation elements are compatible with the various browsers used by customers, and that they comply with web accessibility requirements.
It is the customer's responsibility to provide and verify the elements guaranteeing the quality of the payment pages since Worldline is not involved in the verification process.
Who does this document target
This document is an implementation guide for your technical team.
To get an overview of the WL Sips solution, we advise you to consult the following documents:
- Functional presentation
- Functionality set-up guide
Contacting the support
For any technical question or request for assistance, our services are available:
- by telephone at: +33 (0) 811 10 70 33
- by e-mail: sips@worldline.com
In order to facilitate the processing of your requests, please provide your merchantId (15-digit number).
Customising pages
Structure
All the payment pages in the Oney process are structured in the same way:
- a header
- a main zone
- a footer
You can edit the HTML code of both the header and the footer, but not the one of the main zone. You can also apply your own CSS (stylesheet) so that the payment pages look the same as your website.
Payment page structure:

Architecture and security
Internet access is secured by a double supply of Internet service providers (ISPs).
The network infrastructure for WL Sips in DMZ is fully redundant. Load balancers operate in automatic failover mode and are redundant. They allow to dynamically distribute (by load balancing) the incoming HTTPS flow on the existing HTTP servers.
The HTTPS server presentation function is performed by five Apache HTTPS servers operating in load balancing (dynamic load balancing).
Firewalls are doubled both in and out of DMZ.
Header and footer
Overview
You can, if you wish, modify the header and footer of the payment pages. To do this, you must provide two files:
- Header.html
- Footer.html
Each of these files will contain the HTML content that will be added to the payment page.
You can therefore introduce text and images in each of these parts.
Sample header:
<div id= "headerMerchant">
<div id="logoMerchant">
<img src="../images/logoMerchant.png" />
</div>
</div>
Sample footer:
<div id= "footerMerchant">
<div id="copyright">
<p>Copyright © 2017 </p>
</div>
</div>
Only simple blocks are accepted in these files. So there cannot be any <html>, <head> or <body> tags.
For example, the following header is not correct:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict// EN"
http://www.w3.org/TR/html4/strict.dtd’’>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css.css" />
</head>
<body>
<div id="headerMerchant">
<div id="logo">
<img src="../images/logo.png" />
</div>
</div>
</body>
</html>
The correct header would be:
<div id="headerMerchant">
<div id="logo">
<img src="../images/logo.png" />
</div>
</div>
List of prohibited HTML elements
The following elements must not be inserted in the Header.html and Footer.html files:
Element |
---|
<!DOCTYPE> |
<html> |
<head> |
<title> |
<meta> |
<link> |
<script> |
<body> |
Limitations and recommandations
The WL Sips payment pages are hosted in a secure envrionment complying with the PCI-DSS standard, and some rules must be complied with:
- The header and the footer must not overlap on the main zone.
- The main zone content must not be modified by HTML code.
- Only static HTML code is allowed. The use of javascript or the use of iframes is prohibited.
- All resources must be hosted on the WL Sips platform. For example, there should not be a link to an image.
Loading resources
Remember that the payment pages are only accessible via the Internet. In fact, the size of the images and text will determine the loading time. You must therefore avoid having too many images and their weight must be reasonable for the web.
Web accessibility
The payment pages are compatible with level AA of the WCAG. We therefore encourage you to provide WCAG AA-compatible elements.
For example, the font size must be dynamic (not fixed) and the colors must have a sufficiently high contrast.
The full list of WCAG requirements can be downloaded from the W3C website:
Organising resources
Resources must be organised in a certain way for customisation to work.
To do this, you will need to create:
- a main folder named after the merchantId
- a folder named css and including a file named <templateName>Styles.css . This file will be the stylesheet applied to the page. In its absence, the default style sheet will be applied
- a folder named html and including the <templateName>Header.html and <templateName>Footer.html files. In their absence, the default files will be loaded
- a folder named images and including the images used for customisation.
Sample customisation:

In the above customisation, if the DATA field is populated with TEMPLATE=PERSO , then the PERSOHeader.html, PERSOFooter.html and PERSOStyles.css files will be applied to the page, for merchant identified as 0112233445500000.
If the DATA field is populated with TEMPLATE=PERSO_NOCSS , then the PERSOHeader.html and PERSOFooter.html and the default stylesheet will be loaded.
If you do not populate <templateName> in the file naming, then you do not need to populate the TEMPLATE field in the DATA field. The loading of the customisation will be done automatically.
Using static elements
Static elements (images and fonts) must be referenced relatively in the stylesheet so they can be used.
For example, if you would like to use a background image, you will need to reference it in the following way in the stylesheet:
background-image : url(../images/logo.png) ;
For static elements in the HTML code (header or footer), you will need to reference them specifying that they are contextually relevant.
For example, you will need to proceed as follows to reference a logo in the header:
<img src="context:images/logo.png" />
Main zone details
The main zone is customisable only through CSS.
Payment page with a non-private Oney card
Attribute | Element |
---|---|
merchantName | <h3> |
Amount | <dl> |
Data-sheet | <div> |
Main | <div> |
captureCardForm | <form> |
cardNumberField | <input> |
expiryDatefieldMonth | <select> |
expiryDatefieldYear | <select> |
Cvvfield | <input> |
Opc | <span> |
btSimu | <input> |
zoneOpcExemple | <div> |
MainSubmit | <input> |
Bt-reset | <a> |
Opcgroup | <span> |
Td-btReset | <td> |
Td-message | <td> |
Td-btSubmit | <td> |
Marque | <div> |
All texts associated with the different (input type) input fields are labels with no identifier overriding.
Detailed illustration of the payment page main zone with a non-private Oney card:

Payment page with a private Oney card
Attribute | Element |
---|---|
merchantName | <h3> |
Amount | <dl> |
Data-sheet | <div> |
Main | <div> |
captureCardForm | <form> |
cardNumberField | <input> |
expiryDatefieldMonth | <select> |
expiryDatefieldYear | <select> |
Birthday | <select> |
Birthmonth | <select> |
Birthyear | <select> |
Opc | <span> |
btSimu | <input> |
zoneOpcExemple | <div> |
MainSubmit | <input> |
Bt-reset | <a> |
Opcgroup | <span> |
Td-btReset | <td> |
Td-message | <td> |
Td-btSubmit | <td> |
Marque | <div> |
All texts associated with the different (input type) input fields are labels with no identifier overriding.
Detailed illustration of the payment page main zone with a private Oney card:

Payment page with a Oney gift card
Attribute | Element |
---|---|
captureCardForm | <form> |
giftCardNumberField | <input> |
checkMoneySubmit | <input> |
Cvvfield | <input> |
More | <a> |
Card-statut-ok | <div> |
Montant | <input> |
mainSubmit | <input> |
Bt-reset | <a> |
Td-btReset | <td> |
Td-message | <td> |
Td-btSubmit | <td> |
Main-data | <div> |
merchantName | <h3> |
Amount | <dl> |
Data-sheet | <div> |
Detailed illustration of the payment page main zone with a Oney gift card:

Ticket page
Attribute | Element |
---|---|
k-confirm-messages | <div> |
k-info-block | <div> |
Message | <div> |
Bt-reset | <a> |
Bt-submit | <a> |
Details of the ticket page main zone:

Error page
Attribute | Element |
---|---|
k-error-messages | <div> |
Bt-reset | <a> |
Details of the error page main zone:

Simulation
Attribute | Element |
---|---|
k-modal | <div> |
Modal-body | <div> |
Content | <div> |
k-info-block | <div> with <dl> structure |
Details of the main zone for the simulation part:

Customisation for mobiles
The WL Sips Oney payment pages are can adapt to mobile devices (mobile phones, tablets, etc.). This is made possible thanks to "media-queries" that allow you to define the part of the stylesheet to be applied according to the size of the device screen.
You can redefine the look of pages according to the size of the screen, simply by modifying the information contained in the "media-queries" of the css.
For example, for an iPhone 5, the media-query will be:
@media screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2){
/** code css ici **/
}
The media queries can be combined with each other to cover a wider range of smartphones/tablets.
For more details on media-queries, please visit the following URL: https://www.w3.org/TR/css3-mediaqueries/ .