Платежи / Как кастомизировать платежный интерфейс
 На главную

Платежи

  • Руководство по интеграции

  • Тестирование

  • Возможности

  • Инструкции

  • Справочники

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

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

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

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

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

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

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

    В другой раз

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

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

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