Подключение виджета

окно виджета

Платежный виджет - это встраиваемая форма оплаты, которая появляется поверх страницы вашего сайта, позволяя клиенту оплатить заказ без перехода на сторонние платежные шлюзы. Использование виджета обеспечивает безопасную передачу данных банковских карт через токенизацию и соответствие стандарту PCI DSS уровня 1, при этом основная ответственность за compliance лежит на провайдере решения, что значительно снижает требования для вашей организации. Виджет поддерживает широкий спектр способов оплаты, включая банковские карты (Visa, Mastercard, МИР), СБП, Sber Pay, Mir Pay и Gazprom Pay. Этот подход повышает конверсию платежей за счет удобства и скорости для покупателя, а также сохраняет целостность пользовательского опыта на вашем сайте.

Для установки платежного виджета необходимо в коде страницы сайта внутри тега <head>...</head> разместить скрипт подключения (https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js).

Пример подключения виджета

HTML

 <html>
    <head>
       <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js">
    </head>
    <body>
        ...
    </body>
 </html>

Инициализация виджета

В разделе <body>...</body> (в контенте страницы) в месте, где необходимо вывести платежную страницу, разместить код инициализации виджета:

Пример инициализации виджета

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>         
<div>
  <script>
        // Инициализация виджета с передачей необходимых параметров
        var payInvoice = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        InvoiceId: '3015690797',
                        EshopId: '123456',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 100.00,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        Preference: '',
                        UserField_1: '',
                        UserField_2: ''
             });
        }

        // Запуск виджета
        window.onload = payInvoice();
  </script>
</div>         
</body>
</html>

Использование виджета с Jquery

Если на сайте используется библиотека JQuery, то проинициализированный виджет можно запустить следующим образом:

Пример запуска виджета с JQuery

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключенный JQUERY -->
<script  src="https://code.jquery.com/jquery-3.6.3.js"></script>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>

<div>
  <script>
        // Инициализация виджета с передачей необходимых параметров
        var payInvoice = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        EshopId: '123456',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 100.00,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        Preference: '',
                        UserField_1: '',
                        UserField_2: ''
             });
        }

    // Обработчик клика на кнопку оплаты товара (который запустит платежный виджет)
     $(function() {
          $('#pay').click(() => {
            payInvoice();
          })
     });

  </script>

<!-- Кнопка оплаты товара -->
<div id="pay">Оплатить товар</pay>
</div>
</body>
</html>

Передача чека в виджет

При создании СКО с включенной онлайн-кассой, необходимо передавать параметр MerchantReceipt, в котором содержится чек.

Подробнее о правилах формирования чека.

Пример передачи чека

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>

<div>
  <script>
        // Сформированный чек
        let receipt = {
                            "inn":"7727563711",
                            "group":"Main",
                            "content":
                                {
                                    "type":1,
                                    "customerContact":"foo@example.com",
                                    "positions":[
                                        {
                                            "quantity":2.000,
                                            "price":12.45,
                                            "tax":6,
                                            "text":"Булка"
                                        },
                                        {
                                            "quantity":1.000,
                                            "price":5.10,
                                            "tax":4,
                                            "text":"Спички",
                                            "paymentSubjectType": 1,
                                            "paymentMethodType": 4
                                        },
                                        {
                                            "quantity":1.000,
                                            "price":53.70,
                                            "tax":4,
                                            "text":"Кефир",
                                            "supplierINN": 3808027390
                                        }
                                    ],
                                }
                            }


        // Инициализация виджета с передачей необходимых параметров
        var payInvoiceWith = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        EshopId: '123456',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 83.70,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        Preference: '',
                        UserField_1: '',
                        UserField_2: '',
                        MerchantReceipt: receipt
             });
        }

        // Запуск виджета
        window.onload =  payInvoiceWithReceipt();
  </script>
</div>

</body>
</html>

Установка вебхука в виджет

Виджет поддерживает вебхуки для событий "Успешная оплата" и "Закрытие виджета".

Пример установки вебхука

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>

<div>
  <script>
        // Инициализация виджета с передачей необходимых параметров
        var payInvoice = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        InvoiceId: '3015690797',
                        EshopId: '123456',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 100.00,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        Preference: '',
                        UserField_1: '',
                        UserField_2: ''
                    },
                    {
                        onSuccess: function (options) { // success
                            // Действие при успешной оплате
                            console.log(options)
                        },
                        onClosedWindow: function () { // success
                            // Действие при закрытии окна виджета
                             console.log('closed Window');
                        },
                    }
             });
        }

        // Запуск виджета
        window.onload = payInvoice();
  </script>
</div>

</body>
</html>

Инициализация виджета для физических лиц

Для работы с физическими лицами, необходимо дополнительно передать параметры:

EshopId = 450157;
UserFieldName_0 = "Перевод в кошелек";
UserField_0 = 13132131312; // Данное значение можно получить в Личном кабинете физического лица (идентификатор аккаунта AccountId)
UserFieldName_9 = 'UserPaymentFormId';
UserField_9 = 3564; // Данное значение можно получить в Личном кабинете физического лица (идентификатор формы FormId)
FormType = 'PeerToPeer';

Пример инициализации виджета для физических лиц:

Пример работы виджета для физических лиц

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>

<div>
  <script>
        // Инициализация виджета с передачей необходимых параметров
        var payInvoice = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        EshopId: '450157',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 100.00,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        ResultUrl: '',
                        UserFieldName_0: 'Перевод в кошелек',
                        UserField_0: '13132131312',
                        UserFieldName_9: 'UserPaymentFormId',
                        UserField_9: '3564',
                        FormType: 'PeerToPeer'
             });
        }

        // Запуск виджета
        window.onload = payInvoice();
  </script>
</div>

</body>
</html>

Программное закрытие виджета

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

Программное закрытие виджета

HTML

<!DOCTYPE html>
<html>
<head>
<title>Тестовая платежная страница</title>
<!-- Подключаем скрипт платежного виджета -->
<script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script>
</head>
<body>

<div>
  <script>

        var linkToFrame; // Глобальная переменная для привязки к всплывающей форме

        // Инициализация виджета с передачей необходимых параметров
        var payInvoice = () => {
              return IntellectMoneyMerchantWidget.Configuration.init({
                        EshopId: '450157',
                        OrderId: '666333',
                        ServiceName: 'Тестовый заказ',
                        RecipientCurrency: 'RUB',
                        RecipientAmount: 100.00,
                        Email: 'asdf@mail.ru',
                        SuccessUrl: '',
                        ResultUrl: '',
                        UserFieldName_0: 'Перевод в кошелек',
                        UserField_0: '13132131312',
                        UserFieldName_9: 'UserPaymentFormId',
                        UserField_9: '3564',
                        FormType: 'PeerToPeer'
             });
        }

        // Запуск виджета
        window.onload = function() {
          linkToFrame = payInvoice();
        }

        ...

        document.getElementById("close").addEventListener("click", closeFunction); // Обработчик вызывающий закрытие окна

        function closeFunction(event) {
          linkToFrame.close()
        }      

  </script>
</div>

<div id="close">Альтернативная кнопка закрытия окна</div>

</body>
</html>

Параметры

Вызов виджета определяет схему действий в соответствие параметра InvoiceId.

Параметр	Свойства	Описание
`InvoiceId`	STRING CONDITION 3xxxxxxxxx	Номер СКО. Условия: При указании `InvoiceId` все иные параметры будут игнорироваться, и загрузится платежная страница по переданному `InvoiceId`. Если не передать `InvoiceId`, то будут проанализированы остальные параметры с попыткой создания нового СКО.
`EshopId`	STRING CONDITION max 6	Номер магазина. Можно найти в личном кабинете, в разделе магазины.
`OrderId`	STRING CONDITION max 50	Номер покупки. Внутренний номер покупки из вашей системы (интернет-магазина). По умолчанию в расширенных настройках магазина на вкладке "Подключение магазина" включена опция "Принимать только уникальный номер покупки", что позволяет легко идентифицировать СКО.
`ServiceName`	STRING OPTIONAL max 1024	Назначение платежа. Служит для описания товара или услуги.
`RecipientAmount`	DECIMAL CONDITION max 13	Сумма платежа. Минимальное значение 1.00. Формат: десятичное число с двумя знаками после точки, не использовать запятые и пробелы.
`RecipientCurrency`	STRING CONDITION const	Валюта платежа. Допустимые значения: `RUB` и `RUR` - для платежей в рублях. `TST` - для тестовых платежей. `USD` - для платежей в американских долларах. `EUR` - для платежей в евро.
`Email`	STRING CONDITION max 100	Электронная почта покупателя.
`SuccessUrl`	STRING OPTIONAL max 512	Адрес успешного платежа. URL адрес, на который происходит перенаправление плательщика с платежной страницы после успешной оплаты.
`MerchantReceipt`	OBJECT CONDITION	Чек для онлайн-кассы. Подробнее о правилах формирования чека. Условия: Передается обязательно при включенной онлайн-кассе. Передается по усмотрению при включенной онлайн-кассе с автогенерацией чеков. Не передается в остальных случаях.
`Preference`	STRING OPTIONAL const	Способ оплаты. Определяет варианты оплаты, которые доступны для СКО. Допустимые значения: `BankCard` - банковская карта. `SberPay` - SberPay. `GazpromPay` - GazpromPay. `MirPay` - MirPay. `Sbp` - СБП. `BNPL` - оплата в рассрочку. Возможно передача нескольких значений через запятую: `preference = BankCard,SberPay,MirPay`
`UserFieldName_N`	STRING OPTIONAL	Наименование дополнительного параметра. Предоставляет возможность идентифицировать значение дополнительного параметра по имени, подробнее здесь.
`UserField_N`	STRING OPTIONAL	Значение дополнительного параметра. Предоставляет возможность передачи дополнительной информации, подробнее здесь.