Перейти к основному содержимому

Виджет подключения самозанятого к Банку 131

Используйте виджет, чтобы подключить самозанятого к Банку 131.

Принцип работы виджета​

  1. Самозанятый вводит ИНН или номер телефона, соглашается с условиями обработки и передачи информации, и нажимает Отправить запрос.

  2. Самозанятый подтверждает подключение к Банку 131 в Мой налог и нажимает Готово.

Инициализация виджета​

Шаг 1. Получите публичный токен​

Отправьте запрос Банку 131 на создание токена (token), передав в нем тип виджета self_employed_widget. В ответе вы получите публичный токен.

Шаг 2. Подключите скрипт и стили​

Подключите скрипт (JS) и стили (CSS) виджета. Для тестирования и операций с реальными данными адреса различаются:

<!-- Для тестовой среды -->
<link href="https://widget-demo.bank131.ru/self-employed.css" rel="stylesheet" />
<script src="https://widget-demo.bank131.ru/self-employed.js"></script>
<!-- Для операций с реальными данными -->
<link href="https://widget.bank131.ru/self-employed.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/self-employed.js"></script>

После подключения скрипта в глобальной области видимости появится класс Bank131SelfEmployed.

Шаг 3. Добавьте контейнер​

Добавьте контейнер с уникальным идентификатором для размещения виджета на странице:

<div id="bank131-self-employed"></div>

Шаг 4. Создайте экземпляр класса​

В конструктор класса Bank131SelfEmployed передайте публичный токен. В параметре taxReferenceOrPhone можете передать ИНН (12 символов) или номер телефона (11 символов в формате 70000000000). Это значение будет автоматически подставлено в поле ввода, чтобы самозанятый не ошибся при заполнении своих данных.

Шаг 5. Отобразите виджет​

Вызовите метод render():

<script>
  if (window.Bank131SelfEmployed) {
    const selfEmployed = new Bank131SelfEmployed({
      initialValues: {
        taxReferenceOrPhone: '500000000000',
      },
      stage: Bank131SelfEmployed.STAGES.bind,
      publicToken: '0eb43bd1b6f5c7ed83903d7acd774179621018a2e74fb2702e5616f1f31fe553', // токен
    });

    selfEmployed.render();
  }
</script>

Шаг 6. Дождитесь результата подключения​

Подпишитесь на сообщения о статусе подключения самозанятого:

window.addEventListener('message', function (event) {
  // Код обработчика

  console.dir(event.data);
});

Формат сообщения event.data:

{
  "meta": {
    "stage": "bind"
  },
  "payload": {
    "status": "completed" // "in_progress" или "failed"
  }
}

Возможные значения поля status:

  • completed — подключение прошло успешно;
  • in_progress — ожидание подтверждения самозанятого в Мой налог;
  • failed — ошибка подключения самозанятого.

Как подключить самозанятого к Банку 131 >