Платёжный виджет позволяет встроить платежную систему в всплывающем окне непосредственно на сайт, где производится оплата товара, без перевода клиента на стороннюю страницу для оплаты.
Данный виджет поддерживает все виды доступных платежных систем.
Для установки платежного виджета необходимо в коде страницы сайта внутри тега <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>
Параметры
Вызов виджета определяет схему действий:
- При указании InvoiceId все иные параметры будут игнорироваться и загрузится платежная страница по переданному номеру счету.
- Если не передать InvoiceId будут проанализированы остальные параметры и будет произведена попытка создания нового счета.
|
|---|