Ce document est destiné aux commerçants qui souhaitent personnaliser les pages de paiement ou les pages de gestion de wallet de Sherlock’s Paypage.

C’est un guide d'implémentation qui s’adresse à votre équipe technique.

Pour avoir une vue d’ensemble de la solution Sherlock's, nous vous conseillons de consulter les documents suivants :

• Présentation fonctionnelle
• Guide de configuration des fonctionnalités
• Glossaire

La personnalisation des différentes pages Sherlock's repose essentiellement sur de la « surcharge » de styles CSS. Ce guide est donc à destination d'utilisateurs possédant un profil plutôt technique, avec des connaissances en HTML5 et en CSS3.

L’utilisation d’un outil de type « Firebug » pour Mozilla Firefox facilite les modifications à apporter aux différentes pages. Il permet de repérer rapidement les règles CSS à modifier et d’émuler le navigateur en mode smartphone et tablette. À noter que le navigateur Chrome de Google permet également ce type de manipulations via la touche « F12 » du clavier.

Les pages Sherlock's ont toutes été conçues sur le principe de la conception de sites web adaptatifs (« responsive web design »). Cela signifie que les pages vont s’adapter de manière native aux différentes tailles des écrans des terminaux existants afin d’offrir une expérience de lecture optimale, et ce quel que soit le terminal utilisé par le client (smartphone, tablette, PC, etc.).

Pour cela, 3 « form factors » sont définis :

• 300 px -> 650 px = format smartphone ;
• 650 px -> 1 000 px = format tablette + petits écrans ;
• > 1 000 px = format PC, écran TV, etc. (à noter que le container se fige à 1 366 px).

Les « form factors » sont définis dans les différentes feuilles de style grâce à l'utilisation des « media queries » (plus d'informations sur http://www.w3.org/TR/css3-mediaqueries/). Celles-ci sont apparues avec les spécifications CSS3 et permettent de définir des conditions d'application des propriétés CSS.

Sur les pages de paiement et de gestion du wallet, vous pouvez personnaliser :

• la CSS ;
• les templates (code HTML) ;
• les images ;
• les messages.

La personnalisation de l'offre sera toujours chargée en premier. Vous pouvez surcharger certains aspects de la personnalisation.

Toutes ces fonctionnalités sont décrites dans les prochains paragraphes de cette documentation.

Voici à présent une description de la partie la plus importante du chargement de vos personnalisations.

CSS :

Votre CSS s'ajoute à la CSS de l'offre. Vous réalisez les changements en définissant de nouvelles propriétés dans votre fichier CSS.

Templates :

Si des templates sont disponibles dans votre personnalisation, ils remplaceront les templates de l'offre.

Images :

Les images sont référencées directement dans les templates ou les CSS (une CSS commerçant chargera les images de votre répertoire d'images, une CSS offre chargera les images depuis le répertoire images de l'offre).

Messages :

Si un message personnalisé est défini pour l'offre et pour vous, seul le vôtre sera chargé.

La structure de toutes les pages de paiement est fondée sur trois espaces principaux :

• l'entête (« Header »), matérialisé ci-dessous en vert ;
• la zone principale (« MainZone ») qui contient tous les éléments de la page de paiement (champs de saisie, messages, etc.) ou de la page de gestion du wallet (liste des moyens de paiement, etc.), matérialisée ci-dessous en bleu ;
• le pied de page (« Footer »), matérialisé ci-dessous en orange.

Structure de la page de paiement

Structure de la page de gestion du wallet

La zone principale est personnalisable via une feuille de style CSS.

Pour éviter les problèmes de compatibilité avec certains navigateurs, il est hautement recommandé de vérifier l’encodage du fichier CSS. Il doit être “UTF-8 WITHOUT-BOM”. Vous pouvez vérifier le format utilisé avec votre éditeur de texte.

Le logo commerçant est personnalisable en utilisant la déclaration suivante dans la CSS :

p.vendor {
       background: url(../images/your_vendor_logo.png);
       height: HauteurdeVotreLogo;
}

Un contenu HTML supplémentaire peut être inséré dans l’entête ou dans le pied de page, par exemple pour y faire apparaître des images ou liens ou de simples textes (logo libre de droits, mention copyright, informations juridiques, etc.).

Voici un exemple de contenu HTML pouvant être inséré dans l'entête :

<div id="headerMerchant">
  <img src="context:images/logoMerchant.png" />
</div>

et dans le pied de page :

<p>Copyright &copy; 2015</p>

Seuls les blocs simples doivent être déclarés dans ces fichiers. Les balises <html>, <head> et <body> sont interdites.

Sont également interdites toutes références à une feuille de style autre que celle définie auparavant et toutes références aux scripts (balises de type <link>).

Exemple de code HTML incorrect...

<!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="http://mywebsite.com/style.css" />
  </head>
  <body>
    <div id=”headerMerchant”>
      <div id=”logoMerchant”>
        <img src=” http://mywebsite.com/logoMerchant.png” />
      </div>
    </div>
  </body>
</html>

... à remplacer par :

<div id=”headerMerchant”>
  <div id= ”logoMerchant”><img src= ”context:images/logoMerchant.png” /></div>
</div>

Liste des balises HTML interdites :

• <!DOCTYPE>
• <html>
• <head>
• <title>
• <meta>
• <link>
• <script>
• <body>

Si un fichier « favicon.ico » est placé dans votre dossier «/images » et qu'une personnalisation est appelée, alors le favicon sera visible.

Vous avez également la possibilité d’ajouter vos propres messages texte dans les pages de paiement. Ces messages s’affichent à des emplacements prédéfinis sur la page.

Pour ce faire, ils doivent être définis comme des combinaisons “clé/valeur” où chaque clé correspond à la localisation exacte du message sur la page :

capture.message.3=Cliquez sur "Valider" pour procéder au paiement.

Si vous ne souhaitez pas utiliser un message, il vous suffit de ne pas spécifier de valeur pour la clé donnée :

receipt.message.2=

Pour plus d'informations sur la mise en place de ce fichier et l'internationalisation de ces messages, consultez respectivement les points 3.1 et 6.2.

Toutes les clés utilisables sont définies dans les annexes.

La zone principale (main zone) est personnalisable via une feuille de style CSS. Cette feuille de style est la même que celle utilisée pour la personnalisation des pages de paiement Sherlock's.

Une partie de la feuille de style est dédiée à la partie « gestion de wallet », comme décrit ci-dessous :

Dans ce code, toutes les règles de gestion du wallet devront être précédées de l'ID du bloc « wallet_body », comme présenté ci-dessous :

Un contenu HTML supplémentaire peut être inséré dans l’entête ou dans le pied de page, par exemple pour y faire apparaître des images ou liens ou de simples textes (logo libre de droits, mention copyright, informations juridiques, etc.).

Voici un exemple de contenu HTML pouvant être inséré dans l'entête :

<div id="headerMerchant">
  <img src="context:images/logoMerchant.png" />
</div>

et dans le pied de page :

<p>Copyright &copy; 2015</p>

Seuls les blocs simples doivent être déclarés dans ces fichiers. Les balises <html>, <head> et <body> sont interdites.

Sont également interdites toutes références à une feuille de style autre que celle définie auparavant et toutes références aux scripts (balises de type <link>).

Exemple de code HTML incorrect...

<!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="http://mywebsite.com/style.css" />
  </head>
  <body>
    <div id=”headerMerchant”>
      <div id=”logoMerchant”>
        <img src=” http://mywebsite.com/logoMerchant.png” />
      </div>
    </div>
  </body>
</html>

... à remplacer par :

<div id=”headerMerchant”>
  <div id= ”logoMerchant”><img src= ”context:images/logoMerchant.png” /></div>
</div>

Liste des balises HTML interdites :

• <!DOCTYPE>
• <html>
• <head>
• <title>
• <meta>
• <link>
• <script>
• <body>

Si un fichier « favicon.ico » est placé dans votre dossier «/images » et qu'une personnalisation est appelée, alors le favicon sera visible.

En personnalisant les pages de gestion du wallet, vous devez accorder la plus grande attention à chaque ressource que vous avez personnalisée sur les pages de paiement.

Par exemple, si un bouton « Submit » a été ajouté sur les pages de paiement, il sera aussi utilisé par défaut sur les pages de gestion du wallet. Vous devrez donc certainement en ajouter un spécifique sur les pages de gestion du wallet.

Les pages Sherlock's sont hébergées dans un environnement sécurisé conforme au standard PCI-DSS. Certaines règles doivent par conséquent être observées afin de conserver cette conformité :

• seul le HTML statique est permis. Il est interdit d’utiliser JavaScript ou de faire référence aux balises iframe dans les templates d'entête et de pied de page ;
• les références inter-domaines sont interdites : le code HTML et toutes les ressources doivent être hébergés sur les plateformes Sherlock's ;
• les blocs d'entête et de pied de page ne peuvent pas se chevaucher ou faire partie de la zone principale de la page ;
• le contenu de la zone principale de la page ne peut pas être modifié avec du code HTML en provenance du commerçant. Vous pouvez ajouter des images supplémentaires dans l’entête et dans le pied de page mais pas dans la zone principale.

Afin d’optimiser le temps de chargement des pages et donc d'ajouter du confort de navigation pour l’internaute, il est préconisé d’avoir un poids de page raisonnable en limitant le nombre et le poids des images.

Toutes les pages de la solution Sherlock's sont conformes au standard d'accessibilité WCAG AA.

De ce fait, nous vous encourageons vivement à fournir des éléments de personnalisation qui répondent à ce standard.

Par exemple, la taille des polices doit être dynamique (et non pas fixe) et le contraste de la couleur doit être suffisant. Vous pouvez télécharger la liste des exigences WCAG du site W3C (http://www.w3c.org).

Tout élément de personnalisation doit être également compatible avec tous les navigateurs web utilisés par le grand public (Internet Explorer, Edge, Firefox, Chrome, Safari et Opera).

Toutes les langues prises en charge (au format ISO 639-1 alpha-2) pour les deux types de cinématique, sont énumérées dans le tableau ci-dessous :

Voici les questions les plus fréquemment posées.

Il est important de garder à l'esprit que les résultats peuvent varier suivant la personnalisation de l'offre.