@basis-theory/web-elements 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/{create-card-DipDWgph.js → create-card-CB_YcP_4.js}

@@ -1,6 +1,6 @@
-import { E as ElementError, c as createIframe, a as createPostMessageClient, b as createEventDispatcher, l as log, d as createMounter } from "./index-BBfuUaLw.js";
+import { E as ElementError, c as createIframe, a as createPostMessageClient, b as createEventDispatcher, l as log, d as createMounter } from "./index-Dyy7tm5Z.js";
 const DEFAULT_CARD_STACK_THRESHOLD = 400;
-const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId, ensureCoordinatorReady) => {
+const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId, ensureCoordinatorReady, notifyCoordinatorElementUnmount) => {
   let iframe = null;
   let client = null;
   let mounter = null;
@@ -43,18 +43,22 @@ const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId
     on: () => () => {
     }
   });
+  const numberRef = createSubElementRef(`${id}__number`);
+  const expiryDateRef = createSubElementRef(`${id}__expiry`);
+  const cvcRef = createSubElementRef(`${id}__cvc`);
   const cardElement = {
     id,
     type,
     get mounted() {
       return isMounted;
     },
-    // Sub-field references for tokenization
-    fields: {
-      number: createSubElementRef(`${id}__number`),
-      expiryDate: createSubElementRef(`${id}__expiry`),
-      cvc: createSubElementRef(`${id}__cvc`)
+    get loaded() {
+      return isMounted;
     },
+    // Sub-field references for tokenization
+    number: numberRef,
+    expiryDate: expiryDateRef,
+    cvc: cvcRef,
     mount: async (selector) => {
       if (isMounted) {
         throw ElementError("Element is already mounted");
@@ -119,13 +123,15 @@ const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId
           darkTheme: sdkConfig.darkTheme,
           themeMode: sdkConfig.themeMode,
           placeholder: options.placeholder,
-          style: options.style,
+          ...options.style !== void 0 && { style: options.style },
           disabled: options.disabled,
           readOnly: options.readOnly,
           layout: options.layout || "auto",
           stackAt: options.stackAt || DEFAULT_CARD_STACK_THRESHOLD,
           iconPosition: options.iconPosition || "left",
-          cardBrands: options.cardBrands,
+          ...options.cardBrands !== void 0 && { cardBrands: options.cardBrands },
+          ...options.binLookup !== void 0 && { binLookup: options.binLookup },
+          ...options.coBadge !== void 0 && { coBadge: options.coBadge },
           debug: sdkConfig.debug
         });
         if (iframe) iframe.style.opacity = "1";
@@ -156,12 +162,15 @@ const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId
       if (!isMounted) {
         throw ElementError("Element is not mounted");
       }
-      if (client) {
-        client.sendRequest("CMD_CLEAR_CACHE", {}).catch((error) => {
-          log("Failed to send clear cache command", {
+      const subFieldSuffixes = ["__number", "__expiry", "__cvc"];
+      for (const suffix of subFieldSuffixes) {
+        notifyCoordinatorElementUnmount(`${id}${suffix}`).catch((error) => {
+          log("Failed to notify coordinator of element unmount", {
             error: error.message
           });
         });
+      }
+      if (client) {
         client.destroy();
         client = null;
       }
@@ -180,15 +189,38 @@ const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId
       }
       const cardOptions = newOptions;
       const updatePayload = {
-        placeholder: cardOptions.placeholder,
-        style: cardOptions.style,
-        disabled: cardOptions.disabled,
-        readOnly: cardOptions.readOnly,
-        layout: cardOptions.layout,
-        stackAt: cardOptions.stackAt,
-        iconPosition: cardOptions.iconPosition,
-        cardBrands: cardOptions.cardBrands
+        elementId: id
       };
+      if (cardOptions.placeholder !== void 0) {
+        updatePayload.placeholder = cardOptions.placeholder;
+      }
+      if (cardOptions.style !== void 0) {
+        updatePayload.style = cardOptions.style;
+      }
+      if (cardOptions.disabled !== void 0) {
+        updatePayload.disabled = cardOptions.disabled;
+      }
+      if (cardOptions.readOnly !== void 0) {
+        updatePayload.readOnly = cardOptions.readOnly;
+      }
+      if (cardOptions.layout !== void 0) {
+        updatePayload.layout = cardOptions.layout;
+      }
+      if (cardOptions.stackAt !== void 0) {
+        updatePayload.stackAt = cardOptions.stackAt;
+      }
+      if (cardOptions.iconPosition !== void 0) {
+        updatePayload.iconPosition = cardOptions.iconPosition;
+      }
+      if (cardOptions.cardBrands !== void 0) {
+        updatePayload.cardBrands = cardOptions.cardBrands;
+      }
+      if (cardOptions.binLookup !== void 0) {
+        updatePayload.binLookup = cardOptions.binLookup;
+      }
+      if (cardOptions.coBadge !== void 0) {
+        updatePayload.coBadge = cardOptions.coBadge;
+      }
       if (newOptions.themeMode !== void 0) {
         updatePayload.themeMode = newOptions.themeMode;
         updatePayload.theme = sdkConfig.theme;
@@ -223,6 +255,12 @@ const createCardElement = (apiKey, sdkConfig, options = {}, coordinatorElementId
         eventType,
         listener
       );
+    },
+    setNetwork: async (network) => {
+      if (!isMounted || !client) {
+        throw ElementError("Element must be mounted before setNetwork");
+      }
+      await client.sendRequest("CMD_SET_NETWORK", { network });
     }
   };
   return cardElement;

package/dist/create-card-CB_YcP_4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-card-CB_YcP_4.js","sources":["../src/elements/create-card.ts"],"sourcesContent":["/**\n * Card Element Factory (Unified)\n */\n\nimport type { PostMessageClient } from '@basis-theory-elements/postmessage';\nimport { createPostMessageClient } from '@basis-theory-elements/postmessage';\nimport { ElementError, log } from '@basis-theory-elements/shared';\nimport { createMounter } from '../mounter/create-mounter';\nimport type {\n  CardElement,\n  ElementMounter,\n  ElementOptions,\n  EventListener,\n  EventType,\n  SDKConfig,\n  SubElementRef,\n} from '../types';\nimport { createIframe } from '../utils/create-iframe';\nimport { createEventDispatcher } from '../utils/create-event-dispatcher';\n\n/**\n * Default stack threshold in pixels for CardElement auto-layout\n * When container width is below this threshold, card inputs stack vertically\n */\nconst DEFAULT_CARD_STACK_THRESHOLD = 400;\n\n/**\n * Card element options\n */\nexport interface CardElementOptions {\n  /** CSS styling */\n  style?: Record<string, any>;\n\n  /** Placeholder text for each sub-field */\n  placeholder?: {\n    cardNumber?: string;\n    expiryDate?: string;\n    cvc?: string;\n  };\n\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  /** Disabled state (applies to all 3 sub-fields) */\n  disabled?: boolean;\n\n  /** Read-only state (applies to all 3 sub-fields) */\n  readOnly?: boolean;\n\n  /** Layout mode */\n  layout?: 'row' | 'column' | 'auto';\n\n  /** Stack threshold in pixels (only applies when layout: 'auto') */\n  stackAt?: number;\n\n  /** Icon position */\n  iconPosition?: 'left' | 'right' | 'none';\n\n  /** Restrict accepted card brands */\n  cardBrands?: string[];\n\n  /**\n   * BIN enrichment for the card number field. Setting `coBadge` turns enrichment on and\n   * overrides this — an explicit `binLookup: false` is ignored when `coBadge` is set.\n   */\n  binLookup?: boolean | { enabled?: boolean; debounceMs?: number };\n\n  /** Co-badge options; forces BIN enrichment on when set, overriding `binLookup`. */\n  coBadge?: {\n    preferredNetworks?: string[];\n    mode?: 'auto' | 'manual';\n  };\n}\n\n/**\n * Factory function to create a unified card element\n * No class, pure functional approach with closure-based state\n */\nexport const createCardElement = (\n  apiKey: string,\n  sdkConfig: SDKConfig,\n  options: CardElementOptions = {},\n  coordinatorElementId: string,\n  ensureCoordinatorReady: () => Promise<void>,\n  notifyCoordinatorElementUnmount: (elementId: string) => Promise<void> // ← Notify coordinator on unmount\n): CardElement => {\n  // Private state (closure)\n  let iframe: HTMLIFrameElement | null = null;\n  let client: PostMessageClient | null = null;\n  let mounter: ElementMounter | null = null;\n  let isMounted = false;\n  let container: HTMLElement | null = null;\n  let eventDispatcher: ReturnType<typeof createEventDispatcher> | null = null;\n\n  // Event target for event emission\n  const eventTarget = new EventTarget();\n\n  // Use coordinator-generated ID for all references\n  const id = coordinatorElementId;\n  const type = 'card';\n\n  // Setup event dispatcher\n  const setupEventListeners = () => {\n    if (!client) {\n      return;\n    }\n\n    eventDispatcher = createEventDispatcher({\n      elementType: type,\n      elementId: id,\n      client,\n      eventTarget,\n    });\n\n    eventDispatcher.setupSubscriptions();\n  };\n\n  /**\n   * Create sub-element reference for tokenization\n   * These refs are used in bt.tokens.create() data payload\n   */\n  const createSubElementRef = (subId: string): SubElementRef => ({\n    id: subId,\n    type: 'card',\n    get mounted() {\n      return isMounted;\n    },\n    mount: () => {\n      throw ElementError('Sub-field refs cannot be mounted independently');\n    },\n    unmount: () => {},\n    update: () => Promise.resolve(),\n    focus: () => {},\n    blur: () => {},\n    clear: () => {},\n    on: () => () => {},\n  });\n\n  const numberRef = createSubElementRef(`${id}__number`);\n  const expiryDateRef = createSubElementRef(`${id}__expiry`);\n  const cvcRef = createSubElementRef(`${id}__cvc`);\n\n  // Public API (Element interface with sub-field refs)\n  const cardElement = {\n    id,\n    type,\n    get mounted() {\n      return isMounted;\n    },\n    get loaded() {\n      return isMounted;\n    },\n\n    // Sub-field references for tokenization\n    number: numberRef,\n    expiryDate: expiryDateRef,\n    cvc: cvcRef,\n\n    mount: async (selector: string | HTMLElement) => {\n      if (isMounted) {\n        throw ElementError('Element is already mounted');\n      }\n\n      // Resolve container\n      container =\n        typeof selector === 'string'\n          ? document.querySelector(selector)\n          : selector;\n\n      if (!container) {\n        throw ElementError(`Container not found: ${selector}`);\n      }\n\n      // Create iframe\n      const parentOrigin = window.location.origin;\n      const iframeUrl = new URL(`${sdkConfig.elementsBaseUrl}/card.html`);\n      iframeUrl.searchParams.set('parentOrigin', parentOrigin);\n      iframeUrl.searchParams.set('elementId', id);\n      iframeUrl.searchParams.set(\n        'measurePerformance',\n        String(sdkConfig.measurePerformance || false)\n      );\n      iframeUrl.searchParams.set('debug', String(sdkConfig.debug || false));\n\n      iframe = createIframe({\n        src: iframeUrl.toString(),\n        sandbox: 'allow-scripts allow-same-origin',\n        title: options.ariaLabel || 'Card Input',\n      });\n\n      // Add element ID and theme mode attributes\n      iframe.setAttribute('data-bt-element-id', id);\n      iframe.setAttribute('data-theme-mode', sdkConfig.themeMode || 'auto');\n\n      // Create PostMessage client\n      client = createPostMessageClient(iframe, {\n        targetOrigin: sdkConfig.iframeOrigin,\n        timeout: sdkConfig.timeoutMs,\n        retries: sdkConfig.retryConfig.maxRetries,\n        debug: sdkConfig.debug,\n      });\n\n      // Create mounter\n      mounter = createMounter();\n\n      // Set up event listeners\n      setupEventListeners();\n\n      // Subscribe to 'ready' event BEFORE mounting iframe\n      const readyPromise = new Promise<void>((resolve, reject) => {\n        const timeout = setTimeout(() => {\n          reject(\n            ElementError(\n              `Iframe EVENT_READY not received within ${sdkConfig.timeoutMs}ms`,\n              id,\n              { elementType: type, timeoutMs: sdkConfig.timeoutMs }\n            )\n          );\n        }, sdkConfig.timeoutMs);\n\n        const handleReady = () => {\n          clearTimeout(timeout);\n          resolve();\n        };\n\n        eventTarget.addEventListener('ready', handleReady, { once: true });\n      });\n\n      // Mount iframe to DOM (synchronous)\n      mounter.mount(container, iframe, {\n        timeoutMs: sdkConfig.timeoutMs,\n      });\n\n      isMounted = true;\n\n      // Wait for coordinator + configuration to complete\n      try {\n        // Wait for coordinator (loads Core SDK if needed)\n        await ensureCoordinatorReady();\n\n        // Wait for EVENT_READY\n        await readyPromise;\n\n        // Send initial configuration with card-specific options.\n        // Omit `binLookup` / `coBadge` when undefined so the iframe never receives\n        // explicit `undefined` (object literals include own keys with undefined values).\n        await client!.sendRequest('CMD_SET_CONFIG', {\n          elementId: id,\n          apiKey,\n          apiTimeout: sdkConfig.timeoutMs,\n          apiRetries: sdkConfig.retryConfig.maxRetries,\n          theme: sdkConfig.theme,\n          darkTheme: sdkConfig.darkTheme,\n          themeMode: sdkConfig.themeMode,\n          placeholder: options.placeholder,\n          ...(options.style !== undefined && { style: options.style }),\n          disabled: options.disabled,\n          readOnly: options.readOnly,\n          layout: options.layout || 'auto',\n          stackAt: options.stackAt || DEFAULT_CARD_STACK_THRESHOLD,\n          iconPosition: options.iconPosition || 'left',\n          ...(options.cardBrands !== undefined && { cardBrands: options.cardBrands }),\n          ...(options.binLookup !== undefined && { binLookup: options.binLookup }),\n          ...(options.coBadge !== undefined && { coBadge: options.coBadge }),\n          debug: sdkConfig.debug,\n        });\n\n        // Reveal iframe now that theme is fully applied\n        if (iframe) iframe.style.opacity = '1';\n      } catch (error) {\n        // Dispatch error event before cleanup\n        if (eventDispatcher) {\n          eventDispatcher.dispatchError(\n            'MOUNT_ERROR',\n            (error as Error).message,\n            error as Error\n          );\n        }\n\n        // Mount failed - clean up and mark as unmounted\n        isMounted = false;\n\n        if (client) {\n          client.destroy();\n          client = null;\n        }\n\n        if (mounter && iframe) {\n          mounter.unmount(iframe);\n          iframe = null;\n          mounter = null;\n        }\n\n        eventDispatcher = null;\n        container = null;\n\n        throw error;\n      }\n    },\n\n    unmount: () => {\n      if (!isMounted) {\n        throw ElementError('Element is not mounted');\n      }\n\n      // PCI DSS 3.2.1: Notify coordinator to broadcast ELEMENT_UNMOUNTED for all sub-fields\n      // This clears cached values and notifies other elements (like CopyButton)\n      // Card element has 3 sub-fields: __number, __expiry, __cvc\n      const subFieldSuffixes = ['__number', '__expiry', '__cvc'];\n      for (const suffix of subFieldSuffixes) {\n        notifyCoordinatorElementUnmount(`${id}${suffix}`).catch((error) => {\n          log('Failed to notify coordinator of element unmount', {\n            elementId: `${id}${suffix}`,\n            error: (error as Error).message,\n          });\n        });\n      }\n\n      if (client) {\n        client.destroy();\n        client = null;\n      }\n\n      if (mounter && iframe) {\n        mounter.unmount(iframe);\n        iframe = null;\n        mounter = null;\n      }\n\n      eventDispatcher = null;\n      container = null;\n      isMounted = false;\n    },\n\n    update: async (newOptions: Partial<ElementOptions> & { themeMode?: string }) => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before updating');\n      }\n\n      const cardOptions = newOptions as Partial<CardElementOptions> & { themeMode?: string };\n\n      // Only send fields that are present (matches create-card-number) so we never\n      // overwrite iframe config with undefined/null over postMessage.\n      const updatePayload: Record<string, any> = {\n        elementId: id,\n      };\n\n      if (cardOptions.placeholder !== undefined) {\n        updatePayload.placeholder = cardOptions.placeholder;\n      }\n      if (cardOptions.style !== undefined) {\n        updatePayload.style = cardOptions.style;\n      }\n      if (cardOptions.disabled !== undefined) {\n        updatePayload.disabled = cardOptions.disabled;\n      }\n      if (cardOptions.readOnly !== undefined) {\n        updatePayload.readOnly = cardOptions.readOnly;\n      }\n      if (cardOptions.layout !== undefined) {\n        updatePayload.layout = cardOptions.layout;\n      }\n      if (cardOptions.stackAt !== undefined) {\n        updatePayload.stackAt = cardOptions.stackAt;\n      }\n      if (cardOptions.iconPosition !== undefined) {\n        updatePayload.iconPosition = cardOptions.iconPosition;\n      }\n      if (cardOptions.cardBrands !== undefined) {\n        updatePayload.cardBrands = cardOptions.cardBrands;\n      }\n      if (cardOptions.binLookup !== undefined) {\n        updatePayload.binLookup = cardOptions.binLookup;\n      }\n      if (cardOptions.coBadge !== undefined) {\n        updatePayload.coBadge = cardOptions.coBadge;\n      }\n\n      if (newOptions.themeMode !== undefined) {\n        updatePayload.themeMode = newOptions.themeMode;\n        updatePayload.theme = sdkConfig.theme;\n        updatePayload.darkTheme = sdkConfig.darkTheme;\n      }\n\n      await client.sendRequest('CMD_UPDATE_CONFIG', updatePayload);\n    },\n\n    focus: () => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before focusing');\n      }\n\n      client.sendRequest('CMD_FOCUS', {});\n    },\n\n    blur: () => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before blurring');\n      }\n\n      client.sendRequest('CMD_BLUR', {});\n    },\n\n    clear: () => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before clearing');\n      }\n\n      client.sendRequest('CMD_CLEAR', {});\n    },\n\n    on: (eventType: EventType, listener: EventListener) => {\n      eventTarget.addEventListener(\n        eventType,\n        listener as EventListenerOrEventListenerObject\n      );\n\n      // Return unsubscribe function\n      return () =>\n        eventTarget.removeEventListener(\n          eventType,\n          listener as EventListenerOrEventListenerObject\n        );\n    },\n\n    setNetwork: async (network: string) => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before setNetwork');\n      }\n      await client.sendRequest('CMD_SET_NETWORK', { network });\n    },\n  };\n\n  return cardElement as CardElement;\n};\n"],"names":[],"mappings":"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"}

package/dist/create-card-display-kBupMJwe.js

@@ -0,0 +1,280 @@
+import { C as ConfigurationError, E as ElementError, c as createIframe, a as createPostMessageClient, l as log, d as createMounter } from "./index-Dyy7tm5Z.js";
+const SESSION_AUTH_TIMEOUT_MS = 3e4;
+const createCardDisplayElement = (_apiKey, sdkConfig, options, coordinatorElementId, ensureCoordinatorReady, _notifyCoordinatorElementUnmount, coordinatorRequest) => {
+  if (!options.tokenId || typeof options.tokenId !== "string") {
+    throw ConfigurationError("tokenId is required for cardDisplay element");
+  }
+  let iframe = null;
+  let client = null;
+  let mounter = null;
+  let isMounted = false;
+  let isLoaded = false;
+  let container = null;
+  let currentTokenId = options.tokenId;
+  const eventTarget = new EventTarget();
+  const id = coordinatorElementId;
+  const type = "cardDisplay";
+  const dispatchEvent = (eventType, detail) => {
+    eventTarget.dispatchEvent(new CustomEvent(eventType, {
+      detail: {
+        elementType: type,
+        elementId: id,
+        timestamp: Date.now(),
+        ...detail
+      }
+    }));
+  };
+  const dispatchLoadError = (code, error) => {
+    log("Failed to load display token", {
+      error: error.message
+    });
+    dispatchEvent("error", { code, message: error.message });
+  };
+  const releaseDisplaySession = async () => {
+    try {
+      await coordinatorRequest("CMD_CLEAR_DISPLAY_SESSION", { elementId: id });
+    } catch (error) {
+      log("Failed to release display session", {
+        error: error.message
+      });
+    }
+  };
+  const loadDisplayToken = async (tokenId) => {
+    if (!sdkConfig.sessionAuthorizationUrl) {
+      dispatchLoadError(
+        "SESSION_AUTHORIZATION_FAILED",
+        ConfigurationError("sessionAuthorizationUrl is required to load cardDisplay data")
+      );
+      return;
+    }
+    let nonce;
+    try {
+      const result = await coordinatorRequest(
+        "CMD_CREATE_DISPLAY_SESSION",
+        { tokenId, elementId: id }
+      );
+      if (!(result == null ? void 0 : result.nonce)) {
+        return;
+      }
+      nonce = result.nonce;
+    } catch (error) {
+      dispatchLoadError("SESSION_CREATION_FAILED", error);
+      return;
+    }
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), SESSION_AUTH_TIMEOUT_MS);
+    let authResponse;
+    try {
+      authResponse = await fetch(sdkConfig.sessionAuthorizationUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        // No credentials: the request only carries the session nonce, and
+        // sending credentials is incompatible with a wildcard CORS origin
+        // (Access-Control-Allow-Origin: *), which merchant authorize endpoints
+        // commonly use.
+        body: JSON.stringify({ nonce }),
+        signal: controller.signal
+      });
+    } catch (error) {
+      await releaseDisplaySession();
+      dispatchLoadError("NETWORK_ERROR", error);
+      return;
+    } finally {
+      clearTimeout(timeout);
+    }
+    if (!authResponse.ok) {
+      await releaseDisplaySession();
+      dispatchLoadError(
+        "SESSION_AUTHORIZATION_FAILED",
+        ElementError(
+          `Session authorization failed: ${authResponse.status} ${authResponse.statusText}`,
+          id
+        )
+      );
+      return;
+    }
+    try {
+      await coordinatorRequest("CMD_RETRIEVE_DISPLAY_TOKEN", {
+        tokenId,
+        elementId: id
+      });
+    } catch (error) {
+      dispatchLoadError("TOKEN_RETRIEVAL_FAILED", error);
+    }
+  };
+  const element = {
+    id,
+    type,
+    get mounted() {
+      return isMounted;
+    },
+    get loaded() {
+      return isLoaded;
+    },
+    mount: async (selector) => {
+      if (isMounted) {
+        throw ElementError("Element is already mounted", id);
+      }
+      container = typeof selector === "string" ? document.querySelector(selector) : selector;
+      if (!container) {
+        throw ElementError(`Container not found: ${selector}`);
+      }
+      const parentOrigin = window.location.origin;
+      const iframeUrl = new URL(`${sdkConfig.elementsBaseUrl}/card-display.html`);
+      iframeUrl.searchParams.set("parentOrigin", parentOrigin);
+      iframeUrl.searchParams.set("elementId", id);
+      iframeUrl.searchParams.set("debug", String(sdkConfig.debug || false));
+      iframe = createIframe({
+        src: iframeUrl.toString(),
+        sandbox: "allow-scripts allow-same-origin",
+        allow: "clipboard-write",
+        title: "Card Display"
+      });
+      iframe.setAttribute("data-bt-element-id", id);
+      client = createPostMessageClient(iframe, {
+        targetOrigin: sdkConfig.iframeOrigin,
+        timeout: sdkConfig.timeoutMs,
+        retries: sdkConfig.retryConfig.maxRetries,
+        debug: sdkConfig.debug
+      });
+      mounter = createMounter();
+      const readyPromise = new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(ElementError(
+            `Iframe EVENT_READY not received within ${sdkConfig.timeoutMs}ms`,
+            id,
+            { elementType: type, timeoutMs: sdkConfig.timeoutMs }
+          ));
+        }, sdkConfig.timeoutMs);
+        const unsubscribe = client.subscribe("EVENT_READY", () => {
+          clearTimeout(timeout);
+          unsubscribe();
+          resolve();
+        });
+      });
+      client.subscribe("EVENT_CHANGE", (payload) => {
+        if (payload.loaded) {
+          isLoaded = true;
+        }
+        dispatchEvent("change", payload);
+      });
+      client.subscribe("EVENT_ERROR", (payload) => {
+        dispatchEvent("error", payload);
+      });
+      mounter.mount(container, iframe, {
+        timeoutMs: sdkConfig.timeoutMs
+      });
+      isMounted = true;
+      try {
+        await ensureCoordinatorReady();
+        await readyPromise;
+        await client.sendRequest("CMD_SET_CONFIG", {
+          elementId: id,
+          tokenId: currentTokenId,
+          theme: sdkConfig.theme,
+          darkTheme: sdkConfig.darkTheme,
+          themeMode: sdkConfig.themeMode,
+          number: options.number,
+          cvc: options.cvc,
+          expiration: options.expiration,
+          debug: sdkConfig.debug
+        });
+        if (iframe) iframe.style.opacity = "1";
+        dispatchEvent("ready", {});
+        if (currentTokenId) {
+          void loadDisplayToken(currentTokenId);
+        }
+      } catch (error) {
+        dispatchEvent("error", {
+          code: "MOUNT_ERROR",
+          message: error.message
+        });
+        isMounted = false;
+        if (client) {
+          client.destroy();
+          client = null;
+        }
+        if (mounter && iframe) {
+          mounter.unmount(iframe);
+          iframe = null;
+          mounter = null;
+        }
+        container = null;
+        throw error;
+      }
+    },
+    unmount: () => {
+      if (!isMounted) {
+        throw ElementError("Element is not mounted");
+      }
+      void releaseDisplaySession();
+      if (client) {
+        client.sendRequest("CMD_CLEAR", {}).catch((error) => {
+          log("Failed to send clear command", {
+            error: error.message
+          });
+        });
+        client.destroy();
+        client = null;
+      }
+      if (mounter && iframe) {
+        mounter.unmount(iframe);
+        iframe = null;
+        mounter = null;
+      }
+      container = null;
+      isMounted = false;
+      isLoaded = false;
+    },
+    update: async (newOptions) => {
+      if (!isMounted || !client) {
+        throw ElementError("Element must be mounted before updating", id);
+      }
+      if (newOptions.tokenId !== void 0 && newOptions.tokenId !== currentTokenId) {
+        currentTokenId = newOptions.tokenId;
+        isLoaded = false;
+        await client.sendRequest("CMD_CLEAR", {});
+        void loadDisplayToken(currentTokenId);
+      }
+      const updatePayload = {};
+      if (newOptions.number !== void 0) {
+        updatePayload.number = newOptions.number;
+      }
+      if (newOptions.cvc !== void 0) {
+        updatePayload.cvc = newOptions.cvc;
+      }
+      if (newOptions.expiration !== void 0) {
+        updatePayload.expiration = newOptions.expiration;
+      }
+      if (newOptions.themeMode !== void 0) {
+        updatePayload.themeMode = newOptions.themeMode;
+        updatePayload.theme = sdkConfig.theme;
+        updatePayload.darkTheme = sdkConfig.darkTheme;
+      }
+      if (Object.keys(updatePayload).length > 0) {
+        await client.sendRequest("CMD_UPDATE_CONFIG", updatePayload);
+      }
+    },
+    on: (eventType, listener) => {
+      eventTarget.addEventListener(
+        eventType,
+        listener
+      );
+      return () => eventTarget.removeEventListener(
+        eventType,
+        listener
+      );
+    },
+    // No-ops for API compatibility with Element interface
+    focus: () => {
+    },
+    blur: () => {
+    },
+    clear: () => {
+    }
+  };
+  return element;
+};
+export {
+  createCardDisplayElement
+};

package/dist/create-card-display-kBupMJwe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-card-display-kBupMJwe.js","sources":["../src/elements/create-card-display.ts"],"sourcesContent":["/**\n * Card Display Element Factory\n *\n * Iframe lifecycle for read-only display of tokenized card data.\n * Token loading is orchestrated by BasisTheory.ts — this factory\n * only handles iframe creation, mounting, config, and events.\n */\n\nimport type { PostMessageClient } from '@basis-theory-elements/postmessage';\nimport { createPostMessageClient } from '@basis-theory-elements/postmessage';\nimport { ConfigurationError, ElementError, log } from '@basis-theory-elements/shared';\nimport { createMounter } from '../mounter/create-mounter';\nimport type {\n  CardDisplayElement,\n  CardDisplayEventType,\n  CardDisplayOptions,\n  ElementMounter,\n  EventListener,\n  SDKConfig,\n} from '../types';\nimport { createIframe } from '../utils/create-iframe';\n\n/**\n * Factory function to create a card display element\n */\n// Authorization request to the merchant backend can be slow; bound it so a\n// hung endpoint surfaces as an error instead of leaving the element loading.\nconst SESSION_AUTH_TIMEOUT_MS = 30_000;\n\nexport const createCardDisplayElement = (\n  _apiKey: string, // Unused - coordinator handles API calls\n  sdkConfig: SDKConfig,\n  options: CardDisplayOptions,\n  coordinatorElementId: string,\n  ensureCoordinatorReady: () => Promise<void>,\n  _notifyCoordinatorElementUnmount: (elementId: string) => Promise<void>,\n  coordinatorRequest: <T>(command: string, payload: unknown) => Promise<T>\n): CardDisplayElement => {\n  // Validate required options\n  if (!options.tokenId || typeof options.tokenId !== 'string') {\n    throw ConfigurationError('tokenId is required for cardDisplay element');\n  }\n\n  // Private state (closure)\n  let iframe: HTMLIFrameElement | null = null;\n  let client: PostMessageClient | null = null;\n  let mounter: ElementMounter | null = null;\n  let isMounted = false;\n  let isLoaded = false;\n  let container: HTMLElement | null = null;\n  let currentTokenId = options.tokenId;\n\n  const eventTarget = new EventTarget();\n  const id = coordinatorElementId;\n  const type = 'cardDisplay' as const;\n\n  /**\n   * Dispatch custom event to listeners\n   */\n  const dispatchEvent = (eventType: CardDisplayEventType, detail: Record<string, unknown>): void => {\n    eventTarget.dispatchEvent(new CustomEvent(eventType, {\n      detail: {\n        elementType: type,\n        elementId: id,\n        timestamp: Date.now(),\n        ...detail,\n      },\n    }));\n  };\n\n  /**\n   * Dispatch a display-load failure to listeners with a specific error code,\n   * mirroring the codes the coordinator broadcasts so the consumer sees one\n   * consistent vocabulary regardless of which hop failed.\n   */\n  const dispatchLoadError = (code: string, error: unknown): void => {\n    log('Failed to load display token', {\n      elementId: id,\n      code,\n      error: (error as Error).message,\n    });\n\n    dispatchEvent('error', { code, message: (error as Error).message });\n  };\n\n  /**\n   * Best-effort release of the coordinator-held session after a parent-side\n   * failure (or unmount). Without this the session key would linger in the\n   * coordinator until the lazy TTL sweep — undesirable in a PCI context.\n   */\n  const releaseDisplaySession = async (): Promise<void> => {\n    try {\n      await coordinatorRequest('CMD_CLEAR_DISPLAY_SESSION', { elementId: id });\n    } catch (error) {\n      log('Failed to release display session', {\n        elementId: id,\n        error: (error as Error).message,\n      });\n    }\n  };\n\n  /**\n   * Drive the display-token flow across the iframe boundary.\n   *\n   * 1. Ask the coordinator to create a session and return its nonce.\n   * 2. Authorize the session against the merchant backend FROM HERE (the parent\n   *    page). The coordinator iframe's CSP `connect-src` only allows BasisTheory\n   *    domains, so it can't reach an arbitrary merchant URL — the merchant's own\n   *    page can, because the merchant controls its CSP and cookies flow here.\n   * 3. Tell the coordinator to retrieve the token and broadcast it to the iframe.\n   *\n   * Fire-and-forget from the caller's perspective: failures surface as an\n   * 'error' event rather than rejecting mount()/update().\n   */\n  const loadDisplayToken = async (tokenId: string): Promise<void> => {\n    // Check config before creating a session we couldn't use anyway.\n    if (!sdkConfig.sessionAuthorizationUrl) {\n      dispatchLoadError(\n        'SESSION_AUTHORIZATION_FAILED',\n        ConfigurationError('sessionAuthorizationUrl is required to load cardDisplay data')\n      );\n\n      return;\n    }\n\n    // Hop 1: coordinator creates the session, returns the nonce. A null nonce\n    // means createDisplaySession already broadcast a DISPLAY_LOAD_ERROR to the\n    // element — return without dispatching again so we don't double-report.\n    let nonce: string;\n\n    try {\n      const result = await coordinatorRequest<{ nonce: string | null }>(\n        'CMD_CREATE_DISPLAY_SESSION',\n        { tokenId, elementId: id }\n      );\n\n      if (!result?.nonce) {\n        return;\n      }\n\n      nonce = result.nonce;\n    } catch (error) {\n      dispatchLoadError('SESSION_CREATION_FAILED', error);\n\n      return;\n    }\n\n    // Hop 2: authorize via the merchant backend (runs in the parent page)\n    const controller = new AbortController();\n    const timeout = setTimeout(() => controller.abort(), SESSION_AUTH_TIMEOUT_MS);\n\n    let authResponse: Response;\n\n    try {\n      authResponse = await fetch(sdkConfig.sessionAuthorizationUrl, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        // No credentials: the request only carries the session nonce, and\n        // sending credentials is incompatible with a wildcard CORS origin\n        // (Access-Control-Allow-Origin: *), which merchant authorize endpoints\n        // commonly use.\n        body: JSON.stringify({ nonce }),\n        signal: controller.signal,\n      });\n    } catch (error) {\n      // Network failure or timeout abort — release the orphaned coordinator session.\n      await releaseDisplaySession();\n      dispatchLoadError('NETWORK_ERROR', error);\n\n      return;\n    } finally {\n      clearTimeout(timeout);\n    }\n\n    if (!authResponse.ok) {\n      await releaseDisplaySession();\n      dispatchLoadError(\n        'SESSION_AUTHORIZATION_FAILED',\n        ElementError(\n          `Session authorization failed: ${authResponse.status} ${authResponse.statusText}`,\n          id\n        )\n      );\n\n      return;\n    }\n\n    // Hop 3: coordinator retrieves the token and broadcasts to the iframe.\n    // Card values reach the element via BroadcastChannel (DISPLAY_VALUE_UPDATED),\n    // never through this response — keep it that way for PCI isolation.\n    // Retrieval errors are broadcast by the coordinator (throwOnError: false), so\n    // a rejection here means the request itself failed to reach the coordinator.\n    try {\n      await coordinatorRequest('CMD_RETRIEVE_DISPLAY_TOKEN', {\n        tokenId,\n        elementId: id,\n      });\n    } catch (error) {\n      dispatchLoadError('TOKEN_RETRIEVAL_FAILED', error);\n    }\n  };\n\n  const element: CardDisplayElement = {\n    id,\n    type,\n\n    get mounted() {\n      return isMounted;\n    },\n\n    get loaded() {\n      return isLoaded;\n    },\n\n    mount: async (selector: string | HTMLElement) => {\n      if (isMounted) {\n        throw ElementError('Element is already mounted', id);\n      }\n\n      container = typeof selector === 'string'\n        ? document.querySelector(selector)\n        : selector;\n\n      if (!container) {\n        throw ElementError(`Container not found: ${selector}`);\n      }\n\n      // Create iframe URL\n      const parentOrigin = window.location.origin;\n      const iframeUrl = new URL(`${sdkConfig.elementsBaseUrl}/card-display.html`);\n      iframeUrl.searchParams.set('parentOrigin', parentOrigin);\n      iframeUrl.searchParams.set('elementId', id);\n      iframeUrl.searchParams.set('debug', String(sdkConfig.debug || false));\n\n      iframe = createIframe({\n        src: iframeUrl.toString(),\n        sandbox: 'allow-scripts allow-same-origin',\n        allow: 'clipboard-write',\n        title: 'Card Display',\n      });\n\n      iframe.setAttribute('data-bt-element-id', id);\n\n      client = createPostMessageClient(iframe, {\n        targetOrigin: sdkConfig.iframeOrigin,\n        timeout: sdkConfig.timeoutMs,\n        retries: sdkConfig.retryConfig.maxRetries,\n        debug: sdkConfig.debug,\n      });\n\n      mounter = createMounter();\n\n      // Subscribe to ready event before mounting\n      const readyPromise = new Promise<void>((resolve, reject) => {\n        const timeout = setTimeout(() => {\n          reject(ElementError(\n            `Iframe EVENT_READY not received within ${sdkConfig.timeoutMs}ms`,\n            id,\n            { elementType: type, timeoutMs: sdkConfig.timeoutMs }\n          ));\n        }, sdkConfig.timeoutMs);\n\n        const unsubscribe = client!.subscribe('EVENT_READY', () => {\n          clearTimeout(timeout);\n          unsubscribe();\n          resolve();\n        });\n      });\n\n      // Subscribe to iframe events\n      client.subscribe('EVENT_CHANGE', (payload: Record<string, unknown>) => {\n        if (payload.loaded) {\n          isLoaded = true;\n        }\n\n        dispatchEvent('change', payload);\n      });\n\n      client.subscribe('EVENT_ERROR', (payload: Record<string, unknown>) => {\n        dispatchEvent('error', payload);\n      });\n\n      // Mount iframe\n      mounter.mount(container, iframe, {\n        timeoutMs: sdkConfig.timeoutMs,\n      });\n\n      isMounted = true;\n\n      try {\n        // Ensure coordinator is ready\n        await ensureCoordinatorReady();\n\n        // Wait for iframe ready\n        await readyPromise;\n\n        // Send initial configuration\n        await client!.sendRequest('CMD_SET_CONFIG', {\n          elementId: id,\n          tokenId: currentTokenId,\n          theme: sdkConfig.theme,\n          darkTheme: sdkConfig.darkTheme,\n          themeMode: sdkConfig.themeMode,\n          number: options.number,\n          cvc: options.cvc,\n          expiration: options.expiration,\n          debug: sdkConfig.debug,\n        });\n\n        // Reveal iframe\n        if (iframe) iframe.style.opacity = '1';\n\n        // Dispatch ready event\n        dispatchEvent('ready', {});\n\n        // Drive the display-token flow from the parent page (session create ->\n        // merchant authorization -> token retrieve). Fire-and-forget: a token\n        // load failure surfaces as an 'error' event, not a mount() rejection.\n        if (currentTokenId) {\n          void loadDisplayToken(currentTokenId);\n        }\n\n      } catch (error) {\n        // Dispatch error event\n        dispatchEvent('error', {\n          code: 'MOUNT_ERROR',\n          message: (error as Error).message,\n        });\n\n        // Cleanup on failure\n        isMounted = false;\n\n        if (client) {\n          client.destroy();\n          client = null;\n        }\n\n        if (mounter && iframe) {\n          mounter.unmount(iframe);\n          iframe = null;\n          mounter = null;\n        }\n\n        container = null;\n\n        throw error;\n      }\n    },\n\n    unmount: () => {\n      if (!isMounted) {\n        throw ElementError('Element is not mounted');\n      }\n\n      // Release any in-flight coordinator-held session so its key doesn't\n      // outlive the element (PCI). Fire-and-forget — unmount stays synchronous.\n      void releaseDisplaySession();\n\n      // Send clear command for PCI compliance\n      if (client) {\n        client.sendRequest('CMD_CLEAR', {}).catch((error) => {\n          log('Failed to send clear command', {\n            elementId: id,\n            error: (error as Error).message,\n          });\n        });\n\n        client.destroy();\n        client = null;\n      }\n\n      if (mounter && iframe) {\n        mounter.unmount(iframe);\n        iframe = null;\n        mounter = null;\n      }\n\n      container = null;\n      isMounted = false;\n      isLoaded = false;\n    },\n\n    update: async (newOptions: Partial<CardDisplayOptions> & { themeMode?: string }) => {\n      if (!isMounted || !client) {\n        throw ElementError('Element must be mounted before updating', id);\n      }\n\n      // If tokenId changed, reset state and re-run the token load\n      if (newOptions.tokenId !== undefined && newOptions.tokenId !== currentTokenId) {\n        currentTokenId = newOptions.tokenId;\n        isLoaded = false;\n\n        await client.sendRequest('CMD_CLEAR', {});\n\n        // Re-run the parent-driven token load for the new tokenId\n        void loadDisplayToken(currentTokenId);\n      }\n\n      // Update display configurations\n      const updatePayload: Record<string, unknown> = {};\n\n      if (newOptions.number !== undefined) {\n        updatePayload.number = newOptions.number;\n      }\n      if (newOptions.cvc !== undefined) {\n        updatePayload.cvc = newOptions.cvc;\n      }\n      if (newOptions.expiration !== undefined) {\n        updatePayload.expiration = newOptions.expiration;\n      }\n\n      // Include theme mode update if provided\n      if (newOptions.themeMode !== undefined) {\n        updatePayload.themeMode = newOptions.themeMode;\n        updatePayload.theme = sdkConfig.theme;\n        updatePayload.darkTheme = sdkConfig.darkTheme;\n      }\n\n      if (Object.keys(updatePayload).length > 0) {\n        await client.sendRequest('CMD_UPDATE_CONFIG', updatePayload);\n      }\n    },\n\n    on: (eventType: CardDisplayEventType, listener: EventListener) => {\n      eventTarget.addEventListener(\n        eventType,\n        listener as EventListenerOrEventListenerObject\n      );\n\n      return () => eventTarget.removeEventListener(\n        eventType,\n        listener as EventListenerOrEventListenerObject\n      );\n    },\n\n    // No-ops for API compatibility with Element interface\n    focus: () => {},\n    blur: () => {},\n    clear: () => {},\n  };\n\n  return element;\n};\n"],"names":[],"mappings":"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"}