Page tree
Skip to end of metadata
Go to start of metadata

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


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

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



 Exemple...
Code HTML
function executeCancelAction() {

// Récupération de l'url d'annulation donnée dans le DoWebPayment
var cancelUrl = Payline.Api.getCancelAndReturnUrls().cancelUrl;

//Execution du endToken qui informe Payline de l'abandon de l'utilisateur
Payline.Api.endToken(null, function() {
  //Redirection vers l'url d'annulation
  window.location.href = cancelUrl;
  }, null, false);
}


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.




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

1 Comment

  1. Dé-commissionnement de la librairie JS obsolète pour des raisons de mise en conformité PCI-DSS : support.payline.com

    - En homologation, la suppression aura lieu le 17/06.
    - En production ce sera prévue pour le 08/07.