Payment UI theme customization
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.
Configure customization in Publisher Account
- Open your project in Publisher Account and go to the Pay Station > UI theme section.
- Click Create new theme.
- Click the pencil icon to change the theme name.
- 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.
- To configure font size, go to the Typography tab. Using the corresponding fields, you can change the font size of the following UI elements:
Field | UI element |
---|---|
Title 1 | Heading on the payment status page. |
Title 2 | Total amount value. |
Title 3 | Section headings (e.g., Payment via card). |
Title 4 | Currently, it is not used. |
Body L |
|
Body M |
|
Minor text |
|
Heading | Currently, it is not used. |
- To configure border width and corner radius of UI elements, go to the Borders tab and make changes.
Maximum corner radius — 16 px.
- To see how a theme looks like on mobile and desktop versions of the payment UI, switch between tabs in the Preview section.
- To see different states of the payment UI, switch between the Payment by card, Payment methods, and Payment status tabs.
- Click Publish.
- 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.
- Click Publish.
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.
Was this article helpful?
Rate this page
Don’t want to answer
Thank you for your feedback!
Found a typo or other text error? Select the text and press Ctrl+Enter.