Payments / Кастомизация тем платежного интерфейса
  На главную

Payments

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

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

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

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

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

Внимание
Настройки темы, переданные в токене, имеют приоритет над настройками в Личном кабинете.
Примечание
Для корректного отображения логотипа и кнопок Xsolla при выборе способа оплаты, следуйте рекомендациям.

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

Примечание
Вы можете создать тему в одном проекте и использовать ее в другом проекте в рамках одного аккаунта в Личном кабинете.
  1. Откройте проект в Личном кабинете и перейдите в раздел Pay Station > Тема UI.
  1. Нажмите Создать тему.
  2. Нажмите значок карандаша, чтобы изменить название темы.
  1. Чтобы настроить цвета элементов интерфейса, перейдите на вкладку Цвета. Вы можете изменить цветовую палитру для фона, текста и элементов управления, а также цвета оповещений.
  1. Чтобы настроить размер шрифта, перейдите на вкладку Типографика. Используя соответствующие поля в кастомизаторе, вы можете изменить шрифт у следующих элементов интерфейса:
ПолеЭлемент интерфейса
Title 1Заголовок на странице статуса платежа.
Title 2Значение итоговой суммы.
Title 3Заголовки разделов (например, Оплата по карте).
Title 4В настоящее время не используется.
Основной текст L
  • заголовки подразделов;
  • заголовки в инструкциях для оплаты наличными;
  • текст кнопок;
  • надпись К оплате.
Основной текст M
  • название проекта (отображается, если отсутствует логотип проекта);
  • текст в тултипах и описаниях;
  • текст сообщения на странице статуса платежа;
  • текст в списке способов оплаты (для мобильной версии — раскрывающийся список).
Мелкий текст
  • имя пользователя;
  • юридические тексты;
  • текст информации в корзине (например, наименование товара, сумма НДС).
Заголовок группыВ настоящее время не используется.
  1. Чтобы настроить толщину границ и радиус скругления элементов интерфейса, перейдите на вкладку Границы и внесите изменения.
Примечание
Максимальная толщина границ — 3 px.
Максимальный радиус скругления — 16 px.
  1. Чтобы посмотреть, как логотип игры будет выглядеть в платежном интерфейсе, в разделе Превью установите флажок Показать логотип. Чтобы настроить отображение логотипа в платежном интерфейсе, передайте необходимые параметры в токене.
  1. Чтобы посмотреть, как тема будет выглядеть в мобильной и настольной версиях платежного интерфейса, переключайте вкладки в разделе Превью.
Внимание
В режиме предпросмотра кнопки и ссылки не работают.
  1. Чтобы посмотреть разные состояния платежного интерфейса, переключайте вкладки Оплата картой, Способы оплаты и Статус платежа.
  1. Нажмите Опубликовать.
  2. В открывшемся модальном окне установите переключатель Сделать темой по умолчанию в положение Вкл, чтобы тема применилась во всех проектах вашего аккаунта в Личном кабинете, кроме тех, в которых тема передана в токене.
  3. Нажмите Опубликовать.
Внимание
После публикации темы вы в любое время сможете вернуться к ее редактированию. Тема не применится к платежному интерфейсу, пока вы не установите ее темой по умолчанию или не включите ее с помощью настроек токена.
На вкладке Тема UI при нажатии ••• в блоке конкретной темы вам доступны следующие быстрые действия:
  • Кастомизировать — открыть кастомизатор, чтобы внести изменения.
  • Редактировать — изменить название темы и установить переключатель Использовать по умолчанию в положение Вкл или Выкл.
  • Дублировать — дублировать тему, чтобы создать на ее основе другую собственную тему.
  • Удалить тему.

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

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

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

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

Чтобы настроить отображение способов оплаты при открытии платежного интерфейса, вы можете передать в токене следующие параметры:
  • is_payment_methods_list_mode, который позволяет отображать при открытии платежного интерфейса способы оплаты, доступные в стране игрока.
  • settings.ui.gp_quick_payment_button, который определяет расположение способа оплаты с помощью Google Pay в платежном интерфейсе. Может принимать следующие значения:
    • true — в этом случае кнопка для быстрой оплаты с помощью Google Pay отображается в верхней части платежного интерфейса.
    • false (по умолчанию) — в этом случае Google Pay отображается в списке способов оплаты в соответствии с алгоритмом PayRank.

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

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

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

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

  • В кастомизаторе под названием темы.
Внимание
Настройки темы, переданные в токене, имеют приоритет над настройками в Личном кабинете.

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

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

Примечание
Максимальный размер файла: 1 МБ.
Поддерживаемые форматы: JPEG, PNG, SVG.

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

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

Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!
Последнее обновление: 10 июля 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!