Plain JavaScript widget

Prerequisites

• A scenario and its identifier, from the KYC section of the dashboard.
• Your domain in the allowed domains, and the page 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 page

The page asks your server for the key and opens the widget. The endpoint /verification/start is an example name for a route that you write.

<button id="start" disabled>Loading...</button>
<script>
  const button = document.getElementById("start");

  const script = document.createElement("script");
  script.src = "<WIDGET_SCRIPT_URL>";
  script.onload = () => { button.disabled = false; button.textContent = "Verify my identity"; };
  script.onerror = () => { button.textContent = "Could not load the widget"; };
  document.body.appendChild(script);

  button.addEventListener("click", 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: () => console.log("widget closed"),
      successCb: (sessionJson) => console.log("widget finished", sessionJson),
      finalizedCb: ({ status }) => console.log("session already finalized", status),
    });
  });
</script>

Inline instead of full page

Pass mountElementId to mount the widget inside an element of your page instead of covering the page. Give the element explicit dimensions. The inline mode does not work inside a cross-origin iframe. See installation for all options.

What the callbacks mean

successCb receives the session result as a JSON string so that you can update the screen. Do not decide on the customer from it. Read the status on your server. finalizedCb runs when the widget is opened for a session that was finalized earlier.

Troubleshooting