WL SIPS DOCS

Release 22.3

aller directement au contenu

Rechercher par mots clés

Custompages

Pour rechercher dans la page utiliser Ctrl+F sur votre clavier

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 d’exposer l’outil « CustomPages » de personnalisation des pages de la solution WL Sips.

Ce document est destiné à tous les commerçants qui souhaitent personnaliser leurs pages de la solution WL Sips via l’outil « CustomPages ».

Cela comprend à la fois les pages de paiement, mais aussi les pages de gestion du wallet. Selon ce que vous proposez et/ou souhaitez personnaliser, vous ne vous intéresserez pas forcément à tous les chapitres de ce document.

En effet, vous pouvez personnaliser toutes les pages de paiement et de gestion du wallet, afin d’assurer aux Internautes une expérience utilisateur optimale, en mettant en œuvre votre propre charte graphique.

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 avons conçus des produits Web qui assurent l’accès à l’information dans ce grand éventail de contextes sans dégradation de l’expérience utilisateur. Les pages de la solution WL Sips sont prévues pour s’adapter à tous ces types de terminaux.

Attention: il est nécessaire de s’assurer que les éléments de personnalisation sont compatibles avec les navigateurs Web utilisés par le grand public et qu’ils sont conformes aux standards d’accessibilité en vigueur. Le commerçant est le seul responsable des éléments fournis et, par conséquent, garantit leur qualité.

Ce mode de connexion vous concerne si vous utilisez WL Sips 2.0.

Pour accéder à CustomPages via Merchant Extranet, vous devez premièrement vous connecter à ce dernier puis cliquer sur l’onglet « Personnalisation des pages ».

Vous serez alors directement redirigé sur l’application CustomPages.

Ce mode de connexion vous concerne si vous utilisez WL Sips 1.0.

Pour vous connecter :

URL du site :

https://sipsdirect-mex-portal.test.sips-services.com/gui-custompages-public/?o=dd8341a7b93094634b3f0150acf628116ae2996766d3b0d230832dc2e01cba35

La langue du site par défaut est celle configurée dans votre navigateur Web. Vous pouvez changer cette langue (Anglais ou Français) avec le menu déroulant en haut à droite.



Deux données sont à renseigner : votre nom et votre identifiant commerçant. Ces deux données sont obligatoires.
  • votre nom sert uniquement à savoir qui a réalisé la manipulation chez vous (dans le cas où plusieurs personnes interagissent avec la personnalisation du site).
  • votre merchantID. Pour rappel, l’identifiant marchand est une donnée numérique à 15 chiffres.
Note: dans ce mode, toutes les opérations effectuées seront perdues après la déconnexion.

Pour la réalisation de votre personnalisation, deux modes sont à votre disposition : simplifié et avancé.

Dans chacun des modes, un bandeau d’options vous permet de tester le rendu de vos pages de paiement suivant plusieurs paramètres : taille de l’écran, orientation et langue.



Différentes pages sont proposées pour la visualisation de l’aperçu :
  • les pages de saisie des coordonnées bancaires (avec l’option OneClick, avec ou sans les données de la réglementation MIF),
  • les pages de sélection de cartes (avec la réglementation MIF et OneClick),
  • les pages de paiement accepté et refusé,
  • la page d’ajout d’une nouvelle carte dans le wallet,
  • la page de gestion du wallet.


Image des boutons permettant de sélectionner le type de résolution

Quatre résolutions par défaut vous sont proposées : taille d’un écran d’ordinateur de bureau, d’une tablette, d’une « phablette » (un smartphone dont l'écran est d'une taille intermédiaire entre celui des smartphones et celui des tablettes tactiles) ou d’un smartphone.

Vous pouvez choisir ces résolutions en cliquant sur l’icône correspondant à votre choix de résolution.

Image du bouton "grand-écran"

Vous pouvez régler en plein écran votre aperçu en cliquant sur le bouton « grand-écran ». Grâce à ce choix, vous pourrez ensuite régler la taille de votre fenêtre pour obtenir un aperçu dynamique du rendu des pages.

Image des boutons permettant le choix d'orientation de la page

Pour ce qui concerne l’orientation de votre page, vous avez le choix entre Paysage et Portrait.

Par défaut, le mode paysage est sélectionné.

Image du bouton du menu déroulant permettant le choix de la langue

Plusieurs langues sont disponibles : l’anglais, le français, l’espagnol, le néerlandais, le portugais et l’allemand.

La liste déroulante vous permet de choisir celle souhaitée.

Image du bouton retour

Le bouton retour, présent sur les onglets « mode avancé » et « production », permet de revenir sur la vue de l’arborescence des fichiers.

Le mode simplifié est ouvert à tous, il ne nécessite aucune connaissance des technologies Web.

Voici l’écran d’accueil du mode « Simplifié » :


Capture d'écran de l'écran d'accueil du mode simplifié

Ce mode vous permet d’interagir directement avec le contenu de votre personnalisation. Chaque modification est instantanément prise en compte et l’affichage du rendu est mis à jour en conséquence.

Sur la droite, un menu d’options est disponible. Il est décomposé en trois parties : Couleurs, Contenu et Logos.

Trois boutons sont également disponibles en bas à droite :

Image du bouton permettant de déposer le template sur nos serveurs

Cette option est disponible, uniquement si vous vous êtes connecté via Merchant Extranet. Elle permet de déposer sur nos serveurs de production votre template (voir le détail dans le chapitre ‘Déployer sa personnalisation’).

Image du bouton de réinitialisation

Si jamais vous souhaitez recommencer complètement votre personnalisation, vous pouvez cliquer sur le bouton « Réinitialiser » qui effacera complètement la personnalisation courante.

Enfin, lorsque vous avez finalisé votre travail et que vous souhaitez le récupérer, vous pouvez cliquer sur le bouton « Télécharger la CSS » qui vous permettra de télécharger le contenu de votre travail actuel enregistré sous un fichier au format compressé ZIP. Une boite de dialogue s’ouvre vous demandant de renseigner un nom pour votre modèle.

Image du bouton permettant de basculer en mode avancé

Si vous souhaitez réaliser des modifications plus avancées sur votre personnalisation, vous pouvez l'envoyer en mode avancé en cliquant sur le bouton "Basculer en mode avancé". Une boite de dialogue s’ouvre vous demandant de renseigner un nom pour votre modèle.

Il est possible de changer indépendamment la couleur de fond de deux zones :

  • La zone d’information de la transaction
  • Le fond de la page


Image montrant la zone de contenu

Que ce soit pour les zones d’informations ou de collecte d’informations de transaction, il vous est possible de changer la taille, la couleur et la police de caractère.

Par défaut sont affichés :

  • Un en-tête de page
  • Une zone d’informations
  • Un pied de page

Il vous est possible de désactiver une à plusieurs de ces informations.

Image montrant la zone de logos

Il vous est possible d’ajouter deux logos :

  • Le logo entête : placé en haut à droite de l’écran
  • Le logo principal : placé au-dessus de la zone d’informations de la transaction.


Le mode avancé vous permet de créer et/ou d’uploader sur l’outil vos éléments de personnalisation, et de pré-visualiser le rendu des pages. Ce mode est réservé aux personnes maîtrisant les technologies Web HTML5 ainsi que CSS3.

Pour toute information technique sur la personnalisation des pages de paiement, veuillez-vous référer au document : guide de personnalisation des pages de paiement (Paypage).

Voici l'écran d'accueil du mode « Avancé » :


Capture d'écran de l'écran d'acceuil du mode avancé

Contrairement au mode simple, dans ce mode, vous pouvez voir les fichiers servants à la personnalisation, les importer et les éditer. Les fichiers doivent être organisés selon une structure bien précise.



Dossier Contenu Contenu/extensions acceptés
css

Doit contenir un fichier de style css

css
fonts

Contient des fichiers de polices de caractères (facultatif)

ttf, eot, woff, woff2, otf
images

Contient les logos utilisés pour votre personnalisation

png, gif, jpg, svg, ico, jpe, jpeg
properties

Doit contenir un fichier messages (il peut y avoir des fichiers de messages personnalisés dans un sous répertoire messages)

Pas de fichier, juste un ou plusieurs dossier message
messages

Dossier situé dans le dossier properties contenant des fichiers properties

properties
templates

Peut contenir les fichiers xxHeader.template, xxFooter.template (avec xx : nom de votre template)

template

Plusieurs possibilités s'offrent à vous pour créer votre personnalisation :

  • Travailler sur votre poste puis importer les fichiers
  • Créer les fichiers via l'interface
Note: certains fichiers (tels que les images) ne peuvent être créés via l'interface et doivent obligatoirement être importés.

Il est possible de coupler les deux méthodes. Vous pouvez importer certains fichiers et en créer d'autres directement dans l'interface.

Des exemples sont mis à votre disposition et peuvent être récupérés en cliquant sur l’icône Image du bouton permettant le téléchargement des exemples. Un zip va être téléchargé sur votre poste. Pour que les exemples soient utilisables, il vous faut dé-zipper ce dossier ; vous aurez alors 8 dossiers zip et un fichier README.



Vous pouvez dès lors choisir l’un des exemples pour le visualiser et repartir de ces exemples pour faire votre propre personnalisation.

Attention: l’utilisation de fichiers JavaScript est interdite et la personnalisation qui en contient sera ignorée.

Les fichiers modèles header et footer ne doivent pas contenir d’ordre HTML pour intégrer des iframes.

Les fichiers téléchargés sur l’outil ne doivent pas contenir des références vers d’autres domaines Internet.

La taille limite des fichiers est de 4Mo pour les fichiers images et de 1Mo pour les fichiers et CSS.

Importer une arborescence complète

Une fois vos personnalisations réalisées sur votre poste, vous pouvez les importer sur l'interface.

Pour cela, vous pouvez importer l'ensemble de la personnalisation en générant un fichier ZIP ou 7z (7zip) composé de 4 sous dossiers tels que présentés précédemment.



Pour ce faire, cliquez sur Image du bouton permettant d'importer votre fichier, selectionnez le Zip généré, puis sélectionnez le dossier que vous souhaitez visualiser.

Note: le nom du fichier au format compressé ZIP ou 7z n’est pas le nom du template, c’est le nom du fichier CSS qui est le nom du template.

La taille maximale d'un fichier à importer Zip est de 10Mo.

Un contrôle est effectué sur le fichier messages.properties, le format attendu est UTF-8 sans BOM, au format UNIX.

Importer un fichier individuel

Il est également possible d'importer fichier par fichier. Pour cela, sélectionnez le dossier dans lequel vous souhaitez faire l'ajout et utiliser le bouton "Ajouter un fichier".

Une fois les fichiers importés, vous avez la possibilité de les supprimer grâce au bouton Image du bouton permettant la suppression.

Vous pouvez créer des fichiers directement sur l'interface afin de créer/compléter votre personnalisation. La création de fichier est disponible pour les fichiers de type css, messages et templates



Pour créer un fichier :

  • Cliquez sur le dossier dans lequel vous voulez créer votre fichier
  • Cliquez sur le bouton "créer un nouveau fichier"

La fenêtre suivante s'affiche :


Capture d'écran de la fenêtre permettant de créer un fichier

La fenêtre qui s'affiche se décompose de 3 zone : une première pour indiquer le nom du fichier, une deuxième pour indiquer les langues spécifiques à personnaliser et une troisième pour indiquer le type de template (Footer ou Header). Les zones 1 et 3 doivent être obligatoirement renseignées.

Pour la création d'un fichier css, seul le champ associé au nom de fichier est à renseigner. Le nom de fichier correspond au nom de la personnalisation que vous souhaitez utiliser et doit respecter une taille maximum de 32 caractères parmi des caractères alphanumériques et "+ - @".

Pour la création d'un fichier messages, il faut renseigner le nom du fichier ou utiliser un nom de template déjà existant, ainsi que les différentes langues dans lequel ce fichier doit s'appliquer. Un fichier est créé par défaut et sera utilisé pour les langues non renseignées.

Pour la création d'un fichier templates, il faut renseigner le nom du fichier, les langues, ainsi que le type de fichier. Le type de fichier correspond à un en-tête (Header), ou d'un pied de page (Footer).

Lorsque votre personnalisation est importée ou créée, vous pouvez éditer les fichiers lui correspondant via le mode édition. Les fichiers disponibles à l'édition sont les fichiers CSS, Messages et Templates.

Le mode édition est disponible en cliquant sur l'icône Image du bouton permettant l'ouverture du mode édition , située en dessous du nom du fichier sélectionné, et est composé de deux parties :

  • Sur le côté gauche de la page, vous pouvez éditer le contenu de votre fichier et le sauvegarder.
  • Sur le côté droit de la page, vous pouvez visualiser en temps réel votre personnalisation sur une page.

En cliquant sur le bouton "Sauvegarder" (ou le raccourci clavier "CTRL +S") lorsque vous écrivez dans le cadre d'édition, la page se met à jour et montre un aperçu de votre nouvelle personnalisation.

Il vous est possible d'afficher la partie d'édition ou de prévisualisation en plein écran via les icônes Image du bouton permettant l'affichage de la partie d'édition ou de prévisualisation en plein écran

Voici l'écran du mode édition :


Capture d'écran du mode édition

Vous avez aussi la possibilité de changer le fichier en cours d'édition en passant la souris sur l'icône , puis en sélectionnant le nom du fichier que vous souhaitez éditer.



Dès lors qu’un fichier CSS est intégré à votre arborescence, vous pouvez cliquer sur l’un des boutons « Aperçu » Image du bouton d'aperçu, pour arriver sur l’écran d’accueil du mode « Aperçu ».

Le mode « Aperçu » vous permet de visualiser le rendu de votre personnalisation dans divers modes d’utilisation possibles.



Une fois que votre personnalisation est terminée, il vous est possible de l’envoyer en production afin d’obtenir ce rendu sur vos propres pages accessibles à vos clients.

En mode avancé, cliquez sur Image du bouton permettant de déposer le template sur nos serveurs après avoir sélectionné le dossier CSS. Le nom de la CSS sélectionnée sera à utiliser dans vos requêtes de paiement (dans le champ templateName). Le choix de la CSS envoie l’ensemble des ressources qui lui sont associées. Une liste des fichiers qui seront envoyés en production sera affichée.

En mode simplifié, après avoir cliqué sur Image du bouton permettant de déposer le template sur nos serveurs, il faudra préciser le nom de template à déployer : le nom de la css sera celui à utiliser dans vos requêtes de paiement (dans le champ templateName).

Note: la mise à jour de vos pages se fait le soir-même de l’envoi, elle sera disponible à partir de 00h30 (heure française).

Il est possible de définir au niveau de la configuration de votre boutique un templateName par défaut qui sera appliqué automatiquement si aucune valeur n'est précisé dans la requête dans le champ templateName. Si aucune information à propos du templateName n'est définie dans la requête ou dans votre configuration, la personnalisation de votre offre sera automatiquement appliquée.

Une fois votre personnalisation terminée, récupérez le ZIP de personnalisation et envoyez-le au support technique en communiquant votre identifiant commerçant (numéro sur 15 chiffres). Pour faire afficher la css sur les pages de production, le champ templatefile de l’api doit être renseigné avec le nom donné au fichier css.

L’onglet « production » vous permet d’avoir la vision de votre personnalisation qui est actuellement en production.

Le bouton « copie » Image du bouton permettant de copier la personnalisation vous permet de copier la personnalisation dans le mode avancé : ainsi vous pouvez apporter des modifications à votre personnalisation sans repartir d’une base blanche.

Note: cette action n’est possible que si vous vous êtes connecté via Merchant Extranet.

Le lendemain de l’envoi de votre personnalisation en production, vous pouvez alors effectuer un essai sur votre site pour valider la bonne mise en service.

Si toutefois la mise à jour n’a pas été correctement effectuée, nous vous invitons à contacter le support technique.

Ce site utilise des traceurs pour améliorer votre expérience de navigation, effectuer des analyses et des recherches sur votre utilisation du site web de documentation WL Sips.
En fermant ce bandeau vous refusez notre utilisation des traceurs sur votre appareil.

Paramètres