Виджет для сайта

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

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

    <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="ru">
    <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-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"`
ata-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"`

21 мая 2026