Кастомизация тем платежного интерфейса

Как это работает

По умолчанию для платежного интерфейса доступны две темы — светлая и темная. Для переключения между этими темами без использования кастомизатора передайте значение 63295a9a2e47fab76f7708e1 для светлой темы (по умолчанию) или 63295aab2e47fab76f7708e3 для темной темы в параметре settings.ui.theme при получении токена.

Чтобы платежный интерфейс соответствовал дизайну игры, вы можете создать собственную тему и настроить в ней следующие характеристики:

• цвета элементов интерфейса;
• размер шрифта;
• толщину границ и радиус скругления элементов интерфейса;
• макет;
• отображение логотипа игры.

Вы можете использовать собственную тему по умолчанию для всех ваших проектов в Личном кабинете. Если вы хотите, чтобы для конкретной игры была другая тема платежного интерфейса, передайте эти настройки в токене.

Настройка кастомизации в Личном кабинете

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Pay Station > Тема UI.

2. Нажмите Создать тему.
3. Нажмите значок карандаша, чтобы изменить название темы.

4. Чтобы настроить цвета элементов интерфейса, перейдите на вкладку Цвета. Вы можете изменить цветовую палитру для фона, текста и элементов управления, а также цвета оповещений.

5. Чтобы настроить размер шрифта, перейдите на вкладку Типографика. Используя соответствующие поля в кастомизаторе, вы можете изменить шрифт у следующих элементов интерфейса:

6. Чтобы настроить толщину границ и радиус скругления элементов интерфейса, перейдите на вкладку Границы и внесите изменения.

7. Чтобы посмотреть, как логотип игры будет выглядеть в платежном интерфейсе, в разделе Превью установите флажок Показать логотип. Чтобы настроить отображение логотипа в платежном интерфейсе, передайте необходимые параметры в токене.

8. Чтобы посмотреть, как тема будет выглядеть в мобильной и настольной версиях платежного интерфейса, переключайте вкладки в разделе Превью.

9. Чтобы посмотреть разные состояния платежного интерфейса, переключайте вкладки Оплата картой, Способы оплаты и Статус платежа.

10. Нажмите Опубликовать.
11. В открывшемся модальном окне установите переключатель Сделать темой по умолчанию в положение Вкл, чтобы тема применилась во всех проектах вашего аккаунта в Личном кабинете, кроме тех, в которых тема передана в токене.
12. Нажмите Опубликовать.

На вкладке Тема UI при нажатии ••• в блоке конкретной темы вам доступны следующие быстрые действия:

• Кастомизировать — открыть кастомизатор, чтобы внести изменения.
• Редактировать — изменить название темы и установить переключатель Использовать по умолчанию в положение Вкл или Выкл.
• Дублировать — дублировать тему, чтобы создать на ее основе другую собственную тему.
• Удалить тему.

Настройка кастомизации через API

Изменение макета

Чтобы адаптировать отображение платежного интерфейса к интерфейсу вашей игры, вы можете изменить макет платежного интерфейса. Для этого передайте параметр settings.ui.layout при создании токена. Этот параметр может принимать следующие значения:

• embed — в этом случае платежный интерфейс открывается внутри вашей игры: отступы платежного интерфейса обрезаются по краям, чтобы соответствовать другим элементам интерфейса.

• column_reverse — в этом случае меняется порядок расположения колонок в платежном интерфейсе: слева располагается информация о способах оплаты, справа — о заказе.

• embed_column_reverse — в этом случае платежный интерфейс открывается внутри вашей игры и меняется порядок расположения колонок в платежном интерфейсе: слева располагается информация о способах оплаты, справа — о заказе.

Передача настроек собственной темы в токене

Чтобы кастомизированные настройки применились для конкретной игры, передайте ID опубликованной кастомизированной темы в параметре settings.ui.theme при создании токена.

Вы можете найти ID темы:

• В общем списке тем на вкладке Тема UI.

• В кастомизаторе под названием темы.

Отображение логотипа игры

Чтобы отображать логотип вашей игры в платежном интерфейсе:

1. Загрузите изображение в Личном кабинете в разделе Pay Station > Настройки > Кастомизация.

2. В запросе на получение токена передайте true в параметрах settings.ui.desktop.header.is_visible и settings.ui.desktop.header.visible_logo.

Пример отображения логотипа игры в платежном интерфейсе:

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

Спасибо за обратную связь!