Подготовка к запуску Быстрого Пополнения Счета (БПС)

Это старая версия документа!

Возможны несколько сценариев использования БПС:

На глобальном сервере с эквайрингом и фискализацией Лайма
На глобальном сервере с эквайрингом и фискализацией заказчика
На локальном сервере

В любом случае для работы БПС требуется использование постоянных карт клиентов с преднапечатанными номерами тождественными внутреннему идентификатору карты!

Подготовительных работ от заказчика не требуется.

ЮKassa ограничила использование iframe для отображения страницы оплаты по соображениям безопасности.

Заключить договор с ЮКассой/Сбербанком/Тинькофф (важно: для получения доступа к ЛК Тинькофф требуется написать им заявку) на интернет эквайринг, предоставить ключи доступа.
Ссылка на сайт Юкассы https://yookassa.ru/connection/
Зарегистрировать онлайн-фискальник АТОЛ : https://atol.online/ (или иной, поддерживаемый выбранным интернет эквайером) и подключить его в личном кабинете эквайера, либо передать нам данные для доступа в личный кабинет эквайера и хостинга онлайн фискальника
Подготовить на своем сайте страницу с данными, отвечающими требованиям эквайера, политикой конфиденциальности и правилами использования приложения, и предоставить ссылку на данную страницу (Пример):

В правилах возврата указать что все возвраты осуществляются только на кассах!
1. Сбербанк: https://3dsec.sberbank.ru/techportal/doku.php/merchant_website_guidelines (раздел 8. На сайте интернет-магазина обязательно должны быть размещены:)
2. Тинькофф: https://help.tinkoff.ru/internet-acquiring/requirements/info/ (по сути аналогично сбербанку)
3. ЮКасса: аналогично Сбербанку.

Обеспечить белый ip-адрес, доступ до сервера по TCP портам 80 и 443, доменное имя, настроенный SSL и https (доменное имя и настройка SSL/HTTPS могут быть предоставлены Лаймом)
1. В случае использования эквайринга и фискализации Лайма дополнительных подготовительных работ не требуется
2. В случае использования эквайринга и фискализации заказчика см раздел выше.

Для автоматического перенаправления на виджет с сайта лайма в параметре Шаблон URL редиректа указать значение https://widget.lime-it.ru/?integrationId={0}&card={1}

При использовании локального сервера виджет следует размещать так же на локальном сервере, адрес виджета будет соответствовать адресу локального сервера, например https://widget.vdnh.lime-it.ru

Ниже приведен пример встройки, для тестового виджета с тестовыми реквизитами! В комментариях к скрипту указано какие параметры следует заменить при встройке боевого виджета

Встройка осуществляется через iframe силами заказчика (подрядчика, выполняющего обслуживание сайта заказчика), ниже приведен пример встройки в статическую html страницу

ЮKassa ограничила использование iframe для отображения страницы оплаты по соображениям безопасности.

widget.html

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
	// защита от повторной загрузки фрейма
	// если есть возможность использовать <body onload="setWidgetAddress()"> то лучше использовать его
	// если нет, то <iframe id="wigetFrame" onload="setWidgetAddress()">
	let g_widgetAddressApplied = false;
 
	// Установка адреса виджета
	function setWidgetAddress() {
		if (g_widgetAddressApplied)
            	return;
 
		g_widgetAddressApplied = true;
 
		// Разбор параметров URL для получения кода карты
		const urlParams = new URLSearchParams(window.location.search);
		const cardCode = urlParams.has('card') ? urlParams.get('card') : urlParams.get('uid');
 
		// Для загрузки виджета нужны 2 параметра:
		//   * адрес хоста виджета - ниже по коду widgetAddress 
		//   * идентификатор интеграции со стороны лайма - ниже по коду integrationId
 
		// сменить на боевой адрес при размещении сервера Лайма на стороне Лайма: https://widget.lime-it.ru
		// в случае, если сервер Лайма размещен на хостинге заказчика, уточнить у Лайма адрес сервера
		const widgetAddress = 'https://test.widget.lime-it.ru';
 
		// запросить у Лайма идентификатор интеграции
		const integrationId = 37;
 
		document.getElementById('wigetFrame')
            	.setAttribute('src', `${widgetAddress}?integrationId=${integrationId}` + (!!cardCode ?  `&card=${cardCode}` : ''));
 
        }
    </script>
</head>
<body style="height: 100vh">
    <iframe id="wigetFrame" style="width: 80%; height: 80%" onload="setWidgetAddress()">
 
    </iframe>
</body>
</html>

Ниже приведен пример встройки, для тестового виджета с тестовыми реквизитами! В комментариях к скрипту указано какие параметры следует заменить при встройке боевого виджета

Встройка осуществляется через iframe силами заказчика (подрядчика, выполняющего обслуживание сайта заказчика), ниже приведен пример встройки в статическую html страницу

ЮKassa ограничила использование iframe для отображения страницы оплаты по соображениям безопасности.

widget.html

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
	// защита от повторной загрузки фрейма
	// если есть возможность использовать <body onload="setWidgetAddress()"> то лучше использовать его
	// если нет, то <iframe id="wigetFrame" onload="setWidgetAddress()">
	let g_widgetAddressApplied = false;
 
	// Установка адреса виджета
	function setWidgetAddress() {
		if (g_widgetAddressApplied)
            	return;
 
		g_widgetAddressApplied = true;
 
		// Разбор параметров URL для получения кода карты
		const urlParams = new URLSearchParams(window.location.search);
		const cardCode = urlParams.has('card') ? urlParams.get('card') : urlParams.get('uid');
 
		// Для загрузки виджета нужны 2 параметра:
		//   * адрес хоста виджета - ниже по коду widgetAddress 
		//   * идентификатор интеграции со стороны лайма - ниже по коду integrationId
 
		// сменить на боевой адрес при размещении сервера Лайма на стороне Лайма: https://admin.lime-it.ru
		// в случае, если сервер Лайма размещен на хостинге заказчика, уточнить у Лайма адрес сервера
		const widgetAddress = 'https://limepay.chudin.ru';
 
		// запросить у Лайма идентификатор интеграции
		const integrationId = 37;
 
		document.getElementById('wigetFrame')
            	.setAttribute('src', `${widgetAddress}/shop/${integrationId}?` + (!!cardCode ?  `card=${cardCode}` : ''));
 
        }
    </script>
</head>
<body style="height: 100vh">
    <iframe id="wigetFrame" style="width: 80%; height: 80%" onload="setWidgetAddress()">
 
    </iframe>
</body>
</html>

Также есть вариант встройки без iframe

<ticket-purchase-widget></ticket-purchase-widget>
 
<script>
    (() => {
        window.__widgetParams = {
            cdn: "https://limepay.chudin.ru/buy",
            apiUrl: "https://limepay.chudin.ru",
            integrationId: 1,
        };
        const widgetInstance = document.querySelector('ticket-purchase-widget');
        for (const key in window.__widgetParams) {
            widgetInstance[key] = window.__widgetParams[key];
        }
        const j = document.createElement('script');
        j.src = `${__widgetParams.cdn}/widget-loader.js?${(new Date()).getTime()}`;
        j.defer = true;
        document.head.appendChild(j);
    })()
</script>

Элемент ticket-purchase-widget должен находиться на месте предполагаемого расположения виджета

Для настройки виджета используются следующие параметры объекта window.__widgetParams

apiUrl	Адрес сервера, на который будут отправляться запросы в API	Обязательный
cdn	Адрес с ресурсами страницы, обычно это apiUrl + '/buy'	Обязательный
integrationId	Id интеграции	Обязательный
hideHeader	Нужно ли прятать шапку страницы 0 - оставить 1 - убрать	По умолчанию - 0
hideFooter	Нужно ли прятать подвал 0 - оставить 1 - убрать	По умолчанию - 0
fitCards	Настройка для показа карточек в мобильной версии 0 - как обычно, слайдером 1 - умещаем две карточки, остальное также слайдером	По умолчанию - 0