Виджет “Выставление счета на оплату” предназначен для того чтобы ваши клиенты смогли пользуясь вашим сайтом выставить себе счёт на оплату ваших услуг в 1 клик.
Счёт, выставленный клиентом отобразится в Личном кабинете мерчанта и вы сможете контролировать оплату по счёту в онлайн-режиме.
Где скачать виджет
Дистрибутивный комплект виджета вы можете скачать по следующей
ссылке
Встройка виджета
Что нужно сделать перед тем как встроить виджет
- Зарегистрируйтесь в сервисе Seeneco
- Добавьте в сервисе тестовый счёт, по шаблону которого будут создаваться все остальные счета.
Инструкция по добавлению счета в сервисе доступна здесь здесь
В рамках этого процесса будет выполнено следующее
- Добавлена в сервис компания в список своих организаций
- Добавлен банковский счёт компании, который будет указан в счете на оплату
- Добавлен сотрудник, который будет указан в счете, в качестве лица, подписывающего счёт
- Добавлен логотип, подпись и печать компании, отображаемая на счете
Как настроить виджет
Вся настройка виджета производится через конфигурационный файл, входящий в дистрибутив.
Пример файла, приведен ниже
{
"TestMode": false,
"TestToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkZW1vIiwiaXNzIjoiaHR0cHM6Ly90ZXN0LnNlZW5lY28uY29tIiwiYXBpX3Vzcl9pZCI6MjQ4MDcyLCJleHAiOjE1NDI4Mjc3MjYsImlhdCI6MTUxMTI5MTcyNn0.7oiDIef1PZ_vbS1brWCO_mSFdF_xWsQIBbtND2-kdlw",
"APIEndpoint": "https://merchant.server.ru/snc-core-services/api/v2/invoices",
"LegalEntity": {
"Name": "Общество с ограниченной ответственностью \"Победа\"",
"TaxCode": "7715962930",
"AdditionalTaxCode": "123123123"
},
"LegalEntityAccount": {
"AccountNumber": "40702810801300004311",
"BankName": "ЗАПАДНО-СИБИРСКИЙ БАНК ПАО СБЕРБАНК",
"BankBIC": "047102651"
},
"SignEmployee": {
"Name": "Иванов"
},
"SignImageURL": "./sign.png",
"EmailData": {
"From": "test@seeneco.ru",
"MailMessage": "Тестовое Сообщение"
}
}
Ниже приведено описание параметров файла.
| Параметр |
Описание |
|
TestMode
|
Отвечает за переключение виджета в тестовый режим, в котором API токен передается
напрямую из виджета в Seeneco, не используя сервер сайта, в который встраивается виджет.
ОБЯЗАТЕЛЬНО отключите этот режим (значение false) перед установкой в
режим промышленной эксплуатации.
|
|
TestToken
|
Значение токена, передаваемого в тестовм режиме. Подробнее см. раздел Аутентификация
|
|
APIEndpoint
|
URL на который будет отправляться запрос от виджета при нажатии на кнопку “Выставить счет”
|
|
LegalEntity
|
Реквизиты компании, которая выставила счет, состоящие из следущих полей
- Name – полное наименование компании
- TaxCode – ИНН компании
- AdditionalTaxCode – КПП компании
Эти реквизиты будут отображаться в виджете в разделе о компании получателе.
|
|
LegalEntityAccount
|
Реквизиты счета компании, на который должны быть переведены средства по оплате счета
- AccountNumber – полное наименование компании
- BankName – наименование банка, в коором открыт счет
- BankBIC – БИК банка в котором открыт счет
Эти реквизиты будут отображаться в виджете в разделе о компании получателе.
|
|
SignImageURL
|
URL изображения, содержащего печать компании. Это изображение будет выводиться в виджете счета.
|
|
EmailData
|
Данные для формирования письма со счетом, которое будет отправлено покупателю
- From – Адрес компании отравителя, включаемый в почтовое сообщение
- MailMessage – необязательный текст сопроводительного письма
|
Как встроить виджет в веб-страницу
- Скачайте дистрибутив виджета с сайта и установите его на ваш web-сервер или укажите ссылку на виджет на странице вашего сайта
- Инициализируйте виджет при помощи следующего JavaScript кода
var widget = new SeenecoInvoiceWidget();
- Инициализируйте настройки виджета, которые будут неизменны для всех выставляемых счетов
- Перед отображением виджета установите перечень товаров и услуг, которые оплачивает клиент
- Укажите реквизиты клиента – Наименование компании и ИНН
- Для отображения виджета выполните команду
render() передав ей ID контейнера,
в котором должен отобразиться виджет
Пример кода встройки виджета в HTML секции
script
var widget = new SeenecoInvoiceWidget();
widget.loadConfig('./seeneco-invoice-widget.config.json');
widget.setItems([
{
Description: 'Бумага Xerox Performer А4',
ItemPrice: 230,
ItemTaxRate: 0.18,
Qty: 2
},
{
Description: 'Бумага Xerox Performer А4',
ItemPrice: 230,
ItemTaxRate: 0.18,
Qty: 1
}
]);
widget.setCounterparty({
Name: 'ООО «Контерпарти»',
TaxCode: '88888888',
Email: 'bill@gmail.com'
});
widget.setInvoice({
RequiredPaymentDate: '31-01-2018',
DateIssued: '01-01-2018',
Number: '456',
Description: 'Счёт за услуги предоставления связи по договору ГПХ-3215 за период Октябрь 2017'
});
widget.render({
selector: '#seeneco',
other: {
SignImageURL: './sign.png'
}
});
Как проверить работу виджета в тестовом режиме
Для проверки работы виджета в тестовом режиме можно не настраивать обработку запроса от виджета на вашем сервере.
Запросите доступ к тестовому стенду Seeneco написав нам письмо по адресу developer@seeneco.ru.
Мы создадим для вас тестовый аккаунт и сгенерируем для него ключ.
В настройках виджета (файле
seeneco-invoice-widget-config.json) укажите
- Параметр
"TestMode": true
- В значении параметра
TestToken укажите строку токена из Личного кабинета тестового аккаунта в Seeneco, полученного в
ответе на письмо от developer@seeneco.ru
- В качестве значения параметра
APIEndpoint укажите адрес API «Выставить счёт» тестового сервиса Seeneco
https://test.seeneco.com/snc-core-services/api/v2/invoices
Как перевести виджет в режим промышленной эксплуатации
Для перевода виджета в режим промышленной эксплуатации необходимо реализовать хранение и передачу в Seeneco токена
с вашего сайта.
Для этого вам необходимо сделать следующее
В настройках виджета (файле
seeneco-invoice-widget-config.json) укажите
- Параметр
"TestMode": false
- В качестве значения параметра
APIEndpoint укажите адрес вашего сервера – того URL на который будут приходить
POST запросы от виджета, например https://your-server.com/invoice-proxy
Далее по указанному адресу вам необходимо реализовать
обработчик, который будет добавлять
в заголовок получаемого запроса заголовок
Authorization со значением
Bearer Значение_Access_Token.
Пример кода обработчика, реализованного на языке программирования
PHP
<?
$token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkZW1vIiwiaXNzIjoiaHR0cHM6Ly90ZXN0LnNlZW5lY28uY29tIiwiYXBpX3Vzcl9pZCI6MjQ4MDcyLCJleHAiOjE1NDI4Mjc3MjYsImlhdCI6MTUxMTI5MTcyNn0.7oiDIef1PZ_vbS1brWCO_mSFdF_xWsQIBbtND2-kdlw';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://test.seeneco.com/snc-core-services/api/v2/invoices');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '.$token));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
var_dump($response);
?>
Полученный POST запрос ваш сервер должен передавать в Seeneco по адресу
https://seeneco.com/snc-core-services/api/v2/invoices
