Contenu
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.
La marque blanche, notions
Payline propose à ses distributeurs de mettre en marque blanche les différentes interfaces à destination des utilisateurs finaux (commerçants ou acheteurs). Ces interfaces sont :
- Le centre d'administration
- Les pages web de paiement
- Le terminal de paiement virtuel
La personnalisation en marque blanche permet de donner aux applications une identité propre. Cette personnalisation peut être faite par 3 moyens :
- Création d'URL spécifique d'accès aux applications (voir Création des URLs spécifiques ).
- Modification des logos (voir section Personnalisation des applications par le centre d'administration)
- Mise en place de feuilles de style (CSS) 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)
- Utilisation d'image personnalisée (voir Procédure de personnalisation des images des applications)
- Configuration des emails envoyés (voir Personnalisation du centre d'administration et Personnalisation des pages web de paiement)
Création des URLs spécifiques
URLs d'accès aux services
La mise en marque blanche des applications Payline nécessite la création d'URLs personnalisées. Ces URLs sont au nombre de 3*2 (3 pour la production et 3 pour homologation) pour accéder aux sites suivants :
- Centre d'administration Payline
- Pages web de paiement
- TPEV
Les web services Payline n'étant pas visible par les utilisateurs finaux, n'est pas personnalisable.
Environnement | Nom de l'application | Adresse IP du service | Exemple d'URLS |
Production | Centre d'administration | 194.5.120.176 | admin.payline.com |
Pages web de paiement | 194.5.120.178 | webpayment.payline.com | |
TPEV | 194.5.120.203 | tpv.payline.com | |
Homologation | Centre d'administration | 194.5.120.177 | homologation-admin.payline.com |
Pages web de paiement | 194.5.120.179 | homologation-webpayment.payline.com | |
TPEV | 194.5.120.204 | homologation-tpv.payline.com |
Certificat SSL
Payline assure une communication sécurisée entre ses clients (commerçants ou acheteurs) et les serveurs. Cela est réalisé par un cryptage fort des échanges de données en SSL V3.
Ce cryptage est assuré par des certificats SSL installés sur les serveurs Payline.
La génération de ces certificats est assurée par les soins de Monext. Les données nécessaires à la création des certificats sont :
- Délégation de création de certificats (Annexe 1)
- URLs de chaque application
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. |
Le cout de mise en place des certificats est disponible sur demande auprès du service commercial.
Personnalisation des chartes graphiques
Toutes les modifications des chartes se font par rapport aux URLs fournies pour accéder aux services. Ces URLs sont donc obligatoires et doivent être définie en premier lieu.
La résolution DNS des URLs doit être mise en place par le distributeur de la solution Payline. |
Personnalisation des applications par le centre d'administration
Payline propose la personnalisions des différentes applications de manière très simple et dynamique sur les écrans du centre d'administration.
La personnalisation est disponible depuis le menu « Configuration Mon Compte »
Écran de gestion du compte distributeur
Cet écran permet de visualiser les interface et options disponible pour le compte distributeur. Ces options peuvent être proposées par l'intermédiaire des offres commerciales aux commerçants (voir Gestion des offres commerciales).
Il permet également de configurer des éléments simples de votre compte distributeur.
Un 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 |
Un second regroupement de champs permet de visualiser les interfaces disponibles ainsi que de configurer (le cas échéant) les différents éléments de marque blanche de chaque interface.
L'activation des interfaces est possible via le contact commercial.
Centre d'administration |
Pages web de paiement |
Terminal virtuel de paiement |
Interface directe |
Un troisième regroupement de champs permet de visualiser les options disponibles.
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.
Personnalisation du centre d'administration
Cette page permet la personnalisation du centre d'administration.
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 |
Personnalisation des pages web de paiement
Cette écran permet de personnaliser les pages web de paiement ainsi que de créer des template de courriel envoyé lors des paiements.
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 |
Un second bloc permet la personnalisation des emails :
Langue | Cette liste déroulante permet de choisir une langue d'envoi des emails. La langue qui apparaît avec une étoile est la langue par défaut (si la langue de l'acheteur n'existe pas sur Payline, alors il recevra un email dans cette langue). | |
Langue par défaut | Cette case à cocher permet de choisir la langue par défaut. | |
De | Il s'agit de l'adresse mail émettrice de courriel. Le format de ce champ est de la forme suivante : nom@domaine.com ou pour mettre un alias « Paiement Payline <nom@domaine.fr> » | |
Cc | Cette zone permet l'envoie en copie cachée des emails à une (ou plusieurs) adresse données. Le format de ce champ est de la forme suivante : nom@domaine.com ou pour mettre un alias « Paiement Payline <nom@domaine.fr> ». Si la zone contient plusieurs adresses elles doivent être séparées par un point virgule | |
Inclure de ticket de caisse | Cette case à cocher définie si le ticket de caisse au format PDF doit être inclus en pièce jointe du mail envoyé a l'acheteur | |
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 | Il s'agit du logo du inséré dans la pièce jointe en PDF ainsi que dans le mail. Sa taille est de 100*30 pixels et son format doit être jpeg, gif, png ou bmp. | |
Sujet | Il s'agit du sujet de l'email. Il peut être paramétré de la même manière que le contenu du message. | |
Message | Il s'agit du corps du message. Il est possible de mettre du texte html et d'insérer des valeurs de manières dynamiques. Les variable disponibles sont présenté dans le tableau à droite et doivent être insérée entre « # » dans le texte. | |
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 |
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 |
Valider |
Annuler |
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 |
La liste complète des options et leur description est disponible auprès du service commercial.
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 |
Offre en cours de vente |
Offre nom vendue actuellement |
Rechercher l'offre d'un commerçant |
Rechercher |
Créer une nouvelle offre |
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 |
Nom de l'offre |
Coût d'activation |
Coût mensuel |
Nombre de commerçant |
Date de début |
Date de fin |
Détails |
Copier |
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 |
Devise de facturation |
Coût d'activation de l'offre |
Coût mensuel de l'offre |
Durée minimum d'engagement |
Coût fixe par transaction |
Pourcentage par transaction |
Nombre de transaction comprise dans l'offre |
Proposer l'offre à partir de … jusqu'au … |
Ne plus vendre cette offre |
La seconde pour la saisie d'options à inclure dans l'offre.
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 |
/*** Style bouton par defaut ***/ |
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 |
|
Formulaires de saisie
.exampleTitre.panel h2
select.XXXXXXXinput.XXXXXXXlabelfieldset legendfieldset
Exemple CSS centre d'admin |
|
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 |
/*** Zone de rappel des criteres ***/ |
Messages d'erreur
Exemple CSS centre d'admin |
ul#pagemessages li.success { |
Messages de confirmation
Exemple CSS centre d'admin |
ul#pagemessages li.error { |
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 |
/*** Bloc des messages ***/ |
Page de choix du moyen de paiement
#PaylineForm h2
#PaylineForm #submitButton#PaylineForm h3#PaylineForm .pane
Exemple CSS des pages web de paiement |
/*** Titre formulaire (e.g. "MOYEN DE PAIEMENT") ***/ |
Page de choix du moyen de paiement avec portefeuille virtuel
#walletCard div.label#walletCard div.content#walletCard
Exemple CSS des pages web de paiement |
/*** Tableau de données portefeuille, ***/ |
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 #cancelButton
Exemple CSS des pages web de paiement |
/*** Bouton d'annulation (e.g. « Retour ») ***/ |
Page de résultat du paiement
#actionLinks a
#actionLinks a:hover#ticket
#PaylineForm #submitButton
Exemple CSS des pages web de paiement |
/*** Police et taille du ticket ***/ |
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 |
/*** Titre échéancier ***/ |
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#remoteuser
ul.linkList liul.linkListh2h1
a:visited
a: hover
a, a:link
Exemple CSS du TPEV |
div#remoteuser { |
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 { |
Formulaire de saisie
input[type="submit"]labellabel.requiredinput[type="text"]fieldset
#defaultSubmit
Exemple CSS du TPEV |
fieldset { |
Page de saisie d'un paiement avec échéancier
table.report th,table.report tdtable.form tdtable.form th
table.report td.number
table.report thead th
Exemple CSS du TPEV |
table.report thead th { |
Page de résultat de paiement
table.ticket
Délégation Verisign pour la création des certificats
Domain Authorization Letter Template
Date ____________
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]
Procédure de personnalisation des images des applications
Les images de chaque peuvent être personnalisées. Les nouvelles images doivent être fournies par le distributeur. Elles doivent respecter scrupuleusement les contraintes suivantes :
- Même nom (et casse identique)
- Même extension
- Même taille en pixel
Les images qui ne sont pas fournies seront remplacées par les images par défaut.
La procédure d'envoi est la suivante :
- Packager les images dans un fichier admin.zip pour les images du centre d'administration
- Packager les images dans un fichier tpev.zip pour les images du TPEV
- Packager les images dans un fichier webp.zip pour les images des pages web de paiement
- Envoyer les fichiers à l'adresse mail assistance@payline.com l'email doit comporter en sujet « whitebrand picture » ainsi que le nom du disrtributeur dans le corps de l'email
- Les images seront mises à jour sur le site lors de la prochaine mise a jours des applications (1 mise a jour par mois).