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

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

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

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

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

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

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

• WordPress
  — Инструкция по настройке

• Insales
  — Инструкция по настройке

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

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

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

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

• <robokassa-widget> — основной платежный виджет.
• <robokassa-badge> — компактный платежный бейдж.
• <robokassa-graph> — компактный виджет для отображения условий графика оплат.

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

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

<robokassa-widget>

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

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

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

<robokassa-badge>

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

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

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

<robokassa-graph>

Компактный мини-виджет, который может использоваться в любом месте страницы для быстрого отображения условий графика оплат.

Компонент работает только для валют YandexPaySplit, Mokka и Podeli.

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

• Встраивание на странице корзины — чтобы покупатель сразу видел доступные варианты рассрочки ещё до оформления заказа.
• Размещение рядом с ценой товара — для повышения конверсии и дополнительной мотивации к покупке.

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

Параметры <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)	да	—	Сумма к оплате.
receipt	string	да	—	Состав корзины. Подробнее см. в разделе Фискализация
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	нет	—	Метод оплаты.

Параметры <robokassa-graph>

Атрибут	Тип	Обяз.	По умолчанию	Описание
merchantLogin	string	да	—	Идентификатор магазина.
outSum	number (decimal)	да	—	Сумма к оплате в рублях, через точку: 123.45.
paymentMethod	string	да	—	Метод оплаты для отображения в графике.

Пример подключения:

<robokassa-graph
  merchantLogin="robokassa_demo"
  outSum="6000"
  paymentMethod="Podeli">
</robokassa-graph>

После подключения скрипта и загрузки страницы вызовите инициализацию:

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

Если нужно перерисовать график для одного или нескольких методов, передайте метод оплаты в initRobokassaGraphs:

<script>
window.initRobokassaGraphs("Mokka");
window.initRobokassaGraphs(["Mokka", "YandexPaySplit"]);
</script>

Запуск платёжной операции

Robokassa.pay.startOp(options)

Запускает платёжную операцию и возвращает платёжную ссылку. Для СБП ссылка отображается как QR-код.

Важно:

• Контейнер создаётся пользователем.
• Размеры контейнера контролируются пользователем.

Параметры startOp

Атрибут	Тип	Обяз.	По умолчанию	Описание
merchantLogin	string	да	—	Идентификатор магазина.
outSum	number (decimal)	да	—	Сумма к оплате в рублях, через точку: 123.45.
invId	long	нет	—	Уникальный номер счёта в магазине.
receipt	string	нет	—	Чек receipt, сериализованный в JSON-строку.
signature	string	да	—	Контрольная сумма. Формируется в зависимости от переданных параметров.
email	string	да	—	E-mail покупателя.
onpaymentlink	function(event) | string	нет	—	Вызывается при получении платёжной ссылки: QR, redirect или deeplink.
paymentMethod	"SBP"	да	—	Метод оплаты для получения ссылки на оплату. Передавайте строго "SBP".
qrContainerId	string	нет	—	ID HTML-элемента, внутри которого будет отображён QR-код. Если элемент не передан или не найден, QR-код не будет отображаться.
qrContainerSize	number	нет	—	Размер контейнера QR-кода в пикселях.

Формулы для signature:

• Без invId и receipt: MD5(merchantLogin:outSum::Пароль#1).
• С invId: MD5(merchantLogin:outSum:invId:Пароль#1).
• С receipt: MD5(merchantLogin:outSum::receipt:Пароль#1).
• С receipt и invId: MD5(merchantLogin:outSum:invId:receipt:Пароль#1).

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

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

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

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

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

document.addEventListener('DOMContentLoaded', () => {
  window.initRobokassaGraphs();
});
</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="robokassa_demo"
      receipt="%7B%22sno%22%3A%22osn%22%2C%22items%22%3A%5B%7B%22name%22%3A%22%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B9%20%D1%82%D0%BE%D0%B2%D0%B0%D1%80%22%2C%22quantity%22%3A1%2C%22sum%22%3A6000%2C%22payment_method%22%3A%22full_payment%22%2C%22payment_object%22%3A%22commodity%22%2C%22tax%22%3A%22none%22%7D%5D%7D"
      signature="a9e2207820abe60b423ec6bab3ec6d80"
      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="robokassa_demo"
      receipt="%7B%22sno%22%3A%22osn%22%2C%22items%22%3A%5B%7B%22name%22%3A%22%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B9%20%D1%82%D0%BE%D0%B2%D0%B0%D1%80%22%2C%22quantity%22%3A1%2C%22sum%22%3A6000%2C%22payment_method%22%3A%22full_payment%22%2C%22payment_object%22%3A%22commodity%22%2C%22tax%22%3A%22none%22%7D%5D%7D"
      signature="a9e2207820abe60b423ec6bab3ec6d80"
      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="robokassa_demo"
      receipt="%7B%22sno%22%3A%22osn%22%2C%22items%22%3A%5B%7B%22name%22%3A%22%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B9%20%D1%82%D0%BE%D0%B2%D0%B0%D1%80%22%2C%22quantity%22%3A1%2C%22sum%22%3A6000%2C%22payment_method%22%3A%22full_payment%22%2C%22payment_object%22%3A%22commodity%22%2C%22tax%22%3A%22none%22%7D%5D%7D"
      signature="a9e2207820abe60b423ec6bab3ec6d80"
      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="robokassa_demo"
    signature="a9e2207820abe60b423ec6bab3ec6d80"
    onclick="badgeClickHandler">
  </robokassa-badge>

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

</body>
</html>

Как будут выглядеть виджет и бейдж при подключении к сайту