How to customize Pay Station

Contents

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.
ParameterTypeDescription
settings.ui.theme
stringPayment UI theme. Can be default or default_dark.
settings.ui.size
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).
settings.ui.desktop.header.visible_purchase
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.
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
integerOverlay opacity (0 to 1). Default is .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: May 14, 2021

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!