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