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

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:

#PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; }

#PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; }

#PaylineWidget .pl-header-title-content p { color: #ABCDEF; }

#PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; }

#PaylineWidget .pl-body { background-color: #ABCDEF; }

#PaylineWidget .pl-pmContainer {
  background-color: #ABCDEF;
  border-color: #ABCDEF; }

#PaylineWidget .pl-icon-close { color: #ABCDEF; }

.PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input 
   { display: none;}
.PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container
   { margin-left: 0; }

.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 :

Les pages associées

• Page:
  Intégration 3D Secure 2 en mode API WebPayment
• Page:
  Intégration API WebPayment
• Page:
  PW - Intégration Widget
• Page:
  PW - L'API JavaScript
• Page:
  PW - Personnalisation du widget : Balises CSS
• Page:
  PW - Personnalisation du widget : Feuille de style
• Page:
  PW - Personnalisation du widget : Fonction CallBack