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.

API reference
See the full list of parameters.
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:

ParameterTypeDescription
settings.ui.theme
stringPayment UI theme. Can be default (light theme by default) or default_dark (dark theme).
booleanIf 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:
API reference
See the full list of widget initialization parameters.
ParameterTypeDescription
lightbox.width
stringLightbox frame width. If null, depends on Pay Station width. Default is null.
lightbox.height
stringLightbox frame height. If null, depends on Pay Station height. Default is 100%.
lightbox.zIndex
integerDefines arrangement order. Default is 1000.
lightbox.overlayOpacity
integerOpacity of the widget’s background (0 — completely ​​transparent, 1 — completely opaque). The default value is 60% (.6).
lightbox.overlayBackground
stringOverlay background color. Default is #000000.
lightbox.contentBackground
stringFrame 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
stringType of animated loading indicator. Can be xsolla or round. Default is xsolla.
lightbox.spinnerColor
stringSpinner color. No default value.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!
Last updated: January 22, 2024

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

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!