Contenu
| Sommaire | ||||
|---|---|---|---|---|
|
| Extrait | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
|
Création d'une Page Web Avancée
Ce choix de personnalisation permet d’héberger un template sur Monext Online.
Le template 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.
Contactez le support Payline.
Pour créer une page web hébergé standard, suivre les étapes :
- Dans le menu, cliquer sur l'option Configuration → Personnalisation des pages de paiement ;
- Cliquer sur le bouton " + " pour créer une nouvelle page de paiement ;
- Une pop up qui s'affiche pour vous proposer le type de page :
Un formulaire Personnalisation avancée est affichée, où vous pouvez renseigner vos informations :
Une fois que vous avez enregistré le nom, vous disposez du bloc permettant de charger votre fichier html personnalisé.
Personnalisation de la page
Pour créer une personnalisation, vous devez développer une page template HTML contenant le div PaylineForm et la charger dans cet écran de configuration.
| Champ | Explication |
|---|---|
| Nom | Indiquez un nom significatif à la présentation que vous souhaitez faire. Indiquez un nom significatif de la page de paiement. Nous conseillons fortement de mettre une date et/ou un numéro de version. |
| Identifiant | Il est attribué automatiquement par le système et doit être renseigné dans le site e-commerce du commerçant sinon un style par défaut est affecté. |
| État | Ce bouton radio, pré-coché est à activer lors de la création du template. |
| Point de vente | Choisissez le point de vente du commerçant. La valeur "Modèle commun" permet de créer une personnalisation par défaut pour tous les points de vente. |
| Personnalisation | Vous pouvez ajouter un fichier permettant de personnaliser votre page de paiement. Veillez à respecter le format. Template html
CSS
Image
|
le fichier html sera toujours renommé index.html , peu importe le nom du fichier que vous avez chargé.
La définition de la classe cardBrandSquare dans votre fichier CSS (cf exemple ci-dessous) est nécessaire au bon fonctionnement du "choix de la marque" imposé par la | Astuce |
|---|
Une fois l'écran sauvegardé, vous pouvez le visualiser :
|
Template html
Le fichier template.html vous indique les noms des clés
| title | Exemple du fichier index.html.. |
|---|
| Bloc de code | ||||
|---|---|---|---|---|
| ||||
<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> |
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 paramétrée.
#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
Feuille de style
Le template.css vous permettra de configurer votre propre charte graphique
| title | Exemple du fichier template.css.. |
|---|
| Bloc de code | ||||
|---|---|---|---|---|
| ||||
body {
background:white url('#1.bmp#') repeat-x bottom;
}
#pointOfSale {
float:left;
font-family:"Verdana";
font-style:italic;
font-size:14px;
display:inline-block;
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;
}
.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;
}
.cardBrandSquare {
border-style: solid;
border-width: 1px;
border-color: blue;
} |
Récapitulatif pour la modification d'une page web de paiement
- Cliquez sur l'une des pages web personnalisées pour accéder le formulaire de page web ;
- Vous pouvez charger une personnalisation avec un fichier ou "Prévisualiser" la page de paiement ;
- Apportez les modifications souhaitées ;
- Cliquez sur Sauvegarder.
Note : On ne peut pas modifier certains champs : référence, type et point de vente.
Exemple des pages standardsPages associées
| Contenu par étiquette | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|