How to customize Pay Station

Contents

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.

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

See the full list of parameters.

Parameter	Type	Description
settings.ui.theme	string	Payment UI theme. Can be `default` or `default_dark`.
settings.ui.size	string	Payment UI size. Can be: small: the least possible size of the payment UI. Use this value when the window size is strictly limited (dimensions: 620 x 630) medium: recommended size. Use this value to display the payment UI in a lightbox (dimensions: 740 x 760) large: the optimal size for displaying the payment UI in a new window or tab (dimensions: 820 x 840)
settings.ui.desktop.header.visible_logo	boolean	If `true`, the header will show your logo (first provide the image to your account manager).
settings.ui.desktop.header.visible_purchase	boolean	Whether to show the purchase description (`purchase.description.value`) in the header. `true` by default.

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: August 8, 2022

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