@inflow_pay/sdk 0.7.0 → 1.0.0

package/dist/payment-sdk-oRqgQSx5.mjs

@@ -0,0 +1,821 @@
+import { jsx as k } from "react/jsx-runtime";
+import { createContext as K, useContext as _, useRef as R, useState as N, useEffect as D } from "react";
+var b = /* @__PURE__ */ ((t) => (t.SUCCESS = "SUCCESS", t.FAILED = "FAILED", t))(b || {}), U = /* @__PURE__ */ ((t) => (t.THREE_DS_FAILED = "THREE_DS_FAILED", t.PAYMENT_PROCESSING_ERROR = "PAYMENT_PROCESSING_ERROR", t))(U || {});
+const L = K(null);
+function ye({
+  config: t,
+  children: e
+}) {
+  const [n] = N(() => {
+    const o = {
+      publicKey: t.publicKey,
+      locale: t.locale
+    };
+    return new H(o);
+  });
+  return /* @__PURE__ */ k(L.Provider, { value: { sdk: n }, children: e });
+}
+function Ee() {
+  const t = _(L);
+  if (!t)
+    throw new Error("useInflowPay must be used within InflowPayProvider");
+  return t.sdk;
+}
+function we(t) {
+  const {
+    paymentId: e,
+    onReady: n,
+    onChange: o,
+    onComplete: s,
+    onError: i,
+    style: r,
+    buttonText: a,
+    placeholders: u,
+    showDefaultSuccessUI: h,
+    config: m
+  } = t, p = _(L), l = R(null), f = R(null), [g, x] = N(!1), T = p?.sdk || (m ? new H({
+    publicKey: m.publicKey,
+    locale: m.locale
+  }) : null);
+  if (!T)
+    throw new Error("CardElement must be used within InflowPayProvider or have a config prop");
+  return D(() => {
+    if (!l.current)
+      return;
+    l.current.id || (l.current.id = `inflowpay-card-element-${Date.now()}`);
+    const $ = {
+      container: l.current,
+      paymentId: e,
+      ...r && { style: r },
+      ...a && { buttonText: a },
+      ...u && { placeholders: u },
+      ...h !== void 0 && { showDefaultSuccessUI: h },
+      onComplete: (E) => {
+        s && s(E);
+      },
+      onError: (E) => {
+        i ? i(E) : s && s({
+          status: b.FAILED,
+          paymentId: e,
+          error: E
+        });
+      },
+      onClose: () => {
+      }
+    }, O = T.createCardElement($);
+    if (f.current = O, O.mount(), x(!0), n) {
+      const E = setTimeout(() => {
+        n();
+      }, 100);
+      return () => clearTimeout(E);
+    }
+  }, [e, T, s, i, n, r, a, u, h]), D(() => {
+    o && g && o({ complete: !1 });
+  }, [g, o]), D(() => () => {
+    f.current && (f.current.destroy(), f.current = null);
+  }, []), /* @__PURE__ */ k(
+    "div",
+    {
+      ref: l,
+      style: {
+        width: r?.fillParent ? "100%" : "344px"
+      }
+    }
+  );
+}
+const v = {
+  OVERLAY: 999999,
+  MODAL: 1e6,
+  LOADER: 1e3
+}, c = {
+  MIN_HEIGHT: 196,
+  CONTAINER_MAX_WIDTH: "500px",
+  CONTAINER_WIDTH_PERCENT: "90%",
+  CONTAINER_HEIGHT_PERCENT: "90%",
+  CONTAINER_MAX_HEIGHT: "600px",
+  BUTTON_SIZE: 30,
+  DEFAULT_IFRAME_WIDTH: "344px"
+}, F = [
+  "https://dev.api.inflowpay.xyz",
+  "https://pre-prod.api.inflowpay.xyz",
+  "https://api.inflowpay.xyz"
+], y = {
+  OVERLAY: "inflowpay-sdk-overlay",
+  LOADER: "inflowpay-loader",
+  LOADER_STYLES: "inflowpay-loader-styles",
+  THREE_DS_OVERLAY: "inflowpay-3ds-overlay"
+}, I = {
+  PRODUCTION: "https://iframe.inflowpay.com/iframe/checkout",
+  PREPROD: "https://preprod.iframe.inflowpay.com/iframe/checkout",
+  DEVELOPMENT: "https://dev.iframe.inflowpay.com/iframe/checkout",
+  LOCAL: "http://localhost:3010/iframe/checkout"
+};
+function W(t) {
+  return {
+    inputBgColor: t ? "#2d2d2d" : "#F5F5F5",
+    shimmerBase: t ? "#3d3d3d" : "#E5E5E5",
+    shimmerLight: t ? "#4d4d4d" : "#F0F0F0"
+  };
+}
+function B(t) {
+  return `linear-gradient(90deg, ${t.shimmerBase} 25%, ${t.shimmerLight} 50%, ${t.shimmerBase} 75%)`;
+}
+function G() {
+  return `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: ${v.OVERLAY};
+  `;
+}
+function z() {
+  return `
+    position: relative;
+    width: ${c.CONTAINER_WIDTH_PERCENT};
+    max-width: ${c.CONTAINER_MAX_WIDTH};
+    height: ${c.CONTAINER_HEIGHT_PERCENT};
+    max-height: ${c.CONTAINER_MAX_HEIGHT};
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  `;
+}
+function Y() {
+  return `
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: ${c.BUTTON_SIZE}px;
+    height: ${c.BUTTON_SIZE}px;
+    border: none;
+    background: transparent;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: ${v.MODAL};
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+}
+function j() {
+  return `
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 8px;
+  `;
+}
+function V(t) {
+  return `
+    width: ${t ? "100%" : c.DEFAULT_IFRAME_WIDTH};
+    max-width: ${t ? "none" : "100%"};
+    height: ${c.MIN_HEIGHT}px;
+    min-height: ${c.MIN_HEIGHT}px;
+    border: none;
+    display: block;
+    transition: height 0.2s ease;
+  `;
+}
+function q() {
+  return `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: ${v.LOADER};
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `;
+}
+function X(t) {
+  return `
+    width: ${t ? "100%" : c.DEFAULT_IFRAME_WIDTH};
+    max-width: 100%;
+    margin: 0 auto;
+  `;
+}
+function Z(t) {
+  return `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background-color: ${t};
+    padding: 8px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  `;
+}
+function w(t) {
+  return `
+    background: ${t};
+    background-size: 200% 100%;
+    animation: inflowpay-shimmer 1.5s infinite;
+  `;
+}
+function J(t) {
+  return `
+    flex: 1;
+    min-width: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${w(t)}
+  `;
+}
+function Q(t) {
+  return `
+    width: 21.5%;
+    flex-shrink: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${w(t)}
+  `;
+}
+function ee(t) {
+  return `
+    width: 17.5%;
+    flex-shrink: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${w(t)}
+  `;
+}
+function te(t) {
+  return `
+    width: 100%;
+    height: 42px;
+    border-radius: 8px;
+    ${w(t)}
+    margin-bottom: 16px;
+  `;
+}
+function ne() {
+  return `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    margin-top: 16px;
+  `;
+}
+function ie(t) {
+  return `
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    ${w(t)}
+  `;
+}
+function se(t) {
+  return `
+    width: 80%;
+    height: 16px;
+    border-radius: 4px;
+    ${w(t)}
+  `;
+}
+const oe = `
+  @keyframes inflowpay-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+`;
+function re() {
+  return `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: ${v.OVERLAY};
+  `;
+}
+function ae() {
+  return `
+    position: relative;
+    width: ${c.CONTAINER_WIDTH_PERCENT};
+    max-width: ${c.CONTAINER_MAX_WIDTH};
+    height: ${c.CONTAINER_HEIGHT_PERCENT};
+    max-height: ${c.CONTAINER_MAX_HEIGHT};
+    background: white;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+  `;
+}
+function le() {
+  return `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 20px;
+    border-bottom: 1px solid #e5e5e5;
+  `;
+}
+function ce() {
+  return `
+    flex: 1;
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+  `;
+}
+function de() {
+  return `
+    width: 100%;
+    height: 100%;
+    border: none;
+  `;
+}
+class M {
+  constructor(e, n = {}) {
+    this.loaderElement = null, this.container = e, this.config = n;
+  }
+  /**
+   * Show skeleton loader
+   */
+  show(e) {
+    e && (e.style.display = "none");
+    const n = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches, o = W(n), s = B(o), i = document.createElement("div");
+    i.id = y.LOADER, i.style.cssText = q();
+    const r = document.createElement("div");
+    r.style.cssText = X(this.config.fillParent || !1);
+    const a = document.createElement("div");
+    a.style.cssText = Z(o.inputBgColor);
+    const u = document.createElement("div");
+    u.className = "inflowpay-skeleton", u.style.cssText = J(s);
+    const h = document.createElement("div");
+    h.className = "inflowpay-skeleton", h.style.cssText = Q(s);
+    const m = document.createElement("div");
+    m.className = "inflowpay-skeleton", m.style.cssText = ee(s), a.appendChild(u), a.appendChild(h), a.appendChild(m);
+    const p = document.createElement("div");
+    p.className = "inflowpay-skeleton", p.style.cssText = te(s);
+    const l = document.createElement("div");
+    l.style.cssText = ne();
+    const f = document.createElement("div");
+    f.className = "inflowpay-skeleton", f.style.cssText = ie(s);
+    const g = document.createElement("div");
+    g.className = "inflowpay-skeleton", g.style.cssText = se(s), l.appendChild(f), l.appendChild(g), r.appendChild(a), r.appendChild(p), r.appendChild(l), i.appendChild(r), this.injectShimmerStyles(), this.container.appendChild(i), this.loaderElement = i;
+  }
+  /**
+   * Hide loader
+   */
+  hide(e) {
+    const n = document.getElementById(y.LOADER);
+    n && n.remove(), this.loaderElement = null, e && (e.style.display = "");
+  }
+  /**
+   * Inject shimmer animation styles into document head
+   */
+  injectShimmerStyles() {
+    if (!document.getElementById(y.LOADER_STYLES)) {
+      const e = document.createElement("style");
+      e.id = y.LOADER_STYLES, e.textContent = oe, document.head.appendChild(e);
+    }
+  }
+}
+const d = class d {
+  constructor(e) {
+    this.config = e;
+  }
+  /**
+   * Open 3DS authentication modal
+   * Returns a Promise that resolves with the authentication result
+   */
+  open(e, n, o) {
+    return this.config.debug && (console.log("[SDK] open3DSModal called with URL:", e), console.log("[SDK] Session ID:", n, "Payment ID:", o)), d.activeModal && (console.warn("[SDK] Closing existing modal before opening new one"), d.activeModal.overlay.remove(), d.activeModal = null), new Promise((s) => {
+      const i = document.createElement("div");
+      i.id = y.THREE_DS_OVERLAY, i.style.cssText = re();
+      const r = document.createElement("div");
+      r.style.cssText = ae();
+      const a = document.createElement("div");
+      a.style.cssText = le(), a.innerHTML = `
+        <h3 style="margin: 0; font-size: 18px; font-weight: 600;">Secure Payment Authentication</h3>
+      `;
+      const u = document.createElement("div");
+      u.style.cssText = ce();
+      const h = document.createElement("iframe");
+      h.src = e, h.style.cssText = de(), h.setAttribute("allow", "payment"), h.setAttribute("sandbox", "allow-forms allow-scripts allow-same-origin allow-popups"), u.appendChild(h), r.appendChild(a), r.appendChild(u), i.appendChild(r), document.body.appendChild(i), d.activeModal = {
+        overlay: i,
+        sessionId: n,
+        paymentId: o
+      };
+      const m = (p) => {
+        if (!p.data) return;
+        if (!this.isAllowedOrigin(p.origin)) {
+          this.config.debug && console.warn("[SDK] Rejected 3DS message from unauthorized origin:", p.origin);
+          return;
+        }
+        const l = p.data, f = l.type === "THREE_DS_COMPLETE" || l.type === "3ds-complete", g = l.status === "success", x = l.status === "failed" || l.status === "failure";
+        if (f && g) {
+          i.remove(), window.removeEventListener("message", m), s(!0);
+          return;
+        }
+        if (g && !f) {
+          i.remove(), window.removeEventListener("message", m), s(!0);
+          return;
+        }
+        if (f && x || l.type === "3ds-failed" || x) {
+          i.remove(), window.removeEventListener("message", m), s(!1);
+          return;
+        }
+      };
+      window.addEventListener("message", m);
+    });
+  }
+  /**
+   * Close 3DS modal (called from external events like WebSocket)
+   * @param sessionId - Optional session ID to validate before closing
+   */
+  static close(e) {
+    if (!d.activeModal) {
+      console.log("[SDK] No active modal to close");
+      return;
+    }
+    if (e && d.activeModal.sessionId !== e) {
+      console.warn(
+        `[SDK] Session ID mismatch: webhook for ${e}, but modal is for ${d.activeModal.sessionId}. Ignoring close request.`
+      );
+      return;
+    }
+    console.log("[SDK] Closing modal for session:", e || d.activeModal.sessionId), d.activeModal.overlay.remove(), d.activeModal = null;
+  }
+  /**
+   * Check if a modal is currently open
+   */
+  static isModalOpen() {
+    return d.activeModal !== null;
+  }
+  /**
+   * Get current session ID
+   */
+  static getCurrentSessionId() {
+    return d.activeModal?.sessionId || null;
+  }
+  /**
+   * Check if origin is allowed for 3DS messages
+   */
+  isAllowedOrigin(e) {
+    return !!(F.includes(e) || (this.config.environment === "sandbox" || this.config.environment === "development") && (e.includes("localhost") || e.includes("127.0.0.1")));
+  }
+};
+d.activeModal = null;
+let S = d;
+class C {
+  /**
+   * Create popup overlay with iframe
+   */
+  static createOverlay(e, n) {
+    const o = document.createElement("div");
+    o.id = y.OVERLAY, o.style.cssText = G();
+    const s = document.createElement("div");
+    s.style.cssText = z();
+    const i = document.createElement("button");
+    i.innerHTML = "×", i.style.cssText = Y(), i.onclick = n;
+    const r = document.createElement("iframe");
+    return r.src = e, r.style.cssText = j(), r.setAttribute("allow", "payment"), s.appendChild(i), s.appendChild(r), o.appendChild(s), o.addEventListener("click", (a) => {
+      a.target === o && n();
+    }), { overlay: o, container: s, iframe: r };
+  }
+  /**
+   * Remove overlay from DOM
+   */
+  static removeOverlay() {
+    const e = document.getElementById(y.OVERLAY);
+    e && e.remove();
+  }
+}
+const ue = ["en", "de", "es", "fr", "it", "nl", "pl", "pt"];
+function he() {
+  if (typeof window > "u")
+    return "en";
+  try {
+    const e = (navigator.language || navigator.userLanguage || "").split("-")[0].toLowerCase();
+    if (ue.includes(e))
+      return e;
+  } catch {
+  }
+  return "en";
+}
+function A(t) {
+  return t.includes("_local_") || t.startsWith("inflow_local_") ? "sandbox" : t.includes("_prod_") && !t.includes("_preprod_") ? "production" : t.includes("_preprod_") || t.startsWith("inflow_preprod_") ? "preprod" : t.includes("_dev_") ? "development" : "sandbox";
+}
+function P(t) {
+  switch (A(t)) {
+    case "production":
+      return I.PRODUCTION;
+    case "preprod":
+      return I.PREPROD;
+    case "development":
+      return I.DEVELOPMENT;
+    case "sandbox":
+    default:
+      return I.LOCAL;
+  }
+}
+class me {
+  constructor(e) {
+    if (this.iframe = null, this.messageListener = null, this.containerElement = null, this.loaderManager = null, this.config = e, this.iframeUrl = e.iframeUrl || P(e.publicKey || ""), this.environment = A(e.publicKey || ""), this.usePopup = !e.container, e.container)
+      if (typeof e.container == "string") {
+        if (this.containerElement = document.querySelector(e.container), !this.containerElement)
+          throw new Error(`Container not found: ${e.container}`);
+      } else
+        this.containerElement = e.container;
+    this.modalManager = new S({
+      environment: this.environment,
+      debug: this.config.debug
+    });
+  }
+  /**
+   * Initialize and open the payment iframe
+   */
+  init() {
+    this.iframe || (this.createIframe(), this.addMessageListener());
+  }
+  /**
+   * Create and append the iframe to the document
+   */
+  createIframe() {
+    const e = new URL(this.iframeUrl);
+    this.config.publicKey && e.searchParams.set("publicKey", this.config.publicKey), this.config.config?.paymentId && e.searchParams.set("paymentId", this.config.config.paymentId), this.config.locale && e.searchParams.set("locale", this.config.locale);
+    const n = e.toString();
+    if (this.usePopup) {
+      const { overlay: o, container: s, iframe: i } = C.createOverlay(
+        n,
+        () => this.close()
+      );
+      this.iframe = i, document.body.appendChild(o), this.loaderManager = new M(s, {
+        fillParent: this.config.config?.style?.fillParent
+      }), this.loaderManager.show(this.iframe);
+    } else {
+      if (!this.containerElement)
+        throw new Error("Container element is required for inline mode");
+      if (this.containerElement.innerHTML = "", this.containerElement instanceof HTMLElement) {
+        const o = this.containerElement.getAttribute("style") || "";
+        o.includes("min-height") || (this.containerElement.style.minHeight = `${c.MIN_HEIGHT}px`), o.includes("position") || (this.containerElement.style.position = "relative"), o.includes("overflow") || (this.containerElement.style.overflow = "hidden");
+      }
+      this.iframe = document.createElement("iframe"), this.iframe.src = n, this.iframe.style.cssText = V(
+        this.config.config?.style?.fillParent || !1
+      ), this.iframe.setAttribute("allow", "payment"), this.containerElement.appendChild(this.iframe), this.loaderManager = new M(this.containerElement, {
+        fillParent: this.config.config?.style?.fillParent
+      }), this.loaderManager.show(this.iframe);
+    }
+  }
+  /**
+   * Add message listener for communication with iframe
+   */
+  addMessageListener() {
+    this.messageListener = (e) => {
+      const n = new URL(this.iframeUrl).origin;
+      let s = e.origin === n;
+      if (s || ((this.environment === "sandbox" || this.environment === "development") && (s = (e.origin.includes("localhost") || e.origin.includes("127.0.0.1")) && (n.includes("localhost") || n.includes("127.0.0.1"))), s || (s = e.origin === "https://dev.iframe.inflowpay.com" || e.origin === "https://pre-prod.iframe.inflowpay.xyz" || e.origin === "https://iframe.inflowpay.xyz")), !s) {
+        this.config.debug && console.warn("[SDK] Rejected message from unauthorized origin:", e.origin);
+        return;
+      }
+      const i = e.data;
+      if (!(!i || !i.type))
+        switch (i.type) {
+          case "iframe-ready":
+            this.loaderManager && this.loaderManager.hide(this.iframe || void 0), this.sendConfigToIframe();
+            break;
+          case "content-height":
+            if (i.height && this.iframe) {
+              const r = Math.max(i.height, c.MIN_HEIGHT);
+              this.iframe.style.height = `${r}px`, this.containerElement && (this.containerElement.style.minHeight = `${r}px`);
+            }
+            break;
+          case "close":
+            this.close();
+            break;
+          case "success":
+            this.config.onSuccess && this.config.onSuccess(i.data);
+            break;
+          case "error":
+            this.config.onError && this.config.onError(i.data);
+            break;
+          case "3ds-required":
+            if (this.config.debug && (console.log("[SDK] Received 3DS request:", i.threeDsSessionUrl), console.log("[SDK] Session ID:", i.sessionId)), i.threeDsSessionUrl) {
+              const r = i.sessionId, a = i.paymentId || this.config.config?.paymentId || "";
+              i.sessionId || console.warn("[SDK] No session ID provided by iframe"), this.config.debug && console.log("[SDK] Opening 3DS modal with session ID:", r), this.modalManager.open(i.threeDsSessionUrl, r, a).then((u) => {
+                this.config.debug && console.log("[SDK] 3DS modal closed, result:", u);
+              });
+            } else
+              this.config.debug && console.error("[SDK] 3DS required but no threeDsSessionUrl provided");
+            break;
+          case "3ds-success":
+            this.config.debug && (console.log("[SDK] 3DS completed, closing modal..."), console.log("[SDK] Session ID from webhook:", i.sessionId)), S.close(i.sessionId);
+            break;
+          case "3ds-failed":
+            this.config.debug && (console.log("[SDK] 3DS failed, closing modal..."), console.log("[SDK] Session ID from webhook:", i.sessionId)), S.close(i.sessionId);
+            break;
+          default:
+            this.config.debug && console.log("SDK: Received message:", i);
+        }
+    }, window.addEventListener("message", this.messageListener);
+  }
+  /**
+   * Send configuration to the iframe
+   */
+  sendConfigToIframe() {
+    if (!this.iframe || !this.iframe.contentWindow) {
+      this.iframe && (this.iframe.onload = () => {
+        this.sendConfigToIframe();
+      });
+      return;
+    }
+    const e = {
+      type: "sdkData",
+      config: {
+        ...this.config.config || {},
+        paymentId: this.config.config?.paymentId
+      },
+      data: {
+        publicKey: this.config.publicKey
+      }
+    }, n = this.getTargetOrigin();
+    this.iframe.contentWindow.postMessage(e, n);
+  }
+  /**
+   * Close the iframe and cleanup
+   */
+  close() {
+    this.config.onClose && this.config.onClose(), this.loaderManager && (this.loaderManager.hide(this.iframe || void 0), this.loaderManager = null), this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null), this.usePopup ? C.removeOverlay() : this.containerElement && (this.containerElement.innerHTML = ""), this.iframe = null;
+  }
+  /**
+   * Handle success state: when showDefaultSuccessUI is true, iframe shows success UI
+   * and we keep it mounted; when false, we unmount so the parent can render their own.
+   */
+  switchToSuccessState(e) {
+    if (this.loaderManager && (this.loaderManager.hide(this.iframe || void 0), this.loaderManager = null), this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null), this.usePopup) {
+      C.removeOverlay(), this.iframe = null;
+      return;
+    }
+    const n = this.config.config?.showDefaultSuccessUI ?? !0;
+    !n && this.containerElement && (this.containerElement.innerHTML = ""), n || (this.iframe = null);
+  }
+  /**
+   * Get target origin for postMessage based on environment
+   * In production/pre-prod: use exact origin for security
+   * In dev/sandbox: use wildcard for development flexibility
+   */
+  getTargetOrigin() {
+    return this.environment === "production" || this.environment === "preprod" ? new URL(this.iframeUrl).origin : "*";
+  }
+  /**
+   * Public method to close the iframe
+   */
+  destroy() {
+    this.close();
+  }
+}
+class fe {
+  constructor(e, n) {
+    this.mounted = !1;
+    let o;
+    if (typeof n.container == "string") {
+      if (o = document.querySelector(n.container), !o)
+        throw new Error(`Container not found: ${n.container}`);
+    } else
+      o = n.container;
+    this.container = o, this.sdk = new me({
+      publicKey: e.publicKey,
+      container: this.container,
+      locale: e.locale ?? he(),
+      config: {
+        paymentId: n.paymentId,
+        ...n.style && { style: n.style },
+        ...n.buttonText && { buttonText: n.buttonText },
+        ...n.placeholders && { placeholders: n.placeholders },
+        ...n.showDefaultSuccessUI !== void 0 && {
+          showDefaultSuccessUI: n.showDefaultSuccessUI
+        }
+      },
+      onSuccess: (s) => {
+        n.onComplete && n.onComplete({
+          status: b.SUCCESS,
+          paymentId: n.paymentId
+        }), this.sdk.switchToSuccessState(s);
+      },
+      onError: (s) => {
+        n.onError ? n.onError(s) : n.onComplete && n.onComplete({
+          status: b.FAILED,
+          paymentId: n.paymentId,
+          error: s
+        });
+      },
+      onClose: () => {
+        n.onClose && n.onClose();
+      }
+    });
+  }
+  /**
+   * Mount the CardElement to the DOM
+   * This will create and display the iframe
+   */
+  mount() {
+    if (this.mounted)
+      throw new Error("CardElement is already mounted");
+    this.sdk.init(), this.mounted = !0;
+  }
+  /**
+   * Destroy the CardElement and cleanup
+   */
+  destroy() {
+    this.mounted && (this.sdk.destroy(), this.mounted = !1);
+  }
+}
+class H {
+  /**
+   * Initialize the InflowPay Payment SDK
+   * 
+   * @param config - SDK configuration
+   * 
+   * @example
+   * ```typescript
+   * const sdk = new PaymentSDK({
+   *   apiKey: 'inflow_pub_local_xxx'
+   * });
+   * ```
+   */
+  constructor(e) {
+    if (!e.publicKey || typeof e.publicKey != "string")
+      throw new Error("API key is required");
+    this.config = e, this.timeout = 3e4, this.iframeUrl = P(e.publicKey);
+    const n = A(e.publicKey);
+    this.debug = n === "sandbox" || n === "development";
+  }
+  /**
+   * Create a CardElement for iframe-based payment UI
+   * 
+   * @param options - CardElement configuration
+   * @returns CardElement instance
+   * 
+   * @example
+   * ```typescript
+   * const cardElement = sdk.createCardElement({
+   *   container: '#card-container',
+   *   paymentId: 'pay_123',
+   *   onComplete: (result) => {
+   *     if (result.status === 'CHECKOUT_SUCCESS') {
+   *       window.location.href = '/success';
+   *     }
+   *   }
+   * });
+   * 
+   * cardElement.mount();
+   * ```
+   */
+  createCardElement(e) {
+    return new fe({
+      publicKey: this.config.publicKey,
+      iframeUrl: this.iframeUrl,
+      timeout: this.timeout,
+      debug: this.debug,
+      locale: this.config.locale
+    }, e);
+  }
+  /**
+   * Get the iframe URL being used
+   */
+  getIframeUrl() {
+    return this.iframeUrl;
+  }
+  /**
+   * Get the API key
+   */
+  getApiKey() {
+    return this.config.publicKey;
+  }
+}
+export {
+  fe as C,
+  ye as I,
+  H as P,
+  U as a,
+  b,
+  we as c,
+  Ee as u
+};
+//# sourceMappingURL=payment-sdk-oRqgQSx5.mjs.map