Page tree

Customizing the style of the widget payment form is possible by overloading the default style sheet provided by Payline.

The customization functions of the Widget in lightbox mode and in-shop mode (tab / column).

CSS attributes for Widget integration:

       public static STYLE_ELEMENT_KEYS = ["font-size", "font-family", "font-weight", "font-style", "color", "padding-top",

            "padding-right", "padding-bottom", "padding-left", "text-transform", "text-decoration", "letter-spacing", "word-spacing",

            'line-height', 'text-align', 'vertical-align', 'direction', 'background-color',

            'background-image', 'background-repeat', 'background-position', 'background-attachment', 'opacity', 'margin-top',

            'margin-left', 'margin-right', 'margin-bottom'];

The detail of the class list:

Sets the character size of the element.font-size
Sets the font family to use to display the content.font-family
Sets the thickness of the font to apply to the element.font-weight
Determines whether the item should be displayed in normal, italic, or oblique characters.font-style
Sets the color of the text displayed in the foreground of the item.color
These four properties make it possible to define individually the filling to be applied to each side of an element.padding-top, padding-bottom, padding-right, padding-left
Controls the capitalization of the text of an element.


Sets the enhancements to apply to the content of an item (underline, strikethrough, top bar, and blink).


Sets the spacing between characters within an element.


Sets the spacing between words when the text is not subject to external spacing rules.


Sets the height of the area containing a physical line of the content.


Determines the horizontal alignment of the text within an element.text-align
Two values, top and bottom , determine the placement of the text within this frame.vertical-align
Defines the display direction of embedded content items and the order of filling table cells on a line.direction
Sets the background color of the element.background-color
Sets the background image to associate (if any) with the element.background-image
Indicates whether or not to repeat the background image.background-repeat
Sets the location of the left edge and the top edge of the background image.background-position
Set whether the image scrolls relative to the document.background-attachment
The opacity of an element is the opposite of its transparencyopacity
Define the margins of an element.margin-top, margin-top, margin-left, margin-right, margin-bottom