How to customize Pay Station
How it works
You can set up the payment UI appearance by customizing the following parameters:
- Location on the screen
- Theme
- Size
- Background
- Preloader
You can set up UI parameters via the token and the widget integration script.
How to get it
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' or 'default_dark'. |
| settings.ui.size | string | Payment UI size. Can be:
|
| 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:
| 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. |
Was this article helpful?
Thank you for your feedback!
We'll review your message and use it to help us improve your experience.