- Общее описание
- Описание компонентов
- Параметры компонентов
- Установка и подключение
- Промоакции
- Пример кода с аннотациями
Кастомные элементы (Vue 3) для отображения бейджа и виджета Robokassa на сайте магазина. Подходит для встраивания внутри <iframe>.
На странице используются кастомные Web Components:
<robokassa-widget>— основной платежный виджет.<robokassa-badge>— компактный платежный бейдж.
Виджеты интегрируются через внешний JavaScript-файл и настраиваются параметрами через HTML-атрибуты.
Представляет собой основной платежный виджет, который может быть настроен по различным параметрам (сумма, тема, размер, режим оплаты и т.д.).
Сценарии использования:
- Отображение на странице с возможностью мгновенной оплаты.
- Различные режимы и виды оплаты (BNPL, кредит и др.).
- Гибкая настройка внешнего вида и поведения.
Это компактный мини-виджет (бейдж), который может использоваться в любом месте страницы для быстрой интеграции оплаты.
Если мерчанту доступны и BNPL, и кредит, то отрисовываются два бейджа.
Сценарии использования:
- Встраивание в карточки товаров, кнопки, баннеры.
- Вызов кастомных обработчиков по клику.
| Атрибут | Тип | Обяз. | По умолчанию | Описание |
|---|---|---|---|---|
merchantLogin |
string |
да | — | Идентификатор магазина. |
outSum |
number (decimal) |
нет | — | Сумма к оплате (в рублях, через точку: 123.45). |
theme |
"light" | "dark" |
нет | light |
Цветовая тема. |
colorScheme |
"primary" | "secondary" | "accent" |
нет | primary |
Цветовая схема. |
size |
"s" | "m" |
нет | m |
Размер компонента. |
showLogo |
boolean |
нет | true |
Показывать логотип Robokassa. |
onclick |
function |
нет | — | JS-обработчик клика по бейджу. |
| Атрибут | Тип | Обяз. | По умолчанию | Описание |
|---|---|---|---|---|
merchantLogin |
string |
да | — | Идентификатор магазина. |
outSum |
number (decimal) |
да | — | Сумма к оплате (в рублях, через точку: 123.45). |
invId |
long |
нет | — | Уникальный номер счёта в магазине. |
receipt |
string |
нет | — | Чек (receipt), сериализованный в JSON-строку. |
signature |
string |
да | — | Контрольная сумма. Формируется в зависимости от переданных параметров: • без 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) |
theme |
"light" | "dark" |
нет | light |
Цветовая тема. |
size |
"s" | "m" |
нет | m |
Размер компонента. |
showLogo |
boolean |
нет | true |
Показывать логотип Robokassa Robokassa. |
borderRadius |
number (int) |
нет | 10 |
Скругление углов. Значение указывается в пикселях (px). Допустимый диапазон: от 10 до 48. |
hasSecondLine |
boolean |
нет | false |
Только для size="m". Признак отображения второй строки. |
descriptionPosition |
"left" | "right" |
нет | left |
Положение описания относительно содержимого. |
email |
string |
нет | — | E-mail покупателя. |
type |
"bnpl" | "credit" |
нет | — | Тип виджета. bnpl — «покупка сейчас, плати позже» (BNPL/рассрочка). credit — классический кредит. Если параметр не передан, то формируется два виджета для кредита и рассрочки |
mode |
"checkout" | "payment" |
нет | payment |
Тип действия: payment — стартует операцию, checkout — редирект по URL. |
checkoutUrl |
string (url) |
нет | — | Для mode="checkout". URL редиректа при клике на оплату. Добавляет параметр payment_method = выбранный метод оплаты |
paymentMethod |
string |
нет | — | Метод оплаты для отображения в виджете. |
<script src="https://auth.robokassa.ru/merchantbeta/bundle/robokassa-iframe-badge.js"></script>После подключения скрипта можно использовать
<robokassa-widget>и<robokassa-badge>в разметке.
Промоакция отображается:
- Если в виджете/бейдже доступен только метод промоакции.
В таблице [Robox]..[_intf_MrhPromo] хранятся типы промо-акций, отображаемые в виджетах/бейджах.
Каждая запись соответствует отдельной акции, связанной с определённым платёжным методом или валютой (Alias).
Изображение промо берётся по пути:
robox.merchant\MerchantNew\Vue\imagesNew\badge\promo\
Например: robox.merchant\MerchantNew\Vue\imagesNew\badge\promo\promo006.svg при ImageName = 'promo006.svg'.
Метод POST /Badge/GetInternalCurrencyPromo возвращает активные промо-акции по Alias. Результат метода кэшируется на 30 минут для оптимизации производительности.
- После изменения значения IsOn (включения или выключения акции) обновлённые данные появятся через 30 минут, после истечения срока кэша.
| Атрибут | Тип | Обяз. | По умолчанию | Описание |
|---|---|---|---|---|
Id |
int (IDENTITY 1,1) |
да | — | Уникальный идентификатор записи (первичный ключ). |
Label |
nvarchar(100) |
да | — | Технический лейбл промо (например, promo006). По нему подтягивается изображение промо в платежке. |
Text |
nvarchar(250) |
нет | — | Текст описания промо, отображаемый в виджете (например, «Без первого взноса»). |
ImageName |
nvarchar(250) |
нет | — | Имя файла изображения промо (например, promo006.svg). |
Alias |
nvarchar(50) |
да | — | Алиас валюты или платёжного метода (например, YandexPaySplit, Mokka, OTP, Podeli). |
IsOn |
bit |
да | 0 |
Флаг активности промо (1 — включено, 0 — выключено). |
<!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">
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- Большой виджет, BNPL, светлая тема, размер m -->
<robokassa-widget
outSum="6000"
merchantLogin="robokassa_demo"
signature="3eb3f2633714f30cc70bb571de8f8e64"
theme="light"
size="m"
borderRadius="50px"
descriptionPosition="right"
type="bnpl"
email="test@test.ru"
hasSecondLine="true"
mode="pay"
checkouturl="url">
</robokassa-widget>
<!-- Маленький виджет, BNPL, светлая тема, размер s -->
<robokassa-widget
outSum="6000"
merchantLogin="robokassa_demo"
signature="3eb3f2633714f30cc70bb571de8f8e64"
theme="light"
size="s"
borderRadius="50px"
descriptionPosition="right"
type="bnpl"
email="test@test.ru"
hasSecondLine="true"
mode="pay"
checkouturl="url">
</robokassa-widget>
<!-- Большой виджет, кредит, темная тема -->
<robokassa-widget
outSum="6000"
merchantLogin="robokassa_demo"
signature="3eb3f2633714f30cc70bb571de8f8e64"
theme="dark"
size="m"
borderRadius="12px"
descriptionPosition="right"
type="credit"
email="test@test.ru"
hasSecondLine="false"
mode="pay">
</robokassa-widget>
</div>
<!-- Бейдж для оплаты, с кастомным JS-обработчиком клика -->
<robokassa-badge
outSum="6000"
merchantLogin="robokassa_demo"
signature="3eb3f2633714f30cc70bb571de8f8e64"
onclick="badgeClickHandler">
</robokassa-badge>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<script>
function badgeClickHandler() {
console.log('Badge clicked!');
alert('✅ badgeClickHandler вызван!');
}
</script>
<script src="https://auth.robokassa.ru/merchantbeta/bundle/robokassa-iframe-badge.js"></script>
</body>
</html>