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