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.
ParameterTypeDescription
settings.ui.themestringPayment UI theme. Can be 'default' or 'default_dark'.
settings.ui.sizestringPayment 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)
settings.ui.desktop.header.visible_logobooleanIf 'true', the header will show your logo (first provide the image to your account manager).
settings.ui.desktop.header.visible_purchasebooleanWhether 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.widthstringLightbox frame width. If null, depends on Pay Station width. Default is null.
lightbox.heightstringLightbox frame height. If null, depends on Pay Station height. Default is '100%'.
lightbox.zIndexintegerDefines arrangement order. Default is 1000.
lightbox.overlayOpacityintegerOverlay opacity (0 to 1). Default is '.6'.
lightbox.overlayBackgroundstringOverlay background color. Default is '#000000'.
lightbox.contentBackgroundstringFrame 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.spinnerstringType of animated loading indicator. Can be 'xsolla' or 'round'. Default is 'xsolla'.
lightbox.spinnerColorstringSpinner color. No default value.

Continue reading