¶ Кастомизация
¶ 1. Кастомизация терминала
Ссылка на storybook: https://payment-terminal-form.sandbox.idynsys.org/storybook/?path=/story
Настройка отображения терминала осуществляется посредством загрузки конфигурационных файлов через веб-интерфейс B2BBackoffice:
Раздел Приложения → Карточка Приложения → Вкладка “Конфигурация стиля терминала”
Файлы разделены на 4 категории, каждая из которых загружается
в отдельное поле:
- Конфигурация стилей темы терминала (Раздел 1.1)
- Логотип для светлой и темной темы (Раздел 1.2)
- Фоновое изображение для светлой и темной темы - необязательно (Раздел 1.3)
- Шрифт - необязательно (Раздел 1.4)
¶ 1.1 Загрузка файла конфигурации.
Требования к файлу загрузки:
- Поддерживаемый тип файла — .json.
- Максимальный размер файла 9000 КБ.
- Поддерживаемое имя файла — 'config'.
¶ 1.1.1 Требования к содержанию файла:
Конфигурационный файл должен содержать два обязательных поля: light и dark (для светлой и темной темы соответственно); одно опциональное: settings.
Структура файла конфигурации:
{
"settings": {},
"light": {},
"dark": {}
}
¶ 1.1.2 Описание параметров поля settings
Таблица “Параметры”
| Параметр | Тип | Описание |
|---|---|---|
minifiedViewEnabled |
boolean | Настройка минифицированного режима отображения терминала |
isProvidedFieldsHidden |
boolean | Скрытие полей, данные для которых предоставлены вместе с данными сессии |
enableAutoDeposit |
boolean | Включение режима автодепозита. При включении данный произойден автодепозит в случае, если в терминале доступен только 1 метод ПС, а также все данные были переданы при его открытии |
¶ 1.1.2.1 minifiedViewEnabled
Если в данном поле передано значение true, а также для оплаты доступен только один платежный метод, то метод будет выбран автоматически, дополнительные элементы интерфейса будут скрыты.
Пример отображения:
¶
1.1.2.2 isProvidedFieldsHidden
Если в данном поле передано значение true, то поля формы, данные для которых мы получили вместе с данными сессии будут скрыты и недоступны для редактирования. Реализовано только для платежного метода UPI.
¶ 1.1.2.3 enableAutoDeposit
Если в данном поле передано значение true, а также вместе с данными сессии были получены все обязательные поля, то будет выполнена автоматическая отправка формы.
¶ 1.1.3 Описание параметров полей light/dark
Каждое поле представлено объектом со следующей структурой полей:
Прим.: Если значение указывается в rem, то оно считается относительно 16px.
Прим.: Приведенная ниже конфигурация является дефолтной для light-варианта темы
Таблица “Параметры”
| Параметр | Тип | Описание | |
|---|---|---|---|
| body | Поля для настройки основных стилей контейнеров элементов страницы: | ||
| backgroundColor | string | цвет фона страницы, который виден, если не загружено фоновое изображение |
|
| borderRadius | string | радиус скругления контейнеров (в rem) | |
| focusBorderColor | string | цвет обводки для элементов, получивших фокус | |
| borderColor1 | string | цвет для обводки | |
| borderColor2 | string | цвет для обводки | |
| shadowColor1 | string | цвет первой тени для конфигурации shadowPrimary | |
| shadowColor2 | string | цвет второй тени для конфигурации shadowPrimary | |
| shadowDropColor1 | string | цвет падающей тени для конфигурации shadowPrimary | |
| shadowPrimary | string | основная тень для элементов (например, контейнер карточки платежного метод или для кнопки типа With shadow) | |
| button | Поля для настройки стилей кнопок 6 видов : Primary, Secondary, With shadow, Tertiary, Ghost, Danger. | ||
| disabledBackgroundColor | string | цвет контейнера неактивной кнопки | |
| disabledBorderColor | string | цвет обводки контейнера неактивной кнопки | |
| disabledTextColor | string | цвет текста неактивной кнопки | |
| borderRadius | string | радиус скругления контейнера кнопки (в rem) | |
| primaryBackgroundColor | string | цвет контейнера кнопки | |
| primaryBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| primaryBackgroundColorActive | string | цвет контейнера активной кнопки | |
| primaryTextColor | string | цвет текста | |
| secondaryBackgroundColor | string | цвет контейнера кнопки | |
| secondaryBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| secondaryBackgroundColorActive | string | цвет контейнера активной кнопки | |
| secondaryTextColor | string | цвет текста | |
| secondaryBorderColor | string | цвет обводки контейнера кнопки | |
| withShadowBackgroundColor | string | цвет контейнера кнопки | |
| withShadowBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| withShadowBackgroundColorActive | string | цвет контейнера активной кнопки | |
| withShadowTextColor | string | цвет текста | |
| withShadowBorderColor | string | цвет обводки контейнера кнопки | |
| tertiaryBackgroundColor | string | цвет контейнера кнопки | |
| tertiaryBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| tertiaryBackgroundColorActive | string | цвет контейнера активной кнопки | |
| tertiaryTextColor | string | цвет текста | |
| tertiaryBorderColor | string | цвет обводки контейнера кнопки | |
| ghostBackgroundColor | string | цвет контейнера кнопки | |
| ghostBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| ghostBackgroundColorActive | string | цвет контейнера активной кнопки | |
| ghostTextColor | string | цвет текста | |
| dangerBackgroundColor | string | цвет контейнера кнопки | |
| dangerBackgroundColorHover | string | цвет контейнера кнопки при наведении | |
| dangerBackgroundColorActive | string | цвет контейнера активной кнопки | |
| dangerTextColor | string | цвет текста | |
| icon | Поля для настройки цвета иконок | ||
| primary | string | основной цвет для иконок (например, шеврон на селекте) | |
| secondary | string | второстепенный цвет для иконок (например, шеврон на карточке суммы) | |
| active | string | цвет для активной иконки | |
| buttonColor | string | цвет иконки внутри цветной кнопки (например, цвет иконки выбранного свитчера) | |
| radioButton | string | цвет иконки для радиобатона (например, шеврон на карточке суммы) | |
| danger | string | цвет для иконок предупреждения или оповещения об ошибках | |
| buttonColorDisabled | string | цвет иконки неактивной цветной кнопки | |
| disabled | string | цвет неактивной иконки | |
| input | Поля для настройки стилей компонента поля формы внутри карточки платежного метода Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/input--input-story |
||
| backgroundColor | string | цвет контейнера поля | |
| textColor | string | цвет текста внутри активного поля | |
| activeBorderColor | string | цвет обводки контейнера активного поля | |
| errorTextColor | string | цвет текста для ошибки | |
| errorBorderColor | string | цвет обводки контейнера для поля с ошибкой | |
| placeholderTextColor | string | цвет текста внутри незаполненного поля (плейсхолдера) | |
| borderRadius | string | радиус скругления контейнера (в rem) | |
| link | Поля для настройки цвета текстовых ссылок Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/link--small-title-primary-link |
||
| primary | string | основной цвет для текста ссылок | |
| primaryHover | string | цвет ховера для текста ссылок основного цвета | |
| secondary | string | дополнительный цвет для текста ссылок | |
| secondaryHover | string | цвет ховера для текста ссылок дополнительного цвета | |
| visited | string | цвет текста для посещенной ссылки | |
| text | Поля для настройки цвета для разных вариантов текста (кроме ссылок) | ||
| primary | string | основной цвет текста | |
| secondary | string | дополнительный цвет текста (например, информационный текст на карточке суммы) | |
| basicInformation | string | цвет для выделения акцентной информации (например, заголовок на карточке суммы) | |
| helper | string | цвет для вспомогательного текста | |
| disabled | string | цвет для текста неактивных элементов | |
| tooltip | Поля для настройки стилей компонента тултипа (всплывающей подсказки) Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/tooltip--playground |
||
| backgroundColor | string | цвет фона контейнера тултипа | |
| textColor | string | цвет текста тултипа | |
| borderRadius | string | радиус скругления контейнера (в rem) | |
| errorDisplay | Поля для настройки стилей компонента карточки, отображающей текущий статус: The payment is completed, Payment error или Contact the store Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/error-display--error-display-story |
||
| completedIconFill | string | цвет иконки для статуса “The payment is completed” | |
| contactIconFill | string | цвет иконки для статуса “Contact the store” | |
| languageSelect | Поля для настройки стилей компонента выбора языка Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/languageselect--language-select-story |
||
| itemBackgroundColor | string | цвет фона элементов списка | |
| itemHoverBackgroundColor | string | цвет фона элементов списка при наведении | |
| itemTextColor | string | цвет текста элементов списка | |
| paymentMethodCard | Поля для настройки стилей компонента карточки платежного метода Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/paymentmethodcard--payment-method-card-story |
||
| backgroundColor | string | цвет фона контейнера карточки | |
| titleColor | string | цвет текста заголовка | |
| captionColor | string | цвет текста подписи | |
| cardMethodColor | string | цвет контейнера иконки платежного метода "Bank card" | |
| p2pMethodColor | string | цвет контейнера иконки платежного метода "P2P" | |
| mobileCommerceMethodColor | string | цвет контейнера иконки платежного метода "Mobile Commerce" | |
| sbpMethodColor | string | цвет контейнера иконки платежного метода "SBP" | |
| savedCard | Поля для настройки стилей компонента сохраненных карт, который находится внутри карточки платежного метода Сторибук компонента (сейчас поломана сторя компонента, нужно поправить): https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/savedcards--saved-cards-story |
||
| backgroundColor | string | цвет фона контейнера | |
| borderColor | string | цвет обводки контейнера | |
| dangerBorderColor | string | цвет обводки контейнера при удалении карты | |
| textColor | цвет текста внутри карточки | ||
| themeSelect | Поля для настройки стилей переключателя темы терминала между светлой и темной Сторибук компонента: https://payment-terminal-form.dev.idynsys.org/storybook/?path=/story/themeselect--theme-select-story |
||
| backgroundColor | цвет фона контейнера кнопки-свитчера | ||
| activeButtonColor | цвет активного положения свитчера | ||
| borderRadius | радиус скругления для свитчера тем (в rem) |
¶ 1.1.3.1 Пример отображения dark-темы
Дефолтные значения конфигурации dark-темы терминала (если не загружен свой файл, будут использоваться эти настройки по дефолту):
Пример конфигурационного файла dark-темы терминала:
{
body: {
backgroundColor: '#161616',
borderRadius: '0.75rem',
focusBorderColor: '#4589ff',
borderColor1: '#6f6f6f',
borderColor2: '#8d8d8d',
shadowColor1: 'rgba(22, 22, 22, 0.1)',
shadowColor2: 'rgba(22, 22, 22, 0.25)',
shadowDropColor1: 'rgba(22, 22, 22, 0.3)',
shadowPrimary:
'0px -1px 1px 0px var(--body-shadowColor1), 0px 1px 1px 0px
var(--body-shadowColor2), 0px 2px 6px 0px var(--body-shadowDropColor1)',
},
button: {
primaryBackgroundColor: '#0F62FE',
primaryBackgroundColorHover: '#0050E6',
primaryBackgroundColorActive: '#002D9C',
primaryTextColor: '#FFFFFF',
secondaryBackgroundColor: 'transparent',
secondaryBackgroundColorHover: '#F4F4F4',
secondaryBackgroundColorActive: '#C6C6C6',
secondaryTextColor: '#525252',
secondaryBorderColor: '#C6C6C6',
withShadowBackgroundColor: '#ffffff',
withShadowBackgroundColorHover: '#F4F4F4',
withShadowBackgroundColorActive: '#C6C6C6',
withShadowTextColor: '#525252',
withShadowBorderColor: '#8d8d8d',
tertiaryBackgroundColor: 'transparent',
tertiaryBackgroundColorHover: 'rgba(15, 98, 254, 0.05)',
tertiaryBackgroundColorActive: 'rgba(15, 98, 254, 0.2)',
tertiaryTextColor: '#ffffff',
tertiaryBorderColor: '#0F62FE',
ghostBackgroundColor: '##F4F4F4',
ghostBackgroundColorHover: 'rgba(15, 98, 254, 0.05)',
ghostBackgroundColorActive: 'rgba(15, 98, 254, 0.2)',
ghostTextColor: '#0F62FE',
dangerBackgroundColor: '#DA1E28',
dangerBackgroundColorHover: '#B81922',
dangerBackgroundColorActive: '#750E13',
dangerTextColor: '#FFFFFF',
disabledBackgroundColor: '#525252',
disabledBorderColor: '#8d8d8d',
disabledTextColor: 'rgba(244, 244, 244, 0.25)',
borderRadius: '0.75rem',
},
icon: {
primary: '#F4F4F4',
secondary: '#c6c6c6',
active: '#6f6f6f',
danger: '#da1e28',
buttonColor: '#ffffff',
radioButton: '#4589ff',
buttonColorDisabled: 'rgba(244, 244, 244, 0.25)',
disabled: 'rgba(244, 244, 244, 0.25)',
},
input: {
textColor: '#F4F4F4',
backgroundColor: '#393939',
activeBorderColor: '#4589ff',
errorTextColor: '#ff8389',
errorBorderColor: '#ff8389',
placeholderTextColor: '#6f6f6f',
borderRadius: '0.625rem',
},
link: {
primary: '#78a9ff',
primaryHover: '#a6c8ff',
secondary: '#c6c6c6',
secondaryHover: '#f4f4f4',
visited: '#be95ff',
},
text: {
primary: '#f4f4f4',
secondary: '#c6c6c6',
basicInformation: '#0f62fe',
helper: '#8D8D8D',
disabled: 'rgba(244, 244, 244, 0.25)',
},
tooltip: {
backgroundColor: '#f4f4f4',
textColor: '#161616',
borderRadius: '0.25rem',
},
errorDisplay: {
completedIconFill: '#24a148',
contactIconFill: '#F1C21B',
},
languageSelect: {
itemBackgroundColor: '#161616',
itemHoverBackgroundColor: '#393939',
itemTextColor: '#78a9ff',
},
paymentMethodCard: {
backgroundColor: '#262626',
titleColor: '#F4F4F4',
captionColor: '#C6C6C6',
cardMethodColor: '#33B1FF',
p2pMethodColor: '#08BDBA',
mobileCommerceMethodColor: '#EE5396',
sbpMethodColor: '#A56EFF',
},
savedCard: {
borderColor: '#6F6F6F',
dangerBorderColor: '#DA1E28',
backgroundColor: '#393939',
textColor: '#F4F4F4',
},
themeSelect: {
backgroundColor: '#393939',
activeButtonColor: '#0f62fe',
borderRadius: '0.75rem',
},
}
¶ 1.1.3.2 Пример отображения light-темы
Дефолтные значения конфигурации light-темы терминала (если не загружен свой файл, будут использоваться эти настройки по дефолту):
Пример конфигурационного файла white-темы терминала:
{
body: {
backgroundColor: '#f4f4f4',
borderRadius: '0.75rem',
focusBorderColor: '#0F62FE',
borderColor1: '#e0e0e0',
borderColor2: '#c6c6c6',
shadowColor1: 'rgba(244, 244, 244, 0.1)',
shadowColor2: 'rgba(244, 244, 244, 0.25)',
shadowDropColor1: 'rgba(22, 22, 22, 0.05)',
shadowPrimary:
'0px -1px 1px 0px var(--body-shadowColor1), 0px 1px 1px 0px
var(--body-shadowColor2), 0px 2px 6px 0px var(--body-shadowDropColor1)',
},
button: {
primaryBackgroundColor: '#0F62FE',
primaryBackgroundColorHover: '#0050E6',
primaryBackgroundColorActive: '#002D9C',
primaryTextColor: '#FFFFFF',
secondaryBackgroundColor: 'transparent',
secondaryBackgroundColorHover: '#F4F4F4',
secondaryBackgroundColorActive: '#C6C6C6',
secondaryTextColor: '#525252',
secondaryBorderColor: '#C6C6C6',
withShadowBackgroundColor: '#ffffff',
withShadowBackgroundColorHover: '#F4F4F4',
withShadowBackgroundColorActive: '#C6C6C6',
withShadowTextColor: '#525252',
withShadowBorderColor: '#C6C6C6',
tertiaryBackgroundColor: 'transparent',
tertiaryBackgroundColorHover: 'rgba(15, 98, 254, 0.05)',
tertiaryBackgroundColorActive: 'rgba(15, 98, 254, 0.2)',
tertiaryTextColor: '#0F62FE',
tertiaryBorderColor: '#0F62FE',
ghostBackgroundColor: '##F4F4F4',
ghostBackgroundColorHover: 'rgba(15, 98, 254, 0.05)',
ghostBackgroundColorActive: 'rgba(15, 98, 254, 0.2)',
ghostTextColor: '#0F62FE',
dangerBackgroundColor: '#DA1E28',
dangerBackgroundColorHover: '#B81922',
dangerBackgroundColorActive: '#750E13',
dangerTextColor: '#FFFFFF',
disabledBackgroundColor: '#C6C6C6',
disabledBorderColor: '#C6C6C6',
disabledTextColor: 'rgba(22, 22, 22, 0.25)',
borderRadius: '0.75rem',
},
icon: {
primary: '#161616',
secondary: '#525252',
active: '#e0e0e0',
danger: '#da1e28',
buttonColor: '#ffffff',
radioButton: '#0f62fe',
buttonColorDisabled: '#8d8d8d',
disabled: 'rgba(22, 22, 22, 0.25)',
},
input: {
textColor: '#161616',
backgroundColor: '#F4F4F4',
activeBorderColor: '#0F62FE',
errorTextColor: '#DA1E28',
errorBorderColor: '#DA1E28',
placeholderTextColor: '#A8A8A8',
borderRadius: '0.625rem',
},
link: {
primary: '#0f62fe',
primaryHover: '#054ada',
secondary: '#525252',
secondaryHover: '#161616',
visited: '#8a3ffc',
},
text: {
primary: '#161616',
secondary: '#525252',
basicInformation: '#0f62fe',
helper: '#6F6F6F',
disabled: 'rgba(22, 22, 22, 0.25)',
},
tooltip: {
backgroundColor: '#161616',
textColor: '#f4f4f4',
borderRadius: '0.25rem',
},
errorDisplay: {
completedIconFill: '#24a148',
contactIconFill: '#F1C21B',
},
languageSelect: {
itemBackgroundColor: '#f4f4f4',
itemHoverBackgroundColor: '#C6C6C6',
itemTextColor: '#0F62FE',
},
paymentMethodCard: {
backgroundColor: '#ffffff',
titleColor: '#161616',
captionColor: '#525252',
cardMethodColor: '#33B1FF',
p2pMethodColor: '#08BDBA',
mobileCommerceMethodColor: '#EE5396',
sbpMethodColor: '#A56EFF',
},
savedCard: {
borderColor: '#E0E0E0',
dangerBorderColor: '#DA1E28',
backgroundColor: '#FFF',
textColor: '#161616',
},
themeSelect: {
backgroundColor: '#F4F4F4',
activeButtonColor: '#0f62fe',
borderRadius: '0.75rem',
},
}
¶ 1.2 Добавление логотипа приложения.
Осуществляется загрузка файлов двух логотипов для светлой и темной темы терминала.
Требования к файлу загрузки:
- Только файлы
.svg .png. - Максимальный размер файла 100 КБ.
- Поддерживаемые имена файлов —
logo-light,logo-dark.
¶ 1.3 Добавление фонового изображение (необязательно).
Осуществляется загрузка файлов двух фоновых изображений для светлой и темной темы терминала.
Требования к файлу загрузки:
- Только файлы
.svg .png. - Максимальный размер файла 100 КБ.
- Поддерживаемые имена файлов —
background-light,background-dark.
¶ 1.4 Добавление шрифта (необязательно).
Осуществляется загрузка двух файлов одного шрифта в разных начертаниях: Regular и Medium.
Требования к файлу загрузки:
- Только файлы
.ttf .woff .woff2. - Максимальный размер файла 300 КБ.
- Поддерживаемые имена файлов —
font-medium,font-regular.