Split Flow (OCR + Biometrics)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OneSDK Split Flow</title>
    <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
    <style>
      body { margin: 0; font-family: sans-serif; background: #fff; }
      #onesdk-wrapper { position: relative; width: 100%; height: 100vh; }
      #onesdk-container { width: 100%; height: 100%; }
      #loading-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 10; background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="onesdk-wrapper">
      <div id="onesdk-container"></div>
      <div id="loading-overlay"></div>
    </div>

    <script>
      async function startOneSDK() {
        try {
          // 1. Generate session token (move to your backend in production)
          const tokenResponse = await fetch(
            "https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session",
            {
              method: "POST",
              headers: {
                authorization: "machine " + btoa("<CUSTOMER_ID>:<CUSTOMER_CHILD_ID>:<API_KEY>"),
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                permissions: {
                  preset: "one-sdk",
                  reference: "split-" + Date.now(),
                },
              }),
            }
          );
          const session = await tokenResponse.json();

          // 2. Initialize OneSDK
          const oneSdk = await OneSDK({
            session: session,
            mode: "development",
            recipe: {
              ocr: {
                maxDocumentCount: 3,
              },
              form: {
                provider: { name: "react" },
              },
            },
          });

          const appContainer = "#onesdk-container";

          // 3. Create form components
          const welcome = oneSdk.component("form", {
            name: "WELCOME",
            type: "ocr",
          });

          const consent = oneSdk.component("form", { name: "CONSENT" });

          const documentForm = oneSdk.component("form", {
            name: "DOCUMENT",
            showPreps: true,
          });

          const loading = oneSdk.component("form", {
            name: "LOADING",
            title: { label: "Loading..." },
            descriptions: [{ label: "" }],
          });

          const biometrics = oneSdk.component("biometrics");

          // 4. Wire up form navigation
          welcome.mount(appContainer);

          welcome.on("form:welcome:ready", () => {
            consent.mount(appContainer);
          });

          consent.on("form:consent:ready", () => {
            documentForm.mount(appContainer);
          });

          // 5. Handle document selection → OCR capture
          documentForm.on("form:document:ready", ({ inputInfo }) => {
            loading.mount("#loading-overlay");
            const docType = inputInfo.documentType;

            const ocr = oneSdk.component("ocr", {
              documents: [{ type: docType, countries: ["AUS"] }],
            });

            ocr.mount(appContainer);

            ocr.on("loading", (isLoading) => {
              if (!isLoading) {
                loading.unmount();
              }
            });

            ocr.on("error", (err) => {
              console.error("OCR error:", err);
            });

            // 6. Handle OCR results → Biometrics
            ocr.on("results", ({ document }) => {
              if (document) {
                loading.mount("#loading-overlay");
                biometrics.mount(appContainer);
              }
            });
          });

          // 7. Handle biometrics
          let biometricsError = false;

          biometrics.on("detection_failed", () => {
            biometricsError = true;
          });

          biometrics.on("session_closed", () => {
            if (biometricsError) {
              biometrics.mount(appContainer);
              biometricsError = false;
            }
          });

          biometrics.on("loading", (isLoading) => {
            if (!isLoading) {
              loading.unmount();
            }
          });

          biometrics.on("results", (result) => {
            document.getElementById("onesdk-container").innerHTML =
              "<h2>Verification complete</h2>";
          });

          biometrics.on("error", (err) => {
            console.error("Biometrics error:", err);
          });
        } catch (error) {
          console.error("OneSDK initialization failed:", error);
        }
      }

      startOneSDK();
    </script>
  </body>
</html>