@didit-protocol/sdk-web 0.1.0

package/dist/didit-sdk.esm.js

@@ -0,0 +1,732 @@
+/**
+ * Didit SDK for Web v0.1.0
+ * (c) 2026 Didit
+ * @license MIT
+ */
+const DEFAULT_CONFIG = {
+    zIndex: 9999,
+    showCloseButton: true,
+    showExitConfirmation: true,
+    loggingEnabled: false,
+};
+const CSS_CLASSES = {
+    overlay: "didit-modal-overlay",
+    container: "didit-modal-container",
+    iframe: "didit-verification-iframe",
+    closeButton: "didit-close-button",
+    loading: "didit-loading",
+    confirmOverlay: "didit-confirm-overlay",
+    confirmBox: "didit-confirm-box"
+};
+const SDK_VERSION = "0.1.0";
+
+class SDKLogger {
+    static get isEnabled() {
+        return this._enabled;
+    }
+    static set isEnabled(value) {
+        this._enabled = value;
+    }
+    static log(...args) {
+        if (this._enabled) {
+            console.log("[DiditSDK]", ...args);
+        }
+    }
+    static warn(...args) {
+        if (this._enabled) {
+            console.warn("[DiditSDK]", ...args);
+        }
+    }
+    static error(...args) {
+        if (this._enabled) {
+            console.error("[DiditSDK]", ...args);
+        }
+    }
+}
+SDKLogger._enabled = false;
+function generateModalId() {
+    return `didit-modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function isAllowedOrigin(origin) {
+    try {
+        const url = new URL(origin);
+        return url.hostname.endsWith('.didit.me');
+    }
+    catch {
+        return false;
+    }
+}
+function createVerificationError(type, customMessage) {
+    const messages = {
+        sessionExpired: "Your verification session has expired.",
+        networkError: "A network error occurred. Please try again.",
+        cameraAccessDenied: "Camera access is required for verification.",
+        unknown: customMessage || "An unknown error occurred."
+    };
+    return {
+        type,
+        message: customMessage || messages[type]
+    };
+}
+
+class VerificationModal {
+    constructor(configuration, callbacks) {
+        this.state = {
+            isOpen: false,
+            isLoading: true,
+            showConfirmation: false
+        };
+        this.overlay = null;
+        this.container = null;
+        this.iframe = null;
+        this.loadingEl = null;
+        this.confirmOverlay = null;
+        this.boundHandleMessage = null;
+        this.boundHandleKeydown = null;
+        this.modalId = generateModalId();
+        this.config = {
+            zIndex: configuration?.zIndex ?? DEFAULT_CONFIG.zIndex,
+            showCloseButton: configuration?.showCloseButton ?? DEFAULT_CONFIG.showCloseButton,
+            showExitConfirmation: configuration?.showExitConfirmation ?? DEFAULT_CONFIG.showExitConfirmation
+        };
+        this.callbacks = callbacks;
+        this.containerElement = configuration?.containerElement ?? document.body;
+    }
+    injectStyles() {
+        const styleId = "didit-sdk-styles";
+        if (document.getElementById(styleId)) {
+            return;
+        }
+        const styles = document.createElement("style");
+        styles.id = styleId;
+        styles.textContent = `
+      .${CSS_CLASSES.overlay} {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        z-index: ${this.config.zIndex};
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        opacity: 0;
+        transition: opacity 0.2s ease-out;
+      }
+
+      .${CSS_CLASSES.overlay}.active {
+        display: flex;
+        opacity: 1;
+      }
+
+      .${CSS_CLASSES.container} {
+        position: relative;
+        width: 100%;
+        max-width: 500px;
+        max-height: 90vh;
+        border-radius: 16px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .${CSS_CLASSES.overlay}.active .${CSS_CLASSES.container} {
+        transform: scale(1);
+      }
+
+      .${CSS_CLASSES.iframe} {
+        width: 100%;
+        height: 700px;
+        border: none;
+        display: block;
+      }
+
+      .${CSS_CLASSES.closeButton} {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        width: 24px;
+        height: 24px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        z-index: 10;
+        outline: none;
+      }
+
+      .${CSS_CLASSES.closeButton}:hover,
+      .${CSS_CLASSES.closeButton}:focus {
+        background: transparent;
+        opacity: 0.5;
+      }
+
+      .${CSS_CLASSES.closeButton} svg {
+        stroke: #666;
+        stroke-width: 2;
+        stroke-linecap: round;
+      }
+
+      .${CSS_CLASSES.loading} {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fafafa;
+        z-index: 5;
+      }
+
+      .${CSS_CLASSES.loading}.hidden {
+        display: none;
+      }
+
+      .${CSS_CLASSES.loading} svg {
+        width: 48px;
+        height: 48px;
+        animation: didit-spin 1s linear infinite;
+      }
+
+      .${CSS_CLASSES.loading} circle {
+        stroke: #e5e5e5;
+        stroke-width: 3;
+        fill: none;
+      }
+
+      .${CSS_CLASSES.loading} path {
+        stroke: #525252;
+        stroke-width: 3;
+        stroke-linecap: round;
+        fill: none;
+      }
+
+      @keyframes didit-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .${CSS_CLASSES.confirmOverlay} {
+        display: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 20;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        transition: opacity 0.15s ease-out;
+      }
+
+      .${CSS_CLASSES.confirmOverlay}.active {
+        display: flex;
+        opacity: 1;
+      }
+
+      .${CSS_CLASSES.confirmBox} {
+        background: #fff;
+        border-radius: 12px;
+        padding: 1.5rem;
+        text-align: center;
+        max-width: 300px;
+        margin: 1rem;
+        transform: scale(0.95);
+        transition: transform 0.15s ease-out;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      }
+
+      .${CSS_CLASSES.confirmOverlay}.active .${CSS_CLASSES.confirmBox} {
+        transform: scale(1);
+      }
+
+      .${CSS_CLASSES.confirmBox} h3 {
+        color: #1a1a2e;
+        margin: 0 0 0.5rem 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+      }
+
+      .${CSS_CLASSES.confirmBox} p {
+        color: #666;
+        font-size: 0.875rem;
+        margin: 0 0 1.25rem 0;
+        line-height: 1.5;
+      }
+
+      .didit-confirm-actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+      }
+
+      .didit-confirm-actions button {
+        background: #2563eb;
+        color: #fff;
+        border: none;
+        padding: 0.625rem 1.25rem;
+        border-radius: 8px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .didit-confirm-actions button:hover {
+        background: #1d4ed8;
+      }
+
+      .didit-confirm-actions span {
+        color: #666;
+        font-size: 0.875rem;
+        cursor: pointer;
+        padding: 0.625rem;
+        transition: color 0.15s ease;
+      }
+
+      .didit-confirm-actions span:hover {
+        color: #1a1a2e;
+      }
+
+      @media (max-width: 540px) {
+        .${CSS_CLASSES.overlay} {
+          padding: 0;
+        }
+
+        .${CSS_CLASSES.container} {
+          max-width: 100%;
+          max-height: 100vh;
+          border-radius: 0;
+        }
+
+        .${CSS_CLASSES.iframe} {
+          height: 100vh;
+        }
+      }
+    `;
+        document.head.appendChild(styles);
+    }
+    createDOM() {
+        this.injectStyles();
+        this.overlay = document.createElement("div");
+        this.overlay.id = this.modalId;
+        this.overlay.className = CSS_CLASSES.overlay;
+        this.overlay.setAttribute("role", "dialog");
+        this.overlay.setAttribute("aria-modal", "true");
+        this.overlay.setAttribute("aria-label", "Didit Verification");
+        this.container = document.createElement("div");
+        this.container.className = CSS_CLASSES.container;
+        this.loadingEl = document.createElement("div");
+        this.loadingEl.className = CSS_CLASSES.loading;
+        this.loadingEl.innerHTML = `
+      <svg viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 2a10 10 0 0 1 10 10" />
+      </svg>
+    `;
+        if (this.config.showCloseButton) {
+            const closeBtn = document.createElement("button");
+            closeBtn.className = CSS_CLASSES.closeButton;
+            closeBtn.setAttribute("aria-label", "Close verification");
+            closeBtn.innerHTML = `
+        <svg width="14" height="14" viewBox="0 0 14 14">
+          <line x1="1" y1="1" x2="13" y2="13" />
+          <line x1="13" y1="1" x2="1" y2="13" />
+        </svg>
+      `;
+            closeBtn.addEventListener("click", () => this.handleCloseRequest());
+            this.container.appendChild(closeBtn);
+        }
+        this.iframe = document.createElement("iframe");
+        this.iframe.className = CSS_CLASSES.iframe;
+        this.iframe.setAttribute("allow", "camera; microphone; fullscreen; autoplay; encrypted-media; geolocation");
+        this.iframe.setAttribute("title", "Didit Verification");
+        this.iframe.addEventListener("load", () => this.handleIframeLoad());
+        this.confirmOverlay = document.createElement("div");
+        this.confirmOverlay.className = CSS_CLASSES.confirmOverlay;
+        this.confirmOverlay.innerHTML = `
+      <div class="${CSS_CLASSES.confirmBox}">
+        <h3>Exit verification?</h3>
+        <p>Exiting will end your verification process. Are you sure?</p>
+        <div class="didit-confirm-actions">
+          <button type="button" data-action="continue">Continue</button>
+          <span data-action="exit">Exit</span>
+        </div>
+      </div>
+    `;
+        this.confirmOverlay.querySelector('[data-action="continue"]')?.addEventListener("click", () => {
+            this.hideConfirmation();
+        });
+        this.confirmOverlay.querySelector('[data-action="exit"]')?.addEventListener("click", () => {
+            this.confirmExit();
+        });
+        this.container.appendChild(this.loadingEl);
+        this.container.appendChild(this.iframe);
+        this.container.appendChild(this.confirmOverlay);
+        this.overlay.appendChild(this.container);
+        this.overlay.addEventListener("click", (e) => {
+            if (e.target === this.overlay) {
+                this.handleCloseRequest();
+            }
+        });
+        this.containerElement.appendChild(this.overlay);
+    }
+    setupEventListeners() {
+        this.boundHandleMessage = this.handleMessage.bind(this);
+        window.addEventListener("message", this.boundHandleMessage);
+        this.boundHandleKeydown = this.handleKeydown.bind(this);
+        document.addEventListener("keydown", this.boundHandleKeydown);
+    }
+    removeEventListeners() {
+        if (this.boundHandleMessage) {
+            window.removeEventListener("message", this.boundHandleMessage);
+            this.boundHandleMessage = null;
+        }
+        if (this.boundHandleKeydown) {
+            document.removeEventListener("keydown", this.boundHandleKeydown);
+            this.boundHandleKeydown = null;
+        }
+    }
+    handleMessage(event) {
+        if (!isAllowedOrigin(event.origin)) {
+            return;
+        }
+        SDKLogger.log("Received postMessage:", event.data);
+        let messageData;
+        try {
+            if (typeof event.data === "string") {
+                messageData = JSON.parse(event.data);
+            }
+            else {
+                messageData = event.data;
+            }
+        }
+        catch {
+            SDKLogger.warn("Failed to parse postMessage:", event.data);
+            return;
+        }
+        if (messageData.type === "didit:close_request") {
+            this.handleCloseRequest();
+            return;
+        }
+        this.callbacks.onMessage(messageData);
+    }
+    handleKeydown(event) {
+        if (!this.state.isOpen)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (this.state.showConfirmation) {
+                this.hideConfirmation();
+            }
+            else {
+                this.handleCloseRequest();
+            }
+        }
+    }
+    handleIframeLoad() {
+        if (this.iframe?.src && this.iframe.src !== "about:blank") {
+            this.state.isLoading = false;
+            this.loadingEl?.classList.add("hidden");
+            this.callbacks.onIframeLoad();
+        }
+    }
+    handleCloseRequest() {
+        if (this.config.showExitConfirmation) {
+            this.showConfirmation();
+        }
+        else {
+            this.callbacks.onCloseConfirmed();
+        }
+    }
+    showConfirmation() {
+        this.state.showConfirmation = true;
+        this.confirmOverlay?.classList.add("active");
+        this.callbacks.onClose();
+    }
+    hideConfirmation() {
+        this.state.showConfirmation = false;
+        this.confirmOverlay?.classList.remove("active");
+    }
+    confirmExit() {
+        this.hideConfirmation();
+        this.callbacks.onCloseConfirmed();
+    }
+    open(verificationUrl) {
+        if (!this.overlay) {
+            this.createDOM();
+            this.setupEventListeners();
+        }
+        SDKLogger.log("Opening modal with URL:", verificationUrl);
+        this.state.isLoading = true;
+        this.state.showConfirmation = false;
+        this.loadingEl?.classList.remove("hidden");
+        this.confirmOverlay?.classList.remove("active");
+        if (this.iframe) {
+            this.iframe.src = verificationUrl;
+        }
+        this.state.isOpen = true;
+        this.overlay?.classList.add("active");
+        document.body.style.overflow = "hidden";
+    }
+    close() {
+        SDKLogger.log("Closing modal");
+        this.state.isOpen = false;
+        this.state.isLoading = true;
+        this.state.showConfirmation = false;
+        this.overlay?.classList.remove("active");
+        if (this.iframe) {
+            this.iframe.src = "about:blank";
+        }
+        document.body.style.overflow = "";
+    }
+    destroy() {
+        SDKLogger.log("Destroying modal");
+        this.close();
+        this.removeEventListeners();
+        if (this.overlay && this.overlay.parentNode) {
+            this.overlay.parentNode.removeChild(this.overlay);
+        }
+        this.overlay = null;
+        this.container = null;
+        this.iframe = null;
+        this.loadingEl = null;
+        this.confirmOverlay = null;
+    }
+    isOpen() {
+        return this.state.isOpen;
+    }
+    isLoading() {
+        return this.state.isLoading;
+    }
+}
+
+class DiditSdk {
+    static get shared() {
+        if (!DiditSdk._instance) {
+            DiditSdk._instance = new DiditSdk();
+        }
+        return DiditSdk._instance;
+    }
+    static reset() {
+        if (DiditSdk._instance) {
+            DiditSdk._instance.destroy();
+            DiditSdk._instance = null;
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    get configuration() {
+        return this._configuration;
+    }
+    get isPresented() {
+        return this._modal?.isOpen() ?? false;
+    }
+    get errorMessage() {
+        return this._errorMessage;
+    }
+    constructor() {
+        this._state = "idle";
+        this._modal = null;
+        SDKLogger.log("DiditSdk initialized");
+    }
+    async startVerification(options) {
+        const config = options.configuration;
+        this._configuration = config;
+        SDKLogger.isEnabled = config?.loggingEnabled ?? DEFAULT_CONFIG.loggingEnabled;
+        SDKLogger.log("Starting verification with options:", options);
+        this._modal = new VerificationModal(config, {
+            onClose: () => this.handleModalClose(),
+            onCloseConfirmed: () => this.handleModalCloseConfirmed(),
+            onMessage: (event) => this.handleVerificationEvent(event),
+            onIframeLoad: () => this.handleIframeLoad()
+        });
+        try {
+            const { url } = options;
+            if (!url || typeof url !== "string") {
+                throw new Error("Invalid options: url is required");
+            }
+            this._url = url;
+            this.setState("loading");
+            this.emitInternalEvent("didit:started", {});
+            this._modal?.open(this._url);
+            this.setState("ready");
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    close() {
+        SDKLogger.log("Closing verification programmatically");
+        this.handleModalCloseConfirmed();
+    }
+    destroy() {
+        SDKLogger.log("Destroying SDK instance");
+        this._modal?.destroy();
+        this._modal = null;
+        this.reset();
+    }
+    handleModalClose() {
+        SDKLogger.log("Modal close requested");
+    }
+    handleModalCloseConfirmed() {
+        SDKLogger.log("Modal close confirmed");
+        const sessionData = this.buildSessionData();
+        this._modal?.close();
+        this.reset();
+        const result = {
+            type: "cancelled",
+            session: sessionData
+        };
+        this.onComplete?.(result);
+    }
+    handleIframeLoad() {
+        SDKLogger.log("Iframe loaded");
+        this.emitInternalEvent("didit:ready", {
+            sessionId: this._sessionId
+        });
+    }
+    emitInternalEvent(type, data) {
+        const event = {
+            type,
+            data,
+            timestamp: Date.now()
+        };
+        SDKLogger.log("Emitting internal event:", event);
+        this.onEvent?.(event);
+    }
+    handleVerificationEvent(event) {
+        SDKLogger.log("Verification event:", event);
+        this.onEvent?.(event);
+        switch (event.type) {
+            case "didit:ready":
+                SDKLogger.log("Verification iframe ready");
+                break;
+            case "didit:started":
+                SDKLogger.log("User started verification");
+                break;
+            case "didit:step_started":
+                SDKLogger.log("Step started:", event.data?.step);
+                break;
+            case "didit:step_completed":
+                SDKLogger.log("Step completed:", event.data?.step, "-> next:", event.data?.nextStep);
+                break;
+            case "didit:media_started":
+                SDKLogger.log("Media started:", event.data?.mediaType, "for step:", event.data?.step);
+                break;
+            case "didit:media_captured":
+                SDKLogger.log("Media captured for step:", event.data?.step, "isAuto:", event.data?.isAuto);
+                break;
+            case "didit:document_selected":
+                SDKLogger.log("Document selected:", event.data?.documentType, "country:", event.data?.country);
+                break;
+            case "didit:verification_submitted":
+                SDKLogger.log("Verification submitted for step:", event.data?.step);
+                break;
+            case "didit:code_sent":
+                SDKLogger.log("Code sent via:", event.data?.channel, "codeSize:", event.data?.codeSize);
+                break;
+            case "didit:code_verified":
+                SDKLogger.log("Code verified via:", event.data?.channel);
+                break;
+            case "didit:status_updated":
+                SDKLogger.log("Status updated:", event.data?.status, "step:", event.data?.step);
+                break;
+            case "didit:completed":
+                this.handleVerificationCompleted(event);
+                break;
+            case "didit:cancelled":
+                this.handleVerificationCancelled(event);
+                break;
+            case "didit:error":
+                this.handleVerificationError(event);
+                break;
+            case "didit:step_changed":
+                SDKLogger.log("Step changed:", event.data?.step);
+                break;
+        }
+    }
+    handleVerificationCompleted(event) {
+        SDKLogger.log("Verification completed:", event.data);
+        const sessionData = this.buildSessionData(event.data);
+        this._modal?.close();
+        this.reset();
+        const result = {
+            type: "completed",
+            session: sessionData
+        };
+        this.onComplete?.(result);
+    }
+    handleVerificationCancelled(event) {
+        SDKLogger.log("Verification cancelled:", event.data);
+        const sessionData = this.buildSessionData(event.data);
+        this._modal?.close();
+        this.reset();
+        const result = {
+            type: "cancelled",
+            session: sessionData
+        };
+        this.onComplete?.(result);
+    }
+    handleVerificationError(event) {
+        SDKLogger.log("Verification error:", event.data);
+        const sessionData = this.buildSessionData(event.data);
+        const error = createVerificationError("unknown", event.data?.error);
+        this._modal?.close();
+        this.reset();
+        const result = {
+            type: "failed",
+            session: sessionData,
+            error
+        };
+        this.onComplete?.(result);
+    }
+    handleError(error) {
+        SDKLogger.error("SDK error:", error);
+        let verificationError;
+        if (error instanceof Error) {
+            verificationError = createVerificationError("unknown", error.message);
+        }
+        else {
+            verificationError = createVerificationError("unknown", "An unknown error occurred");
+        }
+        this._errorMessage = verificationError.message;
+        this.setState("error");
+        this._modal?.close();
+        this.reset();
+        const result = {
+            type: "failed",
+            error: verificationError
+        };
+        this.onComplete?.(result);
+    }
+    setState(state) {
+        const previousState = this._state;
+        this._state = state;
+        if (previousState !== state) {
+            SDKLogger.log("State changed:", previousState, "->", state);
+            this.onStateChange?.(state, this._errorMessage);
+        }
+    }
+    reset() {
+        this._state = "idle";
+        this._sessionId = undefined;
+        this._url = undefined;
+        this._errorMessage = undefined;
+        this._configuration = undefined;
+    }
+    buildSessionData(eventData) {
+        const sessionId = eventData?.sessionId || this._sessionId;
+        if (!sessionId) {
+            return undefined;
+        }
+        return {
+            sessionId,
+            status: (eventData?.status || "Pending"),
+            country: eventData?.country,
+            documentType: eventData?.documentType
+        };
+    }
+}
+DiditSdk._instance = null;
+
+export { DiditSdk, SDK_VERSION, DiditSdk as default };
+//# sourceMappingURL=didit-sdk.esm.js.map