Arborescence des pages

Vous regardez une version antérieure (v. /display/DT/PW+-+Personnalisation+du+widget+%3A+JQuery) de cette page.

afficher les différences afficher l'historique de la page

Vous regardez la version actuelle de cette page. (v. 1) afficher la version suivante »

Contenu



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();



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>'));

(avertissement)  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.



En Jquery

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


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 :

  • width minimum de la div PaylineWidget : 500px
  • width maximum conseillée de la div PaylineWidget : 900px

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 
{ display: none;} .PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container
 { margin-left: 0; }
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
{ width: xx%; } .PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container,
.PaylineWidget.pl-container-default .pl-form-container label.pl-remember-container
{ margin-lef: yy%; }

Pour obtenir plus d'information sur la liste des balises CSS, veuillez trouver les informations ici.


  • Aucune étiquette