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:
API reference
See the full list of parameters.
stringPayment UI theme. Can be default or default_dark.
stringPayment 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)
booleanIf true, the header will show your logo (first provide the image to your account manager).
booleanWhether 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:
API reference
See the full list of widget initialization parameters.
stringLightbox frame width. If null, depends on Pay Station width. Default is null.
stringLightbox frame height. If null, depends on Pay Station height. Default is 100%.
integerDefines arrangement order. Default is 1000.
integerOverlay opacity (0 to 1). Default is .6.
stringOverlay background color. Default is #000000.
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.
stringType of animated loading indicator. Can be xsolla or round. Default is xsolla.
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: August 8, 2022

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!