React

Prerequisites

• A scenario and its identifier, from the KYC section of the dashboard.
• Your domain in the allowed domains, and the app served over HTTPS.
• A server endpoint that returns the encrypted client key. See Node.js, Python, PHP or Go.

The call sequence

1. Your server encrypts the raw client key with the secret key of the scenario.
2. Your page opens the widget with the scenario identifier and the encrypted client key.
3. The user completes the steps in the widget.
4. Your server learns of the result from the SESSION_COMPLETE webhook, or reads session status.
5. Your server decides on the customer from the server-side status.

The component

The component loads the widget script once, enables the button when the script is ready, and opens the widget on click. The endpoint /verification/start is an example name for a route that you write.

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

const SCRIPT_ID = "verification-widget-script";
let widgetScript = null;                      // one shared promise for every component

function loadWidgetScript() {
  if (window.KYCWidget) return Promise.resolve();
  if (!widgetScript) {
    widgetScript = new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.id = SCRIPT_ID;
      script.src = "<WIDGET_SCRIPT_URL>";
      script.defer = true;
      script.crossOrigin = "anonymous";
      script.onload = () => resolve();
      script.onerror = () => {
        widgetScript = null;                  // allow a later retry
        script.remove();
        reject(new Error("Could not load the widget script"));
      };
      document.head.appendChild(script);
    });
  }
  return widgetScript;
}

export function VerifyIdentity() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let active = true;                        // no state update after unmount
    loadWidgetScript()
      .then(() => active && setReady(true))
      .catch((error) => console.error(error));
    return () => { active = false; };
  }, []);

  const open = useCallback(async () => {
    const reply = await fetch("/verification/start", { method: "POST" });
    const { clientKey } = await reply.json();   // encrypted on your server

    window.KYCWidget.setupKYC({
      scenarioId: "<your scenario id>",
      clientKey,
      theme: "light",
      closeCb: () => {},
      successCb: (sessionJson) => console.log("widget finished", sessionJson),
      finalizedCb: ({ status }) => console.log("session already finalized", status),
    });
  }, []);

  return ready ? <button onClick={open}>Verify my identity</button> : null;
}

Notes

• Load the script once. Every component waits on the same promise, so a second component that mounts while the script is loading, or a remount, still receives the completion.
• Do not call setupKYC from inside closeCb.
• The widget works in the main document. Do not render the page that hosts it inside a cross-origin iframe.
• Do not decide on the customer in the browser. Read the status on your server.

Troubleshooting