Personnalisation des pages de paiement cartes Oney
Introduction
WL Sips est une solution de paiement de commerce électronique multicanale sécurisée conforme à la norme PCI DSS. Elle vous permet d’accepter et de gérer des transactions de paiement en prenant en compte les règles métiers liées à votre activité (paiement à la livraison, paiement différé, paiement récurrent, paiement en plusieurs fois , …).
L’objectif du présent document est de vous expliquer comment personnaliser les pages de paiement de cartes Oney. Vous pouvez en effet personnaliser toutes les pages de paiement de la cinématique Oney afin qu'elles correspondent au mieux à votre site Internet.
Cependant, nous voudrions attirer votre attention sur la nécessité d'être sûr que les éléments de la personnalisation soient compatibles avec les différents navigateurs utilisés par les clients, et qu'ils respectent les exigences d'accessibilité web.
Il est de la responsabilité du client de fournir et de vérifier les éléments garantissant la qualité des pages de paiement puisque Worldline n'est pas impliqué dans le processus de vérification.
À qui s’adresse ce document
Ce document est un guide d'implémentation qui s'adresse à votre équipe technique.
Pour avoir une vue d’ensemble de la solution WL Sips , nous vous conseillons de consulter les documents suivants :
- Présentation fonctionnelle ;
- Guide de Configuration des fonctionnalités.
Personnalisation des pages
Structure
Toutes les pages de paiement dans le parcours Oney sont structurées de la même manière :
- un « header » (en-tête) ;
- une « main zone » (zone principale) ;
- un « footer » (pied de page).
Vous pouvez modifier le code HTML du header ainsi que du footer, mais pas celui de la main zone. Vous pouvez également appliquer votre propre CSS (feuille de style) afin que les pages de paiement aient le même style que votre site Internet.
Structure d'une page de paiement :

Architecture et sécurité
L'accès Internet est sécurisé par une double adduction de fournisseurs d'accès Internet (FAI).
L'infrastructure réseau pour WL Sips en DMZ est entièrement redondante. Les répartiteurs de charge fonctionnent en mode « failover » automatique et sont redondants. Ils permettent de répartir dynamiquement (par « load balancing ») le flux HTTPS entrant sur les serveurs HTTP existants.
La fonction de serveur de présentation HTTPS est assurée par cinq serveurs HTTPS Apache fonctionnant en « load balancing » (répartition de charge dynamique).
Les firewalls sont doublés tant en entrée qu'en sortie de DMZ.
Header et footer
Présentation
Vous pouvez, si vous le souhaitez, modifier le header et le footer des pages de paiement. Vous devez pour cela fournir deux fichiers :
- Header.html ;
- Footer.html .
Chacun de ces fichiers contiendra le contenu HTML qui sera ajouté à la page de paiement.
Vous pouvez donc introduire du texte et des images dans chacune de ces parties.
Exemple de header :
<div id= "headerMerchant">
<div id="logoMerchant">
<img src="../images/logoMerchant.png" />
</div>
</div>
Exemple de footer :
<div id= "footerMerchant">
<div id="copyright">
<p>Copyright © 2017 </p>
</div>
</div>
Dans ces fichiers, seuls de simples blocs sont acceptés. On ne peut donc pas avoir de balise <html>, <head> ou <body>.
Par exemple, ce header n'est pas 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>
Il aurait fallu écrire :
<div id="headerMerchant">
<div id="logo">
<img src="../images/logo.png" />
</div>
</div>
Liste des éléments HTML interdits
Les balises suivantes ne doivent pas figurer dans les fichiers Header.html et Footer.html :
Élément |
---|
<!DOCTYPE> |
<html> |
<head> |
<title> |
<meta> |
<link> |
<script> |
<body> |
Limitations et recommandations
Les pages de paiement WL Sips sont hébergées dans un environnement sécurisé respectant la norme PCI-DSS, et quelques règles doivent être respectées :
- le header et le footer ne doivent pas se superposer sur la main zone ;
- le contenu de la main zone ne peut pas être modifié par du code HTML ;
- seul le code HTML statique est autorisé. L'utilisation de javascript ou l'appel à des iframes est interdit ;
- toutes les ressources doivent être hébergées sur la plate-forme WL Sips . Par exemple, il ne doit pas y avoir de lien référençant une image.
Chargement des ressources
N'oubliez pas que les pages de paiement sont accessibles uniquement via Internet. De fait, la taille des images et du texte va conditionner le temps de chargement. Vous devez donc éviter d'avoir trop d'images et leur poids doit être raisonnable pour le Web.
Accessibilité Web
Les pages de paiement sont compatibles avec le WCAG niveau AA. Nous vous encourageons donc à fournir des éléments compatibles WCAG AA.
Par exemple, la taille de la police doit être dynamique (non fixée) et les couleurs doivent avoir un contraste suffisamment grand.
La liste complète des exigences du WCAG peut être téléchargée depuis le site W3C :
Organisation des ressources
Les ressources doivent être organisées d’une certaine manière afin que la personnalisation fonctionne.
Pour cela, il faut :
- un dossier principal nommé avec le merchantId ;
- un dossier nommé css et contenant un fichier nommé <templateName>Styles.css . Ce fichier sera la feuille de style appliquée à la page. En son absence, la feuille de style par défaut sera appliquée ;
- un dossier nommé html et contenant les fichiers <templateName>Header.html et <templateName>Footer.html. En leur absence, les fichiers par défaut seront chargés ;
- un dossier nommé images et contenant les images utilisées pour la personnalisation.
Exemple de personnalisation :

Dans cette personnalisation, si on renseigne le champ DATA avec TEMPLATE=PERSO , alors les fichiers PERSOHeader.html, PERSOFooter.html et PERSOStyles.css seront appliqués à la page, pour le commerçant ayant comme identifiant 0112233445500000.
Si on renseigne le champ DATA avec TEMPLATE=PERSO_NOCSS , alors les fichiers PERSOHeader.html , PERSOFooter.html et la feuille de style par défaut seront chargés.
Si vous ne renseignez pas <templateName> dans le nommage des fichiers, alors vous n'avez pas besoin de renseigner le champ TEMPLATE dans le champ DATA . Le chargement de la personnalisation se fera automatiquement.
Utilisation des statiques
Afin de pouvoir utiliser les statiques (images et polices), il faut les référencer de manière relative dans la feuille de style.
Par exemple, pour utiliser une image en fond, il faut la référencer de la manière suivante dans la feuille de style :
background-image : url(../images/logo.png) ;
Pour les statiques dans le code HTML (header ou footer), il faut les référencer en précisant qu'elles sont en fonction du contexte.
Par exemple, pour référencer un logo dans le header, il faut procéder de la sorte :
<img src="context:images/logo.png" />
Détails de la main zone
La main zone n'est personnalisable que par CSS.
Page de paiement avec une carte Oney non privative
Attribut | Élément |
---|---|
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> |
Tous les textes associés aux différents champs de saisie (type input) sont de type « label » et n'ont pas de surcharge d'identifiant.
Illustration en détail de la main zone de la page de paiement avec une carte Oney non privative :

Page de paiement avec une carte Oney privative
Attribut | Élément |
---|---|
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> |
Tous les textes associés aux différents champs de saisie (type input) sont de type « label » et n'ont pas de surcharge d'identifiant.
Illustration en détail de la main zone de la page de paiement avec une carte Oney privative :

Page de paiement avec une carte Oney cadeau
Attribut | Élément |
---|---|
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> |
Illustration en détail de la main zone de la page de paiement avec une carte Oney cadeau :

Page de ticket
Attribut | Élément |
---|---|
k-confirm-messages | <div> |
k-info-block | <div> |
Message | <div> |
Bt-reset | <a> |
Bt-submit | <a> |
Détails de la main zone de la page du ticket :

Page d'erreur
Attribut | Élément |
---|---|
k-error-messages | <div> |
Bt-reset | <a> |
Détails de la main zone de la page d'erreur :

Simulation
Attribut | Élément |
---|---|
k-modal | <div> |
Modal-body | <div> |
Content | <div> |
k-info-block | <div> composé d'une structure <dl> |
Détails de la main zone de la partie simulation :

Personnalisation mobile
Les pages de paiement WL Sips Oney sont adaptables aux mobiles (téléphone, tablettes etc.). Ceci est possible grâce aux « media-queries » qui permettent de définir la partie de la feuille de style à appliquer en fonction de la taille de l’écran du dispositif.
Vous pourrez redéfinir l’affichage des pages en fonction de la taille de l’écran, simplement en modifiant les informations contenues dans les « media-queries » du css.
Par exemple, pour un iPhone 5, la media-query sera :
@media screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2){
/** code css ici **/
}
Les media-queries peuvent être combinées entre elles afin de couvrir un plus large panel de smartphones / tablettes.
Veuillez consulter l'URL https://www.w3.org/TR/css3-mediaqueries/ pour plus de détails sur les media-queries.