Платёжный виджет позволяет встроить платежную систему в всплывающем окне непосредственно на сайт, где производится оплата товара, без перевода клиента на стороннюю страницу для оплаты.
Данный виджет поддерживает все виды доступных платежных систем.
Для установки платежного виджета необходимо в коде страницы сайта внутри тега <head>...</head> разместить скрипт подключения (https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js).
Пример:
<html> <head> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"> </head> <body> ... </body> </html>
В разделе <body>...</body> ( в контенте страницы) в том месте в котором необходимо вывести платежную страницу, необходимо разместить код инициализации виджета:
<!DOCTYPE html> <html> <head> <title>Тестовая платежная страница</title> <!-- Подключаем скрипт платежного виджета --> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script></head> </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: '', FailUrl: '', Preference: '', UserField_1: '', UserField_2: '' }); } // Запуск виджета window.onload = payInvoice(); </script> </div> </body> </html>
Если на сайте используется библиотека JQuery, то проинициализированный виджет можно запустить следующим образом:
<!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> </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: '', FailUrl: '', Preference: '', UserField_1: '', UserField_2: '' }); } // Обработчик клика на кнопку оплаты товара (который запустит платежный виджет) $(function() { $('#pay').click(() => { payInvoice(); }) }); </script> <!-- Кнопка оплаты товара--> <div id="pay">Оплатить товар</pay> </div> </body> </html>
Если у Вас подключена касса, то для создания счёта необходимо передавать чек.
(Правила формирования чека для онлайн кассы описаны тут)
Пример инициализации виджета с передачей параметра MerchantReceipt в который передается структура чека:
<!DOCTYPE html> <html> <head> <title>Тестовая платежная страница</title> <!-- Подключаем скрипт платежного виджета --> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script></head> </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: '', FailUrl: '', Preference: '', UserField_1: '', UserField_2: '', MerchantReceipt: receipt }); } // Запуск виджета window.onload = payInvoiceWithReceipt(); </script> </div> </body> </html>
Виджет поддерживает Callback: Успешная оплата и закрытие виджета.
Пример инициализации виджета с Callback :
<!DOCTYPE html> <html> <head> <title>Тестовая платежная страница</title> <!-- Подключаем скрипт платежного виджета --> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script></head> </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: '', FailUrl: '', 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';
Пример инициализации виджета для физ.лиц:
<!DOCTYPE html> <html> <head> <title>Тестовая платежная страница</title> <!-- Подключаем скрипт платежного виджета --> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script></head> </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()"
<!DOCTYPE html> <html> <head> <title>Тестовая платежная страница</title> <!-- Подключаем скрипт платежного виджета --> <script src="https://merchant.intellectmoney.ru/v2/js/IntellectMoneyMerchantWidget.js"></script></head> </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 = { linkToFrame = payInvoice(); } ... document.getElementById("close").addEventListener("click", closeFunction); // Обработчик вызывающий закрытие окна function closeFunction(event) { linkToFrame.close() } </script> </div> <div id="close">Альтернативная кнопка закрытия окна</div> </body> </html>
Параметры
Вызов виджета определяет схему действий:
- При указании InvoiceId все иные параметры будут игнорироваться и загрузится платежная страница по переданному номеру счету.
- Если не передать InvoiceId будут проанализированы остальные параметры и будет произведена попытка создания нового счета.
|
---|