Personnalisation via JQuery ou CSS
JQuery
Il est possible d’ajouter jQuery dans la page, uniquement pour réaliser votre customisation. Pour cela vous pouvez ajouter la librairie jQuery pour y accéder.
<script src="ma_version_de_jquery" charset="utf-8"></script>
Exemple avec la dernière version :
<script src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf-8"></script>
Ensuite vous pouvez appeler les fonctions JQuery pour réaliser vos modifications :
$('.pl-wallets-title').remove();
$('.pl-container-title').remove();
Lors de la personnalisation via JQuery ou en CSS, il faut utiliser exclusivement des classes car les ID des objects sont générés à l'affichage et ils peuvent changer de nom.
Exemple
L'object pl-pm-cards_5-view peut très bien devenir pl-pm-cards_4-view après un raffraichissement de la page.
Dans ce cas, il faut préconiser des sélecteurs multiples via les classes afin de retrouver les objets.
Exemple un sélecteur de classe
.pl-paymentMethods.pl-cb.pl-paymentMethod-view
Ce sélecteur permettra de sélectionner le même objet mais sans risque de changement d'ID d'objet.
Exemple de personnalisation
Exemple pour modifier le libellé sur bouton Payer :
- Vous pouvez le changer via l’instruction JavaScript $('.pl-pay-btn').text('libellé du bouton');
Exemple pour modifier le libellé sur bouton Payer :
- Vous devez récupérer le montant dans la langue de l’acheteur via un appel à la fonction Payline.Api.getContextInfo('PaylineFormattedAmount');
- Vous pouvez modifier le texte du bouton avec la fonction : $("<classe de l’élément à modifier>").text('<texte de remplacement>'));
Attention, toujours utiliser les classes pour ces instructions, jamais l’id de l’élément qui est généré à la volée.
- Pour afficher le montant dans le bouton. L’instruction est donc $(".PaylineWidget .pl-pay-btn, .PaylineWidget .pl-btn").text('Payer '+Payline.Api.getContextInfo('PaylineFormattedAmount'));
- Cette instruction doit être appelée lorsque le widget déclenche l’événement « didshowstate » avec l’état PAYMENT_METHODS_LIST.
Exemple pour pour créer un lien d'annulation du paiement, appeler cette méthode au click sur un lien ou bouton
Extrait |
---|
Développer | |||||||||
---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
CSS
title | En Jquery |
---|
Développer | ||
---|---|---|
| ||
Lors de la personnalisation via JQuery ou en CSS, il faut utiliser exclusivement des classes car les ID des objects sont générés à l'affichage et ils peuvent changer de nom. Exemple : L'object pl-pm-cards_5-view peut très bien devenir pl-pm-cards_4-view après un raffraichissement de la page. Dans ce cas, il faut préconiser des sélecteurs multiples via les classes afin de retrouver les objets. Exemple un sélecteur de classe : .pl-paymentMethods.pl-cb.pl-paymentMethod-view Ce sélecteur permettra de sélectionner le même objet mais sans risque de changement d'ID d'objet. |
CSS
title | En CSS |
---|
title | En CSS |
---|
Personnaliser le style du formulaire de paiement est possible en surchargeant la feuille de style fournit par défaut par Payline. Les possibilités de personnalisation sont infinies, voici quelques exemples simples:
Description | Paramètre |
---|---|
la couleur du bandeau Enseigne | #PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; } |
la couleur du texte de l'Enseigne | #PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; } |
la couleur du texte du montant à payer | #PaylineWidget .pl-header-title-content p { color: #ABCDEF; } |
La couleur du bouton de paiement | #PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; } |
La couleur de fond du formulaire | #PaylineWidget .pl-body { background-color: #ABCDEF; } |
La couleur de la zone moyen de paiement | #PaylineWidget .pl-pmContainer {
background-color: #ABCDEF;
border-color: #ABCDEF; } |
la couleur du bouton fermer la lightbox | #PaylineWidget .pl-icon-close { color: #ABCDEF; } |
La taille de la fenêtre est optimisée dans la configuration suivante :
Au dessous et au dessus des dimensions indiquées, il est préconisé d'ajuster les marges et champs. Pour cacher les labels, il faut supprimer les labels et supprimer la marge à gauche des champs. | .PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input |
Payline propose de réduire les marges afin d'ajuster la fenêtre au dessus de 900px de large, pour cela il suffit de diminuer la largeur du label (xx%), et de diminuer la marge à gauche des champs (yy% par défaut 30%). | .PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input |
Les balises de personnalisation
Les balises disponibles sont les suivantes :
Clé | Valeur |
---|---|
#PaylineOrderRef# | Référence de votre commande |
#PaylineOrderDate# | Date de votre commande |
#PaylineFormattedAmount# | Montant de votre commande |
#PaylineOrderDeliveryMode# | Mode de livraison |
#PaylineOrderDeliveryTime# | Date de livraison |
#PaylineBuyerEmail# | Email de l'acheteur |
#PaylineBuyerLastName# | Nom de famille de l'acheteur |
#PaylineBuyerFirstName# | Prénom de l'acheteur |
#PaylineBuyerMobilePhone# | Numéro mobile de l'acheteur |
#PaylineBuyerIp# | IP de l'acheteur |
#PaylineBuyerShippingAddress.name# | Nom de l'adresse |
#PaylineBuyerShippingAddress.street1# | Adresse |
#PaylineBuyerShippingAddress.street2# | Complément |
#PaylineBuyerShippingAddress.cityName# | Nom de la ville |
#PaylineBuyerShippingAddress.zipCode# | Code postal |
#PaylineBuyerShippingAddress.country# | Pays |
#PaylineBuyerShippingAddress.phone# | Téléphone |
Les pages associées
Contenu par étiquette | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|