Платёжный виджет позволяет встроить платежную страницу (Мерчант) на сайта клиентасистему в всплывающем окне непосредственно на сайт, где производится оплата товара, без перевода клиента на стороннюю страницу для оплаты.
Данный виджет поддерживает все виды доступных платежных систем: Apple Pay, Google Pay, Yandex Pay и т.д.
Для установки платежного виджета необходимо в коде страницы сайта внутри тега <head>...</head> разместить скрипт подключения (https://merchant.intellectmoney.ru/commonv2/MerchantWidgetjs/IntellectMoneyMerchantWidget.js).
Пример:
Code Block |
---|
<html> <head> <script src="https://merchant.intellectmoney.ru/commonv2/MerchantWidgetjs/IntellectMoneyMerchantWidget.js"> </head> <body> ... </body> </html> |
В разделе <body>...</body> ( в контенте страницы) в том месте в котором необходимо вывести платежную страницу, необходимо разместить код инициализации виджета:
Code Block |
---|
<!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, то проинициализированный виджет можно запустить следующим образом:
Code Block |
---|
<!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 в который передается структура чека:
Code Block |
---|
<!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 :
Code Block |
---|
<!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';
Пример инициализации виджета для физ.лиц:
Code Block |
---|
<!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> |
Параметры
Вызов виджета определяет схему действий:
- При указании InvoiceId все иные параметры будут игнорироваться и загрузится платежная страница по переданному номеру счету.
- Если не передать InvoiceId будут проанализированы остальные параметры и будет произведена попытка создания нового счета.
|
---|