Payline personnalisation avancée des pages web Manuel utilisateur

Manuel d’utilisation de la personnalisation
avancée des pages web
Version 1.B
Payline
PROPRIETAIRE
Page 1/15
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 est illicite.
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
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 est illicite.
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
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 est illicite.
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 :
[email protected]
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
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 est illicite.
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
Page 2
CHOIX DU
MOYEN DE
PAIEMENT
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
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 est illicite.
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 [email protected]
Page 6/15
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 est illicite.
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
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 est illicite.
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
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 est illicite.
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
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 est illicite.
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
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 est illicite.
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
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 est illicite.
.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
nouvelle page ;
3 Cliquez sur le bouton
apportez les modifications souhaitées.
afin de vous donner un aperçu de votre
si la prévisualisation vous a donné satisfaction sinon
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
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 est illicite.
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
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 est illicite.
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
« CustomPaymentPageCode is inactive ».
02307 : le libellé indique que le code est invalide « Invalid transaction » « Invalid custom
page code »
est
inactif
« Operation
Refused »
Page 14/15
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 est illicite.
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
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 est illicite.
">