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

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

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

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

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

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

Чтобы кастомизировать интерфейс через токен, измените параметры объекта settings.ui:
Справочник API
Посмотреть полный список параметров.
ПараметрТипОписание
settings.ui.theme
stringВнешний вид интерфейса оплаты. Может принимать значения default (по умолчанию) или default_dark.
settings.ui.size
stringРазмер платежного интерфейса. В зависимости от требуемых размеров платежного интерфейса, параметр может принимать следующие значения:
  • small: Наименьший размер платежного интерфейса. Используется в случаях, когда размеры окна строго ограничены (размер: 620 x 630)
  • medium: Рекомендуемый размер платежного интерфейса. Оптимален при открытии в lightbox (размер: 740 x 760)
  • large: желательно открывать в новом окне/вкладке (размер: 820 x 840)
booleanЕсли значение true, то логотип будет отображаться в header (необходимо сначала прислать файл с логотипом вашему менеджеру).
settings.ui.desktop.header.visible_purchase
booleanДолжно ли описание покупки (purchase.description.value) отображаться в header, по умолчанию true.
Чтобы кастомизировать виджет, измените параметры объекта lightbox:
Справочник API
Посмотреть полный список параметров для инициализации виджета.
ПараметрТипОписание
lightbox.width
stringШирина lightbox. При значении null соответствует ширине платежного интерфейса. Значение по умолчанию null.
lightbox.height
stringВысота lightbox. Значение по умолчанию 100%. Если значение null, высота lightbox соответствует высоте платежного интерфейса.
lightbox.zIndex
integerСвойство, отвечающее за положение объекта, по умолчанию 1000.
lightbox.overlayOpacity
integerНепрозрачность верхнего слоя (от 0 до 1), по умолчанию .6.
lightbox.overlayBackground
stringФон для верхнего слоя, по умолчанию #000000.
lightbox.contentBackground
stringФон фрейма, по умолчанию #ffffff. Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса.
lightbox.spinner
stringТип прелоадера, может принимать значение xsolla или round, по умолчанию xsolla.
lightbox.spinnerColor
stringЦвет прелоадера.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

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

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

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