Content

More information 


Style sheet

To get the formatting of the payment form, you need to integrate the CSS Payline stylesheet by adding the following line in the <head> tag:

<link href="https://homologation-payment.cdn.payline.com/cdn/styles/widget-min.css" rel="stylesheet" />


Script and CSS URLs are different between test and production environments. We recommend that you configure them in environment variables.


CSS customization

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:

DescriptionParameter
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 to 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 list of tags, please find the information here.



Linked pages