Télécharger - E

Solution E-transactions
Personnalisation de la page de choix
Date: 12/02/2015
E-transactions
NOTE TECHNIQUE
Refonte de la page de choix
Personnalisation
VERSION DU 01/03/2015
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
1
Version du 12/12/2015
Crédit Agricole S.A, société anonyme au capital de 7 729 097 322 €. Siège social : 12 place des Etats-Unis 92127 Montrouge Cedex. Immatriculée au registre de
Nanterre sous le N° de Siren : 784 608 416, N° individuel d’identification, assujettie à la TVA : FR 77 784 608 416. Crédit Agricole S.A est un établissement de
crédit de droit français agréé par l’Autorité de Contrôle Prudentiel, (ACP 61 rue Taitbout 75 736 Paris cedex 09)
Solution E-transactions
Personnalisation de la page de choix
Version du 01/03/2015
AVERTISSEMENT
Les informations contenues dans ce document n’ont aucune valeur contractuelle. Elles
peuvent faire l’objet de modification à tout moment. Elles sont à jour en date de rédaction
au 01/03/2015.
E-transactions est une solution d’encaissement et de gestion des paiements à distance par
carte bancaire, dans un environnement sécurisé, distribuée par les Caisses régionales de
Crédit Agricole.
Renseignez-vous auprès de votre conseiller sur les conditions générales et tarifaires de
cette solution.
Cette documentation peut être enrichie par vos commentaires. Vous pouvez nous envoyer un
email à [email protected], en indiquant votre remarque aussi précisément que possible.
Merci de préciser la référence du document ainsi que le numéro de la page.
ASSISTANCE
Pour tout renseignement ou assistance à l’installation et à l’utilisation de nos produits, nos Equipes restent à
disposition des commerçants et Intégrateurs, du lundi au vendredi de 9H à 18H30 :
Support Technique & Fonctionnel :
E-mail : [email protected]
Téléphone : 0 810 812 810(1)
(1)
prix d’un appel local non surtaxé depuis un poste fixe
Pour tout contact auprès de nos services, il faut IMPERATIVEMENT communiquer les identifiants :



numéro de SITE (7 chiffres)
numéro de RANG (2 chiffres)
numéro d’identifiant (1 à 9 chiffres)
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
2
Solution E-transactions
Personnalisation de la page de choix
Version du 01/03/2015
TABLE DES MATIERES
1.
Introduction _______________________________________________________________ 4
2.
Notations _________________________________________________________________ 4
3.
Structure principale _________________________________________________________ 5
4.
En-tête (#pbx-header) _______________________________________________________ 6
5.
Contenu principal (#pbx-main) _________________________________________________ 6
6.
5.1.
#pbx-custom-area_______________________________________________________ 7
5.2.
#pbx-language _________________________________________________________ 7
5.3.
.pbx-frame ____________________________________________________________ 7
5.4.
#pbx-exchange-rates ____________________________________________________ 7
Pied de page (#pbx-footer) ___________________________________________________ 8
6.1.
Page de choix __________________________________________________________ 8
6.2.
Structure complète ______________________________________________________ 9
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
3
Solution E-transactions
Personnalisation de la page de choix
1.
Version du 01/03/2015
Introduction
Ce document présente les principales structures des pages HTML de E-transactions permettant
de personnaliser l’affichage. Cette personnalisation pourra se faire facilement tant pour le choix
des couleurs que pour la modification de l’emplacement de chacun des éléments.
Sont présentées, tout d’abord, les notations utilisées, essentielles à la compréhension des parties
suivantes, qui elles décriront en détail la manière dont la page de choix des moyens de paiement
peut être modifiée. Pour finir les possibilités de personnalisation seront illustrées de quelques
exemples de pages déjà réalisées.
Pour pouvoir utiliser une CSS personnalisée, le marchand devra soit en fournir l’URL lors de
chaque appel via la variable PBX_THEME_CSS, soit fournir le fichier CSS a l’assistance
E-transactions afin que celui-ci soit conservé pour tous les appels futurs.
2.
Notations



Les éléments commençant par un point sont des classes CSS (par exemple .pbx-button)
Les éléments commençant pas un dièse sont des identifiants CSS (par exemple #pbx-main)
Les éléments encadrés par les signes < et > sont des balises HTML présentes sur la page (par
exemple <img>)
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
4
Solution E-transactions
Personnalisation de la page de choix
3.
Version du 01/03/2015
Structure principale
La structure de la page HTML de E-transactions se compose d’un calque principal
 #pbx-container
Lui-même composé de 3 calques secondaires :
 #pbx-header
 #pbx-main
 #pbx-footer
Les différentes possibilités de personnalisations sont détaillées calque par calque ci-après.
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
5
Solution E-transactions
Personnalisation de la page de choix
4.
Version du 01/03/2015
En-tête (#pbx-header)
L’entête est une zone destinée à présenter le logo de la boutique. Attention la langue de la page
ne fait pas partie du header (contrairement à ce que laisserait croire l’écran ci-dessus).
La balise image <img> contenant le logo n’est présente que si le commerçant a configuré son
propre logo.
Pour configurer son logo, le commerçant doit passer par l’assistance E-transactions car l’image
sera stockée sur nos serveurs. Il pourra toutefois en gérer l’emplacement, la taille etc.
Un commerçant souhaitant modifier son logo dynamiquement pourra choisir de ne pas afficher ce
calque et d’exploiter la zone libre (#pbx-custom-area) détaillée dans la suite de ce document pour
afficher l’image/logo de son choix à chaque appel.
Le logo « commerce » à afficher doit être au format « gif » ou « jpg » et faire, au maximum, 20 Ko.
Il n’y a pas de taille limite pour le logo (bandeau haut de page) mais nous suggérons de ne pas dépasser
1000 x 200 pixels (cette taille permet de s’adapter à la résolution de l’écran de tous les internautes).
5.
Contenu principal (#pbx-main)
Cette partie affiche le contenu de la page demandée.
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
6
Solution E-transactions
Personnalisation de la page de choix
Version du 01/03/2015
5.1. #pbx-custom-area
C’est une zone libre destinée à afficher un contenu envoyé par le commerçant à l’aide du
paramètre PBX_CUSTOM_AREA. Le contenu de ce paramètre est du code HTML destiné à être
inséré dans cette zone.
Cette zone peut notamment contenir des liens et des images ; il est donc possible de recréer le
tunnel de vente qui a mené le client à la page de choix et de le renvoyer vers une étape
précédente.
Le contenu de la zone sera vérifié pour s’assurer qu’il est conforme au bon fonctionnement de la
page. En cas de non-conformité, la demande sera retournée avec le motif explicatif du rejet.
Il est possible que certains contenus soient rejetés si des éléments interdits sont insérés (ex
scripts ou objets)à, dans ce cas la demande sera retournée avec le motif explicatif du rejet.
5.2. #pbx-language
Cette section affiche une liste déroulante permettant à l’utilisateur de modifier la langue de
traduction de la page.
A noter que c’est la feuille de style qui définit les drapeaux à afficher à gauche de la langue. Ces
images ne sont pas incluses dans la page HTML.
Un marchand peut donc afficher les drapeaux de son choix, voir ne pas afficher de drapeaux. Par
contre il ne pourra pas modifier le texte qui y est associé (Français par exemple).
5.3. .pbx-frame
Cette classe permet de délimiter une section dans laquelle un contenu sera affiché (une liste de
moyens de paiement par exemple).
Cette section dispose de trois niveaux de titres qui peuvent être affichés à l’aide des balises <h1>,
<h2> et <h3>.
Afin de mieux les identifier, chaque section a son propre identifiant en plus de la classe .pbx-frame.
Plus de détails concernant ces sections sont accessibles au chapitre 6.22 Structure complète.
5.4. #pbx-exchange-rates
Cette partie affiche les taux de change actuels.
Il n’est pas possible de modifier les devises qui sont affichées ni l’ordre dans lequel ces devises
sont affichés.
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
7
Solution E-transactions
Personnalisation de la page de choix
6.
Version du 01/03/2015
Pied de page (#pbx-footer)
Ce pied de page affiche 2 liens :
 Page d’accueil E-transactions
 Page d’informations sur la sécurité
Les liens sont agencés à l’aide d’une liste <ul>.
Ils peuvent évidement être customisés indépendamment l’un de l’autre.
6.1. Page de choix
La page de choix permet à utilisateur de choisir le moyen de paiement qu’il utilisera pour effectuer
sa transaction.
Cette page se compose de deux sections (.pbx-frame), l’une affichant un résumé de la transaction
et l’autre les moyens de paiements disponibles.
Ces deux sections peuvent aisément être traitées et customisées indépendamment l’une de
l’autre.
6.1.1. Informations de paiement
Cette section est un rappel des informations de la transaction en cours. Ces informations sont
agencées à l’aide d’un tableau HTML.
Chaque élément de ce tableau peut être affiché ou masqué indépendamment des autres.
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
8
Solution E-transactions
Personnalisation de la page de choix
Version du 01/03/2015
6.1.2. Bouton “moyens de paiement”
Chaque moyen de paiement est un calque <div> ayant la classe .pbx-payment-mean-item.
Il contient un bouton <button> ayant les classes pbx-payment-mean-item-logo et .pbx-button.
Le logo du moyen de paiement contenu dans chaque bouton ne peut pas être modifié, il peut par
contre ne pas être affiché et être remplacé par une image au choix du marchand.
6.1.3. Bouton “Annuler”
Comme les boutons des moyens de paiement, ce bouton a la classe .pbx-button.
Il peut, comme tous les autres éléments, être déplacé et customisé de sorte qu’il devienne plus ou
moins visible.
6.2. Structure complète
Les détails des chapitres précédents ne présentent qu’une partie de la structure d’une page. Celleci est bien sûr plus complexe. Elle dispose de balises, identifiants, classes qui n’ont pas été citées.
Voici donc une extraction des différentes pages d’E-transactions :
E-transactions.htm
Informations sécurité :
E-transactions_infos
_securite_SSL.pdf
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
9