Payment UI theme customization

Contents

How it works

By default, two themes are available for the payment UI: light and dark. To switch between these themes without using the customizer, pass default or default_dark in the settings.ui.theme parameter when getting the token.

To match the payment UI with the game design, you can create a custom theme and configure the following characteristics:

  • colors of UI elements
  • font size
  • boarder width and corner radius of UI elements

You can use a custom theme by default for all your projects in Publisher Account. If you want to use another theme for a particular game, pass these settings in the token.

Notice
Theme configurations passed in token take priority over the ones set in Publisher Account.

Configure customization in Publisher Account

Note
You can create a custom theme in one project and use it across all of your projects in this Publisher Account.

  1. Open your project in Publisher Account and go to the Pay Station > UI theme section.

  1. Click Create new theme.
  2. Click the pencil icon to change the theme name.

  1. To change colors of UI elements, go to the Colors tab. You can change color palette for surfaces, texts, and controls, as well as colors that appear in status notifications.

  1. To configure font size, go to the Typography tab. Using the corresponding fields, you can change the font size of the following UI elements:

FieldUI element
Title 1Heading on the payment status page.
Title 2Total amount value.
Title 3Section headings (e.g., Payment via card).
Title 4Currently, it is not used.
Body L
  • subsection headings
  • headings in instructions for cash payments
  • button copy
  • Total copy
Body M
  • project name (it is displayed when there is no project logo)
  • text in tooltips and descriptions
  • message on the payment status page
  • text in the list of payment methods (the drop-down list in the mobile version)
Minor text
  • user name
  • legal texts
  • information in the cart (e.g., an item name, VAT amount)
HeadingCurrently, it is not used.

  1. To configure border width and corner radius of UI elements, go to the Borders tab and make changes.

Note
Maximum border width — 3 px.
Maximum corner radius — 16 px.

  1. To see how a theme looks like on mobile and desktop versions of the payment UI, switch between tabs in the Preview section.

Notice
Buttons and links don’t work in ‌preview mode.

  1. To see different states of the payment UI, switch between the Payment by card, Payment methods, and Payment status tabs.

  1. Click Publish.
  2. To apply this theme to all your projects in Publisher Account, set the Set as default toggle to On in the modal window that opens. It will not affect projects where the theme is passed in the token.
  3. Click Publish.

Notice
After the theme is published, you can return to editing it at any time. The theme will not be applied to the payment UI unless you set it as the default theme or enable it using the token settings.

On the UI theme tab, when you click ••• in the block of a particular theme, the following quick actions are available:

  • Customize — open the customizer to make changes.
  • Edit — change a theme name and set the Set as default toggle to On or Off.
  • Duplicate — duplicate a theme to create a new one based on it.
  • Delete theme.

Pass custom UI theme settings in token

To apply custom settings to a particular game, pass the ID of the published custom theme in the settings.ui.theme parameter when creating the token.

You can find the theme ID:

  • In the list of all themes on the UI theme tab.

  • In the customizer, under the theme name.

Notice
Theme configurations passed in token take priority over the ones set in Publisher Account.
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: March 21, 2023

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!