Payment UI theme customization

How it works

There are two default themes available for the payment UI: light and dark. To switch between these themes without using the customizer, pass 63295a9a2e47fab76f7708e1 for the light theme or 63295aab2e47fab76f7708e3 for the dark theme 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:

You can use a custom theme as the default theme for all your projects in Publisher Account. If you want to specify different themes for individual games, pass these settings in the token.

Notice
Theme configurations passed in the token have priority over configurations specified 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 the colors of UI elements, go to the Colors tab. You can change the color palette for surfaces, texts, and controls, as well as colors that appear in status notifications.

  1. To set the font size, go to the Typography tab. Use the corresponding fields to 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 the 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 the game logo appears in the payment UI, in the Preview section, check the Show logo box. To set up the display of a game logo in the payment UI, pass the necessary parameters in the token.

  1. To see how a theme appears 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 edit it at any time. The theme is not 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.

Configure customization via API

Change layout

You can change the layout of the payment UI to adapt the payment UI to your game’s interface. To do this, pass the settings.ui.layout parameter when creating a token. This parameter can have the following values:

  • embed — in this case, the payment UI opens inside your game: the payment UI padding is cut off at the edges to fit other interface elements.

  • column_reverse — in this case, the order of the columns in the payment UI changes: information about payment methods is displayed on the left side, and information about an order on the right side.

  • embed_column_reverse — in this case, the payment UI opens inside your game and the order of the columns in the payment UI changes: information about payment methods is displayed on the left side, and information about an order on the right side.

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 the token have priority over configurations specified in Publisher Account.

To display a logo of your game in the payment UI:

  1. Upload an image in Publisher Account in the Pay Station > Settings > Customization section.

Note
Maximum file size: 1 MB.
Supported formats: JPEG, PNG, SVG.

  1. In the request to create a token, pass true in the settings.ui.desktop.header.is_visible and settings.ui.desktop.header.visible_logo parameters.

Example of displaying a game logo in the payment UI:

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: October 10, 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!