Код виджета собирает конструктор, и руками его писать не нужно. Этот справочник — для случаев, когда код правят: подставляют номер заказа из своей системы, меняют состав на лету или разбираются, почему форма ведёт себя не так. Звёздочкой отмечено то, что в коде есть всегда.
Параметры init
Всё, что виджет знает о заказе, лежит в объекте, который передаётся в InvoiceBoxWidget…init({…}).
Параметр
Что задаёт
widget_id *
Идентификатор экземпляра виджета: время сборки и случайная цифра. Тот же идентификатор стоит в `id` контейнера
Цвет кнопки, `#rrggbb`. Цвет надписи виджет подбирает сам — тот из чёрного и белого, что контрастнее
widget_accent_text
Пожелание по цвету надписи на кнопке. Принимается, только если контраст к цвету кнопки не ниже 4,5:1, иначе виджет ставит читаемый — значения
widget_radius
Скругление полей и кнопки в пикселях, от 0 до 20. Без параметра — 10; карточка скругляется в 1,4 раза сильнее
widget_size
Плотность формы. Компактная сокращает отступы и высоту полей, размер текста и тач-цели остаются — значения
widget_font
Наследовать ли шрифт страницы магазина. Наследуется только семейство: размеры и межстрочный интервал у виджета свои — значения
itransfer_language_id
Язык формы (легаси: виджет определяет язык покупателя сам, конструктор поле больше не выдаёт)
itransfer_participant_id *
Идентификатор магазина из личного кабинета
itransfer_person_name *
Имя плательщика, если оно известно заранее. Пустая строка — покупатель введёт сам
itransfer_person_email *
Электронная почта плательщика, если известна заранее
itransfer_person_phone *
Телефон плательщика, если известен заранее
itransfer_order_id *
Ваш номер заказа: по нему вы узнаете платёж в своей системе
itransfer_participant_ident *
Региональный код магазина из личного кабинета
itransfer_url_return
Куда вернуть покупателя после оплаты — успешной или нет
itransfer_url_returnsuccess
Куда вернуть покупателя только после успешной оплаты
Аргументы вызова
Аргумент
Что задаёт
параметры
Объект из таблицы выше
ширина
Ширина кадра в пикселях. Конструктор и сервер отдают 600
высота
Всегда `auto`: кадр подстраивается под содержимое
контейнер
Идентификатор элемента `div`, в который встанет виджет
Состав заказа
Позиции складываются в массив, сериализуются в JSON, сжимаются алгоритмом deflate и кодируются base64 — результат и есть значение widget_goods. Порядок полей в позиции важен: его ждёт принимающая сторона.
Поле позиции
Что задаёт
type *
`service` — услуга, `commodity` — товар
name *
Название позиции, его увидит покупатель и бухгалтерия
measure *
Единица измерения: шт, усл, кг
quantity *
Количество
price *
Цена за единицу, строкой с двумя знаками после точки
Состав приходит из браузера покупателя и не подписан — его можно изменить до отправки. Получив уведомление об оплате, сверяйте сумму с той, которую ожидали: Безопасность виджета.
Оформление
Шесть параметров подгоняют форму под сайт: тема, цвет кнопки, надпись на кнопке, скругление, плотность и шрифт. Ни один не обязателен — без них форма выглядит так же, как выглядела до появления настроек, поэтому размещённые коды править не нужно. Собрать оформление проще в конструкторе: там сразу видно, что получится.
Цвет надписи на кнопке задать нельзя, можно только пожелать: виджет считает контраст по WCAG 2.1 и берёт из чёрного и белого тот, что читается на выбранном цвете. Из этих двух хотя бы один всегда даёт не меньше 4,5:1, так что надпись остаётся читаемой при любом цвете кнопки. Заметность самой кнопки так не гарантируется: если цвет почти совпал с фоном карточки, виджет обводит её по краю, а конструктор предупреждает.
Не настраиваются: подписи и тексты формы, размер шрифта, состав правового подвала, логотипы, кольцо фокуса и цвета самих полей. Форма оплаты должна оставаться узнаваемой и читаемой — иначе покупатель не понимает, кому платит, а виджет превращается в чужой интерфейс. Параметр widget_css_external остался от прежних версий; оформление задаётся параметрами из этого раздела.
Надпись на кнопке — widget_button_type
Значение
Что означает
1
Оплатить
2
Купить
3
Пополнить
4
Пожертвовать
Название оплачиваемого — widget_order_type
Значение
Что означает
1
Заказ
2
Договор
3
Бронирование
4
Счёт
Тип плательщика — widget_person_type
Значение
Что означает
1
Физическое лицо
2
Организация или ИП
3
Клиент выбирает сам
Поля покупателя — widget_addfields
Значение
Что означает
person_name
Имя плательщика
person_email
Электронная почта
person_phone
Телефон
participant_order_id
Номер заказа
quantity
Количество
Ставка НДС — vat в позиции состава
Значение
Что означает
12
22 %
4
10 %
10
7 %
9
5 %
5
0 %
6
Не облагается
Тема формы — widget_theme
Значение
Что означает
light
Светлая
dark
Тёмная
auto
По системе покупателя
Плотность формы — widget_size
Значение
Что означает
normal
Обычный
compact
Компактный
Шрифт — widget_font
Значение
Что означает
own
Свой шрифт виджета
inherit
Шрифт страницы магазина
Цвет надписи на кнопке — widget_accent_text
Значение
Что означает
auto
Выбирает виджет по контрасту
light
Светлая надпись
dark
Тёмная надпись
Ссылка QR-режима
Тот же заказ можно передать не кодом на странице, а ссылкой — например, показать её QR-кодом на кассе. Адрес начинается с https://widget.invoicebox.ru/?smpspg=qr, дальше идут параметры.
Параметр
Что задаёт
g *
Состав заказа — та же упаковка, что и в `widget_goods`
Некоторые конструкторы сайтов не принимают многострочный код. Для них тот же код отдаётся одной строкой: переносы убраны, повторяющиеся пробелы сжаты — на поведение это не влияет. Где и как вставлять — в инструкции по вставке.
Идентификатор магазина и региональный код берутся в личном кабинете. Если сумму и состав определяет только ваш сервер, надёжнее создавать заказы через API — виджет и API работают с одним и тем же магазином.
