Manuel d utilisation de la personnalisation avancée des pages web Version 1.B Payline PROPRIETAIRE Page 1/15 Version du modèle : DocStd_50
Page des évolutions Le tableau ci-dessous liste les dernières modifications effectuées sur ce document. Date Version Modifications 14/08/12 1.A Livraison version initiale 30/10/12 1.B MAJ 4.31 Page 2/15
Table des matières 1 INTRODUCTION...4 1.1 OBJET DU DOCUMENT...4 1.2 AVERTISSEMENT...4 1.3 CONTACTS...4 2 PERSONNALISATION DES PAGES WEB...5 2.1 CREER UNE PERSONNALISATION DE PAGE WEB DE PAIEMENT...6 2.1.1 Créer un style de page web de paiement avancée...6 2.1.2 Le template html...9 2.1.3 Feuille de style...10 2.2 LISTER / MODIFIER LES STYLES DE PAGES...13 3 UTILISATION DE LA PERSONNALISATION...14 Page 3/15
1 Introduction 1.1 Objet du document Vous avez choisi la solution Payline pour votre e-commerce, vous accédez ainsi au Centre d administration Commerçant qui vous permet d effectuer des opérations sur vos transactions, de suivre des dossiers de paiement, et de gérer votre compte e-commerce Payline. Ce document décrit la fonctionnalité de personnalisation avancée des pages web par l hebergement sur le serveur Payline des fichiers 1.2 Avertissement Ce document est la propriété exclusive de Monext. Toute reproduction intégrale ou partielle, toute utilisation par des tiers, ou toute communication à des tiers, sans accord préalable écrit de Monext est illicite. Monext, marque communautaire et internationale propriété exclusive de Monext Ltd et/ou des sociétés du groupe. Payline, marque nationale et internationale propriété exclusive de Monext et/ou des sociétés du groupe. 1.3 Contacts Vous avez besoin d aide, de conseil ou vous souhaitez simplement nous poser une question, contactez le Support Payline par email : support@payline.com Si vous découvrez une erreur dans cette documentation, vous pouvez nous envoyer un email en décrivant l erreur ou le problème aussi précisément que possible. Merci de préciser la référence du document, sa date (indiquée sur la première page du document) et le(s) numéro(s) de page(s). Page 4/15
2 Personnalisation des pages web Le centre d administration Payline vous offre la possibilité de personnaliser les 3 pages de paiement qui interviennent dans le processus de paiement en ligne de votre e-commerce. On parle de "pages web de paiement", il s agit de : PAGES WEB DE PAIEMENT Page 1 CHOIX DU MOYEN DE PAIEMENT Page 2 SAISIE DES DONNEES CARTE Page 3 CONFIRMATION DE PAIEMENT la page affichant le choix du moyen de paiement la page affichant la saisie des données carte la page affichant la confirmation du paiement Le commerçant ou un utilisateur qu il aura délégué, peut définir une ou plusieurs présentations de pages de paiement pour chaque site e-commerce. Personnaliser revient à créer un style de page propre à votre site e-commerce puis affecter la présentation au point de vente. Si vous avez plusieurs points de vente, vous pouvez affecter à chaque point de vente une présentation différente ou bien affecter sur plusieurs points de vente la même présentation. Pour accéder à la personnalisation des pages web allez dans le menu Configuration, Personnalisation des pages web. Page 5/15
2.1 Créer une personnalisation de page web de paiement Pour créer une nouvelle personnalisation, allez au menu Configuration > Personnaliser vos pages de paiement, vous parvenez à l écran suivant : Point de vente C est le point de vente pour lequel vous allez personnaliser les pages de paiement Sélectionnez le point de vente pour lequel vous désirez personnaliser les pages de paiement et cliquez sur. Vous accédez au formulaire vous permettant de choisir entre une personnalisation standard ou une personnalisation avancée par template de la page et CSS 2.1.1 Créer un style de page web de paiement avancée Ce choix de personnalisation permet d héberger un template sur Payline (et non plus chez le commerçant). Le template dynamique (fichier HTML), une feuille de style CSS et jusqu à 10 images peuvent être téléchargées sur Payline via le centre d administration. La personnalisation avancée est une option à laquelle il faut souscrire. Pour cela vous devez vous rapprocher du support Payline joignable au 04.42.25.15.43 ou par mail support@payline.com Page 6/15
Nom Indiquez un nom significatif à la présentation que vous souhaitez faire Identifiant Il est attribué automatiquement par le système et doit être renseigné dans le site e-commerce du commerçant auprès de Payline sinon un style par défaut est affecté. Page 7/15
Etat Ce bouton radio, pré-coché est à activer lors de la création du template. Fichier template Le fichier html template est obligatoire lors de la création/édition du template. Taille maximum de 500ko Type : html Fichier CSS Il s agit du fichier CSS du template. <link rel="stylesheet" type="text/css" href="#template.css#" /> Taille maximum : 500 ko Type : css Image Une image pouvant être utilisé dans le template et/ou le fichier CSS. Vous pouvez en télécharger jusqu à 10 en répétant cette étape. Dans le fichier template, les commerçants indiqueront leurs images par la chaine : #monimage.jpg# <img src="#monimage.jpg#" /><br/> Taille maximum : 500 ko Type : png, jpg, gif. Si vous téléchargez une ou plusieurs images trop volumineuse ou n'ayant pas le bon format et cliquez sur le bouton enregistré. La page se recharge, formulaire pré-rempli, avec le message "Un ou plusieurs des éléments téléchargés n'a pas le format ou la taille requise". Le ou les champs incriminés apparaissent en rouge. Page 8/15
2.1.2 Le template html Le fichier template.html vous indique les noms des clés <html> <head> <title>paiement commande #PaylineOrderRef#</title> <link rel="stylesheet" type="text/css" href="#template.css#" /> </head> <body> <div id="pointofsale"> <img src="#monimage.jpg#" /><br/> <b>personnalisation Payline</b> <br/>paiement en ligne<br/> </div> <div id="aboutpayline"> <img src="#secure.png#" width="300" height="150" /> </div> <div id="orderinfos"> <span class="title">votre commande</span> <span class="label">référence : </span> <span class="value">#paylineorderref#</span><br/> <span class="label">montant : </span> <span class="value">#paylineformattedamount#</span><br/> <span class="label">date : </span> <span class="value">#paylineorderdate#</span> </div> <div id="shippingaddress"> <span class="title">vos coordonnées</span> <span class="label">nom : </span> <span class="value">#paylinebuyershippingaddress.name#</span><br/> <span class="label">rue : </span> <span class="value">#paylinebuyershippingaddress.street1#</span><br/> <span class="label">complément : </span> <span class="value">#paylinebuyershippingaddress.street2#</span><br/> <span class="label">ville : </span> <span class="value">#paylinebuyershippingaddress.cityname#</span><br/> <span class="label">code postal : </span> <span class="value">#paylinebuyershippingaddress.zipcode#</span><br/> <span class="label">pays : </span> <span class="value">#paylinebuyershippingaddress.country#</span><br/> <span class="label">téléphone fixe : </span> <span class="value">#paylinebuyershippingaddress.phone#</span><br/> <span class="label">téléphone mobile : </span> <span class="value">#paylinebuyermobilephone#</span><br/> <span class="label">ip : </span> <span class="value">#paylinebuyerip#</span> </div> <div id="privatedata"> <span class="title">private Data</span> <span class="label">data 1 : </span> <span class="value">#paylineprivatedata[productfamily]#</span><br/> <span class="label">data 2 : </span> <span class="value">#paylineprivatedata.data2#</span><br/> </div> <div id="paylineform"></div> </body> </html> Page 9/15
Le div PaylineForm n'est pas personnalisable, le libellé et les champs à renseigner dans le step 2 sont figés et envoyés par Payline. Seule la charte (la police, couleur, etc) peut être configurée Eléments Description #PaylineOrderRef# Référence de votre commande #PaylineFormattedAmount# Montant de votre commande #PaylineOrderDate# Date de votre commande #PaylineBuyerShippingAddress.name# Nom #PaylineBuyerShippingAddress.street1# Rue #PaylineBuyerShippingAddress.street2# Complément #PaylineBuyerShippingAddress.cityName# Ville #PaylineBuyerShippingAddress.zipCode# Code postal #PaylineBuyerShippingAddress.country# Pays #PaylineBuyerShippingAddress.phone# Téléphone fixe #PaylineBuyerMobilePhone# Téléphone mobile #PaylineBuyerIp# IP #PaylinePrivateData[productFamily]# Private Data 1 #PaylinePrivateData.data2# Private Data 2 Attention : Nous préconisons de ne pas utiliser de Javascript, ou formulaire imbriqué dans ce fichier. Il ne doit pas contenir de champs BASE, FRAME ou FORM 2.1.3 Feuille de style Le template.css vous permettra de configurer votre propre charte graphique Exemple du fichier template.css body { background:white url('#1.bmp#') repeat-x bottom; #pointofsale { float:left; font-family:"verdana"; font-style:italic; font-size:14px; display:inline-block; Page 10/15
text-align:center; #aboutpayline { float:right; #orderinfos { width:500px; background-color:#dddddd; margin-left:auto; margin-right:auto; margin-bottom:15px; #shippingaddress { width:500px; background-color:#dddddd; margin-left:auto; margin-right:auto; margin-bottom:15px; #privatedata { width:500px; background-color:#dddddd; margin-left:auto; margin-right:auto; margin-bottom:15px; #PaylineForm { width:500px; height:200px; border:5px double red; margin-left:auto; margin-right:auto; Page 11/15
.title{ /*border:1px solid;*/ background-color:#bbbbbb; text-align:center; display:inline-block; width:100%; font-family:"lucida Console"; font-size:26px; color:#006600;.label{ text-align:right; width:150px; font-family:"verdana"; font-style:italic; font-size:14px; display:inline-block;.value{ font-family:"verdana"; font-size:14px; font-weight:bold; Récapitulatif pour personnaliser une page Web de paiement 1 Télécharger les fichiers obligatoires. Ils sont marqués d une étoile rouge ; 2 Affichez le résultat par le bouton afin de vous donner un aperçu de votre nouvelle page ; 3 Cliquez sur le bouton si la prévisualisation vous a donné satisfaction sinon apportez les modifications souhaitées. 3bis Un clic sur le bouton vous permet d abandonner les saisies que vous avez effectuées et vous permet de retourner à l écran «Personnaliser vos pages de paiement». Page 12/15
2.2 Lister / Modifier les styles de pages Si vous avez créé plusieurs styles de pages, il vous est possible de les consulter par point de vente et ensuite de les modifier. Pour réaliser cette étape, allez dans le menu Configuration> personnalisez vos pages de paiement. Sélectionner le point de vente pour lequel vous souhaitez consulter les styles de page. Effectuez les modifications souhaités et cliquez sur le bouton Le résultat est rendu sous forme de tableau indiquant l identifiant, le nom, le défaut et l état des pages web comme présenté sur l écran suivant. Identifiant Il est attribué automatiquement par le système et doit être renseigné dans le site e-commerce du commerçant auprès de Payline sinon un style par défaut est affecté. Nom C est le nom de la page web de paiement Défaut Indique que la page web est votre page par défaut. Tout paiement se fera en utilisant ce style de personnalisation. Etat Informe de l état de la page web. Ici la page web est active donc fonctionnelle. Récapitulatif pour la modification d une page web de paiement 1 Cliquez sur l un des identifiants des pages web personnalisées pour accéder le formulaire de page web 2 Apportez les modifications souhaitées 3 Cliquez sur NB : L identifiant, le nom, le défaut et l état de la page web sont des champs qui ont été renseignés lors de la création des pages de paiement Page 13/15
3 Utilisation de la personnalisation Une fois que vous avez paramétré un template sur le centre d'administration, vous pouvez l'utiliser sur les pages web de paiement. Pour pouvoir utiliser le template, il faut : Que celui-ci soit actif (à paramétrer sur le centre d'administration : cf. XX) Que le commerçant renseigne le code du template lors de l'appel au web service dowebpayment, dans la balise custompaymentpagecode : Il peut être utilisé pour les webservices suivants : dowebpayment createwebwallet updatewebwallet En cas d erreur dans le code de pages personnalisées, renseigné dans les pages web de paiement, une erreur est levée. Le code résultat retourné est 02309 : le libellé indique que le code est inactif «Operation Refused» «CustomPaymentPageCode is inactive». 02307 : le libellé indique que le code est invalide «Invalid transaction» «Invalid custom page code» Page 14/15
Payline, marque nationale et internationale propriété exclusive de Monext et/ou des sociétés du groupe. www.payline.com www.monext.fr Page 15/15