Как кастомизировать платежный интерфейс
Как это работает
Вы можете настроить внешний вид платежного интерфейса, изменив характеристики следующих элементов:
- расположение на экране;
- стили;
- размер;
- фон;
- прелоадер.
Параметры интерфейса настраиваются через токен и скрипт интеграции виджета.
Справочник API
Посмотреть полный список параметров.
Примечание
Вы можете использовать готовые темы платежного интерфейса, светлую и темную, или создать свою собственную тему. Чтобы создать свою тему, воспользуйтесь инструкцией.
Как настроить
Чтобы кастомизировать интерфейс через токен, измените параметры объекта settings.ui
:
Параметр | Тип | Описание |
---|---|---|
settings.ui.theme | string | Внешний вид интерфейса оплаты. Может принимать значения default (светлая тема по умолчанию) или default_dark (темная тема). |
settings.ui.desktop.header.visible_logo | boolean | Если значение true , то логотип будет отображаться в header (необходимо сначала прислать файл с логотипом вашему персональному менеджеру). |
Чтобы кастомизировать виджет, измените параметры объекта
lightbox
:Справочник API
Посмотреть полный список параметров для инициализации виджета.
Параметр | Тип | Описание |
---|---|---|
lightbox.width | string | Ширина lightbox. Значение по умолчанию null . Если установлено значение null , ширина lightbox соответствует ширине платежного интерфейса. |
lightbox.height | string | Высота lightbox. Значение по умолчанию 100% . Если установлено значение null , высота lightbox соответствует высоте платежного интерфейса. |
lightbox.zIndex | integer | Свойство, отвечающее за положение объекта, по умолчанию 1000 . |
lightbox.overlayOpacity | integer | Непрозрачность подложки виджета (0 — полностью прозрачная, 1 — полностью непрозрачная). Значение по умолчанию — 60% (.6 ). |
lightbox.overlayBackground | string | Фон для верхнего слоя, по умолчанию #000000 . |
lightbox.contentBackground | string | Фон фрейма, по умолчанию #ffffff . Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса. |
lightbox.spinner | string | Тип прелоадера, может принимать значение xsolla или round , по умолчанию xsolla . |
lightbox.spinnerColor | string | Цвет прелоадера. |
Была ли статья полезна?
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.