Pay Station / Как кастомизировать платежный интерфейс

Как кастомизировать платежный интерфейс

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

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

  • расположение на экране;
  • стили;
  • размер;
  • фон;
  • прелоадер.

Параметры интерфейса настраиваются через токен и скрипт интеграции виджета.

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

Как настроить

Чтобы кастомизировать интерфейс через токен, измените параметры объекта settings.ui:

ПараметрТипОписание
settings.ui.theme
stringВнешний вид интерфейса оплаты. Может принимать значения default (светлая тема по умолчанию) или default_dark (темная тема).
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Цвет прелоадера.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

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

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

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