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.
Note
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.
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 (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:| Parameter | Type | Description |
|---|---|---|
payment_widget_ui.lightbox.width | string | Lightbox frame width. If null, depends on Pay Station width. Default is null. |
payment_widget_ui.lightbox.height | string | Lightbox frame height. If null, depends on Pay Station height. Default is 100%. |
payment_widget_ui.lightbox.zIndex | integer | Defines arrangement order. Default is 1000. |
payment_widget_ui.lightbox.overlayOpacity | integer | Opacity of the widget’s background (0 — completely transparent, 1 — completely opaque). The default value is 60% (.6). |
payment_widget_ui.lightbox.overlayBackground | string | Overlay background color. Default is #000000. |
payment_widget_ui.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. |
payment_widget_ui.lightbox.spinner | string | Type of animated loading indicator. Can be xsolla or round. Default is xsolla. |
payment_widget_ui.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.Found a typo or other text error? Select the text and press Ctrl+Enter.
