Personnaliser la page

De Documentation Mercanet
Révision datée du 13 septembre 2017 à 08:34 par Admin (discussion | contributions)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

Comment personnaliser les pages Mercanet

QUELS SONT LES ELEMENTS PERSONNALISABLES ?

Vous pouvez personnaliser vos pages de paiement et de gestion de Wallet en modifiant les éléments de personnalisation suivants :

Eléments de personnalisation

Description

Offres

Marchand

CSS

Personnalisation de l’affichage de la page de paiement

CSS Offre

La CSS Marchand s’ajoute à la CSS Offre

Template

Format HTML permettant de personnaliser le contenu de l’entête et du pied de page

Templates Offre

Les templates Marchand remplacent les templates offre

Images

Images utilisées par la CSS et les templates

Images Offre

Les images Marchand s’ajoutent aux images de l’offre

Messages

Messages personnalisés

Messages Offre

Le message Marchand remplace celui de l’offre

 

La personnalisation de l’offre sera toujours chargée en premier. Si vous le souhaitez, vous pouvez surcharger certains aspects de la personnalisation.

Attention : le format de la feuille de style CSS doit être encodé en « UTF-8 sans BOM » pour assurer une compatibilité avec les différents navigateurs.

COMMENT CHANGER DE LOGO ?

Il vous suffit d'ajouter les lignes ci-dessous dans le fichier css :

header[role="banner"] h1::before {
content: url("../images/<strong><em>yourlogo.png</em></strong>");
}

PEUT-ON ENLEVER LE NOM DU MARCHAND ?

Cela peut être réalisé de deux manières différentes :

  • Vous pouvez le supprimer via un ‘display:none’ dans le fichier css.
    div.main-data h3 {
       display: none;
    }
    

PEUT-ON ENLEVER LE TABLEAU D’INFORMATIONS SUR LA GAUCHE ?

Ces informations ne sont pas obligatoires, vous pouvez les enlever dans le fichier css avec ce code :

aside.transaction-data h2 {
   display: none;
}
dl.data-sheet {
   display: none;
}

PEUT-ON AVOIR SEULEMENT 2 CARACTERES POUR L’ANNEE D’EXPIRATION DE LA CARTE ?

Cette fonctionalité n’est pas possible.

PEUT-ON CHANGER LE LOGO UTILISE PAR LES BOUTONS VALIDER ET ANNULER ?

Cela est possible, pour le bouton Valider en utilisant le code suivant :

input[type="submit"]{
	background: transparent url("../images/<strong>your_button.png</strong>") no-repeat scroll 0 0;
	width: 142px;
	height: 34px
	color: transparent;
	text-shadow: none;
	vertical-align: middle;
	box-shadow: none;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active{ 
	color: transparent;
	background-color: transparent;
}

Cela est possible, pour le bouton Annuler en utilisant le code suivant :

a.bt-reset{
	background: transparent url("../images/<strong>your_button.png</strong>") no-repeat scroll 0 0;
	width: 132px;
	padding: 0;
	height: 34px
	color: transparent;
	text-shadow: none;
	vertical-align: middle;
	box-shadow: none;
}
a.bt-reset:hover, a.bt-reset:focus, a.bt-reset:active {
	color: transparent;
	background-color: transparent;
}

EN CAS D'ERREUR SUR UN CHAMP, PEUT-ON AVOIR UN ENCADRE ROUGE A LA PLACE D'UN FOND ROUGE ?

input.k-field-error {
	border: 1px solid red;
	color: #fff;
}

Cette modification est possible (cf. copie ci-dessous) :
Invalid card.png

PEUT-ON SUPPRIMER LA PAGE CONTENANT LES INFORMATIONS DU PAIEMENT ?

Vous pouvez aussi supprimer cette page dans la requête de paiement en mettant « Y » dans le champ bypassReceiptPage.

Structure des pages de paiement

La structure des pages de paiement est fondée sur trois zones principales :

  • l’entête (Header),
  • la zone principale (MainZone) qui contient tous les éléments de la page de paiement (champs de saisie, messages...),
  • le pied de page (Footer).

 

Custompage1.PNG

Personnalisation de l’entête et du pied de page

Un contenu HTML supplémentaire peut être inséré dans l’entête ou dans le pied de page.
Exemple : Afficher des images ou des liens (logo libre de droits, mention copyright, informations juridiques, ...).

Nommage des fichiers dans le template

Les éléments de personnalisation des pages sont organisés de la manière suivante :

  • un répertoire CSS contenant le fichier <templateName>.css permet de personnaliser la zone principale,
  • un répertoire templates contenant le fichier <templateName>Header.template où se trouve le contenu HTML statique à afficher dans l’entête de la page,
  • un répertoire templates contenant le fichier <templateName>Footer.template où se trouve le contenu HTML statique à afficher dans le pied de page;
  • un répertoire images contenant toutes les ressources d’images statiques (logo du Commerçant...),
  • un répertoire messages (sous-répertoire de properties) contenant un fichier nommé <templateName>Messages.properties où se trouvent tous les messages spécifiques que vous aurez définis.

Le nom du template (demo comme dans l'exemple ci-dessous) doit être une chaîne alphanumérique à 45 caractères au maximum. Pour plus d’informations, consultez le dictionnaire de données.

Voici un exemple de nommage du template nommé "demo" :
Exemple nommage template.png

Tous les fichiers de type .css, .template et .properties peuvent être déclinés en différentes langues.
Chaque nom de fichier portera le code langue adéquat (code langue ISO 639-1 alpha-2) : anglais (en), français (fr), ...

Pour avoir des fichiers Header en multi-langues, il faut nommer les fichiers comme suit :

  • un fichier nommé <templateName>Header_en.template qui s’affichera si la langue de la cinématique est l’anglais,
  • un fichier nommé <templateName>Header_fr.template qui s’affichera si la langue de la cinématique est le français,
  • un fichier nommé <templateName>Header.template qui s’affichera pour toutes les autres langues.

Dans le cas de notre template nommé "demo", voici un exemple de template en multi-langues :
Exemple nommage template multi langue.png

Voici la liste des langues prises en charge par Mercanet :

Code

Langue

bg

bulgare

br

breton

cs

tchèque

cy

gallois

da

danois

de

allemand

el

grecque moderne

en

anglais

es

espagnol

et

estonien

fi

finnois

fr

français

hi

hindi

hr

croate

hu

hongrois

it

Italien

ja

japonais

ko

koréen

lt

lituanien

lv

letton

nl

néerlandais

no

norvégien

pl

polonais

pt

portugais

sk

slovaque

ro

roumain

ru

Russe

sk

slovaque

sl

slovène

sv

suédois

tr

turc

uk

ukrainien

zh

chinois

Utilisation des fichiers dans les templates

Dans tous les templates, les fichiers doivent être préfixés par le mot clé "context" suivi du nom du répertoire et du nom du fichier.

Voici un exemple de Header utilisant un logo dans le répertoire "/images" :

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

Liste des balises HTML interdites

Élément

<!DOCTYPE>

<html>

<head>

<title>

<meta>

<link>

<script>

<body>

Personnalisation du favicon

Une favicon est une icône informatique symbolisant le logo de la marque du site web :

  • la barre d'adresse,
  • les signets,
  • les onglets.

Voici un exemple de favicon : Exemple favicon.png
Si un fichier nommé "favicon.ico" est placé dans le dossier "/images", et qu’une personnalisation est appelée, alors le favicon sera visible.

Exemple de personnalisation

Exemple de personnalisation de la page de paiement Mercanet

Outil de visualisation du rendu de la personnalisation des pages

URL de l'outil de personnalisation des pages

Cliquer sur le lien ci-dessous pour aller sur l'outil customPage afin de visualiser votre page de paiement personnalisée :
http://custompages.sips-atos.com/fr/custompagesmerchantlogin?o=0590c2ef8b974968c8001938865cec1bb11f8d2302f2e84d8e62582bb98409e6

Une fois sur la page de connexion de l'outil customPage :

  • Renseigner votre nom puis votre identifiant marchand
  • Cliquer sur le bouton "connexion"


Custompage2.PNG

Importer une personnalisation de page de paiement

Une fois authentifié :

  • Cliquer sur le bouton "importer une arborescence"
  • Valider le chargement en cliquant sur le bouton "Oui"
  • Sélectionner sur votre ordinateur l'emplacement où se trouve le fichier ".zip" contenant la personnalisation (avec les images, la css, les templates, les messages) dans l'arborescence adéquate.

    • Custompage3.PNG

      • Cliquer sur le bouton Loupe.PNG pour visualiser la personnalisation :


      Custompage4.PNG

      • Visualiser la personnalisation de votre page de paiement

      Custompage5.PNG

      Autres exemples de personnalisation de la page de paiement

      Exemples perso.PNG

      Dans la page ci-dessus, cliquez sur le bouton "Télécharger les exemples" permet d'obtenir un fichier zip contenant différents exemples de personnalisation.

      Chacune de ces exemples possède un thème ou une spécificité qui montre le potentiel de personnalisation des pages de paiement Mercanet 2.0. Voici ces thèmes :

      • Pages vertes et informations à droite : exemple-1- pages avec une couleur dominante verte, un arrière-plan et le bloc d'informations de transaction vers la droite
      • Pages bleues et roses : exemple-2- pages basiques avec une couleur dominante bleu et un bandeau supérieur rose
      • Pages foncées : exemple-3- pages avec un ton gris foncé et une écriture blanche
      • Pages jaunes : exemple-4- pages avec une couleur dominante jaune et une écriture blanche
      • Pages bleues et grises : exemple-5- pages basiques avec deux couleurs dominantes bleu foncé et gris foncé
      • Pages noires : exemple-6- pages avec une couleur dominante noire et un bandeau avec arrière-plan
      • Pages bleues et informations à droite : exemple-7- pages basiques avec une couleur dominante bleu et le bloc d'informations de transaction vers la droite
      • Pages vertes : exemple-8- pages basiques avec une couleur dominante verte

      Limitations

      Attention, à chaque dossier correspond une liste d’extensions de fichiers qui sont autorisées.
      Voici la liste des extensions autorisées par dossier:

      • dossier css: extension autorisée: css
      • sous-dossier fonts se trouvant dans le dossier css: extension autorisée: ttf, eot, woff, woff2, otf
      • dossier images: extension autorisée: png, gif, jpg, svg, ico, jpe, jpeg
      • sous-dossier messages se trouvant dans le dossier properties: extension autorisée: properties
      • dossier templates: extension autorisée: template

      Le dossier zip est uniquement autorisé lorsque vous cliquez sur le bouton «Importer une arborescence». Il ne sert que pour importer une personnalisation sur l’outil.

      L’utilisation de fichiers JavaScript est interdite et la personnalisation qui en contient sera purement et simplement ignorée.

      Les fichiers modèles header, footer et oneclicklegalnotice 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.

      Le nom de votre personnalisation doit être d’une longueur de 10 caractères maximum.

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