🖥️Web-SDK

KYC Widget

1. Пример подключения в JavaScript приложение

  1. Определяем кнопку <button id="btn">Open KYC Widget</button> и обработчик события клика

  2. Подключаем скрипт в теге <script src=""> </script> перед закрывающимся тегом </body>

  3. Ниже определяем код интеграции:

    • schemaId: уникальный идентификатор схемы(обязательно);

    • clientKey: ключ клиента (опционально)

File: index.html

  <body>
    <button id="btn">Open KYC Widget</button>

    <!-- Подключение скрипта -->
    <script src="https://kyc.neuro-vision.ru/lib/widget-lib.js"></script>

    <!-- Пример запуска виджета-->
    <script>
      const schemaId = "SCHEMA_ID";
      const clientKey = "CLIENT_KEY";

      const btn = document.getElementById("btn");

      const openWidget = () => {
        window.KYCWidget.setupKYC({
          schemaId: schemaId,
          clientKey: clientKey
        });
      };

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

2. Пример подключения в React приложение

  1. Установка npm package: npm i kyc-widget

  2. Импорт в приложение: import { KycWidget } from "kyc-widget"

  3. Определяем стейт true/false отображения виджета: const [isOpen, setIsOpen] = useState(false)

  4. Определяем кнопку <button onClick={() => setIsOpen(true)}>Open</button> и обработчик события клика

  5. Пропсы передаваемые в компонент виджета:

    • schemaId: уникальный идентификатор схемы(обязательно);

    • clientKey: ключ клиента (опционально);

    • isOpen: boolean значение (обязательно);

    • closeCb: callback func закрытия виджета (обязательно);

File: App.js

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

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

  const schemaId = "SCHEMA_ID";
  const clientKey = "CLIENT_KEY";

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>

      <KycWidget
        schemaId={schemaId}
        clientKey={clientKey}
        isOpen={isOpen}
        closeCb={() => setIsOpen(false)}
      />
      
    </>
  );
}

export default App;
PreviousРаспознаваемые документыNextСтек технологий

Last updated