Customization via JQuery

or 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éderIt is possible to add   jQuery in the page, only to carry out your customization. For this you can add the jQuery library to access it. 

<script src="ma_version_de_jquery" charset="utf-8"></script>

Exemple avec la dernière version Example with the latest 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 Then you can call the JQuery functions to make your modifications:

$('.pl-wallets-title').remove();
$('.pl-container-title').remove();

Lors de la personnalisation When customizing via JQuery ou en or 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 

you must use exclusively classes because  the IDs of the objects are generated on display and they can change their name.

Example 

The L'object pl-pm-cards_5-view peut très bien devenir object can very well become  pl-pm-cards_4-view après un raffraichissement de la  after refreshing the page.

Dans ce cas, il faut préconiser des sélecteurs multiples via les classes afin de retrouver les objets.

In this case,  it is necessary to recommend multiple selectors via the classes in order to find the objects.

Example a class selectorExemple 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

This selector will allow you to select the same object but without the risk of changing the object ID.

Example of customization

Example to modify the caption on the Pay button

• You can change it via the JavaScript instruction $ ('. PlVous pouvez le changer via l’instruction JavaScript $('.pl-pay-btn'). textText ('libellé du bouton button label ');

Exemple pour modifier le libellé sur bouton Payer

Example to modify the caption on the Pay button

• You must retrieve the amount in the buyer's language via a call to the Vous devez récupérer le montant dans la langue de l’acheteur via un appel à la fonction Payline.Api.getContextInfo ('PaylineFormattedAmount') ;function;
• You can modify the button text with the function: $ ("<class of element to modify>"). Text ('<replacement text>Vous pouvez modifier le texte du bouton avec la fonction : $("<classe de l’élément à modifier>").text('<texte de remplacement>'));

  Be careful, always use classes for these instructions, never the id of the element which is generated on the fly.

• To display the amount in the button. The instruction is therefore 

• Pour afficher le montant dans le bouton. L’instruction est donc$ (". PaylineWidget .pl-pay-btn, .PaylineWidget .pl-btn"). textText ('Payer Pay' + Payline.Api.getContextInfo ('PaylineFormattedAmount'));
• Cette instruction doit être appelée lorsque le widget déclenche l’événement « didshowstate » avec l’état This statement should be called when the widget raises the " didshowstate " event with the PAYMENT_METHODS_LIST. state .

Example to create a payment cancellation link, call this method by clicking on a link or buttonExemple 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 simplesCustomizing the style of the payment form is possible by overriding the stylesheet provided by default by Payline. The customization possibilities are endless, here are some simple examples:

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

For more information on the CSS tag list, please find the information here. 

Personalization tags

The available tags are as follows:

Linked pages

Les balises de personnalisation

Les balises disponibles sont les suivantes :

Contenu par étiquette
showLabels false max 9 showSpace false sort title cql label = "fren" and label = "widget" and label = "integration"