Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Image Added

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

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

...

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>


Если у Вас подключенна подключена касса, то для создания счёта , необходимо передавать чек.

...

Виджет поддерживает 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>

 Программное закрытие виджета:

Для закрытия виджета, необходимо функцию вызова присвоить глобальной переменной. После чего у данной переменной вызвать метод "close()"

Code Block
languagejs
titleПрограммное закрытие виджета
<!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 все иные При указании InvoiceId все иные параметры будут игнорироваться и загрузится платежная страница по переданному номеру счету.
  2. Если не передать InvoiceId будут проанализированы остальные параметры и будет произведена попытка создания нового счета.


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

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

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

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

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