🖥️Web-SDK

KYC Widget

1. Example of Integration in a JavaScript Application

  1. Define a button <button id="btn">Open KYC Widget</button> and an event handler for clicks

  2. Include the script in the <script src=""> </script> tag before the closing tag

  3. Below, define the integration code:

    • schemaId: a unique identifier of the schema (mandatory);

    • clientKey: client key (optional)

File: index.html

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

    <!-- Connecting the script -->
    <script src="https://kyc.enface.ai/lib/widget-lib.js"></script>

    <!-- Widget launch example-->
    <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. Example of Integration in a React Application

  1. Install npm package: npm i kyc-widget

  2. Import into the application: import { KycWidget } from "kyc-widget"

  3. Define a state for showing/hiding the widget: const [isOpen, setIsOpen] = useState(false)

  4. Define a button <button onClick={() => setIsOpen(true)}>Open</button> and an event handler for clicks

  5. Props passed to the widget component:

    • schemaId: a unique identifier of the schema (mandatory);

    • clientKey: client key (optional);

    • isOpen: boolean value (mandatory);

    • closeCb: callback function for closing the widget (mandatory);

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;

3. Verification

To complete the verification, you can use the service at https://kyc.enface.ai

When you follow the link provided below, a session is created:

https://kyc.enface.ai/schemaId/clientKey

  • schemaId - a unique identifier of the scheme, which needs to be obtained in the user's personal account in the «KYC/AML» section;

  • clientKey - a client key is any string, up to a maximum length of 36 characters, defined by the client according to their business logic.

Obtaining schemaId

PreviousEnFaceNextRecognizing documents

Last updated