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>'));
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 :
function executeCancelAction() { // Récupération de l'url d'annulation donnée dans le DoWebPayment var cancelUrl = Payline.Models.Contexts.ContextManager.getCurrentContext().getCancelUrl(); //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
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 |