Платёжный виджет

Платёжный виджет – это финансовый инструмент, который представляет собой небольшое графическое интернет-приложение и легко размещается на главной странице сайта, позволяя покупателям быстро проводить оплату различными способами.

Примеры виджетов

Минимальный виджет

    <html lang="ru">
    <body>
    <div class="widget-box"
        data-container="widget-container"
        data-merchant-rid="42"
        data-buttontext="Купить">
    </div>
    <div id="widget-container" style="background-color: #ffffff"></div>
    <script src="https://pgtest.bspb.ru/widget/merchant/widget_base.js"></script>
    </body>
    </html>

Предустановленные суммы

    <html lang="ru">
    <body>
    <div class="widget-box" style="background-color: #ffffff"
        data-container="widget-container-1"
        data-merchant-rid="42"
        data-buttontext="Купить"
        data-amounts="[1,20,300,401,520,678]">
    </div>
    <div id="widget-container-1" style="background-color: #ffffff"></div>
    <script src="https://pgtest.bspb.ru/widget/merchant/widget_base.js"></script>
    </body>
    </html>

Явно указанные атрибуты

    <html lang="ru">
    <body>
    <div class="widget-box" style="background-color: #ffffff"
        data-container="widget-container-2"
             data-initial-amount="30"
             data-description="Оплата с помощью виджета"
             data-email="username@email.ru"
             data-phone="79211234567"
             data-client="Иванов Иван Иванович"
             data-merchant-rid="42"
             data-merchantlogo="true"
             data-merchant-name="Название ТСП"
             data-buttontext="Купить">
    </div>
    <div id="widget-container-2" style="background-color: #ffffff"></div>
    <script src="https://pgtest.bspb.ru/widget/merchant/widget_base.js"></script>
    </body>
    </html>

События

Получение статуса оплаты или деталей ошибки на странице размещения виджета

    <html lang="en">
    <body>
    ...
        <script src="https://pgtest.bspb.ru/widget/merchant/widget_base.js"></script>
        <script>
            // Обработчик успешного платежа
            globalThis.addEventListener('widgetSuccess', function(e) {
                console.log('widgetSuccess.status:', e.detail.status);
            });
            // Обработчик ошибки платежа
            globalThis.addEventListener('widgetFail', function(e) {
                console.log('widgetFail.data:', e.detail.data);
                console.log('widgetFail.error:', e.detail.error);
            });
        </script>
    </body>
    </html>

Data Attributes

Атрибут	Описание	Использование	Пример
data-container	Идентификатор виджета	обязательное поле	data-container="widget-container" или data-container="widget-container-N", где N - целое число
data-merchant-rid	Уникальный MerchantRID, выданный Банком	обязательное поле	data-merchant-rid="42"
data-buttontext	Текст кнопки для запуска процесса оплаты	обязательное поле	data-buttontext="Купить"
data-initial-amount	Сумма заказа	доступно для заполнения плательщиком при отсутствии атрибута в настройках	data-initial-amount="30"
data-amounts	Предустановленные суммы	при необходимости	data-amounts="[100,200,300]"
data-description	Описание заказа	доступно для заполнения плательщиком при отсутствии атрибута в настройках	data-description="Оплата с помощью виджета"
data-email	E-Mail плательщика	доступно для заполнения плательщиком при отсутствии атрибута в настройках	data-email="username@email.ru"
data-phone	Номер телефона плательщика	доступно для заполнения плательщиком при отсутствии атрибута в настройках	data-phone="79211234567"
data-client	ФИО плательщика	доступно для заполнения плательщиком при отсутствии атрибута в настройках	data-client="Иванов Иван Иванович"
data-merchantlogo	Логотип ТСП	при необходимости	data-merchantlogo="true"
data-merchant-name	Название ТСП	при необходимости	data-merchant-name="Название ТСП"
data-custom-amount-field	Поле для ввода произвольной суммы	может быть полезно, если указано data-initial-amount	data-custom-amount-field="true"
data-widget-response	Получение события оплаты	при необходимости	data-widget-response="true"

05 февраля 2026