kyc-widget-nv

v1.4.16

Published

a month ago

KYC Widget Application

Downloads

0High
0Medium
0Low

enface

KYC Widget

Параметры конфигурации

| Параметр | Тип | Обязательный | По умолчанию | Описание | |----------|-----|--------------|--------------|----------| | scenarioId | string | Да | - | Уникальный идентификатор сценария из раздела "KYC/AML" в личном кабинете | | clientKey | string | Да | - | Ключ клиента, любая строка до 36 символов | | clientUser | string | Нет | - | Любой параметр на усмотрение клиента, макс. 36 символов | | isOpen | boolean | Да* | - | Состояние видимости виджета (*только для React компонента) | | debug | boolean | Нет | false | Режим отладки | | theme | "light" \| "dark" | Нет | "dark" | Тема виджета | | stickySession | boolean | Нет | false | Использовать sticky-сессии (пользователь перенаправляется в активную сессию независимо от clientKey) | | closeCb | function | Нет | - | Callback, вызываемый при закрытии виджета | | successCb | function | Нет | - | Callback, вызываемый при успешной верификации | | topOffset | number | Нет | 0 | Отступ сверху в пикселях | | bottomOffset | number | Нет | 0 | Отступ снизу в пикселях |

1. Пример интеграции в JavaScript-приложение через Script Tag (index.html)

Создайте кнопку с начальным состоянием загрузки.
Загрузите скрипт динамически и активируйте кнопку после загрузки.
Вызовите window.KYCWidget.setupKYC() по клику на кнопку.

Файл: index.html

  <body>
    <button id="btn" disabled>Загрузка...</button>

    <script>
      const btn = document.getElementById("btn");

      const script = document.createElement("script");
      script.src = "https://kyc.neuro-vision.ru/lib/widget-lib.js";
      script.onload = () => {
        btn.disabled = false;
        btn.textContent = "Открыть KYC Widget";
      };
      document.body.appendChild(script);

      const openWidget = () => {
        window.KYCWidget.setupKYC({
          scenarioId: "SCENARIO_ID",
          clientKey: "CLIENT_KEY",
          clientUser: "CLIENT_USER",
          debug: true,
          theme: "light",
          stickySession: true,
          topOffset: 0,
          bottomOffset: 0,
          closeCb: () => {},
          successCb: (sessionJsonValue) => {}
        });
      };

      btn.addEventListener("click", openWidget);
    </script>
  </body>

2. Пример интеграции в React-приложение через NPM-пакет

Установите npm-пакет: npm i kyc-widget-nv.
Импортируйте в приложение: import { KycWidget } from "kyc-widget-nv".
Создайте state-переменную для управления видимостью виджета.
Передайте props в компонент KycWidget (см. Параметры конфигурации выше).

Файл: App.js

import { useState } from "react";
import { KycWidget } from "kyc-widget-nv";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Открыть</button>

      <KycWidget
        scenarioId="SCENARIO_ID"
        clientKey="CLIENT_KEY"
        clientUser="CLIENT_USER"
        isOpen={isOpen}
        stickySession={true}
        debug={true}
        theme="light"
        topOffset={0}
        bottomOffset={0}
        closeCb={() => setIsOpen(false)}
        successCb={(sessionJsonValue) => {}}
      />
    </>
  );
}

export default App;

3. Пример интеграции в React-приложение через Script Tag

Используйте этот метод, если нет возможности установить npm-пакет и нужно загрузить виджет через скрипт.

Загрузите скрипт виджета динамически в useEffect.
Отслеживайте состояние загрузки с помощью useState.
Показывайте кнопку только после загрузки скрипта.
Вызовите window.KYCWidget.setupKYC() по клику на кнопку.

Файл: App.js

import { useState, useEffect, useCallback } from "react";

function App() {
  const [widgetLoaded, setWidgetLoaded] = useState(false);

  const openWidgetHandler = () => {
    window.KYCWidget.setupKYC({
      scenarioId: "SCENARIO_ID",
      clientKey: "CLIENT_KEY",
      clientUser: "CLIENT_USER",
      debug: true,
      theme: "light",
      topOffset: 0,
      bottomOffset: 0,
      closeCb: () => console.log("CLOSE CALLBACK"),
      successCb: (payload) => console.log("SUCCESS CALLBACK", payload),
    });
  };

  const loadWidgetScript = useCallback(() => {
    const widgetScript = document.getElementById("kyc-widget-script-id");
    if (widgetScript) return;

    const script = document.createElement("script");
    script.id = "kyc-widget-script-id";
    script.src = "https://kyc.neuro-vision.ru/lib/widget-lib.js";
    script.defer = true;
    script.crossOrigin = "anonymous";

    script.onload = () => {
      setWidgetLoaded(true);
    };

    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (window.KYCWidget) {
      setWidgetLoaded(true);
      return;
    }

    loadWidgetScript();
  }, [loadWidgetScript]);

  return (
    <>
      {widgetLoaded && (
        <button onClick={openWidgetHandler}>Открыть KYC Widget</button>
      )}
    </>
  );
}

export default App;

4. Верификация по ссылке

Для прохождения верификации можно воспользоваться сервисом https://kyc.neuro-vision.ru

При переходе по ссылке, приведённой ниже, создаётся сессия:

https://kyc.neuro-vision.ru/scenarioId/clientKey

scenarioId — уникальный идентификатор сценария, который необходимо получить в личном кабинете пользователя в разделе «KYC/AML».
clientKey — ключ клиента, любая строка максимальной длины 36 символов, определяемая клиентом в зависимости от его бизнес-логики.

Published

Vulnerabilities

Links

Maintainers

Keywords