Documentation Monext Online

Arborescence des pages

Content



Customization via JQuery or CSS

JQuery


It 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>

Example with the latest version:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf-8"></script>

Then you can call the JQuery functions to make your modifications:

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


When customizing via JQuery or CSS, you must use exclusively classes because  the IDs of the objects are generated on display and they can change their name.

Example 

The pl-pm-cards_5-view object can very well become  pl-pm-cards_4-view after refreshing the page.

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

Example a class selector

.pl-paymentMethods.pl-cb.pl-paymentMethod-view

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 $ ('. Pl-pay-btn'). Text (' button label ');


Example to modify the caption on the Pay button

  • You must retrieve the amount in the buyer's language via a call to the Payline.Api.getContextInfo ('PaylineFormattedAmount') function;
  • You can modify the button text with the function: $ ("<class of element to modify>"). Text ('<replacement text>'));

(avertissement)  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 $ (". PaylineWidget .pl-pay-btn, .PaylineWidget .pl-btn"). Text ('Pay' + Payline.Api.getContextInfo ('PaylineFormattedAmount'));
  • 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 button




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

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

Description

Paramètre

The color of the banner
#PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; }
The color of the text of the sign
#PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; }
The text color of the amount paid
#PaylineWidget .pl-header-title-content p { color: #ABCDEF; }
The color of the payment button
#PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; }
The background color of the form
#PaylineWidget .pl-body { background-color: #ABCDEF; }
The color of the payment method area
#PaylineWidget .pl-pmContainer {
  background-color: #ABCDEF;
  border-color: #ABCDEF; }
The color of the button close the lightbox
#PaylineWidget .pl-icon-close { color: #ABCDEF; }

The window size is optimized in the following configuration:

  • minimum width of the PaylineWidget div: 500px
  • maximum recommended width of the PaylineWidget div: 900px

Below and above the dimensions indicated, it is recommended to adjust the margins and fields.

To hide the labels, you must remove the labels and remove the left margin of the controls.

.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 proposes to reduce the margins in order to adjust the window above 900px wide, for that it is enough to decrease the width of the label (xx%), and to decrease the margin to the left of the fields (yy% by default 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%; }

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




Personalization tags


The available tags are as follows:

Key
#PaylineOrderRef#
#PaylineOrderDate#
#PaylineFormattedAmount#
#PaylineOrderDeliveryMode#
#PaylineOrderDeliveryTime#
#PaylineBuyerEmail#
#PaylineBuyerLastName#
#PaylineBuyerFirstName#
#PaylineBuyerMobilePhone#
#PaylineBuyerIp#
#PaylineBuyerShippingAddress.name#
#PaylineBuyerShippingAddress.street1#
#PaylineBuyerShippingAddress.street2#
#PaylineBuyerShippingAddress.cityName#
#PaylineBuyerShippingAddress.zipCode#
#PaylineBuyerShippingAddress.country#
#PaylineBuyerShippingAddress.phone#

De-commissioning of the obsolete JS library for PCI-DSS compliance reasons: support.payline.com

- In homologation, the deletion will take place on 06/17.
- In production it will be scheduled for 07/08.

Linked pages