smartcomply-web-sdk 1.0.3 → 1.0.4

package/dist/esm/flow/SmartComplyFlow.js

@@ -0,0 +1,1722 @@
+import { SmartComply } from "../client/Smartcomply";
+import { getTheme } from "./theme";
+import { DocumentCapture } from "./DocumentCapture";
+import { collectDeviceMetadata } from "../utils/device";
+const STEP_ORDER = [
+    "loading",
+    "welcome",
+    "country",
+    "id_type",
+    "id_input", // or document_capture
+    "document_capture",
+    "processing",
+    "liveness",
+    "result",
+];
+const COUNTRY_LABELS = {
+    nigeria: "🇳🇬  Nigeria",
+    global: "🌍  Other Countries",
+    ghana: "🇬🇭  Ghana",
+    kenya: "🇰🇪  Kenya",
+    south_africa: "🇿🇦  South Africa",
+    united_states: "🇺🇸  United States",
+    united_kingdom: "🇬🇧  United Kingdom",
+};
+function resolveIdTypeInfo(typeName, isDocumentFlow) {
+    const u = typeName.toUpperCase();
+    const withFace = u.includes("WITH FACE") || u.includes("FACE");
+    const advanced = u.includes("ADVANCED");
+    // Helper function to check if document requires back side
+    const requiresBackSide = (type) => {
+        const t = type.toLowerCase();
+        return t.includes("voter") ||
+            t.includes("nin") ||
+            t.includes("driver") ||
+            t.includes("license") ||
+            t.includes("national id") ||
+            t.includes("national id card");
+    };
+    // BVN — always 11 digits
+    if (u.includes("BVN") || u.includes("BANK VERIFICATION")) {
+        const extra = withFace ? " + selfie photo" : "";
+        return { icon: "🏦", desc: `Enter your 11-digit BVN${extra}`, requiresBack: false };
+    }
+    // NIN — always 11 digits
+    if (u.includes("NIN") || u.includes("NATIONAL IDENTITY NUMBER")) {
+        const extra = withFace ? " + selfie photo" : "";
+        return { icon: "🆔", desc: `Enter your 11-digit NIN${extra}`, requiresBack: false };
+    }
+    // Ghana Card / Ghana National ID
+    if (u.includes("GHANA")) {
+        if (isDocumentFlow)
+            return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
+        const extra = withFace ? " + selfie photo" : "";
+        return { icon: "🪪", desc: `Enter your Ghana Card number${extra}`, requiresBack: false };
+    }
+    // SSNIT (Ghana social security)
+    if (u.includes("SSNIT"))
+        return { icon: "🏛️", desc: "Enter your SSNIT number", requiresBack: false };
+    // Kenya National ID
+    if (u.includes("KENYA") || (u.includes("NATIONAL") && u.includes("KENYA")))
+        return { icon: "🆔", desc: "Enter your Kenya National ID number", requiresBack: false };
+    // TIN
+    if (u.includes("TIN") || u.includes("TAX IDENTIFICATION"))
+        return { icon: "🧾", desc: "Enter your Tax Identification Number (TIN)", requiresBack: false };
+    // CAC / Company registration
+    if (u.includes("CAC") || u.includes("CORPORATE AFFAIRS") || u.includes("COMPANY"))
+        return { icon: "🏢", desc: advanced ? "Enter RC number, company name & type" : "Enter your company registration number", requiresBack: false };
+    // Voter / PVC
+    if (u.includes("VOTER") || u.includes("PVC")) {
+        const requiresBack = requiresBackSide(typeName);
+        return {
+            icon: "🗳️",
+            desc: isDocumentFlow
+                ? `Capture or upload your voter's card${requiresBack ? " (front & back)" : ""}`
+                : "Enter your voter ID number",
+            requiresBack: isDocumentFlow ? requiresBack : false
+        };
+    }
+    // Passport
+    if (u.includes("PASSPORT"))
+        return { icon: "📘", desc: isDocumentFlow ? "Capture or upload your passport" : "Enter your passport number", requiresBack: false };
+    // Driver's license
+    if (u.includes("DRIVER") || u.includes("LICENSE") || u.includes("LICENCE")) {
+        const requiresBack = requiresBackSide(typeName);
+        return {
+            icon: "🚗",
+            desc: isDocumentFlow
+                ? `Capture or upload your driver's license${requiresBack ? " (front & back)" : ""}`
+                : "Enter your driver's license number",
+            requiresBack: isDocumentFlow ? requiresBack : false
+        };
+    }
+    // National ID card (generic)
+    if (u.includes("NATIONAL ID") || (u.includes("NATIONAL") && u.includes("CARD"))) {
+        const requiresBack = requiresBackSide(typeName);
+        return {
+            icon: "🪪",
+            desc: isDocumentFlow
+                ? `Capture or upload your ID card${requiresBack ? " (front & back)" : ""}`
+                : "Enter your National ID number",
+            requiresBack: isDocumentFlow ? requiresBack : false
+        };
+    }
+    // Face liveness / comparison
+    if (u.includes("LIVENESS") || u.includes("FACE COMPARISON") || u.includes("FACE MATCH"))
+        return { icon: "🤳", desc: "We'll capture a short selfie video to verify you", requiresBack: false };
+    return {
+        icon: isDocumentFlow ? "📄" : "🆔",
+        desc: isDocumentFlow ? "Capture or upload your document" : "Enter your ID number",
+        requiresBack: false,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────
+// SmartComplyFlow
+// ─────────────────────────────────────────────────────────────────────
+// Add CSS animation keyframes for spin animations
+const style = document.createElement('style');
+style.textContent = `
+  @keyframes sc-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+if (!document.head.querySelector('style[data-sc-animations]')) {
+    style.setAttribute('data-sc-animations', 'true');
+    document.head.appendChild(style);
+}
+export class SmartComplyFlow {
+    constructor(options) {
+        this.theme = getTheme("default");
+        // DOM
+        this.overlay = null;
+        this.modal = null;
+        this.contentArea = null;
+        this.progressBar = null;
+        this.stepLabel = null;
+        this.brandLabel = null;
+        // State
+        this.sdkConfig = null;
+        this.currentStep = "loading";
+        this.selectedCountry = "";
+        this.selectedChannelId = 0;
+        this.selectedChannelFields = [];
+        this.selectedIdType = ""; // Canonical code (e.g., "national_id", "nin_with_face")
+        this.selectedIdTypeName = ""; // Display name (e.g., "National Identity Number with Face (NIN)")
+        this.collectedFields = {};
+        this.idNumber = "";
+        this.documentBlob = null;
+        this.documentBackBlob = null;
+        this.identityCheckId = null;
+        this.verificationResult = null;
+        this.livenessEntryId = null;
+        this.isDestroyed = false;
+        this.headerBackBtn = null;
+        // Session expiry
+        this.sessionExpiryTimer = null;
+        // Status polling (result screen)
+        this._pollStatusTimer = null;
+        // Components
+        this.docCapture = null;
+        this.options = options;
+        this.sdk = new SmartComply({
+            apiKey: options.apiKey,
+            clientId: options.clientId,
+            environment: options.environment || "sandbox",
+            timeout: options.timeout,
+        });
+    }
+    /**
+     * Open the SmartComply verification flow.
+     *
+     * Usage:
+     *   SmartComplyFlow.open({
+     *     apiKey: "pk_live_...",
+     *     clientId: "uuid-...",
+     *     environment: "production",
+     *     onComplete: (result) => console.log("Done!", result),
+     *     onError: (err) => console.error(err),
+     *     onClose: () => console.log("Closed"),
+     *   });
+     */
+    static open(options) {
+        const flow = new SmartComplyFlow(options);
+        flow.mount();
+        flow.initialize();
+        return flow;
+    }
+    /**
+     * Close and destroy the flow widget.
+     */
+    close() {
+        this.isDestroyed = true;
+        this.docCapture?.destroy();
+        if (this.sessionExpiryTimer) {
+            clearTimeout(this.sessionExpiryTimer);
+            this.sessionExpiryTimer = null;
+        }
+        if (this._pollStatusTimer) {
+            clearTimeout(this._pollStatusTimer);
+            this._pollStatusTimer = null;
+        }
+        if (this.overlay) {
+            this.overlay.style.opacity = "0";
+            setTimeout(() => {
+                if (this.overlay?.parentElement) {
+                    this.overlay.parentElement.removeChild(this.overlay);
+                }
+                this.overlay = null;
+                this.modal = null;
+                this.contentArea = null;
+            }, 300);
+        }
+        this.options.onClose?.();
+    }
+    // ─────────────────────────────────────────────────────────────────
+    // Initialization
+    // ─────────────────────────────────────────────────────────────────
+    mount() {
+        // Inject keyframes
+        this.injectStyles();
+        // Overlay
+        this.overlay = document.createElement("div");
+        this.overlay.id = "sc-flow-overlay";
+        this.overlay.style.cssText = `
+      position:fixed;inset:0;z-index:99999;
+      display:flex;align-items:center;justify-content:center;
+      background:${this.theme.overlay};
+      backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
+      opacity:0;transition:opacity 0.3s ease;
+      font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
+    `;
+        // Modal
+        this.modal = document.createElement("div");
+        this.modal.id = "sc-flow-modal";
+        this.modal.style.cssText = `
+      width:100%;max-width:440px;max-height:92vh;
+      background:${this.theme.bg};
+      border-radius:20px;overflow:hidden;
+      box-shadow:${this.theme.shadow};
+      display:flex;flex-direction:column;
+      transform:translateY(20px) scale(0.97);
+      transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
+    `;
+        // Header
+        const header = this.createHeader();
+        this.modal.appendChild(header);
+        // Progress bar
+        const progressWrap = document.createElement("div");
+        progressWrap.style.cssText = `height:3px;background:${this.theme.shimmer};`;
+        this.progressBar = document.createElement("div");
+        this.progressBar.style.cssText = `
+      height:100%;width:0%;background:linear-gradient(90deg,${this.theme.primary},${this.theme.primaryHover});
+      border-radius:0 2px 2px 0;transition:width 0.5s ease;
+    `;
+        progressWrap.appendChild(this.progressBar);
+        this.modal.appendChild(progressWrap);
+        // Content area (scrollable)
+        this.contentArea = document.createElement("div");
+        this.contentArea.id = "sc-flow-content";
+        this.contentArea.style.cssText = `
+      flex:1;overflow-y:auto;padding:20px 24px;
+      -webkit-overflow-scrolling:touch;
+    `;
+        this.modal.appendChild(this.contentArea);
+        // Footer
+        const footer = this.createFooter();
+        this.modal.appendChild(footer);
+        this.overlay.appendChild(this.modal);
+        document.body.appendChild(this.overlay);
+        // Animate in
+        requestAnimationFrame(() => {
+            if (this.overlay)
+                this.overlay.style.opacity = "1";
+            if (this.modal)
+                this.modal.style.transform = "translateY(0) scale(1)";
+        });
+    }
+    async initialize() {
+        this.showStep("loading");
+        try {
+            // Create session
+            await this.sdk.createSession();
+            // C4: Start session expiry timer (warn 2 min before 30-min expiry)
+            const expiresAt = this.sdk.sessionExpiresAt;
+            if (expiresAt) {
+                const expiresMs = new Date(expiresAt).getTime() - Date.now();
+                const warnMs = Math.max(expiresMs - 120000, 0); // warn 2 min before
+                this.sessionExpiryTimer = setTimeout(() => {
+                    if (!this.isDestroyed && this.currentStep !== "result") {
+                        this.showErrorStep("Your session is about to expire. Please complete verification quickly or restart.");
+                    }
+                }, warnMs);
+            }
+            // Load config
+            this.sdkConfig = await this.sdk.initializeConfig();
+            // Apply theme from config
+            if (this.sdkConfig.theme) {
+                this.theme = getTheme(this.sdkConfig.theme);
+                this.applyTheme();
+            }
+            // Update brand name
+            if (this.brandLabel && this.sdkConfig.brand_name) {
+                this.brandLabel.textContent = this.sdkConfig.brand_name;
+            }
+            if (this.isDestroyed)
+                return;
+            this.showStep("welcome");
+        }
+        catch (err) {
+            this.showErrorStep(err.message || "Failed to initialize. Please try again.");
+        }
+    }
+    // ─────────────────────────────────────────────────────────────────
+    // Step rendering
+    // ─────────────────────────────────────────────────────────────────
+    showStep(step) {
+        this.currentStep = step;
+        if (!this.contentArea)
+            return;
+        // Update progress
+        this.updateProgress();
+        // Animate out current content
+        const oldContent = this.contentArea.firstChild;
+        if (oldContent) {
+            oldContent.style.cssText += "opacity:0;transform:translateX(-20px);transition:all 0.2s ease;";
+            setTimeout(() => {
+                if (this.contentArea)
+                    this.contentArea.innerHTML = "";
+                this.renderStep(step);
+            }, 200);
+        }
+        else {
+            this.renderStep(step);
+        }
+    }
+    renderStep(step) {
+        if (!this.contentArea)
+            return;
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = "opacity:0;transform:translateX(20px);transition:all 0.3s ease;";
+        switch (step) {
+            case "loading":
+                this.renderLoading(wrapper);
+                break;
+            case "welcome":
+                this.renderWelcome(wrapper);
+                break;
+            case "country":
+                this.renderCountrySelect(wrapper);
+                break;
+            case "id_type":
+                this.renderIdTypeSelect(wrapper);
+                break;
+            case "id_input":
+                this.renderIdInput(wrapper);
+                break;
+            case "document_capture":
+                this.renderDocumentCapture(wrapper);
+                break;
+            case "processing":
+                this.renderProcessing(wrapper);
+                break;
+            case "liveness":
+                this.renderLiveness(wrapper);
+                break;
+            case "result":
+                this.renderResult(wrapper);
+                break;
+            case "error":
+                break; // handled separately
+        }
+        this.contentArea.appendChild(wrapper);
+        // Animate in
+        requestAnimationFrame(() => {
+            wrapper.style.opacity = "1";
+            wrapper.style.transform = "translateX(0)";
+        });
+    }
+    // ── Loading ─────────────────────────────────────────────────────
+    renderLoading(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
+        const spinnerWrap = document.createElement("div");
+        spinnerWrap.style.cssText = "position:relative;width:60px;height:60px;flex-shrink:0;";
+        const ring = document.createElement("div");
+        ring.style.cssText = `
+      position:absolute;inset:0;border-radius:50%;
+      border:3px solid ${this.theme.border};
+      border-top-color:${this.theme.primary};
+      animation:sc-spin 0.9s linear infinite;
+    `;
+        const centre = document.createElement("div");
+        centre.style.cssText = `
+      position:absolute;inset:0;
+      display:flex;align-items:center;justify-content:center;
+      font-size:22px;
+    `;
+        centre.textContent = "\uD83D\uDEE1\uFE0F";
+        spinnerWrap.appendChild(ring);
+        spinnerWrap.appendChild(centre);
+        container.appendChild(spinnerWrap);
+        const label = document.createElement("div");
+        label.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        label.textContent = "Setting up secure session";
+        container.appendChild(label);
+        const sub = document.createElement("div");
+        sub.style.cssText = `color:${this.theme.textMuted};font-size:12px;text-align:center;max-width:220px;line-height:1.5;`;
+        sub.textContent = "Connecting to the verification service...";
+        container.appendChild(sub);
+    }
+    // ── Welcome ────────────────────────────────────────────────────
+    renderWelcome(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;";
+        const isDocFlow = this.isDocumentFlow();
+        // Icon + badge row (side by side to save vertical space)
+        const topRow = document.createElement("div");
+        topRow.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:10px;";
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `
+      width:58px;height:58px;border-radius:16px;
+      display:flex;align-items:center;justify-content:center;
+      font-size:26px;
+      background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
+      border:1.5px solid ${this.theme.primary}33;
+    `;
+        iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+        topRow.appendChild(iconWrap);
+        const badge = document.createElement("div");
+        badge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:999px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      background:${this.theme.primary}15;
+      color:${this.theme.primary};
+      border:1px solid ${this.theme.primary}30;
+    `;
+        badge.textContent = isDocFlow ? "📄  Document Verification" : "🔍  Data Verification";
+        topRow.appendChild(badge);
+        container.appendChild(topRow);
+        // Title + subtitle (compact)
+        const titleWrap = document.createElement("div");
+        titleWrap.style.cssText = "display:flex;flex-direction:column;gap:5px;";
+        const title = document.createElement("h2");
+        title.style.cssText = `
+      color:${this.theme.text};font-size:20px;font-weight:700;
+      margin:0;line-height:1.2;
+    `;
+        title.textContent = "Identity Verification";
+        titleWrap.appendChild(title);
+        const desc = document.createElement("p");
+        desc.style.cssText = `
+      color:${this.theme.textSecondary};font-size:13px;line-height:1.5;
+      margin:0;max-width:300px;
+    `;
+        desc.textContent = isDocFlow
+            ? "Scan your ID document and take a quick selfie to confirm your identity."
+            : "Enter your ID details and take a quick selfie to confirm your identity.";
+        titleWrap.appendChild(desc);
+        container.appendChild(titleWrap);
+        // Steps preview — compact rows
+        const steps = isDocFlow
+            ? [
+                { icon: "🪪", text: "Choose your document type", sub: "Passport, National ID, Driver License" },
+                { icon: "📷", text: "Scan your document", sub: "Upload or capture a photo of your ID" },
+                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
+            ]
+            : [
+                { icon: "🆔", text: "Choose your ID type", sub: "NIN, BVN, Voter's Card and more" },
+                { icon: "📝", text: "Enter your ID details", sub: "Exactly as shown on your ID" },
+                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
+            ];
+        const stepsWrap = document.createElement("div");
+        stepsWrap.style.cssText = `
+      width:100%;display:flex;flex-direction:column;gap:0;
+      border-radius:12px;overflow:hidden;
+      border:1.5px solid ${this.theme.border};
+    `;
+        steps.forEach((step, i) => {
+            const row = document.createElement("div");
+            row.style.cssText = `
+        display:flex;align-items:center;gap:12px;
+        padding:9px 14px;
+        background:${this.theme.cardBg};
+        ${i < steps.length - 1 ? `border-bottom:1px solid ${this.theme.border};` : ""}
+      `;
+            const iconEl = document.createElement("div");
+            iconEl.style.cssText = `
+        width:28px;height:28px;border-radius:8px;flex-shrink:0;
+        display:flex;align-items:center;justify-content:center;
+        font-size:13px;
+        background:${this.theme.primary}12;
+        border:1px solid ${this.theme.primary}20;
+      `;
+            iconEl.textContent = step.icon;
+            const textWrap = document.createElement("div");
+            textWrap.style.cssText = "display:flex;flex-direction:column;gap:1px;text-align:left;";
+            const textEl = document.createElement("span");
+            textEl.style.cssText = `color:${this.theme.text};font-size:12.5px;font-weight:600;`;
+            textEl.textContent = step.text;
+            const subEl = document.createElement("span");
+            subEl.style.cssText = `color:${this.theme.textMuted};font-size:10.5px;`;
+            subEl.textContent = step.sub;
+            textWrap.appendChild(textEl);
+            textWrap.appendChild(subEl);
+            row.appendChild(iconEl);
+            row.appendChild(textWrap);
+            stepsWrap.appendChild(row);
+        });
+        container.appendChild(stepsWrap);
+        // CTA
+        const btn = this.createPrimaryButton("Get Started →");
+        btn.style.cssText += "margin-top:2px;";
+        btn.addEventListener("click", () => this.showStep("country"));
+        container.appendChild(btn);
+        // Trust badge
+        const trust = document.createElement("div");
+        trust.style.cssText = `
+      display:flex;align-items:center;gap:6px;
+      color:${this.theme.textMuted};font-size:10.5px;
+    `;
+        trust.textContent = "🔒  End-to-end encrypted · Powered by Adhere";
+        container.appendChild(trust);
+    }
+    // ── Country Select ──────────────────────────────────────────────
+    renderCountrySelect(container) {
+        container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+        const channels = this.sdkConfig?.channels || {};
+        const countries = Object.keys(channels);
+        // Auto-skip country selection if only one country available
+        if (countries.length === 1) {
+            this.selectedCountry = countries[0];
+            this.showStep("id_type");
+            return;
+        }
+        const title = this.createStepTitle("Select your country");
+        container.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
+        subtitle.textContent = "Choose the country that issued your ID";
+        container.appendChild(subtitle);
+        for (const country of countries) {
+            const card = this.createOptionCard(COUNTRY_LABELS[country] || country, `${channels[country].length} ID type${channels[country].length > 1 ? "s" : ""} available`, () => {
+                this.selectedCountry = country;
+                this.showStep("id_type");
+            });
+            container.appendChild(card);
+        }
+    }
+    // ── ID Type Select ──────────────────────────────────────────────
+    renderIdTypeSelect(container) {
+        container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+        const globalDocFlow = this.isDocumentFlow();
+        const title = this.createStepTitle(globalDocFlow ? "Select document type" : "Select ID type");
+        container.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
+        subtitle.textContent = globalDocFlow
+            ? "Choose the document you want to scan"
+            : "Choose the ID you want to verify";
+        container.appendChild(subtitle);
+        const channels = this.sdkConfig?.channels || {};
+        const idTypes = channels[this.selectedCountry] || [];
+        for (const idType of idTypes) {
+            const typeName = typeof idType === "string" ? idType : idType.name;
+            // Use code (canonical) for API calls, fallback to name for backward compatibility
+            const typeCode = typeof idType === "string" ? idType : (idType.code || idType.name);
+            // Detect per-channel: does THIS specific channel have upload fields?
+            const channelFields = typeof idType !== "string" ? (idType.fields || []) : [];
+            const isThisDocFlow = channelFields.some((f) => f.type === "upload") || globalDocFlow;
+            const info = resolveIdTypeInfo(typeName, isThisDocFlow);
+            // Add back side indicator to subtitle if needed
+            let subtitle = info.desc;
+            if (info.requiresBack && isThisDocFlow) {
+                subtitle += " ⚠️ Both sides required";
+            }
+            const card = this.createOptionCard(`${info.icon}  ${typeName}`, subtitle, () => {
+                this.selectedIdType = typeCode; // Store canonical code for API
+                this.selectedIdTypeName = typeName; // Keep display name for UI
+                // Always reset first to avoid stale state when user goes back and changes selection
+                this.selectedChannelId = 0;
+                this.selectedChannelFields = [];
+                if (typeof idType !== "string") {
+                    this.selectedChannelId = idType.id;
+                    this.selectedChannelFields = idType.fields || []; // guard null/undefined from backend
+                }
+                this.collectedFields = {};
+                // Route: use explicit verification_type when set (more reliable than inspecting all channels)
+                // Fallback to per-channel upload field check for mixed / unconfigured setups
+                const hasUpload = (this.selectedChannelFields).some((f) => f.type === "upload");
+                const vType = this.sdkConfig?.verification_type;
+                const vTypes = vType ? (Array.isArray(vType) ? vType : [vType]) : [];
+                const isDocChannel = hasUpload || (vTypes.length > 0 && vTypes.includes("document_verification"));
+                this.showStep(isDocChannel ? "document_capture" : "id_input");
+            });
+            container.appendChild(card);
+        }
+    }
+    // ── ID Input (data verification — dynamic fields) ─────────────
+    renderIdInput(container) {
+        container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+        const dataFields = this.selectedChannelFields.filter((f) => f.type !== "upload");
+        const info = resolveIdTypeInfo(this.selectedIdTypeName || this.selectedIdType, false);
+        const title = this.createStepTitle(`${info.icon}  ${this.selectedIdTypeName || this.selectedIdType}`);
+        container.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
+        subtitle.textContent = dataFields.length > 0
+            ? `Enter your ${this.selectedIdTypeName || this.selectedIdType} details exactly as they appear on your ID.`
+            : "Fill in the fields below to continue.";
+        container.appendChild(subtitle);
+        // Edge case: no data fields configured — show fallback and allow submission
+        if (dataFields.length === 0) {
+            const empty = document.createElement("div");
+            empty.style.cssText = `
+        padding:16px;border-radius:10px;
+        background:${this.theme.cardBg};border:1px solid ${this.theme.border};
+        color:${this.theme.textSecondary};font-size:13px;text-align:center;
+      `;
+            empty.textContent = "No additional details required. Click below to continue.";
+            container.appendChild(empty);
+            const autoBtn = this.createPrimaryButton("Continue");
+            autoBtn.addEventListener("click", () => this.showStep("liveness"));
+            container.appendChild(autoBtn);
+            return;
+        }
+        // Track input elements for validation
+        const inputEls = [];
+        for (const field of dataFields) {
+            const fieldKey = field.label.toLowerCase().replace(/[^a-z0-9]+/g, "_");
+            const fieldWrap = document.createElement("div");
+            fieldWrap.style.cssText = "display:flex;flex-direction:column;gap:6px;";
+            const label = document.createElement("label");
+            label.style.cssText = `color:${this.theme.textMuted};font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;`;
+            label.textContent = field.label;
+            fieldWrap.appendChild(label);
+            if (field.type === "dropdown" || field.type === "select") {
+                // Dropdown field
+                const select = document.createElement("select");
+                select.style.cssText = `
+          width:100%;padding:13px 16px;border-radius:12px;
+          font-size:15px;
+          background:${this.theme.inputBg};
+          color:${this.theme.text};
+          border:2px solid ${this.theme.border};
+          outline:none;box-sizing:border-box;
+          cursor:pointer;transition:border-color 0.2s ease;
+        `;
+                const placeholder = document.createElement("option");
+                placeholder.value = "";
+                placeholder.textContent = `Select ${field.label}`;
+                placeholder.disabled = true;
+                placeholder.selected = true;
+                select.appendChild(placeholder);
+                for (const opt of field.options || []) {
+                    const option = document.createElement("option");
+                    option.value = opt;
+                    option.textContent = opt;
+                    select.appendChild(option);
+                }
+                select.addEventListener("focus", () => { select.style.borderColor = this.theme.primary; });
+                select.addEventListener("blur", () => { select.style.borderColor = this.theme.border; });
+                select.addEventListener("change", () => {
+                    this.collectedFields[fieldKey] = select.value;
+                    updateSubmitState();
+                });
+                fieldWrap.appendChild(select);
+                inputEls.push({ field, el: select });
+            }
+            else if (field.type === "image" || field.type === "file") {
+                // File upload field — converts to base64 for API submission
+                const fileInput = document.createElement("input");
+                fileInput.type = "file";
+                fileInput.accept = "image/*";
+                fileInput.style.cssText = `
+          width:100%;padding:12px 16px;border-radius:12px;
+          font-size:14px;font-weight:500;
+          background:${this.theme.inputBg};
+          color:${this.theme.text};
+          border:2px dashed ${this.theme.border};
+          outline:none;transition:border-color 0.2s ease;
+          box-sizing:border-box;cursor:pointer;
+        `;
+                fileInput.addEventListener("focus", () => {
+                    fileInput.style.borderColor = this.theme.primary;
+                });
+                fileInput.addEventListener("blur", () => {
+                    fileInput.style.borderColor = this.theme.border;
+                });
+                fileInput.addEventListener("change", () => {
+                    const file = fileInput.files?.[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            const base64 = reader.result.split(",")[1] || "";
+                            this.collectedFields[fieldKey] = base64;
+                            updateSubmitState();
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                });
+                fieldWrap.appendChild(fileInput);
+                inputEls.push({ field, el: fileInput });
+            }
+            else {
+                // Text input field
+                const input = document.createElement("input");
+                input.type = "text";
+                input.placeholder = `Enter ${field.label}`;
+                input.maxLength = 50;
+                input.style.cssText = `
+          width:100%;padding:14px 16px;border-radius:12px;
+          font-size:16px;font-weight:500;
+          background:${this.theme.inputBg};
+          color:${this.theme.text};
+          border:2px solid ${this.theme.border};
+          outline:none;transition:border-color 0.2s ease;
+          box-sizing:border-box;
+          letter-spacing:0.5px;
+        `;
+                input.addEventListener("focus", () => {
+                    input.style.borderColor = this.theme.primary;
+                });
+                input.addEventListener("blur", () => {
+                    input.style.borderColor = this.theme.border;
+                });
+                input.addEventListener("input", () => {
+                    this.collectedFields[fieldKey] = input.value.trim();
+                    updateSubmitState();
+                });
+                fieldWrap.appendChild(input);
+                inputEls.push({ field, el: input });
+            }
+            container.appendChild(fieldWrap);
+        }
+        // Error area
+        const errorEl = document.createElement("div");
+        errorEl.id = "sc-id-error";
+        errorEl.style.cssText = `
+      color:${this.theme.error};font-size:13px;display:none;
+      padding:8px 12px;border-radius:8px;background:${this.theme.errorBg};
+    `;
+        container.appendChild(errorEl);
+        // Submit
+        const submitBtn = this.createPrimaryButton("Verify & Continue");
+        submitBtn.disabled = true;
+        submitBtn.style.opacity = "0.5";
+        const updateSubmitState = () => {
+            const allFilled = inputEls.every(({ el }) => el.value.trim().length > 0);
+            submitBtn.disabled = !allFilled;
+            submitBtn.style.opacity = allFilled ? "1" : "0.5";
+        };
+        submitBtn.addEventListener("click", async () => {
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;"><span style="width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;animation:sc-spin 0.6s linear infinite;display:inline-block;flex-shrink:0;"></span>Verifying...</span>`;
+            errorEl.style.display = "none";
+            try {
+                this.verificationResult = await this.sdk.onboarding.verify({
+                    identity_type_id: this.selectedChannelId,
+                    fields: { ...this.collectedFields },
+                });
+                if (this.verificationResult.status === "verified" || this.verificationResult.status === "success") {
+                    // Save the first collected field value as identifier for liveness
+                    const fieldValues = Object.values(this.collectedFields);
+                    this.idNumber = fieldValues[0] || "";
+                    // A4: Save identity_check_id from verify response to pass to liveness
+                    this.identityCheckId = this.verificationResult.data?.identity_check_id || null;
+                    this.showStep("liveness");
+                }
+                else {
+                    errorEl.textContent = this.verificationResult.message || "Verification failed. Please check your details.";
+                    errorEl.style.display = "block";
+                    submitBtn.textContent = "Verify & Continue";
+                    submitBtn.disabled = false;
+                    submitBtn.style.opacity = "1";
+                }
+            }
+            catch (err) {
+                // C3: Show field-level errors if available
+                const fieldErrors = err.data?.errors;
+                if (Array.isArray(fieldErrors) && fieldErrors.length > 0) {
+                    const messages = fieldErrors.map((e) => `${e.field}: ${e.message}`).join("\n");
+                    errorEl.textContent = messages;
+                }
+                else {
+                    errorEl.textContent = err.message || "Verification failed";
+                }
+                errorEl.style.display = "block";
+                submitBtn.textContent = "Verify & Continue";
+                submitBtn.disabled = false;
+                submitBtn.style.opacity = "1";
+            }
+        });
+        container.appendChild(submitBtn);
+        // Focus first input
+        const firstInput = inputEls[0]?.el;
+        if (firstInput && firstInput instanceof HTMLInputElement) {
+            setTimeout(() => firstInput.focus(), 350);
+        }
+    }
+    // ── Document Capture ────────────────────────────────────────────
+    renderDocumentCapture(container) {
+        container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+        const title = this.createStepTitle(`Capture ${this.selectedIdTypeName || this.selectedIdType || "your document"}`);
+        container.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
+        subtitle.textContent = "Upload or capture your document photo. Ensure it's clear and readable.";
+        container.appendChild(subtitle);
+        const captureContainer = document.createElement("div");
+        captureContainer.style.cssText = `
+      width: 100%;
+      max-width: 400px;
+      margin: 0 auto;
+      position: relative;
+      overflow: hidden;
+      border-radius: 12px;
+      background: ${this.theme.cardBg};
+      border: 2px solid ${this.theme.border};
+    `;
+        container.appendChild(captureContainer);
+        // Use the new DocumentCapture component with front/back support
+        this.docCapture = new DocumentCapture();
+        this.docCapture
+            .capture(captureContainer, this.theme, this.selectedIdTypeName || this.selectedIdType)
+            .then(async (result) => {
+            await this.processDocumentCaptureResult(result, captureContainer, container);
+        })
+            .catch((err) => {
+            console.error("Document capture failed:", err);
+            this.showErrorStep(err.message || "Document capture failed. Please try again.");
+        });
+    }
+    // ── Processing ────────────────────────────────────────────────────
+    renderProcessing(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 16px;min-height:400px;";
+        // Processing animation
+        const animationWrap = document.createElement("div");
+        animationWrap.style.cssText = "position:relative;width:80px;height:80px;";
+        const spinner = document.createElement("div");
+        spinner.style.cssText = `
+      position:absolute;inset:0;border-radius:50%;
+      border:4px solid ${this.theme.border};
+      border-top-color:${this.theme.primary};
+      animation:sc-spin 1s linear infinite;
+    `;
+        animationWrap.appendChild(spinner);
+        const centerIcon = document.createElement("div");
+        centerIcon.style.cssText = `
+      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+      font-size:28px;
+    `;
+        centerIcon.textContent = "🔍";
+        animationWrap.appendChild(centerIcon);
+        container.appendChild(animationWrap);
+        // Processing text
+        const title = document.createElement("div");
+        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:600;text-align:center;`;
+        title.textContent = "Processing Your Documents";
+        container.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;text-align:center;max-width:280px;line-height:1.5;`;
+        subtitle.textContent = "Scanning and verifying your identity documents. This may take a few moments.";
+        container.appendChild(subtitle);
+        // Processing steps
+        const stepsContainer = document.createElement("div");
+        stepsContainer.style.cssText = `
+      width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;
+      margin-top:16px;
+    `;
+        const steps = [
+            { id: 'uploading', text: 'Uploading documents', icon: '📤' },
+            { id: 'scanning', text: 'Scanning for information', icon: '🔍' },
+            { id: 'verifying', text: 'Verifying authenticity', icon: '✓' },
+            { id: 'analyzing', text: 'Analyzing document quality', icon: '🔬' }
+        ];
+        steps.forEach((step, index) => {
+            const stepEl = document.createElement("div");
+            stepEl.style.cssText = `
+        display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
+        background:${this.theme.cardBg};border:1px solid ${this.theme.border};
+        transition:all 0.3s ease;
+      `;
+            stepEl.id = `processing-step-${step.id}`;
+            const iconEl = document.createElement("div");
+            iconEl.style.cssText = `
+        width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
+        font-size:14px;background:${this.theme.shimmer};border:1px solid ${this.theme.border};
+      `;
+            iconEl.textContent = step.icon;
+            iconEl.id = `step-icon-${step.id}`;
+            const textEl = document.createElement("div");
+            textEl.style.cssText = `flex:1;color:${this.theme.textSecondary};font-size:13px;font-weight:500;`;
+            textEl.textContent = step.text;
+            textEl.id = `step-text-${step.id}`;
+            const statusEl = document.createElement("div");
+            statusEl.style.cssText = `
+        width:20px;height:20px;border-radius:50%;
+        border:2px solid ${this.theme.border};
+        position:relative;
+      `;
+            statusEl.id = `step-status-${step.id}`;
+            stepEl.appendChild(iconEl);
+            stepEl.appendChild(textEl);
+            stepEl.appendChild(statusEl);
+            stepsContainer.appendChild(stepEl);
+        });
+        container.appendChild(stepsContainer);
+        // Start processing animation
+        this.startProcessingAnimation();
+    }
+    startProcessingAnimation() {
+        const steps = ['uploading', 'scanning', 'verifying', 'analyzing'];
+        let currentStepIndex = 0;
+        const animateStep = (stepId) => {
+            // Update step appearance
+            const stepEl = document.getElementById(`processing-step-${stepId}`);
+            const iconEl = document.getElementById(`step-icon-${stepId}`);
+            const textEl = document.getElementById(`step-text-${stepId}`);
+            const statusEl = document.getElementById(`step-status-${stepId}`);
+            if (stepEl && iconEl && textEl && statusEl) {
+                // Active state
+                stepEl.style.borderColor = this.theme.primary;
+                stepEl.style.background = `${this.theme.primary}10`;
+                iconEl.style.background = this.theme.primary;
+                iconEl.style.color = 'white';
+                textEl.style.color = this.theme.text;
+                textEl.style.fontWeight = '600';
+                // Add spinner to status
+                statusEl.innerHTML = `
+          <div style="
+            position:absolute;inset:2px;border-radius:50%;
+            border:2px solid ${this.theme.border};
+            border-top-color:${this.theme.primary};
+            animation:sc-spin 0.8s linear infinite;
+          "></div>
+        `;
+            }
+            // Move to next step after delay
+            setTimeout(() => {
+                // Complete current step
+                if (stepEl && iconEl && textEl && statusEl) {
+                    stepEl.style.borderColor = this.theme.success;
+                    stepEl.style.background = `${this.theme.success}10`;
+                    iconEl.style.background = this.theme.success;
+                    statusEl.innerHTML = `
+            <div style="
+              position:absolute;inset:3px;border-radius:50%;
+              background:${this.theme.success};
+              display:flex;align-items:center;justify-content:center;
+              color:white;font-size:10px;font-weight:bold;
+            ">✓</div>
+          `;
+                }
+                currentStepIndex++;
+                if (currentStepIndex < steps.length) {
+                    animateStep(steps[currentStepIndex]);
+                }
+            }, 2000); // 2 seconds per step
+        };
+        // Start animation
+        setTimeout(() => animateStep(steps[0]), 500);
+    }
+    /**
+     * Process document capture result with front/back support
+     */
+    async processDocumentCaptureResult(result, captureContainer, container) {
+        // Store both front and back blobs
+        this.documentBlob = result.front;
+        this.documentBackBlob = result.back || null;
+        // Process the front image through the existing flow
+        await this.processDocumentBlob(result.front, captureContainer, container);
+        // Log back image capture
+        if (result.back) {
+            console.log("Back image captured, size:", result.back.size);
+        }
+    }
+    /**
+     * Process document blob - common method for both CameraView and DocumentCapture
+     */
+    async processDocumentBlob(blob, captureContainer, container) {
+        const maxRetries = 2;
+        let retryCount = 0;
+        const attemptProcessing = async () => {
+            try {
+                // Validate blob
+                if (!blob || blob.size === 0) {
+                    throw new Error("Failed to capture document. Please try again.");
+                }
+                if (blob.size > 2 * 1024 * 1024) {
+                    throw new Error("Document image is too large. Please retake in better lighting or use a clearer photo.");
+                }
+                this.documentBlob = blob;
+                // Show scanning state
+                captureContainer.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
+        <div style="position:relative;width:52px;height:52px;">
+          <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
+          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
+        </div>
+        <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
+        <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>
+      </div>`;
+                // Create liveness entry with document
+                const identifier = `DOC-${Date.now()}`;
+                const COUNTRY_CODES = {
+                    nigeria: "NG", ghana: "GH", kenya: "KE",
+                    south_africa: "ZA", united_states: "US", united_kingdom: "GB", global: "US",
+                };
+                const country = COUNTRY_CODES[this.selectedCountry] || this.selectedCountry.toUpperCase().slice(0, 2);
+                const deviceMeta = collectDeviceMetadata();
+                let createResult;
+                try {
+                    createResult = await this.sdk.liveness.create({
+                        identifier,
+                        identifier_type: this.selectedIdType,
+                        country,
+                        challenge_actions: ["BLINK", "TURN_LEFT", "OPEN_MOUTH"],
+                        document: blob,
+                        document_back: this.documentBackBlob || undefined,
+                        device_type: deviceMeta.device_type,
+                        os_name: deviceMeta.os_name,
+                        browser_timezone: deviceMeta.browser_timezone,
+                        fingerprint_id: deviceMeta.fingerprint_id,
+                    });
+                }
+                catch (apiError) {
+                    // Handle specific network and API errors
+                    if (apiError.message?.includes('fetch') || apiError.message?.includes('network') || apiError.code === 'NETWORK_ERROR') {
+                        throw new Error("Network connection failed. Please check your internet connection and try again.");
+                    }
+                    else if (apiError.message?.includes('413') || apiError.message?.includes('too large')) {
+                        throw new Error("Document image is too large. Please use a smaller image or retake the photo.");
+                    }
+                    else if (apiError.message?.includes('415') || apiError.message?.includes('format')) {
+                        throw new Error("Unsupported image format. Please use JPEG or PNG images.");
+                    }
+                    else if (apiError.message?.includes('401') || apiError.message?.includes('unauthorized')) {
+                        throw new Error("Session expired. Please refresh the page and try again.");
+                    }
+                    else if (apiError.message?.includes('429') || apiError.message?.includes('rate limit')) {
+                        throw new Error("Too many requests. Please wait a moment and try again.");
+                    }
+                    else {
+                        throw new Error(apiError.message || "Failed to process document. Please try again.");
+                    }
+                }
+                this.livenessEntryId = createResult.id;
+                // Check if document was expired
+                const docOcr = createResult.document_ocr;
+                if (docOcr && docOcr.status === "expired") {
+                    throw new Error(docOcr.message || "Document has expired. Please use a valid document.");
+                }
+                // Check image quality
+                const imgQuality = docOcr?.image_quality;
+                const isBlurry = imgQuality?.is_blurry === true;
+                const lowConfidence = imgQuality?.ocr_confidence !== undefined && imgQuality.ocr_confidence < 0.45;
+                if (isBlurry || lowConfidence) {
+                    throw new Error("Image quality too low. Please ensure the document is well-lit and clearly visible.");
+                }
+                // Show processing step instead of immediate success
+                this.showStep("processing");
+                // Simulate processing time and then proceed to liveness
+                setTimeout(() => {
+                    this.showStep("liveness");
+                }, 8000); // 8 seconds total processing time (4 steps × 2 seconds each)
+            }
+            catch (err) {
+                console.error("Document processing failed:", err);
+                if (retryCount < maxRetries) {
+                    retryCount++;
+                    console.log(`Retrying document processing (attempt ${retryCount}/${maxRetries})`);
+                    // Show retry message
+                    if (captureContainer) {
+                        captureContainer.innerHTML = `
+              <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
+                <div style="position:relative;width:52px;height:52px;">
+                  <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
+                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
+                </div>
+                <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
+                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
+              </div>`;
+                    }
+                    // Wait before retry
+                    await new Promise(resolve => setTimeout(resolve, 2000));
+                    return attemptProcessing();
+                }
+                else {
+                    // Final retry failed, show detailed error
+                    this.handleDocumentProcessingError(err, captureContainer);
+                }
+            }
+        };
+        await attemptProcessing();
+    }
+    handleDocumentProcessingError(error, captureContainer) {
+        let errorMessage = "Document verification failed. Please try again.";
+        let canRetry = true;
+        if (error.message) {
+            if (error.message.includes("expired")) {
+                errorMessage = "Document has expired. Please use a valid document.";
+                canRetry = false;
+            }
+            else if (error.message.includes("quality too low")) {
+                errorMessage = "Image quality too low. Please ensure the document is well-lit and clearly visible.";
+            }
+            else if (error.message.includes("Network") || error.message.includes("fetch")) {
+                errorMessage = "Network connection failed. Please check your internet connection and try again.";
+            }
+            else if (error.message.includes("413") || error.message.includes("too large")) {
+                errorMessage = "Document image is too large. Please use a smaller image or retake the photo.";
+            }
+            else if (error.message.includes("415") || error.message.includes("format")) {
+                errorMessage = "Unsupported image format. Please use JPEG or PNG images.";
+            }
+        }
+        if (captureContainer) {
+            captureContainer.innerHTML = `
+        <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
+          <div style="width:56px;height:56px;border-radius:50%;background:${this.theme.errorBg || '#FEE'};border:3px solid ${this.theme.error || '#DC3545'};display:flex;align-items:center;justify-content:center;font-size:26px;">❌</div>
+          <div style="color:${this.theme.text};font-size:14px;font-weight:700;">Verification Failed</div>
+          <div style="color:${this.theme.textSecondary};font-size:13px;max-width:240px;line-height:1.6;">${errorMessage}</div>
+          ${canRetry ? `
+            <button id="retry-btn" style="
+              margin-top:8px;padding:12px 24px;border-radius:8px;
+              background:${this.theme.primary};color:white;
+              border:none;font-size:14px;font-weight:600;cursor:pointer;
+              transition:all 0.2s ease;
+            ">Try Again</button>
+          ` : ''}
+        </div>`;
+            if (canRetry) {
+                const retryBtn = captureContainer.querySelector("#retry-btn");
+                if (retryBtn) {
+                    retryBtn.addEventListener("click", () => {
+                        this.showStep("document_capture");
+                    });
+                }
+            }
+        }
+        else {
+            this.showErrorStep(errorMessage);
+        }
+    }
+    // ── Liveness ────────────────────────────────────────────────────
+    renderLiveness(container) {
+        container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+        const title = this.createStepTitle("Face verification");
+        container.appendChild(title);
+        const desc = document.createElement("div");
+        desc.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;line-height:1.5;`;
+        desc.textContent = "Position your face in the oval and follow the on-screen instructions.";
+        container.appendChild(desc);
+        // Liveness mount point
+        const livenessContainer = document.createElement("div");
+        livenessContainer.style.cssText = "margin:8px 0;";
+        container.appendChild(livenessContainer);
+        const identifier = this.idNumber || `DOC-${Date.now()}`;
+        const COUNTRY_CODES = {
+            nigeria: "NG",
+            ghana: "GH",
+            kenya: "KE",
+            south_africa: "ZA",
+            united_states: "US",
+            united_kingdom: "GB",
+            global: "US",
+        };
+        const country = COUNTRY_CODES[this.selectedCountry] || this.selectedCountry.toUpperCase().slice(0, 2);
+        // Start liveness check (this handles camera, detection, recording, submission)
+        // If livenessEntryId exists (document flow), reuse it instead of creating a new one
+        this.sdk.liveness
+            .startCheck(livenessContainer, {
+            identifier,
+            identifier_type: this.selectedIdType,
+            country,
+            document: this.documentBlob || undefined,
+            document_back: this.documentBackBlob || undefined,
+            identity_check: this.identityCheckId || undefined,
+        }, ["BLINK", "TURN_LEFT", "OPEN_MOUTH"], this.livenessEntryId || undefined)
+            .then((result) => {
+            this.showResult(result);
+        })
+            .catch((err) => {
+            this.showErrorStep(err.message || "Liveness verification failed. Please try again.");
+        });
+    }
+    // ── Result ──────────────────────────────────────────────────────
+    showResult(submitResult) {
+        this.currentStep = "result";
+        this.updateProgress();
+        if (!this.contentArea)
+            return;
+        this.contentArea.innerHTML = "";
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;
+      text-align:center;gap:16px;padding:20px 0;
+      opacity:0;transform:scale(0.95);transition:all 0.4s ease;
+    `;
+        // Icon — starts as a spinner, updates when status resolves
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `
+      width:80px;height:80px;border-radius:50%;
+      display:flex;align-items:center;justify-content:center;
+      font-size:36px;
+      background:${this.theme.cardBg};
+      border:3px solid ${this.theme.border};
+    `;
+        iconWrap.innerHTML = `<div style="width:32px;height:32px;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;"></div>`;
+        wrapper.appendChild(iconWrap);
+        const title = document.createElement("h2");
+        title.style.cssText = `color:${this.theme.text};font-size:20px;font-weight:700;margin:0;`;
+        title.textContent = "Verification Submitted";
+        wrapper.appendChild(title);
+        const desc = document.createElement("p");
+        desc.style.cssText = `color:${this.theme.textSecondary};font-size:14px;line-height:1.6;margin:0;max-width:300px;`;
+        desc.textContent = "Processing your identity check. This takes around 30 seconds.";
+        wrapper.appendChild(desc);
+        // Details card
+        const details = document.createElement("div");
+        details.style.cssText = `
+      width:100%;padding:16px;border-radius:12px;
+      background:${this.theme.cardBg};border:1px solid ${this.theme.border};
+      text-align:left;
+    `;
+        // Status badge — mutable DOM node so polling can update it
+        const statusBadge = document.createElement("span");
+        statusBadge.style.cssText = `font-size:12px;font-weight:600;color:${this.theme.warning};`;
+        statusBadge.textContent = "Processing…";
+        const statusRow = document.createElement("div");
+        statusRow.style.cssText = "display:flex;justify-content:space-between;margin-bottom:8px;";
+        statusRow.innerHTML = `<span style="color:${this.theme.textMuted};font-size:12px;">Status</span>`;
+        statusRow.appendChild(statusBadge);
+        // Build rows via DOM (not innerHTML+=) to keep statusBadge live in the document
+        const entryRow = document.createElement("div");
+        entryRow.style.cssText = "display:flex;justify-content:space-between;margin-bottom:8px;";
+        entryRow.innerHTML = `
+      <span style="color:${this.theme.textMuted};font-size:12px;">Entry ID</span>
+      <span style="color:${this.theme.text};font-size:12px;font-weight:600;">${submitResult.id}</span>
+    `;
+        details.appendChild(entryRow);
+        details.appendChild(statusRow);
+        const submittedRow = document.createElement("div");
+        submittedRow.style.cssText = "display:flex;justify-content:space-between;margin-top:8px;";
+        submittedRow.innerHTML = `
+      <span style="color:${this.theme.textMuted};font-size:12px;">Submitted</span>
+      <span style="color:${this.theme.text};font-size:12px;">${submitResult.submitted_at ? new Date(submitResult.submitted_at).toLocaleString() : "Just now"}</span>
+    `;
+        details.appendChild(submittedRow);
+        wrapper.appendChild(details);
+        // Failure reason — hidden until status = failed
+        const failureMsg = document.createElement("div");
+        failureMsg.style.cssText = `
+      display:none;width:100%;padding:12px 14px;border-radius:10px;
+      background:${this.theme.errorBg};border:1px solid ${this.theme.error};
+      color:${this.theme.error};font-size:12px;text-align:left;line-height:1.5;
+    `;
+        wrapper.appendChild(failureMsg);
+        // Done button
+        const doneBtn = this.createPrimaryButton("Done");
+        let finalStatus = submitResult.status;
+        doneBtn.addEventListener("click", () => {
+            if (this._pollStatusTimer) {
+                clearTimeout(this._pollStatusTimer);
+                this._pollStatusTimer = null;
+            }
+            this.options.onComplete?.({
+                entryId: submitResult.id,
+                sessionId: this.sdk.sessionToken,
+                status: finalStatus,
+                submittedAt: submitResult.submitted_at,
+                verificationResult: this.verificationResult || undefined,
+            });
+            this.close();
+        });
+        wrapper.appendChild(doneBtn);
+        this.contentArea.appendChild(wrapper);
+        requestAnimationFrame(() => {
+            wrapper.style.opacity = "1";
+            wrapper.style.transform = "scale(1)";
+        });
+        // Start polling for the async result
+        this._startStatusPolling(submitResult.id, iconWrap, statusBadge, title, desc, failureMsg, (resolved) => { finalStatus = resolved; });
+    }
+    _startStatusPolling(entryId, iconWrap, statusBadge, title, desc, failureMsg, onResolved) {
+        const MAX_POLLS = 25; // 25 × 3 s = 75 s + 4 s initial = ~79 s max
+        let polls = 0;
+        // Hard 30 s UI timer — stops spinner even if backend is still processing
+        let uiTimeoutId = setTimeout(() => {
+            if (!this.isDestroyed)
+                applyTimeout();
+        }, 30000);
+        const clearUiTimeout = () => { if (uiTimeoutId) {
+            clearTimeout(uiTimeoutId);
+            uiTimeoutId = null;
+        } };
+        const applyTimeout = () => {
+            iconWrap.innerHTML = "⏱";
+            iconWrap.style.background = this.theme.cardBg;
+            iconWrap.style.border = `3px solid ${this.theme.warning}`;
+            iconWrap.style.color = this.theme.warning;
+            iconWrap.style.fontSize = "30px";
+            statusBadge.style.color = this.theme.textMuted;
+            statusBadge.textContent = "Still processing…";
+            title.textContent = "Verification In Progress";
+            desc.textContent = "Your verification is being processed. Your result will be delivered via your dashboard or webhook. You can safely close this.";
+        };
+        const applyPassed = () => {
+            clearUiTimeout();
+            iconWrap.innerHTML = "✓";
+            iconWrap.style.background = this.theme.successBg;
+            iconWrap.style.border = `3px solid ${this.theme.success}`;
+            iconWrap.style.color = this.theme.success;
+            iconWrap.style.fontSize = "36px";
+            statusBadge.style.color = this.theme.success;
+            statusBadge.textContent = "Verified ✓";
+            title.textContent = "Identity Verified";
+            desc.textContent = "Your identity check passed successfully.";
+        };
+        const applyFailed = (reason) => {
+            clearUiTimeout();
+            iconWrap.innerHTML = "✕";
+            iconWrap.style.background = this.theme.errorBg;
+            iconWrap.style.border = `3px solid ${this.theme.error}`;
+            iconWrap.style.color = this.theme.error;
+            iconWrap.style.fontSize = "32px";
+            statusBadge.style.color = this.theme.error;
+            statusBadge.textContent = "Failed";
+            title.textContent = "Verification Failed";
+            desc.textContent = "Your identity check could not be completed.";
+            if (reason) {
+                failureMsg.textContent = reason;
+                failureMsg.style.display = "block";
+            }
+        };
+        const poll = async () => {
+            if (this.isDestroyed)
+                return;
+            polls++;
+            try {
+                const result = await this.sdk.liveness.pollResult(entryId);
+                if (result.status === "passed") {
+                    onResolved("passed");
+                    applyPassed();
+                    return;
+                }
+                if (result.status === "failed" || result.status === "expired_document") {
+                    onResolved(result.status);
+                    applyFailed(result.failure_reason);
+                    return;
+                }
+                // Still pending/processing — schedule next poll if budget remains
+                if (polls < MAX_POLLS && !this.isDestroyed) {
+                    this._pollStatusTimer = setTimeout(poll, 3000);
+                }
+                else if (!this.isDestroyed) {
+                    applyTimeout(); // budget exhausted — stop spinner, show timeout state
+                }
+            }
+            catch {
+                // Network hiccup — retry with a slightly longer delay
+                if (polls < MAX_POLLS && !this.isDestroyed) {
+                    this._pollStatusTimer = setTimeout(poll, 5000);
+                }
+                else if (!this.isDestroyed) {
+                    applyTimeout(); // budget exhausted — stop spinner
+                }
+            }
+        };
+        // First poll after 4 s — gives Celery task time to complete
+        this._pollStatusTimer = setTimeout(poll, 4000);
+    }
+    renderResult(_container) {
+        // Handled by showResult() directly
+    }
+    // ── Error ───────────────────────────────────────────────────────
+    showErrorStep(message) {
+        this.currentStep = "error";
+        if (!this.contentArea)
+            return;
+        this.contentArea.innerHTML = "";
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;
+      text-align:center;gap:16px;padding:20px 0;
+    `;
+        const isCameraErr = /camera|permission|notallowed|notfound/i.test(message);
+        const isNetworkErr = /network|timeout|connection|fetch/i.test(message);
+        const isAuthErr = /session|token|expired|authentication/i.test(message);
+        const errorIcon = isCameraErr ? "\uD83D\uDCF7" : isNetworkErr ? "\uD83D\uDCE1" : isAuthErr ? "\u23F1" : "\u2717";
+        const errorTitle = isCameraErr ? "Camera Access Required"
+            : isNetworkErr ? "Connection Problem"
+                : isAuthErr ? "Session Expired"
+                    : "Verification Failed";
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `
+      width:72px;height:72px;border-radius:50%;
+      display:flex;align-items:center;justify-content:center;
+      font-size:${errorIcon === "\u2717" ? "32px" : "28px"};
+      background:${this.theme.errorBg};
+      border:3px solid ${this.theme.error};
+    `;
+        iconWrap.textContent = errorIcon;
+        wrapper.appendChild(iconWrap);
+        const title = document.createElement("h2");
+        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.textContent = errorTitle;
+        wrapper.appendChild(title);
+        const desc = document.createElement("p");
+        desc.style.cssText = `color:${this.theme.textSecondary};font-size:14px;line-height:1.6;margin:0;max-width:300px;`;
+        desc.textContent = message;
+        wrapper.appendChild(desc);
+        const retryBtn = this.createPrimaryButton("Try Again");
+        retryBtn.addEventListener("click", () => {
+            // If session already exists, go back to welcome without re-initializing
+            // (re-initializing would fail with CLIENT_ID_ALREADY_USED)
+            if (this.sdk.sessionToken && this.sdkConfig) {
+                this.showStep("welcome");
+            }
+            else {
+                // Only re-initialize if session was never created
+                this.initialize();
+            }
+        });
+        wrapper.appendChild(retryBtn);
+        const closeBtn = this.createSecondaryButton("Close");
+        closeBtn.addEventListener("click", () => {
+            this.options.onError?.(new Error(message));
+            this.close();
+        });
+        wrapper.appendChild(closeBtn);
+        this.contentArea.appendChild(wrapper);
+    }
+    // ─────────────────────────────────────────────────────────────────
+    // UI Helpers
+    // ─────────────────────────────────────────────────────────────────
+    createHeader() {
+        const header = document.createElement("div");
+        header.style.cssText = `
+      display:flex;align-items:center;justify-content:space-between;
+      padding:14px 20px;border-bottom:1px solid ${this.theme.border};
+    `;
+        // Left: back button + brand
+        const leftArea = document.createElement("div");
+        leftArea.style.cssText = "display:flex;align-items:center;gap:8px;min-width:0;";
+        this.headerBackBtn = document.createElement("button");
+        this.headerBackBtn.innerHTML = "&#8592;";
+        this.headerBackBtn.style.cssText = `
+      width:30px;height:30px;border-radius:8px;flex-shrink:0;
+      display:none;align-items:center;justify-content:center;
+      border:1.5px solid ${this.theme.border};cursor:pointer;
+      font-size:16px;line-height:1;
+      background:${this.theme.cardBg};color:${this.theme.text};
+      transition:all 0.2s ease;
+    `;
+        this.headerBackBtn.addEventListener("mouseenter", () => {
+            if (this.headerBackBtn) {
+                this.headerBackBtn.style.background = this.theme.shimmer;
+            }
+        });
+        this.headerBackBtn.addEventListener("mouseleave", () => {
+            if (this.headerBackBtn) {
+                this.headerBackBtn.style.background = this.theme.cardBg;
+            }
+        });
+        leftArea.appendChild(this.headerBackBtn);
+        this.brandLabel = document.createElement("div");
+        this.brandLabel.style.cssText = `
+      font-size:15px;font-weight:700;color:${this.theme.text};
+      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+    `;
+        this.brandLabel.textContent = this.sdkConfig?.brand_name || "SmartComply";
+        leftArea.appendChild(this.brandLabel);
+        header.appendChild(leftArea);
+        // Step indicator
+        this.stepLabel = document.createElement("div");
+        this.stepLabel.style.cssText = `
+      font-size:12px;color:${this.theme.textMuted};
+      font-variant-numeric:tabular-nums;flex-shrink:0;
+    `;
+        header.appendChild(this.stepLabel);
+        // Close button
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "✕";
+        closeBtn.style.cssText = `
+      width:32px;height:32px;border-radius:8px;flex-shrink:0;
+      display:flex;align-items:center;justify-content:center;
+      border:none;cursor:pointer;font-size:16px;
+      background:${this.theme.shimmer};color:${this.theme.textMuted};
+      transition:all 0.2s ease;
+    `;
+        closeBtn.addEventListener("mouseenter", () => {
+            closeBtn.style.background = this.theme.errorBg;
+            closeBtn.style.color = this.theme.error;
+        });
+        closeBtn.addEventListener("mouseleave", () => {
+            closeBtn.style.background = this.theme.shimmer;
+            closeBtn.style.color = this.theme.textMuted;
+        });
+        closeBtn.addEventListener("click", () => this.close());
+        header.appendChild(closeBtn);
+        return header;
+    }
+    createFooter() {
+        const footer = document.createElement("div");
+        footer.style.cssText = `
+      padding:12px 20px;border-top:1px solid ${this.theme.border};
+      display:flex;align-items:center;justify-content:center;gap:6px;
+    `;
+        const powered = document.createElement("span");
+        powered.style.cssText = `font-size:11px;color:${this.theme.textMuted};`;
+        powered.textContent = "Powered by ";
+        const brand = document.createElement("span");
+        brand.style.cssText = `font-size:11px;font-weight:700;color:${this.theme.primary};`;
+        brand.textContent = "Adhere";
+        footer.appendChild(powered);
+        footer.appendChild(brand);
+        return footer;
+    }
+    createStepTitle(text) {
+        const el = document.createElement("h3");
+        el.style.cssText = `
+      color:${this.theme.text};font-size:18px;font-weight:700;
+      margin:0;
+    `;
+        el.textContent = text;
+        return el;
+    }
+    createOptionCard(title, subtitle, onClick) {
+        const card = document.createElement("button");
+        card.style.cssText = `
+      width:100%;padding:16px;border-radius:12px;
+      background:${this.theme.cardBg};
+      border:2px solid ${this.theme.border};
+      cursor:pointer;text-align:left;
+      display:flex;align-items:center;justify-content:space-between;
+      transition:all 0.2s ease;
+    `;
+        card.addEventListener("mouseenter", () => {
+            card.style.borderColor = this.theme.primary;
+            card.style.background = this.theme.shimmer;
+            card.style.transform = "translateY(-1px)";
+        });
+        card.addEventListener("mouseleave", () => {
+            card.style.borderColor = this.theme.border;
+            card.style.background = this.theme.cardBg;
+            card.style.transform = "translateY(0)";
+        });
+        card.addEventListener("click", onClick);
+        const textWrap = document.createElement("div");
+        const titleEl = document.createElement("div");
+        titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:600;`;
+        titleEl.textContent = title;
+        textWrap.appendChild(titleEl);
+        if (subtitle) {
+            const subEl = document.createElement("div");
+            subEl.style.cssText = `color:${this.theme.textMuted};font-size:12px;margin-top:2px;`;
+            subEl.textContent = subtitle;
+            textWrap.appendChild(subEl);
+        }
+        const arrow = document.createElement("span");
+        arrow.style.cssText = `color:${this.theme.textMuted};font-size:18px;flex-shrink:0;`;
+        arrow.textContent = "→";
+        card.appendChild(textWrap);
+        card.appendChild(arrow);
+        return card;
+    }
+    createPrimaryButton(text) {
+        const btn = document.createElement("button");
+        btn.textContent = text;
+        btn.style.cssText = `
+      width:100%;padding:14px;border-radius:12px;
+      font-size:15px;font-weight:600;
+      background:${this.theme.primary};color:#fff;
+      border:none;cursor:pointer;
+      transition:all 0.2s ease;
+      box-shadow:0 2px 8px ${this.theme.primaryGlow};
+    `;
+        btn.addEventListener("mouseenter", () => {
+            btn.style.background = this.theme.primaryHover;
+            btn.style.transform = "translateY(-1px)";
+        });
+        btn.addEventListener("mouseleave", () => {
+            btn.style.background = this.theme.primary;
+            btn.style.transform = "translateY(0)";
+        });
+        return btn;
+    }
+    createSecondaryButton(text) {
+        const btn = document.createElement("button");
+        btn.textContent = text;
+        btn.style.cssText = `
+      width:100%;padding:12px;border-radius:12px;
+      font-size:14px;font-weight:500;
+      background:transparent;color:${this.theme.textSecondary};
+      border:none;cursor:pointer;
+      transition:all 0.2s ease;
+    `;
+        btn.addEventListener("mouseenter", () => {
+            btn.style.color = this.theme.text;
+        });
+        btn.addEventListener("mouseleave", () => {
+            btn.style.color = this.theme.textSecondary;
+        });
+        return btn;
+    }
+    isDocumentFlow() {
+        // 1. Check verification_type — handle both string and array from backend
+        const vType = this.sdkConfig?.verification_type;
+        if (vType) {
+            const types = Array.isArray(vType) ? vType : [vType];
+            if (types.includes("document_verification"))
+                return true;
+            if (types.includes("data_verification"))
+                return false;
+        }
+        // 2. Fallback: inspect channel fields — any upload field = document flow
+        const channels = this.sdkConfig?.channels || {};
+        const allFields = Object.values(channels)
+            .flat()
+            .flatMap((ch) => ch.fields || []);
+        return allFields.some((f) => f.type === "upload");
+    }
+    updateProgress() {
+        const isDocFlow = this.isDocumentFlow();
+        const countries = Object.keys(this.sdkConfig?.channels || {});
+        const singleCountry = countries.length <= 1;
+        // User-action steps only (what the user actually does — no loading/welcome/result)
+        const actionSteps = ["country", "id_type", isDocFlow ? "document_capture" : "id_input", "liveness"].filter((s) => !(s === "country" && singleCountry));
+        const totalSteps = actionSteps.length;
+        const actionIndex = actionSteps.indexOf(this.currentStep);
+        const pct = this.currentStep === "result" ? 100
+            : actionIndex >= 0 ? ((actionIndex + 1) / totalSteps) * 100
+                : 0;
+        if (this.progressBar) {
+            this.progressBar.style.width = `${pct}%`;
+        }
+        if (this.stepLabel) {
+            if (this.currentStep === "loading" || this.currentStep === "welcome") {
+                this.stepLabel.textContent = "";
+            }
+            else if (this.currentStep === "result") {
+                this.stepLabel.textContent = "Complete ✓";
+            }
+            else if (actionIndex >= 0) {
+                this.stepLabel.textContent = `Step ${actionIndex + 1} of ${totalSteps}`;
+            }
+            else {
+                this.stepLabel.textContent = "";
+            }
+        }
+        // Back button — show in header for navigable steps, hidden elsewhere
+        if (this.headerBackBtn) {
+            const countries = Object.keys(this.sdkConfig?.channels || {});
+            const backTargets = {
+                id_type: () => this.showStep(countries.length > 1 ? "country" : "welcome"),
+                country: () => this.showStep("welcome"),
+                id_input: () => this.showStep("id_type"),
+                document_capture: () => { this.docCapture?.destroy(); this.showStep("id_type"); },
+            };
+            const backAction = backTargets[this.currentStep];
+            if (backAction) {
+                this.headerBackBtn.style.display = "flex";
+                const newBtn = this.headerBackBtn.cloneNode(true);
+                newBtn.style.cssText = this.headerBackBtn.style.cssText;
+                this.headerBackBtn.parentNode?.replaceChild(newBtn, this.headerBackBtn);
+                this.headerBackBtn = newBtn;
+                this.headerBackBtn.addEventListener("mouseenter", () => {
+                    if (this.headerBackBtn)
+                        this.headerBackBtn.style.background = this.theme.shimmer;
+                });
+                this.headerBackBtn.addEventListener("mouseleave", () => {
+                    if (this.headerBackBtn)
+                        this.headerBackBtn.style.background = this.theme.cardBg;
+                });
+                this.headerBackBtn.addEventListener("click", backAction);
+            }
+            else {
+                this.headerBackBtn.style.display = "none";
+            }
+        }
+    }
+    applyTheme() {
+        if (this.overlay) {
+            this.overlay.style.background = this.theme.overlay;
+        }
+        if (this.modal) {
+            this.modal.style.background = this.theme.bg;
+            this.modal.style.boxShadow = this.theme.shadow;
+        }
+    }
+    injectStyles() {
+        if (document.getElementById("sc-flow-styles"))
+            return;
+        const style = document.createElement("style");
+        style.id = "sc-flow-styles";
+        style.textContent = `
+      @keyframes sc-spin {
+        to { transform: rotate(360deg); }
+      }
+      @keyframes sc-pop {
+        0% { transform: scale(0.8); opacity: 0; }
+        50% { transform: scale(1.05); }
+        100% { transform: scale(1); opacity: 1; }
+      }
+      #sc-flow-modal * {
+        box-sizing: border-box;
+      }
+      #sc-flow-modal::-webkit-scrollbar {
+        width: 4px;
+      }
+      #sc-flow-content::-webkit-scrollbar {
+        width: 4px;
+      }
+      #sc-flow-content::-webkit-scrollbar-thumb {
+        background: rgba(128,128,128,0.3);
+        border-radius: 4px;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+//# sourceMappingURL=SmartComplyFlow.js.map