kyc-widget

v1.4.16

Published

3 months ago

KYC Widget Application

0High
0Medium
0Low

enface

KYC Widget

Configuration Options

| Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | scenarioId | string | Yes | - | Unique scenario identifier from "KYC/AML" section in personal account | | clientKey | string | Yes | - | Client key, any string up to 36 characters | | clientUser | string | No | - | Any parameter at the client's discretion, max 36 characters | | isOpen | boolean | Yes* | - | Widget visibility state (*only for React component) | | debug | boolean | No | false | Debug mode | | theme | "light" \| "dark" | No | "dark" | Widget theme | | stickySession | boolean | No | false | Use sticky sessions (user redirected to active session regardless of clientKey) | | closeCb | function | No | - | Callback triggered when the widget is closed | | successCb | function | No | - | Callback triggered upon successful verification | | topOffset | number | No | 0 | Top padding in pixels | | bottomOffset | number | No | 0 | Bottom padding in pixels |

1. Example of Integration in a JavaScript Application via Script Tag (index.html)

Define a button with initial loading state.
Load the script dynamically and enable the button when ready.
Call window.KYCWidget.setupKYC() on button click.

File: index.html

  <body>
    <button id="btn" disabled>Loading...</button>

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

      const script = document.createElement("script");
      script.src = "https://kyc.enface.ai/lib/widget-lib.js";
      script.onload = () => {
        btn.disabled = false;
        btn.textContent = "Open 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. Example of Integration in a React Application via NPM Package

Install the npm package: npm i kyc-widget.
Import it into the application: import { KycWidget } from "kyc-widget".
Define a state variable to control the widget's visibility.
Pass props to the KycWidget component (see Configuration Options above).

File: App.js

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

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</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. Example of Integration in a React Application via Script Tag

Use this method if you cannot install the npm package and need to load the widget via script.

Load the widget script dynamically in useEffect.
Track loading state with useState.
Show the button only after the script is loaded.
Call window.KYCWidget.setupKYC() on button click.

File: 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.enface.ai/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}>Open KYC Widget</button>
      )}
    </>
  );
}

export default App;

4. Verification via Link

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

By following the link below, a session is created:

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

scenarioId: A unique scenario identifier, which must be obtained in the user’s personal account under the "KYC/AML" section.
clientKey: A client key, which is any string up to 36 characters long, defined by the client according to their business logic.

Published

Vulnerabilities

Links

Maintainers

Keywords