How to customize Pay Station

How it works

You can set up the payment UI appearance by customizing the following parameters:

You can set up UI parameters via the token and the widget integration script.

See the full list of parameters.

You can use the ready-to-use payment UI themes (light or dark) or create your own theme. To create your own theme, refer to these instructions.

To customize the payment UI via the token, change the parameters of the settings.ui object:

Parameter	Type	Description
settings.ui.theme	string	Payment UI theme. Can be `default` (light theme by default) or `default_dark` (dark theme).
settings.ui.desktop.header.visible_logo	boolean	If `true`, the header will show your logo (first provide the image to your Customer Success Manager).

To customize the widget, change the parameters of the lightbox object:

See the full list of widget initialization parameters.

Parameter	Type	Description
lightbox.width	string	Lightbox frame width. If `null`, depends on Pay Station width. Default is `null`.
lightbox.height	string	Lightbox frame height. If `null`, depends on Pay Station height. Default is `100%`.
lightbox.zIndex	integer	Defines arrangement order. Default is `1000`.
lightbox.overlayOpacity	integer	Overlay opacity (0 to 1). Default is `6`.
lightbox.overlayBackground	string	Overlay background color. Default is `#000000`.
lightbox.contentBackground	string	Frame background color. Default is `#ffffff`. Note that these color changes do not affect the Pay Station iframe itself, only the settings of the lightbox that hold it.
lightbox.spinner	string	Type of animated loading indicator. Can be `xsolla` or `round`. Default is `xsolla`.
lightbox.spinnerColor	string	Spinner color. No default value.

Thank you for your feedback!

We’ll review your message and use it to help us improve your experience.

Rate this page

Don’t want to answer

Last updated: October 10, 2023

Found a typo or other text error? Select the text and press Ctrl+Enter.