Настроить виджет

Разместите виджет на сайте и настройте его.

  1. Скачайте файл виджета. В имени файла указана версия виджета, например lb-pay-embed-1.0.0.js.

    Проверьте по таблице совместимости, какая версия виджета подходит к вашей версии LANBilling.

  2. Разместите полученный js-файл на сайте. В примере ниже файл размещён в папке /widget.

  3. Подключите виджет. Пример: <script src="/widget/lb-pay-embed.js"></script>

  4. Добавьте на страницу контейнер для формы. Пример:

    <div id="lb-pay"></div>

    ``

  5. Инициализируйте виджет:

    <script>
  new LBPayEmbed({
	// обязательные поля
	containerId: "lb-pay", // id контейнера ("ваше_название")
	apiUrl: "https://api.operator.ru", // HTTPS-адрес модуля внешнего API (не LBcore)

	// необязательные поля
	operId: 1, // оператор, см. админ-панель lbweb-admin
	providerId: 2, // система оплаты
	paymentType: 0, // 0 — карта, 1 — СБП
	redirectTarget: "self", // "self" — эта вкладка, "blank" — новая
	language: "ru", // "ru" / "en" (иначе с атрибута lang страницы)
	appearance: {
	  title: "Кастомный заголовок", // до 120 символов
	  subTitle: "Кастомный подзаголовок", // до 240 символов
	  fontFamily: '"Montserrat", sans-serif',
	  mode: "dark", // "auto" | "light" | "dark" ("auto" — системная тема)
	  borderRadius: 0, // 0–32
	  // цвета только hex: #fff или #ffffff
	  colorBg: "#172033",
	  colorText: "#f3f7ff",
	  colorPrimary: "#c2e2ce", // акцент: кнопка, focus поля
	  buttonTextColor: "#ffffff",
	},
  }).init();
</script>

    ``

    Параметры:

    • Обязательные

      • containerId — id блока на странице, без #. После пробелов не должен быть пустым.

      • apiUrl — URL модуля внешнего API, только https://. Внешний базовый HTTPS-адрес доступа к модулю lbcore-rest через обратный прокси. Например, https://api.operator.ru для отдельного поддомена или https://operator.ru/api для размещения с префиксом /api/. Не указывайте адрес ядра LBcore, внутренний адрес модуля или полный путь метода /api/v1/public-payment.

    • Не обязательные

      • operId — идентификатор оператора. Нужно указывать, только если у вас в LANBilling несколько операторов. Через виджет можно будет зачислить средства только на договоры тех абонентов, которые относятся к этому оператору. Значение — целое положительное число.

      • providerId — идентификатор платёжной системы, через которую будут проводиться оплаты из виджета. Значение — целое положительное число.

      • paymentType — Если способ оплаты не выбран, способ задаёт модуль. Возможные способы оплаты:

        • 0 — оплата картой,

        • 1 — оплата по СБП.

      • redirectTarget — открывать ли страницу оплаты на новой вкладке:

        • "self" — оплата в этой вкладке (по умолчанию),

        • "blank" — в новой.

      • language — язык виджета. Если не указать, используется атрибут lang у <html>, если его не удалось определить — используется язык браузера. Если его не удалось определить или он не поддерживается, используется русский язык. Варианты значений параметра:

        • "ru" либо "ru-RU",
        • "en" либо "en-US").

      • appearance — настройки внешнего вида.

Настроить внешний вид виджета

Параметры в блоке appearance не обязательные.

Цвета задавайте в формате #fff или #ffffff.

  • title — заголовок виджета, до 120 символов. Если не указать, используется заголовок «Оплата по договору» либо «Contract payment» (в зависимости от языка). Если задан title виджета, он не переводится автоматически на другой язык. Либо не задавайте его, либо при смене языка страницы передайте другой текст и вызовите виджет заново.

  • subTitle — подзаголовок виджета, до 240 символов. Если не указать — не отображается.

  • mode — цветовая схема виджета:

    • "auto" — значение по умолчанию, системная цветовая схема у посетителя страницы,

    • "light" — светлая тема,

    • "dark" — тёмная тема.

  • fontFamily — название шрифта, как в CSS, до 160 символов.

  • colorBg — цвет фона виджета.

  • colorText — цвет текста.

  • colorPrimary — акцентный цвет (кнопка, focus поля). По умолчанию #f7941d.

  • buttonTextColor — цвет текста кнопки. По умолчанию #ffffff.

  • borderRadius — радиус скругления. Значение указывается в пикселах (px), целое число от 0 до 32. По умолчанию 8.