Page tree

Платёжный виджет позволяет встроить платежную систему в всплывающем окне непосредственно на сайт, где производится оплата товара, без перевода клиента на стороннюю страницу для оплаты.

Данный виджет поддерживает все виды доступных платежных систем.

Для установки платежного виджета необходимо в коде страницы сайта внутри тега <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>


Параметры

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

  1. При указании InvoiceId все иные параметры будут игнорироваться и загрузится платежная страница по переданному номеру счету.
  2. Если не передать InvoiceId будут проанализированы остальные параметры и будет произведена попытка создания нового счета.
ПараметрыФорматПрименениеОписание
InvoiceIdStringНеобязательныйНомер  счета.
EshopIdStringОбязательныйНомер магазина
OrderIdStringОбязательныйВнутренний номер покупки интернет магазина
ServiceNameStringОбязательныйНазначение платежа
RecipientCurrencyStringОбязательныйВалюта платежа
RecipientAmountFloatОбязательныйСумма платежа
EmailStringОбязательныйE-mail платежа
SuccessUrlStringНеобязательныйАдрес удачного платежа
FailUrlStringНеобязательныйАдрес неудачного платежа
PreferenceStringНеобязательныйСпособ оплаты. Соответствия preference & inputType
UserField_NStringНеобязательныйДополнительный параметры. Формат описан тут.
MerchantReceiptObject

Обязательный

(при наличии включенной кассы)

Данные по чеку.

(Правила формирования чека для онлайн кассы описаны тут)
  • No labels