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