Универсальный виджет рассрочки

Данный код Универсального виджета/бейджа позволяет включить и настроить отображение в карточке товара доступных продавцу в Robokassa способов оплаты в кредит/BNPL (оплата частями по графику).

В настоящий момент Robokassa поддерживает следующие методы:

BNPL способы оплаты: Подели, Яндекс Сплит, Мокка

Кредит и рассрочка от ОТП Банка.

На настоящий момент реализована поддержка в следующих CMS:

WordPress
— Инструкция по настройке
Insales
— Инструкция по настройке
Tilda
— Инструкция по добавлению на Tilda

Общее описание

Кастомные элементы (Vue 3) для отображения бейджа и виджета Robokassa на сайте магазина.
Подходит для встраивания внутри <iframe>.

На странице используются кастомные Web Components:

<robokassa-widget> — основной платежный виджет.
<robokassa-badge> — компактный платежный бейдж.

Виджеты интегрируются через внешний JavaScript-файл и настраиваются параметрами через HTML-атрибуты.

Описание компонентов

`<robokassa-widget>`

Представляет собой основной платежный виджет, который может быть настроен по различным параметрам.

Сценарии использования:

Отображение на странице с возможностью мгновенной оплаты.
Различные режимы оплаты (BNPL, кредит).
Гибкая настройка внешнего вида и поведения.

`<robokassa-badge>`

Компактный мини-виджет (бейдж), который отображает доступные способы оплаты.

Сценарии использования:

Карточки товаров.
Баннеры.
Вызов кастомных обработчиков по клику.

Параметры компонентов

Параметры `<robokassa-badge>`

Атрибут	Тип	Обяз.	По умолчанию	Описание
`merchantLogin`	`string`	да	—	Идентификатор магазина.
`outSum`	`number (decimal)`	нет	—	Сумма к оплате.
`theme`	`"light"` \| `"dark"`	нет	`light`	Цветовая тема.
`colorScheme`	`"primary"` \| `"secondary"` \| `"accent"`	нет	`primary`	Цветовая схема.
`size`	`"s"` \| `"m"`	нет	`m`	Размер компонента.
`showLogo`	`boolean`	нет	`true`	Показывать логотип.
`onclick`	`function`	нет	—	JS-обработчик клика.

Параметры `<robokassa-widget>`

Атрибут	Тип	Обяз.	По умолчанию	Описание
`merchantLogin`	`string`	да	—	Идентификатор магазина.
`outSum`	`number (decimal)`	да	—	Сумма к оплате.
`invId`	`long`	нет	—	Уникальный номер счёта.
`receipt`	`string`	нет	—	Чек JSON-string.
`signature`	`string`	да	—	Контрольная сумма.
`theme`	`"light"` \| `"dark"`	нет	`light`	Тема.
`size`	`"s"` \| `"m"`	нет	`m`	Размер.
`showLogo`	`boolean`	нет	`true`	Показывать логотип.
`borderRadius`	`number (int)`	нет	`10`	Скругление углов.
`hasSecondLine`	`boolean`	нет	`false`	Вторая строка (только для m).
`descriptionPosition`	`"left"` \| `"right"`	нет	`left`	Позиция описания.
`email`	`string`	нет	—	Email покупателя.
`type`	`"bnpl"` \| `"credit"`	нет	—	Тип оплаты.
`mode`	`"checkout"` \| `"payment"`	нет	`payment`	Режим оплаты.
`checkoutUrl`	`string`	нет	—	URL редиректа.
`oncheckout`	`function(event)`	нет	—	Колбэк.
`paymentMethod`	`string`	нет	—	Метод оплаты.

Установка и подключение

Подключение через CDN

<script src="https://auth.robokassa.ru/merchant/bundle/robokassa-iframe-badge.js"></script>

После подключения вызывайте:

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.initRobokassaBadges();
});
</script>

Пример кода с аннотациями

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Robokassa Badge Embed</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <script src="https://auth.robokassa.ru/merchant/bundle/robokassa-iframe-badge.js"></script>
  <script>
document.addEventListener('DOMContentLoaded', () => {
  window.initRobokassaBadges();
});
</script>
</head>
<body>
  <div>
<p>Большой виджет, BNPL, светлая тема, размер m</p>

    <robokassa-widget
      outSum="6000"
      merchantLogin="robo-demo-test"
      signature="1e7aedb3bf0151471fbaa460356e6cd2"
      theme="light"
      size="m"
      borderRadius="50"
      descriptionPosition="right"
      type="bnpl"
      email="test@test.ru"
      hasSecondLine="true"
      mode="payment"
      checkouturl="url">
    </robokassa-widget>

<p>Маленький виджет, BNPL, светлая тема, размер s</p>

    <robokassa-widget
      outSum="6000"
      merchantLogin="robo-demo-test"
      signature="1e7aedb3bf0151471fbaa460356e6cd2"
      theme="light"
      size="s"
      borderRadius="50"
      descriptionPosition="right"
      type="bnpl"
      email="test@test.ru"
      hasSecondLine="true"
      mode="payment"
      checkouturl="url">
    </robokassa-widget>

<p>Большой виджет, кредит, темная тема</p>

    <robokassa-widget
      outSum="6000"
      merchantLogin="robo-demo-test"
      signature="1e7aedb3bf0151471fbaa460356e6cd2"
      theme="dark"
      size="m"
      borderRadius="12"
      descriptionPosition="right"
      type="credit"
      email="test@test.ru"
      hasSecondLine="false"
      mode="payment">
    </robokassa-widget>

  </div>

<p>Информационный бейдж</p>

  <robokassa-badge
    outSum="6000"
    merchantLogin="robo-demo-test"
    signature="1e7aedb3bf0151471fbaa460356e6cd2"
    onclick="badgeClickHandler">
  </robokassa-badge>

<script>
function badgeClickHandler() {
  alert('badgeClickHandler вызван!');
}
</script>

</body>
</html>