NOTE TECHNIQUE. Refonte de la page de choix Personnalisation VERSION DU 01/03/2015

Transcription

1 Solution E-transactions Date: 12/02/2015 E-transactions NOTE TECHNIQUE Refonte de la page de choix Personnalisation VERSION DU 01/03/2015 Version du 12/12/ Crédit Agricole S.A, société anonyme au capital de Siège social : 12 place des Etats-Unis Montrouge Cedex. Immatriculée au registre de Nanterre sous le N de Siren : , N individuel d identification, assujettie à la TVA : FR 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 Paris cedex 09)

2 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 à support@e-transactions.fr, 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 : support@e-transactions.fr Téléphone : (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) 2

3 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) #pbx-custom-area #pbx-language pbx-frame #pbx-exchange-rates 7 6. Pied de page (#pbx-footer) Page de choix Structure complète 9 3

4 1. 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>) 4

5 3. 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. 5

6 4. 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. 6

7 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 #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) 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 #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. 7

8 6. 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 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 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. 8

9 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 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 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 9