Web SDK installation

Ways to integrate

• A script tag in a plain JavaScript page: load the widget script, then call window.KYCWidget.setupKYC({...}).
• A script tag in a React application: load the same script in an effect and call setupKYC from a handler.
• A direct link: the platform hosts the verification page for a scenario. You build the link with the scenario identifier and the encrypted client key.

The samples below use placeholders. The integration documentation tab of your scenario in the dashboard shows the exact script address for your account. See working with clientKey for the encrypted key.

Before you launch

1. Add your domain to the allowed domains. In the dashboard, open Access and then Allowed domains, and add every domain where the widget is embedded. See allowed domains.
2. Serve the page over HTTPS. Browsers give camera access only to secure pages.
3. Put the widget on the main page of your site, not inside an iframe. Browsers block the camera inside a cross-origin iframe.

Plain JavaScript

<button id="btn" disabled>Loading...</button>
<script>
  const btn = document.getElementById("btn");
  const script = document.createElement("script");
  script.src = "<WIDGET_SCRIPT_URL>";
  script.onload = () => { btn.disabled = false; btn.textContent = "Open verification"; };
  script.onerror = () => { btn.textContent = "Could not load the widget"; };
  document.body.appendChild(script);

  btn.addEventListener("click", () => {
    window.KYCWidget.setupKYC({
      scenarioId: "<your scenario id>",
      clientKey: "<encrypted client key from your server>",
      clientUser: "<your user id>",
      theme: "light",
      closeCb: () => console.log("closed"),
      successCb: (sessionJson) => console.log("success", sessionJson),
      finalizedCb: ({ status }) => console.log("already finalized", status),
    });
  });
</script>

React, with the script tag

import { useState, useEffect } from "react";

export default function Verify({ clientKey }) {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if (window.KYCWidget) { setLoaded(true); return; }
    const script = document.createElement("script");
    script.src = "<WIDGET_SCRIPT_URL>";
    script.defer = true;
    script.onload = () => setLoaded(true);
    document.head.appendChild(script);
  }, []);

  const open = () =>
    window.KYCWidget.setupKYC({
      scenarioId: "<your scenario id>",
      clientKey,
      theme: "light",
      closeCb: () => {},
      successCb: (sessionJson) => console.log("success", sessionJson),
    });

  return loaded ? <button onClick={open}>Open verification</button> : null;
}

Options

Do not call setupKYC from inside closeCb: repeated detection can recurse.

Decide on the server

The callbacks run in the browser of the user, so a user can tamper with them. Decide on the customer from the status your server reads with session status, or from the SESSION_COMPLETE webhook. The shape of the result is described in the session object.

Direct link

Instead of embedding the widget you can send the user to the verification page that the platform hosts. The link has the form <verification page>/<scenarioId>/<encrypted clientKey>, with the client key URL-encoded because the encrypted value is Base64 and can contain / and +. An optional last segment carries the clientUser. Single-use links for a batch of users are generated in the dashboard. See KYC and AML in the platform user guide.

Next

Parameters shows how to brand the widget in the editor.