Le tableau ci-dessous liste les dernières modifications effectuées sur ce document.
Version
Date
Modifications
Introduction
Ce document est décomposé en 4 principaux chapitres
- Un chapitre visant à définir les différents concepts et notion de mise en marque blanche.
- Un chapitre montrant comment configurer simplement en ligne certains éléments de marque blanche.
- Un chapitre décrivant la création de feuille de styles personnalisés et leurs applications aux interfaces Payline
- Un chapitre décrivant la procédure de mise en place d'image personnalisé
Liste des documents de référence
Ce document complète le manuel utilisateur du centre d'administration Payline, le guide de personnalisation avancée des pages web de paiement et le guide de personnalisation du TPEV disponible sur simple demande auprès du service d'assistance technique Payline faite par 3 moyens (voir Création des URLs spécifiques )Modification des logos (voir section )Mise personnalisées (voir Personnalisation des CSS du centre d'administration et Personnalisation des CSS des pages web de paiement et Personnalisation des CSS du TPEV) (voir Procédure de personnalisation des images des applications) (voir Personnalisation du centre d'administration et Personnalisation des pages web de paiement) au nombre de 3*2 (3 pour la production et 3 pour homologation) pourAdresse IP du service
Exemple d'URLS
admin.payline.com
webpayment.payline.com
194.5.120.203
tpv.payline.com
194.5.120.177
homologation-admin.payline.com
194.5.120.179
homologation-webpayment.payline.com
194.5.120.204
La délégation de création des certificats est fournie en Annexe 1 et doit être retourné par Fax au 04 42 25 14 12 ou numérisée et envoyée signée par email a assistance@payline.com. |
Il premier regroupement de champs permet de renseigner les informations générales du distributeur.
ID Distributeur |
Nom du distributeur |
Nom de la solution de paiement |
Logo marketing de la solution |
L'activation des interfaces est possible via le contact commercial.
Centre d'administration |
Pages web de paiement |
Terminal virtuel de paiement |
Interface directe |
L'activation des options est possible via le contact commercial.
Les options sont regroupées par types et par interfaces. La liste complète des options et leur description est disponible auprès du service commercial.
Un image du centre d'administration est présente à droite de l'écran et montre ou se situe la zone qui est en cours de modification.
URL |
Titre |
Mention légale |
Feuille de style |
Icône du site web |
Logo du produit |
Logo du distributeur |
Logo du partenaire |
Valider |
Annuler |
Un premier bloc permet la saisie des données de personnalisation sur les pages web de paiement :
URL |
Titre |
Mention légale |
Feuille de style PC |
Feuille de style PDA |
Icône du site web |
Logo du produit |
Logo du distributeur |
Logo du partenaire |
Langue | |
Langue par défaut | |
De | |
Cc | |
Inclure de ticket de caisse | |
Icône du site web | |
Logo | |
Sujet | |
Message | |
Variable | Description |
#buyer.firstname# | Le prénom du client |
#buyer.lastname# | Le nom du client |
#logoImage# | Le logo de votre société rendu dans une balise image |
#order.reference# | La référence de la commande |
#ticket.formattedAmount# | Le montant payé formaté avec la devise choisi |
#pos.label# | Libellé du point de vente |
Valider | |
Annuler |
Personnalisation du TPEV
A l'instar du centre d'administration, cette page permet la personnalisation du TPEV.
Une capture d'écran du TPEV est présente à droite de l'écran et montre ou se situe la zone qui est en cours de modification.
URL
Ce champ permet de définir l'URL qui sera utilisé pour accéder au site Payline. Cette URL doit être sécurisée.
Titre
Il s'agit du titre de l'application. Ce titre apparaît dans la fenêtre du navigateur.
Mention légale
Cette zone permet la saisie d'une mention légale qui s'affiche en bas du site.
Feuille de style PC
Cette zone permet le téléchargement d'une feuille de style personnalisé qui sera utilisé sur un PC. Le paragraphe Personnalisation des CSS du TPEV décrit la création de ces feuilles de style.
Feuille de style PDA
Cette zone permet le téléchargement d'une feuille de style personnalisé qui sera utilisé sur un équipement mobile. Le paragraphe Personnalisation des CSS du TPEV décrit la création de ces feuilles de style.
Icône du site web
Il s'agit de l'icône qui s'affiche dans la barre de titre ou d'adresse du navigateur. Sa taille est de 32*32 pixels et son format doit être .ico
Logo du produit
Il s'agit du logo du produit qui s'affiche en haut a gauche du site. Sa taille est de 200*40 pixels et son format doit être jpeg, png ou bmp.
Logo du distributeur
Il s'agit du logo du produit qui s'affiche en bas au centre du site. Sa taille est de 200*35 pixels et son format doit être jpeg, png ou bmp.
Logo du partenaire
Il s'agit du logo du produit qui s'affiche en bas a droite du site. Sa taille est de 200*35 pixels et son format doit être jpeg, png ou bmp.
Valider
Ce bouton permet de sauvegarder les modifications et de retourner sur le page de gestion du distributeur.
Annuler
Ce bouton permet d'annuler les modifications et de retourner sur le page de gestion du distributeur.
Gestion des offres commerciales
Cette section montre comment créer des offres commerciales pour les commerçants. Ces offres sont configurables et peuvent être proposées pour une durée définie aux commerçants.
Les écrans de gestion des offres commerciales sont accessible via le menu « Configuration Gestion des offres commerciales »
Options et interfaces accessibles
La solution de paiement propose 4 interfaces de paiement et un grand nombre d'option. L'accès à ces interfaces et options est défini par l'assistance Payline en fonction du contrat signé avec Monext.
Interfaces |
Centre d'administration |
Pages web de paiement |
Terminal de paiement virtuel |
WebService |
Recherches d'offres commerciales
Cet écran permet la recherche d'offres commerciales suivant certain critère, il permet également de créer une nouvelle offre (voir Erreur ! Source du renvoi introuvable.).
Nom de l'offre
Ce champ permet de recherche une offre par son nom. Seulement une partie du nom peut être saisie.
Offre en cours de vente
Cette case permet de limiter la recherche aux offres vendues actuellement
Offre nom vendue actuellement
Cette case permet de rechercher les offres qui ne sont plus vendues
Rechercher l'offre d'un commerçant
Ce champ permet la recherche de l'offre souscrite par un commerçant. Il faut renseigner ici l'ID du commerçant.
Rechercher
Ce bouton permet de lancer la recherche. Voir Tableau des offres commerciales
Créer une nouvelle offre
Ce bouton permet de créer une nouvelle offre. Voir Création ou modification d'offres commerciales pour les commerçants
Tableau des offres commerciales
Cet écran permet de visualiser les offres proposées aux commerçants, d'aller sur leur détail ou d'en effectuer une nouvelle copie.ID de l'offre
Ce champ montre l'ID unique de votre offre.
Nom de l'offre
Cette case montre le nom commercial de l'offre (nom qui est affiché aux commercants)
Coût d'activation
Coût en devise d'activation de l'offre.
Coût mensuel
Coût en devise mensuel de l'offre
Nombre de commerçant
Nombre de commerçant ayant souscrit a cette offre.
Un lien sur le nombre de commerçant permet d'afficher le tableau des commerçants
Date de début
Date de début de mise en vente de l'offre
Date de fin
Date de fin de mise en vente de l'offre
Détails
Permet de visualiser les détails d'une offre
Copier
Permet de créer une nouvelle offre a partir d'une offre existante.
Création ou modification d'offres commerciales pour les commerçants
Cet écran permet la modification ou la création d'offre commerciale. Il permet la saisie des informations générales de l'offre ainsi que le choix des options à inclure dans l'offre.
Cet écran se décompose en deux partie, une pour la saisie des informations sur' l'offre :Nom commercial de l'offre
Ce champ permet la saisie du nom commercial de l'offre. Ce nom sera affiché aux commerçants.
Devise de facturation
Cette liste déroulante permet la saisie de la devise de facturation
Coût d'activation de l'offre
Coût en devise d'activation de l'offre.
Coût mensuel de l'offre
Coût en devise mensuel de l'offre
Durée minimum d'engagement
Durée minimum durée laquelle le commerçant ne pourra pas rompre son abonnement
Coût fixe par transaction
Coût fixe en devise pour chaque transaction effectuée.
Pourcentage par transaction
Pourcentage prélevé pour chaque transaction effectuée.
Nombre de transaction comprise dans l'offre
Nombre de transaction gratuite incluse dans l'offre
Proposer l'offre à partir de … jusqu'au …
Date de début et de fin de vente de l'offre
Ne plus vendre cette offre
Case à cocher qui permet de ne plus proposer cette offre a la vente.
Nom de l'option |
Comprise dans l'offre |
Supplément mensuel |
Coût fixe supplémentaire par transaction |
Pourcentage supplémentaire par transaction |
Enregistrer |
Annuler |
Inscription en ligne des commerçants
Lors de leur inscription en ligne, les commerçants se voient proposés les offres qui ont été créées a l'étape précédente.Personnalisation des CSS du centre d'administration
Ce paragraphe montre comment personnaliser de manière experte par CSS le centre d'administration.
La CSS complète du centre d'administration est disponible à l'adresse suivante :
https://homologation-admin.payline.com/PaylineAdministration/skins/default/all.css
Styles généraux
Les styles généraux de l'application Payline sont expliqués dans cette section.actionButton
.actionButton
input.defaultSubmit
Exemple CSS centre d'admin
input.defaultSubmit {
font-weight: bold;
}
/*** Style bouton ***/
.actionButton {
background-color: #FFA200;
border-width: 1px;
color: #FFFFFF;
padding: 0.15em 1em 0.2em;
}
/*** Réglages globaux (police, couleur de fond) ***/
body {
font-family: Tahoma, sans-serif;
font-size: 70%;
margin: 0;
padding: 0;
}
Menu de l'application
#menu li a#menu li li a#menu li li a:hover#menu li.global a
#menu li.global a:hover
#menu
Exemple CSS centre d'admin
#menu li a {
color: #000066;
font-weight: bold;
line-height: 1.2em;
padding: 5px 0;
text-decoration: none;
}
/*** Style des sous menus ***/
#menu li li a {
background: #FFFFFF none repeat scroll 0 0;
color: #666666;
display: block;
font-weight: normal;
line-height: normal;
padding: 5px;
text-decoration: none;
width: 18em;
}
/*** Style des sous menu sur un survol par la souris ***/
#menu li li a:hover {
background: #F7921E none repeat scroll 0 0;
color: white;
}
/*** Lien sur le menu sur un survol par la souris ***/
#menu li.global a:hover {
text-decoration: underline;
}
/*** Lien sur le menu ***/
#menu li.global a {
color: #F7921E;
}
/*** Fond du menu ***/
#menu {
background: transparent url(images/css/header_bg_2.gif) repeat-x scroll 0 0;
clear: both;
height: 35px;
line-height: normal;
padding-left: 5px;
position: relative;
top: 0;
z-index: 10;
}
Formulaires de saisie
.exampleTitre.panel h2select.XXXXXXXinput.XXXXXXXlabelfieldset legendfieldset
Exemple CSS centre d'admin
.panel h2 {
color: #FFA200;
font-size: 1.2em;
margin: 0 0 0.5em;
padding: 0;
}
/*** Aide ***/
.exampleTitre {
color: #808080;
margin-bottom: 0.5em;
}
/*** Panneau de champs ***/
fieldset {
background: #EFEFEF none repeat scroll 0 0;
border: 1px solid #CCCCCC;
display: block;
margin-bottom: 1em;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
position: relative;
top: 5px;
}
/*** Titre du panneau de champs ***/
fieldset legend {
color:#99CC00;
font-weight: bold;
margin: 0;
padding: 0;
text-align: left;
vertical-align: middle;
}
label {
cursor: pointer;
}
/*** Format des champs saisissables ***/
input.formField,
input.formFieldRequired,
input.paylineField,
input.paylineFieldDate,
input.paylineFieldDateSmall,
input.paylineFieldDatePadding,
input.paylineFieldLong,
input.paylineFieldCard,
input.paylineFieldMiddle,
input.paylineFieldCheck,
input.formFieldLongest,
input.paylineFieldLongest,
input.paylineFieldSpecial {
border: 1pxsolid #BEBFBE;
color: #222222;
}
/*** Format des listes déroulantes ***/
select.formField,
select.formSelect,
select.paylineField,
select.paylineFieldGrey,
select.paylineFieldQualif,
select.paylineFieldLong {
border:1px solid #BEBFBE;
}
Tableau de résultats
.displayTag td.displayTag thead tr th.displayTag2 thead tr th.displayTag tr.even
.displayTag2 tr.even.displayTag tr.odd
.displayTag2 tr.odd.resumeCritereTotal.resumeCritere.resumeCritereBold.tableResume
Exemple CSS centre d'admin
.tableResume {
background: #EEDCDC none repeat scroll 0 50%;
border: 1px solid #C0C0C0;
border-collapse: collapse;
margin-bottom: 5px;
margin-top: 5px;
width: 100%;
}
/*** Rappel des criteres ***/
.resumeCritereBold {
color:#444444;
font-weight:bold;
height:20px;
width:14%;
}
/*** Résumé des criteres ***/
resumeCritere {
color:#EE4444;
height:20px;
text-align:left;
}
/*** Nombr d'element dans la liste ***/
.resumeCritereTotal {
color:#444444;
height:20px;
text-align:right;
width:20%;
}
/*** table header ***/
.displayTag thead tr th,.displayTag2 thead tr th {
background: transparent url(images/jaune.gif) repeat-x scroll left top;
border: 1px solid #BEBFBE;
color: #000066;
font-weight: bold;
padding: 5px;
text-align: center;
width: auto;
}
/*** odd line ***/
.displayTag tr.odd,.displayTag2 tr.odd {
background: #FFFFFF none repeat scroll 0 0;
border-top: 1px solid #C0C0C0;
color: #000000;
padding: 0;
}
/*** even line ***/
.displayTag tr.even,.displayTag2 tr.even {
background: #EEEEEE none repeat scroll 0 0;
border-top: 1px solid #C0C0C0;
color: #000000;
padding: 0;
}
/*** Table cells ***/
.displayTag td {
border: 1px solid #C0C0C0;
padding: 2px 15px 2px 10px;
}
Messages d'erreur
Exemple CSS centre d'admin
ul#pagemessages li.success {
background: transparent url(images/accept.gif) no-repeat scroll 0 0;
}
Messages de confirmation
Exemple CSS centre d'admin
ul#pagemessages li.error {
background: transparent url(images/exclamation.gif) no-repeat scroll 0 0;
}
Personnalisation des CSS des pages web de paiement
Cette section montre les principales balises CSS utilisées pour personnaliser les pages web de paiements.
Ces réglages sont le visuel par défaut des commerçants. Les commerçants peuvent aussi personnaliser les pages web via la personnalisation simple (voir le manuel utilisateur du centre d'administration) ou via les template de pages web dynamiques (voir le guide configuration avancée des pages web de paiement).
La CSS complète des pages web de paiement est disponible à l'adresse :
https://homologation-webpayment.payline.com/webpayment/skin/default/all.css
Messages d'erreur et de confirmation
#PaylineForm #pagemessages p.error
#PaylineForm #pagemessages p.info
#PaylineForm #pagemessages p.warn
#PaylineForm #pagemessages p.success
#PaylineForm #pagemessages p.confirm {
}#PaylineForm #pagemessages
Exemple CSS des pages web de paiement
#PaylineForm #pagemessages {
}
/*** Pictogramme et libellé de l'erreur (e.g : "Merci de renseigner un numéro de carte valide") ***/
#PaylineForm #pagemessages p.error {
}
#PaylineForm #pagemessages p.info {
}
#PaylineForm #pagemessages p.warn {
}
#PaylineForm #pagemessages p.success {
}
#PaylineForm #pagemessages p.confirm {
}
#PaylineForm h2
#PaylineForm #submitButton#PaylineForm h3#PaylineForm .pane
Exemple CSS des pages web de paiement
#PaylineForm h2 {
}
/*** Bloc de formulaire ***/
#PaylineForm .pane {
}
/*** Titre section de formulaire (e.g. "Veuillez sélectionner votre moyen de paiement") ***/
#PaylineForm h3 {
}
/*** Bouton de validation (e.g. « Valider ») ***/
#PaylineForm #submitButton {
}
Page de choix du moyen de paiement avec portefeuille virtuel
#walletCard div.label#walletCard div.content#walletCard
Exemple CSS des pages web de paiement
#walletCard {
}
/*** Tableau de données portefeuille, cellules d'en-tête (e.g. « Titulaire ») ***/
#walletCard div.label {
}
/*** Tableau de données portefeuille, cellules de données (e.g. « 111122XXXXXX4444 ») ***/
#walletCard div.content {
}
Page de saisie de données de paiement
#card div.content a #card input[type=text]#card div.label#card div.labelLogo tlabel#card div.content
#PaylineForm #cancelButtonExemple CSS des pages web de paiement
#PaylineForm #cancelButton {
}
/*** formulaire de saisie : cellules d'en-tête de « Type de carte » ***/
#card div.labelLogo {
}
/*** formulaire de saisie : libellés de champs de formulaires (e.g. « Numéro de carte ») ***/
#card div.label {
}
/*** formulaire de saisie : cellules de champs de formulaire ***/
#card div.content {
}
/*** formulaire de saisie : champs de formulaire (eg. numéro de carte) ***/
#card input[type=text] {
}
/*** formulaire de saisie : lien (eg. « Plus d'informations ») ***/
#card div.content a {
}
Page de résultat du paiement
#actionLinks a#actionLinks a:hover#ticket
#PaylineForm #submitButton
Exemple CSS des pages web de paiement
#ticket {
}
/*** Bouton de retour ***/
#PaylineForm #submitButton {
}
/*** Liens de bas de page ***/
#actionLinks a {
}
#actionLinks a:hover {
}
Page de résultat du paiement avec échéancier
table.billList tdtable.billList thtable.billList h3table.billList h3
Exemple CSS des pages web de paiement
table.billList h3 {
}
/*** Echéancier ***/
table.billList {
}
/*** En-têtes échéancier ***/
table.billList th {
}
/*** Cellules échéancier ***/
table.billList td {
}
Personnalisation des CSS du TPEV
Cette section vise montre les styles principaux pour personnaliser les pages du TPEV.
La CSS complète des pages web de paiement est disponible à l'adresse :
https://homologation-tpv.payline.com/tpev/themes/basic/all.css
Page d'accueil
div#top h1div#remoteuserul.linkList liul.linkListh2h1
a:visited
a: hover
a, a:link
Exemple CSS du TPEV
float: right;
text-align: right;
}
div#top h1 {
color: #AAAAAA;
font-size: 1.2em;
font-weight: bold;
margin-top: 0;
width: 60%;
}
h1 {
color:black;
font-size:1.6em;
line-height:1em !important;
margin:0;
padding:0;
}
h2 {
font-size:1.1em;
margin:1.1em 0;
}
ul.linkList {
background:#EFEFEF none repeat scroll 0 0;
border:1px solid #CCCCCC;
margin:0;
padding:1em 1em 0;
}
ul.linkList li {
margin:0;
padding-bottom:1em;
}
a:visited {
}
a:hover {
text-decoration:none;
}
a, a:link {
color:blue;
text-decoration:underline;
}
/*** reglages generaux (police, couleur…) ***/
body {
background:white none repeat scroll 0 0;
color:black;
font-family:Tahoma,sans-serif !important;
font-size:76%;
margin-top:0;
}
Messages d'erreur et de confirmation
#pagemessages p.error#pagemessages p.info
#pagemessages p.warn
#pagemessages p.success
#pagemessages p.confirm#PaylineForm #pagemessages
Exemple CSS du TPEV#pagemessages {
background: #FFFFEE none repeat scroll 0 0;
border: 1px solid #BBBBBB;
margin: 0.5em 0;
padding: 0.5em;
}
#pagemessages p {
color: black;
line-height: 16px;
margin: 0;
padding-left: 21px;
}
#pagemessages p.error {
background: transparent url(img/exclamation.png) no-repeat scroll 0 0;
}
#pagemessages p.info {
background: transparent url(img/information.png) no-repeat scroll 0 0;
}
#pagemessages p.warn {
background: transparent url(img/error.png) no-repeat scroll 0 0;
}
#pagemessages p.success {
background: transparent url(img/accept.png) no-repeat scroll 0 0;
}
#pagemessages p.confirm {
background: transparent url(img/help.png) no-repeat scroll 0 0;
}
Formulaire de saisie
input[type="submit"]labellabel.requiredinput[type="text"]fieldset#defaultSubmit
Exemple CSS du TPEV
background: #EFEFEF none repeat scroll 0 0;
border: 1px solid #CCCCCC;
margin: 0.5em 0 0;
}
input[type="text"] {
}
#defaultSubmit {
font-weight: bold;
}
input[type="submit"] {
}
label.required {
background: transparent url(img/required.label.flag.gif) no-repeat
scroll 0 0.25em;
padding-left: 8px;
}
label {
cursor: pointer;
}
Page de saisie d'un paiement avec échéancier
table.report th,table.report tdtable.form tdtable.form thtable.report td.number
table.report thead th
Exemple CSS du TPEV
border-top: medium none;
}
table.report td.number {
text-align: right;
}
table.report th,table.report td {
border: 1px solid #EFEFEF;
line-height: 1.3em;
padding: 0 0.5em;
text-align: center;
}
table.form td,table.form th {
line-height: 1.8em;
}
Page de résultat de paiement
table.ticketDélégation Verisign pour la création des certificats
Domain Authorization Letter TemplateDate ____________
Dear VeriSign
I confirm and warrant that:
Certificate Applicant is _____________________________________________ ("Certificate Applicant")
Domain to be included in the certificate is _______________________________ ("Domain")
Registrant of the Domain is __________________________________________ ("Registrant")
I am the registrant (and/or employed by the Registrant) and am duly authorized to sign this Domain Release Letter and to deal with all matters related to the registration of the Domain.
VeriSign, Inc. ("VeriSign") recently received a request from Certificate Applicant to issue one or more Digital Certificate(s) under Certificate Applicant's name. Certificate Applicant desires to install the Digital Certificate on its web server(s) for the domain and ultimately to enable secure communications with its users.
Registrant acknowledges that it has granted Certificate Applicant the right to use the Domain as a common name in the Digital Certificate request referenced above and to otherwise use the Domain in connection with its business.
Registrant agrees that VeriSign may continue to renew the Applicant's certificate on or before expiration without further confirmation from Registrant. Registrant further agrees to request VeriSign to revoke the Applicant's certificate(s) in the event the Applicant is no longer entitled to use the Domain or domain ownership is transferred to a third party who is not the Applicant.
Registrant agrees to indemnify VeriSign and its directors, officers, agents, employees, contractors, parents, affiliates, or subsidiaries (collectively, the "Indemnified Parties") and hold the Indemnified Parties harmless from and against any losses, costs, damages, and fees (including reasonable attorney's fees) incurred by the Indemnified Parties in connection with: (a) Any breach by Registrant of any representation or obligation under this letter or any domain name registration agreement between Registrant and the Registry governing the Domain name registration; or (b) Acts or omissions, the use of any product or service provided by Registrant, or any other item furnished by Registrant to the Applicant related to the use of the Digital Certificate (collectively, the "Indemnity Conditions"). Upon appropriate notice, Registrant shall defend, at its expense, any claim brought against one of more of the Indemnified Parties based on or arising out of one or more of the Indemnity Conditions.
Regards,
Full name:
Job Title:
Signature:
[To be signed by the Domain Registrant or an employee of the registrant] suivantes