@snap-pay/elements 1.0.0

package/dist/index.js

@@ -0,0 +1,1306 @@
+import { registerElement, fetchSession } from '@snap-pay/js';
+
+// src/index.ts
+
+// src/base-element.ts
+var BaseElement = class {
+  constructor() {
+    this.container = null;
+    this.mounted = false;
+    this.listeners = /* @__PURE__ */ new Map();
+    // Subclasses override this to suppress the mount-time
+    // auto-ready. See BaseElement.mount above.
+    this.deferReadyOnMount = false;
+  }
+  mount(target) {
+    if (this.mounted) {
+      throw new Error(
+        `${this.type} element is already mounted. Call unmount() before mounting again.`
+      );
+    }
+    const node = resolveTarget(target);
+    this.container = node;
+    this.render(node);
+    this.mounted = true;
+    if (!this.deferReadyOnMount) {
+      queueMicrotask(() => {
+        if (this.mounted) this.emit("ready", void 0);
+      });
+    }
+  }
+  unmount() {
+    if (!this.mounted || !this.container) return;
+    this.container.innerHTML = "";
+    this.container = null;
+    this.mounted = false;
+  }
+  destroy() {
+    this.unmount();
+    this.listeners.clear();
+  }
+  on(event, handler) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(handler);
+  }
+  off(event, handler) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    set.delete(handler);
+  }
+  // Internal — used by subclasses to fire an event to every
+  // registered handler. Never called from userland.
+  //
+  // Review fix #7 — each handler runs in its own try/catch so a
+  // buggy `onChange` can't cascade into breaking `onReady`. We
+  // log to console.error rather than swallow silently — a
+  // silent failure would be worse for merchants debugging their
+  // integration than a noisy one.
+  emit(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const handler of set) {
+      try {
+        handler(payload);
+      } catch (err) {
+        console.error(
+          `[snap-elements] handler for "${event}" threw:`,
+          err
+        );
+      }
+    }
+  }
+  // Optional method for form-collecting elements (BillingAddress,
+  // Customer, OTP). Default returns null; subclasses override to
+  // expose their form data imperatively. Kept in the base so
+  // subclasses can `override` without triggering TS4113.
+  getValue() {
+    return null;
+  }
+};
+function resolveTarget(target) {
+  if (typeof target === "string") {
+    const node = document.querySelector(target);
+    if (!node) {
+      throw new Error(
+        `Mount target "${target}" was not found in the document.`
+      );
+    }
+    return node;
+  }
+  return target;
+}
+
+// src/style.ts
+var DEFAULTS = {
+  theme: "light",
+  primaryColor: "#0066ff",
+  borderRadius: "8px",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  spacingUnit: "8px",
+  labelColor: "#475569",
+  errorColor: "#dc2626",
+  mutedColor: "#94a3b8"
+};
+function resolveAppearance(input, forType) {
+  const theme = pickTheme(input.theme ?? DEFAULTS.theme);
+  const palette = theme === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
+  const rule = forType && input.rules ? input.rules[forType] ?? {} : {};
+  return {
+    primaryColor: input.primaryColor ?? DEFAULTS.primaryColor,
+    borderRadius: rule.borderRadius ?? input.borderRadius ?? DEFAULTS.borderRadius,
+    fontFamily: rule.fontFamily ?? input.fontFamily ?? DEFAULTS.fontFamily,
+    theme,
+    background: rule.background ?? palette.background,
+    foreground: rule.foreground ?? palette.foreground,
+    border: rule.border ?? palette.border,
+    hoverBackground: palette.hoverBackground,
+    spacingUnit: input.spacingUnit ?? DEFAULTS.spacingUnit,
+    labelColor: input.labelColor ?? DEFAULTS.labelColor,
+    errorColor: input.errorColor ?? DEFAULTS.errorColor,
+    mutedColor: input.mutedColor ?? DEFAULTS.mutedColor
+  };
+}
+function pickTheme(theme) {
+  if (theme !== "auto") return theme;
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+}
+var LIGHT_PALETTE = {
+  background: "#ffffff",
+  foreground: "#0f172a",
+  border: "#e2e8f0",
+  hoverBackground: "#f8fafc"
+};
+var DARK_PALETTE = {
+  background: "#0f172a",
+  foreground: "#f8fafc",
+  border: "#334155",
+  hoverBackground: "#1e293b"
+};
+function formInputStyle(a) {
+  return {
+    width: "100%",
+    padding: `10px 12px`,
+    borderRadius: a.borderRadius,
+    border: `1px solid ${a.border}`,
+    background: a.background,
+    color: a.foreground,
+    fontFamily: a.fontFamily,
+    fontSize: "14px",
+    outline: "none",
+    boxSizing: "border-box"
+  };
+}
+function formLabelStyle(a) {
+  return {
+    fontSize: "12px",
+    color: a.labelColor,
+    fontFamily: a.fontFamily,
+    display: "block",
+    marginBottom: "4px"
+  };
+}
+
+// src/wallet-providers.ts
+var WALLET_PROVIDER_LABELS = {
+  evcPlus: "EVC Plus",
+  sahal: "Sahal",
+  zaad: "Zaad",
+  edahab: "eDahab",
+  jeeb: "Jeeb",
+  premierWallet: "Premier Wallet"
+};
+var WALLET_PROVIDERS = Object.keys(
+  WALLET_PROVIDER_LABELS
+);
+var WALLET_SET = new Set(WALLET_PROVIDERS);
+function isWalletProvider(p) {
+  return WALLET_SET.has(p);
+}
+
+// src/wallet-element.ts
+var WalletElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "wallet";
+    this.selected = null;
+    this.allowed = [];
+    this.buttons = /* @__PURE__ */ new Map();
+    this.renderTarget = null;
+    this.resolvedAppearance = resolveAppearance(args.appearance);
+    this.unregisterChild = args.registerChild(
+      () => this.selected === null ? null : { kind: "provider", provider: this.selected }
+    );
+  }
+  destroy() {
+    this.unregisterChild();
+    super.destroy();
+  }
+  render(container) {
+    this.renderTarget = container;
+    if (this.args.initialSession) {
+      this.allowed = this.args.initialSession.allowedProviders.filter(
+        isWalletProvider
+      );
+      this.renderButtons(container);
+      return;
+    }
+    container.textContent = "";
+    const loading = document.createElement("div");
+    loading.textContent = "Loading payment methods\u2026";
+    loading.style.padding = "12px";
+    loading.style.color = this.resolvedAppearance.foreground;
+    loading.style.fontFamily = this.resolvedAppearance.fontFamily;
+    loading.style.fontSize = "13px";
+    container.appendChild(loading);
+    fetchSession(this.args.apiBase, this.args.publishableKey, this.args.clientSecret).then((session) => {
+      this.allowed = session.allowedProviders.filter(isWalletProvider);
+      if (this.renderTarget === container) this.renderButtons(container);
+    }).catch((err) => {
+      if (this.renderTarget !== container) return;
+      container.textContent = "";
+      const errNode = document.createElement("div");
+      errNode.textContent = err instanceof Error ? err.message : "Failed to load payment methods.";
+      errNode.style.padding = "12px";
+      errNode.style.color = "#dc2626";
+      errNode.style.fontFamily = this.resolvedAppearance.fontFamily;
+      errNode.style.fontSize = "13px";
+      container.appendChild(errNode);
+      this.emit("failed", {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    });
+  }
+  renderButtons(container) {
+    container.textContent = "";
+    if (this.allowed.length === 0) {
+      const empty = document.createElement("div");
+      empty.textContent = "No mobile wallet methods available for this session.";
+      empty.style.padding = "12px";
+      empty.style.color = this.resolvedAppearance.foreground;
+      empty.style.fontFamily = this.resolvedAppearance.fontFamily;
+      empty.style.fontSize = "13px";
+      container.appendChild(empty);
+      return;
+    }
+    const list = document.createElement("div");
+    list.setAttribute("role", "radiogroup");
+    list.setAttribute("aria-label", "Choose a payment method");
+    list.style.display = "grid";
+    list.style.gap = "8px";
+    list.style.fontFamily = this.resolvedAppearance.fontFamily;
+    for (const provider of this.allowed) {
+      const button = this.renderProviderButton(provider);
+      this.buttons.set(provider, button);
+      list.appendChild(button);
+    }
+    container.appendChild(list);
+  }
+  renderProviderButton(provider) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("role", "radio");
+    btn.setAttribute("aria-checked", "false");
+    btn.dataset.snapProvider = provider;
+    btn.textContent = WALLET_PROVIDER_LABELS[provider];
+    Object.assign(btn.style, this.buttonStyle(false));
+    btn.addEventListener("mouseenter", () => {
+      if (this.selected !== provider) {
+        btn.style.background = this.resolvedAppearance.hoverBackground;
+      }
+    });
+    btn.addEventListener("mouseleave", () => {
+      Object.assign(
+        btn.style,
+        this.buttonStyle(this.selected === provider)
+      );
+    });
+    btn.addEventListener("focus", () => this.emit("focus", void 0));
+    btn.addEventListener("blur", () => this.emit("blur", void 0));
+    btn.addEventListener("click", () => this.select(provider));
+    return btn;
+  }
+  select(provider) {
+    this.selected = provider;
+    for (const [p, button] of this.buttons) {
+      const isSelected = p === provider;
+      button.setAttribute("aria-checked", isSelected ? "true" : "false");
+      Object.assign(button.style, this.buttonStyle(isSelected));
+    }
+    this.emit("change", { complete: true });
+  }
+  buttonStyle(isSelected) {
+    const a = this.resolvedAppearance;
+    return {
+      padding: "12px 16px",
+      borderRadius: a.borderRadius,
+      border: isSelected ? `2px solid ${a.primaryColor}` : `1px solid ${a.border}`,
+      background: isSelected ? a.hoverBackground : a.background,
+      color: a.foreground,
+      fontFamily: a.fontFamily,
+      fontSize: "14px",
+      fontWeight: isSelected ? "600" : "500",
+      textAlign: "left",
+      cursor: "pointer",
+      // outline: keep browser focus ring so keyboard nav is visible
+      transition: "background 120ms, border-color 120ms",
+      // width: 100% wrapped for the grid layout
+      width: "100%",
+      boxSizing: "border-box"
+    };
+  }
+};
+function createWalletElement(args) {
+  return new WalletElement(args);
+}
+
+// src/card-element.ts
+var IFRAME_READY_TIMEOUT_MS = 5e3;
+var CardElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "card";
+    // "Ready" for CardElement means the iframe has finished loading
+    // AND handshook via postMessage. BaseElement's mount-time
+    // auto-ready would fire too early, before the iframe is even
+    // reachable — suppress it.
+    this.deferReadyOnMount = true;
+    // Current selection — populated by the iframe after a successful
+    // submit. Cleared on any `change` from the iframe so a merchant
+    // that changes the amount and re-confirms doesn't reuse a stale
+    // token.
+    this.selection = null;
+    // Signals whether the iframe has fired `ready`. Non-ready messages
+    // are silently dropped.
+    this.ready = false;
+    // Review fix #2 — once we've emitted `failed` (typically from the
+    // ready timeout), we suppress ANY subsequent `ready` so a slow
+    // iframe that finally handshakes doesn't leave the merchant with
+    // both `failed` and `ready` fired.
+    this.failedFired = false;
+    this.iframe = null;
+    this.messageHandler = (e) => this.onMessage(e);
+    // Guard for the READY timeout — cleared on `ready` receipt, fires
+    // an emit('failed', …) if the iframe never wakes up.
+    this.readyTimer = null;
+    this.frameOrigin = deriveOrigin(args.cardFrameUrl);
+    this.unregisterChild = args.registerChild(() => {
+      if (this.selection === null) return null;
+      return {
+        kind: "card",
+        token: this.selection.token,
+        brand: this.selection.brand,
+        last4: this.selection.last4
+      };
+    });
+  }
+  destroy() {
+    this.unregisterChild();
+    this.clearReadyTimer();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("message", this.messageHandler);
+    }
+    super.destroy();
+  }
+  render(container) {
+    container.textContent = "";
+    if (!this.args.cardFrameUrl) {
+      const err = document.createElement("div");
+      err.textContent = "Card Element requires `cardFrameUrl` (Snap constructor option).";
+      err.style.color = "#dc2626";
+      err.style.padding = "12px";
+      err.style.fontSize = "13px";
+      container.appendChild(err);
+      this.failedFired = true;
+      this.emit("failed", { error: "cardFrameUrl not configured" });
+      return;
+    }
+    const iframe = document.createElement("iframe");
+    iframe.src = this.args.cardFrameUrl;
+    iframe.title = "Card payment fields";
+    iframe.style.width = "100%";
+    iframe.style.minHeight = "160px";
+    iframe.style.border = "0";
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin");
+    iframe.setAttribute("allow", "payment");
+    container.appendChild(iframe);
+    this.iframe = iframe;
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", this.messageHandler);
+    }
+    this.readyTimer = setTimeout(() => {
+      if (!this.ready && !this.failedFired) {
+        this.failedFired = true;
+        this.emit("failed", {
+          error: `Card iframe did not become ready within ${IFRAME_READY_TIMEOUT_MS}ms.`
+        });
+      }
+    }, IFRAME_READY_TIMEOUT_MS);
+  }
+  onMessage(event) {
+    if (!this.frameOrigin) return;
+    if (event.origin !== this.frameOrigin) return;
+    if (this.iframe && event.source !== this.iframe.contentWindow) return;
+    const data = event.data;
+    if (!data || data.channel !== "snap-card") return;
+    switch (data.type) {
+      case "ready":
+        if (this.failedFired) return;
+        this.ready = true;
+        this.clearReadyTimer();
+        this.sendInit();
+        this.emit("ready", void 0);
+        return;
+      case "change":
+        this.selection = null;
+        this.emit("change", { complete: data.complete });
+        return;
+      case "focus":
+        this.emit("focus", void 0);
+        return;
+      case "blur":
+        this.emit("blur", void 0);
+        return;
+      case "token": {
+        if (!this.ready) return;
+        const sel = { token: data.token, brand: data.brand, last4: data.last4 };
+        this.selection = sel;
+        this.emit("change", { complete: true });
+        return;
+      }
+      case "error":
+        this.failedFired = true;
+        this.emit("failed", { error: data.message });
+        return;
+    }
+  }
+  sendInit() {
+    if (!this.iframe || !this.frameOrigin) return;
+    const msg = {
+      channel: "snap-card",
+      type: "init",
+      publishableKey: this.args.publishableKey,
+      clientSecret: this.args.clientSecret,
+      environment: this.args.environment ?? "sandbox",
+      appearance: this.args.appearance
+    };
+    this.iframe.contentWindow?.postMessage(msg, this.frameOrigin);
+  }
+  clearReadyTimer() {
+    if (this.readyTimer !== null) {
+      clearTimeout(this.readyTimer);
+      this.readyTimer = null;
+    }
+  }
+};
+function createCardElement(args) {
+  return new CardElement(args);
+}
+function deriveOrigin(url) {
+  if (!url) return null;
+  try {
+    return new URL(url).origin;
+  } catch {
+    return null;
+  }
+}
+var PaymentElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "payment";
+    this.deferReadyOnMount = true;
+    this.children = [];
+    this.resolvedAppearance = resolveAppearance(args.appearance, "payment");
+  }
+  destroy() {
+    for (const child of this.children) child.destroy();
+    this.children = [];
+    super.destroy();
+  }
+  render(container) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    const loading = document.createElement("div");
+    loading.textContent = "Loading payment methods\u2026";
+    Object.assign(loading.style, {
+      padding: "12px",
+      color: a.mutedColor,
+      fontFamily: a.fontFamily,
+      fontSize: "13px"
+    });
+    container.appendChild(loading);
+    fetchSession(this.args.apiBase, this.args.publishableKey, this.args.clientSecret).then((session) => {
+      this.mountChildren(container, session);
+    }).catch((err) => {
+      container.textContent = "";
+      const errNode = document.createElement("div");
+      errNode.textContent = err instanceof Error ? err.message : "Failed to load payment methods.";
+      Object.assign(errNode.style, {
+        padding: "12px",
+        color: a.errorColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(errNode);
+      this.emit("failed", {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    });
+  }
+  mountChildren(container, session) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    const providers = session.allowedProviders;
+    const hasWallets = providers.some(isWalletProvider);
+    const hasCard = providers.includes("premierMastercard");
+    if (!hasWallets && !hasCard) {
+      const empty = document.createElement("div");
+      empty.textContent = "No payment methods available for this session.";
+      Object.assign(empty.style, {
+        padding: "12px",
+        color: a.mutedColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(empty);
+      this.emit("ready", void 0);
+      return;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "grid";
+    wrapper.style.gap = a.spacingUnit;
+    container.appendChild(wrapper);
+    if (hasWallets) {
+      const walletSlot = document.createElement("div");
+      wrapper.appendChild(walletSlot);
+      const wallet = createWalletElement({
+        clientSecret: this.args.clientSecret,
+        appearance: this.args.appearance,
+        publishableKey: this.args.publishableKey,
+        apiBase: this.args.apiBase,
+        environment: this.args.environment,
+        cardFrameUrl: this.args.cardFrameUrl,
+        registerChild: this.args.registerChild,
+        registerValue: this.args.registerValue,
+        // Share the session we already fetched — otherwise the
+        // WalletElement would re-fetch on mount.
+        initialSession: session,
+        options: {}
+      });
+      wallet.mount(walletSlot);
+      this.children.push(wallet);
+    }
+    if (hasWallets && hasCard) {
+      const divider = document.createElement("div");
+      divider.textContent = "Or pay with card";
+      Object.assign(divider.style, {
+        textAlign: "center",
+        color: a.mutedColor,
+        fontFamily: a.fontFamily,
+        fontSize: "12px",
+        padding: "4px 0"
+      });
+      wrapper.appendChild(divider);
+    }
+    if (hasCard) {
+      const cardSlot = document.createElement("div");
+      wrapper.appendChild(cardSlot);
+      const card = createCardElement({
+        clientSecret: this.args.clientSecret,
+        appearance: this.args.appearance,
+        publishableKey: this.args.publishableKey,
+        apiBase: this.args.apiBase,
+        environment: this.args.environment,
+        cardFrameUrl: this.args.cardFrameUrl,
+        registerChild: this.args.registerChild,
+        registerValue: this.args.registerValue,
+        options: {}
+      });
+      card.mount(cardSlot);
+      this.children.push(card);
+    }
+    for (const child of this.children) {
+      child.on("change", (payload) => this.emit("change", payload));
+      child.on("focus", () => this.emit("focus", void 0));
+      child.on("blur", () => this.emit("blur", void 0));
+      child.on("failed", (payload) => this.emit("failed", payload));
+    }
+    this.emit("ready", void 0);
+  }
+};
+function createPaymentElement(args) {
+  return new PaymentElement(args);
+}
+var EXPRESS_LABEL_PREFIX = "Pay with ";
+var ExpressCheckoutElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "express";
+    this.selected = null;
+    this.allowed = [];
+    this.resolvedAppearance = resolveAppearance(args.appearance, "express");
+    this.unregisterChild = args.registerChild(
+      () => this.selected === null ? null : { kind: "provider", provider: this.selected }
+    );
+  }
+  destroy() {
+    this.unregisterChild();
+    super.destroy();
+  }
+  render(container) {
+    const a = this.resolvedAppearance;
+    if (this.args.initialSession) {
+      this.allowed = this.args.initialSession.allowedProviders.filter(
+        isWalletProvider
+      );
+      this.paint(container);
+      return;
+    }
+    container.textContent = "";
+    const loading = document.createElement("div");
+    loading.textContent = "Loading express checkout\u2026";
+    Object.assign(loading.style, {
+      padding: "12px",
+      color: a.mutedColor,
+      fontFamily: a.fontFamily,
+      fontSize: "13px"
+    });
+    container.appendChild(loading);
+    fetchSession(this.args.apiBase, this.args.publishableKey, this.args.clientSecret).then((session) => {
+      this.allowed = session.allowedProviders.filter(isWalletProvider);
+      this.paint(container);
+    }).catch((err) => {
+      container.textContent = "";
+      const errNode = document.createElement("div");
+      errNode.textContent = err instanceof Error ? err.message : "Failed to load express checkout.";
+      Object.assign(errNode.style, {
+        padding: "12px",
+        color: a.errorColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(errNode);
+      this.emit("failed", {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    });
+  }
+  paint(container) {
+    const a = this.resolvedAppearance;
+    container.textContent = "";
+    if (this.allowed.length === 0) {
+      const empty = document.createElement("div");
+      empty.textContent = "No express payment methods available.";
+      Object.assign(empty.style, {
+        padding: "12px",
+        color: a.mutedColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(empty);
+      return;
+    }
+    const grid = document.createElement("div");
+    grid.style.display = "grid";
+    grid.style.gap = a.spacingUnit;
+    grid.style.fontFamily = a.fontFamily;
+    for (const provider of this.allowed) {
+      grid.appendChild(this.renderButton(provider));
+    }
+    container.appendChild(grid);
+  }
+  renderButton(provider) {
+    const a = this.resolvedAppearance;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.dataset.snapExpressProvider = provider;
+    btn.textContent = `${EXPRESS_LABEL_PREFIX}${WALLET_PROVIDER_LABELS[provider]}`;
+    Object.assign(btn.style, {
+      padding: "14px 20px",
+      borderRadius: a.borderRadius,
+      border: "none",
+      background: a.primaryColor,
+      color: "#ffffff",
+      fontFamily: a.fontFamily,
+      fontSize: "15px",
+      fontWeight: "600",
+      cursor: "pointer",
+      width: "100%",
+      boxSizing: "border-box"
+    });
+    btn.addEventListener("click", () => {
+      this.selected = provider;
+      this.emit("change", { complete: true });
+      this.emit("submit", void 0);
+    });
+    btn.addEventListener("focus", () => this.emit("focus", void 0));
+    btn.addEventListener("blur", () => this.emit("blur", void 0));
+    return btn;
+  }
+};
+function createExpressCheckoutElement(args) {
+  return new ExpressCheckoutElement(args);
+}
+var PaymentMethodSelector = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "paymentMethodSelector";
+    this.deferReadyOnMount = true;
+    this.walletChild = null;
+    this.cardChild = null;
+    this.activeTab = "wallet";
+    this.walletSlot = null;
+    this.cardSlot = null;
+    this.tabs = /* @__PURE__ */ new Map();
+    this.hasWallets = false;
+    this.hasCard = false;
+    // Session cached between render() and applyTab() so the wallet
+    // child mounts without a second HTTP request.
+    this.session = null;
+    this.resolvedAppearance = resolveAppearance(args.appearance, "paymentMethodSelector");
+  }
+  destroy() {
+    this.walletChild?.destroy();
+    this.cardChild?.destroy();
+    this.walletChild = null;
+    this.cardChild = null;
+    super.destroy();
+  }
+  render(container) {
+    const a = this.resolvedAppearance;
+    container.textContent = "";
+    const loading = document.createElement("div");
+    loading.textContent = "Loading payment methods\u2026";
+    Object.assign(loading.style, {
+      padding: "12px",
+      color: a.mutedColor,
+      fontFamily: a.fontFamily,
+      fontSize: "13px"
+    });
+    container.appendChild(loading);
+    fetchSession(this.args.apiBase, this.args.publishableKey, this.args.clientSecret).then((session) => {
+      this.session = session;
+      this.hasWallets = session.allowedProviders.some(isWalletProvider);
+      this.hasCard = session.allowedProviders.includes("premierMastercard");
+      this.mountUi(container);
+    }).catch((err) => {
+      container.textContent = "";
+      const errNode = document.createElement("div");
+      errNode.textContent = err instanceof Error ? err.message : "Failed to load payment methods.";
+      Object.assign(errNode.style, {
+        padding: "12px",
+        color: a.errorColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(errNode);
+      this.emit("failed", {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    });
+  }
+  mountUi(container) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    if (!this.hasWallets && !this.hasCard) {
+      const empty = document.createElement("div");
+      empty.textContent = "No payment methods available for this session.";
+      Object.assign(empty.style, {
+        padding: "12px",
+        color: a.mutedColor,
+        fontFamily: a.fontFamily,
+        fontSize: "13px"
+      });
+      container.appendChild(empty);
+      this.emit("ready", void 0);
+      return;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "grid";
+    wrapper.style.gap = a.spacingUnit;
+    const tabBar = document.createElement("div");
+    tabBar.setAttribute("role", "tablist");
+    Object.assign(tabBar.style, {
+      display: "grid",
+      gridTemplateColumns: this.hasWallets && this.hasCard ? "1fr 1fr" : "1fr",
+      gap: "4px",
+      padding: "4px",
+      background: a.hoverBackground,
+      borderRadius: a.borderRadius
+    });
+    if (this.hasWallets) tabBar.appendChild(this.renderTab("wallet", "Wallet"));
+    if (this.hasCard) tabBar.appendChild(this.renderTab("card", "Card"));
+    wrapper.appendChild(tabBar);
+    this.walletSlot = document.createElement("div");
+    this.cardSlot = document.createElement("div");
+    wrapper.appendChild(this.walletSlot);
+    wrapper.appendChild(this.cardSlot);
+    container.appendChild(wrapper);
+    this.activeTab = this.hasWallets ? "wallet" : "card";
+    this.applyTab();
+    this.emit("ready", void 0);
+  }
+  renderTab(tab, label) {
+    const a = this.resolvedAppearance;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("role", "tab");
+    btn.dataset.snapMethodTab = tab;
+    btn.textContent = label;
+    Object.assign(btn.style, {
+      padding: "8px 12px",
+      border: "none",
+      background: "transparent",
+      color: a.foreground,
+      fontFamily: a.fontFamily,
+      fontSize: "14px",
+      fontWeight: "500",
+      borderRadius: a.borderRadius,
+      cursor: "pointer"
+    });
+    btn.addEventListener("click", () => {
+      if (this.activeTab === tab) return;
+      this.activeTab = tab;
+      this.applyTab();
+    });
+    this.tabs.set(tab, btn);
+    return btn;
+  }
+  applyTab() {
+    const a = this.resolvedAppearance;
+    for (const [tab, btn] of this.tabs) {
+      const active = tab === this.activeTab;
+      btn.setAttribute("aria-selected", String(active));
+      btn.style.background = active ? a.background : "transparent";
+      btn.style.boxShadow = active ? "0 1px 2px rgba(0,0,0,0.04)" : "none";
+    }
+    if (this.walletSlot) {
+      this.walletSlot.style.display = this.activeTab === "wallet" ? "block" : "none";
+    }
+    if (this.cardSlot) {
+      this.cardSlot.style.display = this.activeTab === "card" ? "block" : "none";
+    }
+    if (this.activeTab === "wallet" && !this.walletChild && this.walletSlot) {
+      this.walletChild = createWalletElement({
+        clientSecret: this.args.clientSecret,
+        appearance: this.args.appearance,
+        publishableKey: this.args.publishableKey,
+        apiBase: this.args.apiBase,
+        environment: this.args.environment,
+        cardFrameUrl: this.args.cardFrameUrl,
+        registerChild: this.args.registerChild,
+        registerValue: this.args.registerValue,
+        // Pass the session we already fetched so the wallet child
+        // renders synchronously instead of firing a second GET.
+        initialSession: this.session ?? void 0,
+        options: {}
+      });
+      this.walletChild.mount(this.walletSlot);
+      this.walletChild.on("change", (p) => this.emit("change", p));
+      this.walletChild.on("failed", (p) => this.emit("failed", p));
+    }
+    if (this.activeTab === "card" && !this.cardChild && this.cardSlot) {
+      this.cardChild = createCardElement({
+        clientSecret: this.args.clientSecret,
+        appearance: this.args.appearance,
+        publishableKey: this.args.publishableKey,
+        apiBase: this.args.apiBase,
+        environment: this.args.environment,
+        cardFrameUrl: this.args.cardFrameUrl,
+        registerChild: this.args.registerChild,
+        registerValue: this.args.registerValue,
+        options: {}
+      });
+      this.cardChild.mount(this.cardSlot);
+      this.cardChild.on("change", (p) => this.emit("change", p));
+      this.cardChild.on("failed", (p) => this.emit("failed", p));
+    }
+  }
+};
+function createPaymentMethodSelector(args) {
+  return new PaymentMethodSelector(args);
+}
+
+// src/billing-address-element.ts
+var FIELDS = [
+  { key: "name", label: "Full name", autocomplete: "name" },
+  { key: "line1", label: "Address line 1", autocomplete: "address-line1" },
+  { key: "line2", label: "Address line 2 (optional)", autocomplete: "address-line2" },
+  { key: "city", label: "City", autocomplete: "address-level2", half: true },
+  { key: "region", label: "Region / state", autocomplete: "address-level1", half: true },
+  { key: "postalCode", label: "Postal code", autocomplete: "postal-code", half: true },
+  { key: "country", label: "Country", autocomplete: "country-name", half: true }
+];
+var BillingAddressElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "billingAddress";
+    this.value = {};
+    this.resolvedAppearance = resolveAppearance(args.appearance, "billingAddress");
+    if (args.options.defaultCountry) {
+      this.value.country = args.options.defaultCountry;
+    }
+    this.unregisterValue = args.registerValue("billingAddress", () => {
+      const anyFilled = Object.values(this.value).some(
+        (v) => typeof v === "string" && v.length > 0
+      );
+      return anyFilled ? { ...this.value } : null;
+    });
+  }
+  destroy() {
+    this.unregisterValue();
+    super.destroy();
+  }
+  // Public API — merchants call `element.getValue()` to read the
+  // form state imperatively (e.g. for a custom validation step
+  // before confirmPayment). Optional, mirrors Stripe's pattern.
+  getValue() {
+    return { ...this.value };
+  }
+  render(container) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "grid";
+    wrapper.style.gap = a.spacingUnit;
+    wrapper.style.fontFamily = a.fontFamily;
+    const half = [];
+    const flushHalfRow = () => {
+      if (half.length === 0) return;
+      const row = document.createElement("div");
+      row.style.display = "grid";
+      row.style.gridTemplateColumns = "1fr 1fr";
+      row.style.gap = a.spacingUnit;
+      for (const el of half) row.appendChild(el);
+      wrapper.appendChild(row);
+      half.length = 0;
+    };
+    for (const field of FIELDS) {
+      const node = this.renderField(field);
+      if (field.half) {
+        half.push(node);
+        if (half.length === 2) flushHalfRow();
+      } else {
+        flushHalfRow();
+        wrapper.appendChild(node);
+      }
+    }
+    flushHalfRow();
+    container.appendChild(wrapper);
+  }
+  renderField(field) {
+    const label = document.createElement("label");
+    label.style.display = "block";
+    const span = document.createElement("span");
+    span.textContent = field.label;
+    Object.assign(span.style, formLabelStyle(this.resolvedAppearance));
+    const input = document.createElement("input");
+    input.type = "text";
+    input.setAttribute("autocomplete", field.autocomplete);
+    input.value = this.value[field.key] ?? "";
+    input.dataset.snapBillingField = field.key;
+    Object.assign(input.style, formInputStyle(this.resolvedAppearance));
+    input.addEventListener("input", () => {
+      const trimmed = input.value;
+      if (trimmed.length === 0) {
+        delete this.value[field.key];
+      } else {
+        this.value[field.key] = trimmed;
+      }
+      this.emit("change", { complete: this.isComplete() });
+    });
+    input.addEventListener("focus", () => this.emit("focus", void 0));
+    input.addEventListener("blur", () => this.emit("blur", void 0));
+    label.appendChild(span);
+    label.appendChild(input);
+    return label;
+  }
+  // A merchant asking `complete` here is asking "should I enable
+  // the confirm button?" — for a billing form, we consider it
+  // complete when any single field is filled, because a merchant
+  // that mounts a BillingAddress alongside a Wallet may only care
+  // about country. The Element deliberately doesn't gate confirm.
+  isComplete() {
+    return Object.values(this.value).some(
+      (v) => typeof v === "string" && v.length > 0
+    );
+  }
+};
+function createBillingAddressElement(args) {
+  return new BillingAddressElement(args);
+}
+
+// src/customer-element.ts
+var FIELDS2 = [
+  { key: "name", label: "Full name", type: "text", autocomplete: "name" },
+  { key: "email", label: "Email", type: "email", autocomplete: "email", placeholder: "you@example.com" },
+  { key: "phone", label: "Phone", type: "tel", autocomplete: "tel", placeholder: "+252 \u2026" }
+];
+var CustomerElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "customer";
+    this.value = {};
+    this.resolvedAppearance = resolveAppearance(args.appearance, "customer");
+    this.unregisterValue = args.registerValue("customer", () => {
+      const anyFilled = Object.values(this.value).some(
+        (v) => typeof v === "string" && v.length > 0
+      );
+      return anyFilled ? { ...this.value } : null;
+    });
+  }
+  destroy() {
+    this.unregisterValue();
+    super.destroy();
+  }
+  getValue() {
+    return { ...this.value };
+  }
+  render(container) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "grid";
+    wrapper.style.gap = a.spacingUnit;
+    wrapper.style.fontFamily = a.fontFamily;
+    for (const field of FIELDS2) {
+      wrapper.appendChild(this.renderField(field));
+    }
+    container.appendChild(wrapper);
+  }
+  renderField(field) {
+    const label = document.createElement("label");
+    const span = document.createElement("span");
+    span.textContent = field.label;
+    Object.assign(span.style, formLabelStyle(this.resolvedAppearance));
+    const input = document.createElement("input");
+    input.type = field.type;
+    input.setAttribute("autocomplete", field.autocomplete);
+    if (field.placeholder) input.placeholder = field.placeholder;
+    input.value = this.value[field.key] ?? "";
+    input.dataset.snapCustomerField = field.key;
+    Object.assign(input.style, formInputStyle(this.resolvedAppearance));
+    input.addEventListener("input", () => {
+      const trimmed = input.value;
+      if (trimmed.length === 0) {
+        delete this.value[field.key];
+      } else {
+        this.value[field.key] = trimmed;
+      }
+      this.emit("change", { complete: this.isComplete() });
+    });
+    input.addEventListener("focus", () => this.emit("focus", void 0));
+    input.addEventListener("blur", () => this.emit("blur", void 0));
+    label.appendChild(span);
+    label.appendChild(input);
+    return label;
+  }
+  isComplete() {
+    return Object.values(this.value).some(
+      (v) => typeof v === "string" && v.length > 0
+    );
+  }
+};
+function createCustomerElement(args) {
+  return new CustomerElement(args);
+}
+
+// src/otp-element.ts
+var DEFAULT_LENGTH = 6;
+var OtpElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "otp";
+    this.inputs = [];
+    this.length = args.options.otpLength && args.options.otpLength >= 4 && args.options.otpLength <= 10 ? args.options.otpLength : DEFAULT_LENGTH;
+    this.digits = Array.from({ length: this.length }, () => "");
+    this.resolvedAppearance = resolveAppearance(args.appearance, "otp");
+    this.unregisterValue = args.registerValue("otp", () => {
+      const code = this.digits.join("");
+      if (code.length !== this.length) return null;
+      const value = { code };
+      return value;
+    });
+  }
+  destroy() {
+    this.unregisterValue();
+    super.destroy();
+  }
+  getValue() {
+    return { code: this.digits.join("") };
+  }
+  render(container) {
+    container.textContent = "";
+    this.inputs = [];
+    const a = this.resolvedAppearance;
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "grid";
+    wrapper.style.gridTemplateColumns = `repeat(${this.length}, 1fr)`;
+    wrapper.style.gap = a.spacingUnit;
+    wrapper.style.fontFamily = a.fontFamily;
+    for (let i = 0; i < this.length; i++) {
+      const input = document.createElement("input");
+      input.type = "text";
+      input.inputMode = "numeric";
+      input.setAttribute("autocomplete", i === 0 ? "one-time-code" : "off");
+      input.maxLength = 1;
+      input.value = this.digits[i] ?? "";
+      input.dataset.snapOtpIndex = String(i);
+      Object.assign(input.style, {
+        width: "100%",
+        aspectRatio: "1 / 1",
+        textAlign: "center",
+        fontSize: "20px",
+        fontWeight: "600",
+        border: `1px solid ${a.border}`,
+        borderRadius: a.borderRadius,
+        background: a.background,
+        color: a.foreground,
+        outline: "none",
+        boxSizing: "border-box"
+      });
+      input.addEventListener("input", (e) => this.onInput(e, i));
+      input.addEventListener("keydown", (e) => this.onKeyDown(e, i));
+      input.addEventListener("paste", (e) => this.onPaste(e));
+      input.addEventListener("focus", () => this.emit("focus", void 0));
+      input.addEventListener("blur", () => this.emit("blur", void 0));
+      this.inputs.push(input);
+      wrapper.appendChild(input);
+    }
+    container.appendChild(wrapper);
+  }
+  onInput(event, index) {
+    const input = this.inputs[index];
+    if (!input) return;
+    const digit = input.value.replace(/[^\d]/g, "").slice(-1);
+    input.value = digit;
+    this.digits[index] = digit;
+    if (digit && index + 1 < this.length) {
+      this.inputs[index + 1]?.focus();
+    }
+    this.emit("change", { complete: this.isComplete() });
+  }
+  onKeyDown(event, index) {
+    if (event.key === "Backspace" && !this.digits[index] && index > 0) {
+      event.preventDefault();
+      this.inputs[index - 1]?.focus();
+    } else if (event.key === "ArrowLeft" && index > 0) {
+      event.preventDefault();
+      this.inputs[index - 1]?.focus();
+    } else if (event.key === "ArrowRight" && index + 1 < this.length) {
+      event.preventDefault();
+      this.inputs[index + 1]?.focus();
+    }
+  }
+  onPaste(event) {
+    const text = event.clipboardData?.getData("text") ?? "";
+    const digits = text.replace(/[^\d]/g, "").slice(0, this.length);
+    if (digits.length === 0) return;
+    event.preventDefault();
+    for (let i = 0; i < this.length; i++) {
+      const d = digits[i] ?? "";
+      this.digits[i] = d;
+      const input = this.inputs[i];
+      if (input) input.value = d;
+    }
+    const focusTarget = this.inputs[Math.min(digits.length, this.length - 1)];
+    focusTarget?.focus();
+    this.emit("change", { complete: this.isComplete() });
+  }
+  isComplete() {
+    return this.digits.every((d) => d.length === 1);
+  }
+};
+function createOtpElement(args) {
+  return new OtpElement(args);
+}
+
+// src/qr-element.ts
+var QrElement = class extends BaseElement {
+  constructor(args) {
+    super();
+    this.args = args;
+    this.type = "qr";
+    this.deferReadyOnMount = true;
+    this.resolvedAppearance = resolveAppearance(args.appearance, "qr");
+  }
+  render(container) {
+    container.textContent = "";
+    const a = this.resolvedAppearance;
+    const panel = document.createElement("div");
+    Object.assign(panel.style, {
+      padding: "24px",
+      border: `1px dashed ${a.border}`,
+      borderRadius: a.borderRadius,
+      background: a.background,
+      color: a.mutedColor,
+      fontFamily: a.fontFamily,
+      fontSize: "13px",
+      textAlign: "center"
+    });
+    panel.textContent = "QR-based checkout is not available in this SDK version.";
+    container.appendChild(panel);
+    setTimeout(() => {
+      this.emit("failed", {
+        error: "QR Element is not yet supported."
+      });
+    }, 0);
+  }
+};
+function createQrElement(args) {
+  return new QrElement(args);
+}
+
+// src/card-validation.ts
+function normalizeCardNumber(raw) {
+  return raw.replace(/[^\d]/g, "");
+}
+function luhnValid(cardNumber) {
+  const digits = normalizeCardNumber(cardNumber);
+  if (digits.length < 12 || digits.length > 19) return false;
+  let sum = 0;
+  let alternate = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    let n = digits.charCodeAt(i) - 48;
+    if (n < 0 || n > 9) return false;
+    if (alternate) {
+      n *= 2;
+      if (n > 9) n -= 9;
+    }
+    sum += n;
+    alternate = !alternate;
+  }
+  return sum % 10 === 0;
+}
+function detectBrand(cardNumber) {
+  const d = normalizeCardNumber(cardNumber);
+  if (d.length === 0) return "unknown";
+  if (/^3[47]/.test(d)) return "amex";
+  if (/^5[1-5]/.test(d)) return "mastercard";
+  if (/^2(2[2-9][1-9]|[3-6]\d\d|7[01]\d|720)/.test(d)) return "mastercard";
+  if (/^4/.test(d)) return "visa";
+  if (/^(6011|65|64[4-9])/.test(d)) return "discover";
+  return "unknown";
+}
+function formatCardNumber(raw) {
+  const digits = normalizeCardNumber(raw);
+  const brand = detectBrand(digits);
+  if (brand === "amex") {
+    return digits.slice(0, 15).replace(
+      /(\d{4})(\d{0,6})(\d{0,5}).*/,
+      (_m, a, b, c) => [a, b, c].filter(Boolean).join(" ")
+    );
+  }
+  return digits.slice(0, 19).replace(/(\d{4})/g, "$1 ").trim();
+}
+function cvcLengthFor(brand) {
+  return brand === "amex" ? 4 : 3;
+}
+function cvcValid(cvc, brand) {
+  if (!/^\d+$/.test(cvc)) return false;
+  if (brand === "unknown") return cvc.length === 3 || cvc.length === 4;
+  return cvc.length === cvcLengthFor(brand);
+}
+function expiryValid(input, now = Date.now()) {
+  const match = /^(\d{1,2})\s*[/-]\s*(\d{2}|\d{4})$/.exec(input.trim());
+  if (!match) return false;
+  const month = Number.parseInt(match[1], 10);
+  const yearRaw = Number.parseInt(match[2], 10);
+  if (!Number.isFinite(month) || !Number.isFinite(yearRaw)) return false;
+  if (month < 1 || month > 12) return false;
+  const year = match[2].length === 2 ? 2e3 + yearRaw : yearRaw;
+  const nextMonth = new Date(Date.UTC(year, month, 1)).getTime();
+  return nextMonth > now;
+}
+function formatExpiry(raw) {
+  const digits = raw.replace(/[^\d]/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+
+// src/index.ts
+registerElement("wallet", createWalletElement);
+registerElement("card", createCardElement);
+registerElement("payment", createPaymentElement);
+registerElement("express", createExpressCheckoutElement);
+registerElement("paymentMethodSelector", createPaymentMethodSelector);
+registerElement("billingAddress", createBillingAddressElement);
+registerElement("customer", createCustomerElement);
+registerElement("otp", createOtpElement);
+registerElement("qr", createQrElement);
+
+export { BaseElement, BillingAddressElement, CardElement, CustomerElement, ExpressCheckoutElement, OtpElement, PaymentElement, PaymentMethodSelector, QrElement, WalletElement, createBillingAddressElement, createCardElement, createCustomerElement, createExpressCheckoutElement, createOtpElement, createPaymentElement, createPaymentMethodSelector, createQrElement, createWalletElement, cvcLengthFor, cvcValid, detectBrand, expiryValid, formInputStyle, formLabelStyle, formatCardNumber, formatExpiry, luhnValid, normalizeCardNumber, resolveAppearance };