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 faciliter la tâche de la personnalisation des pages de l’offre Sips Paypage 2.0 pour les commerçants actuellement inscrits à l’offre 1.0.

A qui s’adresse ce document

Ce document est à destination des commerçants disposant de l’offre WL Sips 1.0.

Le document recense les différences majeures entre les pages de paiement 1.0 et 2.0, et guide le lecteur dans ses actions de migration de 1.0 vers 2.0.

Pour connaître tous les détails de la personnalisation des pages de paiement WL Sips 2.0, merci de vous référer au document Guide de personnalisation des pages de paiement (Paypage).

Les atouts des pages de paiement 2.0

Les pages de paiement WL Sips 2.0 ont été réécrites sur des bases robustes, évolutives, accessibles, portables et facilement maintenables. Cette qualité est assurée par un code HTML simple qui respecte les standards du Web.

Aujourd'hui, avec l’augmentation du nombre de terminaux Web (PC, tablettes, smartphones, Tv, etc.), introduisant dans le marché une multitude de tailles, de résolutions d’écran et de niveaux de support des standards Web très diversifiés, nous devons concevoir des produits Web qui devrons assurer l’accès à l’information dans ce grand éventail de contextes sans dégradation de l’expérience utilisateur.

Les pages de paiement WL Sips ont été revues pour mieux les adapter à cette nouvelle réalité.

Un code accessible

La réécriture du code HTML a permis d'appliquer les principes d'accessibilité Web pour assurer un accès confortable à l'ensemble des informations et fonctionnalités des pages de paiement WL Sips 2.0, indépendamment des contraintes physiques ou matériels que l'utilisateur final puisse présenter.

Une interface multi-device

La technique de « Responsive Web Design » (RWD) a été utilisée pour adapter, tout naturellement, le design et la disposition des pages de paiement à la taille du terminal à partir duquel il est consulté. Cette adaptation touche aussi bien le redimensionnement du contenu que la structure même de la page, l’objectif étant de créer les bonnes conditions de consultation des pages du site sans perte en confort ou en efficacité pour l’utilisateur, quel que soit le terminal utilisé, qu'il soit en mobilité ou pas.

Que contiennent les pages de paiement 2.0 ?

Les différences

Les pages de paiement 2.0 affichent bien-entendu la page de collecte des coordonnées de paiement, ainsi que la page de résultat du paiement. La seule différence avec les pages de paiement 1.0, se situe sur la sélection du moyen de paiement.

En effet, avec 2.0, la page de sélection du moyen de paiement peut (au choix du commerçant) être hébergée par le serveur Payment.

Que faire en passant de 1.0 à 2.0 ?

Vous souhaitez conserver l’affichage de la sélection des moyens de paiement sur votre serveur

Lors de l’inscription de votre identifiant marchand à l’offre WL Sips 2.0, vous devrez indiquer votre souhait de NE PAS FAIRE AFFICHER la sélection des moyens de paiements sur le serveur WL Sips , afin que la configuration de votre identifiant marchand soit conforme à l’attendu.

Dans la requête de paiement, vous indiquerez le moyen de paiement sélectionné par l’acheteur dans le champ paymentMeanBrandList du connecteur (cf. Dictionnaire des données).

Vous souhaitez déporter l’affichage de la sélection des moyens de paiement sur le serveur Payment 2.0

Lors de l’inscription de votre identifiant marchand à l’offre WL Sips 2.0, vous devrez indiquer votre souhait de FAIRE AFFICHER la sélection des moyens de paiements sur le serveur WL Sips , afin que la configuration de votre identifiant marchand soit conforme à l’attendu.

Dans la requête de paiement, vous indiquerez la liste des moyens de paiement à proposer à l’acheteur dans le champ paymentMeanBrandList du connecteur (cf. Dictionnaire des données).

Comment personnaliser ses pages de paiement 2.0 ?

Les différences

La personnalisation des pages 2.0 est basée sur un unique principe - la création d’un en-tête, d’un bas de page et d’un CSS -, alors que les pages 1.0 proposait 3 possibilités plus ou moins avancées – l’utilisation des attributs d’affichage contenus dans la requête, l’utilisation d’un modèle HTML, l’utilisation de CSS.

La même CSS contiendra les adaptations aux différentes tailles d’écrans via les instructions de type « requêtes de média ».

Tous les détails concernant la personnalisation des pages de paiement 2.0 se trouvent dans le document Guide de personnalisation des pages de paiement (Paypage).

Que faire en passant de 1.0 à 2.0

Nous déconseillons les tentatives de reproduire exactement le visuel des pages de paiement 1.0 sur les pages de paiement 2.0. Tout d’abord, parce que c’est impossible, étant donné que le code HTML est différent entre les 2 serveurs. Ensuite, parce qu'il est dommage de se priver des nouvelles possibilités qu'offrent les pages de paiement 2.0, notamment sur l’aspect adaptabilité à la taille des écrans.

Afin de réaliser la personnalisation de vos pages de paiement 2.0, vous devez suivre les indications du guide Guide de personnalisation des pages de paiement (Paypage), puis vérifier le rendu grâce à l’outil « Template Creation Tool » pendant de l’outil « test_template » de 1.0.

Pour aller vite

La personnalisation de vos pages de paiements reste une étape facultative pour démarrer en 2.0. SI vous souhaitez migrer rapidement vos flux ou une partie de vos flux sur 2.0, vous pouvez repousser la construction de votre personnalisation, et par conséquent utiliser la personnalisation par défaut de l’offre à laquelle vous avez souscrit.

Dans un second temps, vous pourrez repartir de la CSS de l’offre pour l’enrichir avec vos propres éléments de personnalisation (couleur, police, etc…).

Quels sont les livrables à transmettre pour personnaliser ses pages de paiement 2.0

Les différences

Peu de différences notables, les livrables restent des images, CSS et modèle de fichier.

Que faire pour passer de 1.0 à 2.0 ?

Lorsque le rendu de vos pages vous satisfait, vous allez transmettre les éléments de personnalisation contenus dans le répertoire nommé TEMPLATE de l’outil « Template Creation Tool ».

Utilisation de l’outil custompages

Il vous est également possible d’utiliser notre outil d’aide à la personnalisation CustomPages . Cet outil vous permet de réaliser votre personnalisation, d’en voir le rendu, et selon le type d’accès de mettre votre CSS directement en production sur votre boutique sans passer par une demande auprès de notre support niveau 1.

Vous retrouverez tous les détails nécessaires sur l’utilisation de notre outil CustomPages dans le document Custompages.

Synthèse

Tableau des possibilités de personnalisation

Caractéristique Description Payment 1.0 Payment 2.0
Outil de validation Outil permettant de visualiser le rendu produit par les éléments de personnalisation des pages de paiement. V V
Personnalisation par CSS Mise en forme des pages de paiement grâce à des feuilles de style. V V
Page de sélection des moyens de paiement Affichage de la page des moyens de paiements proposés à l’acheteur. V V
Multi-langues Pages affichées en fonction de la langue de l’acheteur et éléments de personnalisation différenciables par langue. V V
Multi-écran Adaptation native des pages de paiement à la taille de l’écran. X V
Conformité HTML 5/CSS 3 Adaptation native des pages de paiement à la taille de l’écran. X V
Champ receipt_complement Affichage des données contenues dans le champ receipt_complement de l’api, sur la page réponse. V X
Option du champ data CARD_NO_LOGO Non affichage du logo de la carte sur la page de saisie des coordonnées bancaires. V V
Option du champ data NO_COPYRIGHT Non affichage du copyright de bas de page. V V
Option du champ data NO_DISPLAY_CARD Suppression du numéro de carte après click sur Précédent. V V
Option du champ data NO_DISPLAY_CANCEL Non affichage du bouton Annulation – retour à la boutique. V V
Option du champ data NO_SSL_SYMBOLS Non affichage de la phrase présente sur la page de saisie des coordonnées de paiement : « Vous êtes connecté à un serveur sécurisé, vous pouvez remplir votre formulaire en toute confiance ». V V
Option du champ data NO_WINDOWS_MSG Non affichage de la phrase présente sur la page réponse : « Suivant le paramétrage de votre navigateur, une fenêtre indiquant le retour en mode non sécurisé peut apparaître. Ceci n'a aucun impact sur la confidentialité des informations précédemment échangées ». V V
Option du champ data NO_DISPLAY_URL Non affichage de l’URL du site marchand sur la page réponse. V V
Option du champ data NO_RESPONSE_PAGE_POST Non affichage de la page réponse et redirection vers le site marchand en mode POST. V V
Option du champ data NO_RESPONSE_PAGE Non affichage de la page réponse et redirection vers le site marchand en mode GET. V X