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

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

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

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

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

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

Чтобы кастомизировать интерфейс через токен, измените параметры объекта settings.ui:
Справочник API
Посмотреть полный список параметров.
ПараметрТипОписание
settings.ui.themestringВнешний вид интерфейса оплаты. Может принимать значения 'default' (по умолчанию) или 'default_dark'.
settings.ui.sizestringРазмер платежного интерфейса. В зависимости от требуемых размеров платежного интерфейса, параметр может принимать следующие значения:
  • small: Наименьший размер платежного интерфейса. Используется в случаях, когда размеры окна строго ограничены (размер: 620 x 630)
  • medium: Рекомендуемый размер платежного интерфейса. Оптимален при открытии в lightbox (размер: 740 x 760)
  • large: желательно открывать в новом окне/вкладке (размер: 820 x 840)
settings.ui.desktop.header.visible_logobooleanЕсли значение 'true', то логотип будет отображаться в header (необходимо сначала прислать файл с логотипом вашему менеджеру).
settings.ui.desktop.header.visible_purchasebooleanДолжно ли описание покупки (purchase.description.value) отображаться в header, по умолчанию ‘true’.
Чтобы кастомизировать виджет, измените параметры объекта lightbox:
Справочник API
Посмотреть полный список параметров для инициализации виджета.
ПараметрТипОписание
lightbox.widthstringШирина lightbox. При значении null соответствует ширине платежного интерфейса. Значение по умолчанию null.
lightbox.heightstringВысота lightbox. Значение по умолчанию '100%'. Если значение null, высота lightbox соответствует высоте платежного интерфейса.
lightbox.zIndexintegerСвойство, отвечающее за положение объекта, по умолчанию 1000.
lightbox.overlayOpacityintegerНепрозрачность верхнего слоя (от 0 до 1), по умолчанию '.6'.
lightbox.overlayBackgroundstringФон для верхнего слоя, по умолчанию '#000000'.
lightbox.contentBackgroundstringФон фрейма, по умолчанию '#ffffff'. Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса.
lightbox.spinnerstringТип прелоадера, может принимать значение 'xsolla' или 'round', по умолчанию 'xsolla'.
lightbox.spinnerColorstringЦвет прелоадера.

Продолжить чтение