@inflow_pay/sdk 0.0.1

package/dist/react.esm.js

@@ -0,0 +1,747 @@
+import se, { createContext as ae, useState as H, useContext as J, useRef as K, useEffect as I } from "react";
+var A = { exports: {} }, _ = {};
+var $;
+function le() {
+  if ($) return _;
+  $ = 1;
+  var l = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function n(r, i, s) {
+    var d = null;
+    if (s !== void 0 && (d = "" + s), i.key !== void 0 && (d = "" + i.key), "key" in i) {
+      s = {};
+      for (var h in i)
+        h !== "key" && (s[h] = i[h]);
+    } else s = i;
+    return i = s.ref, {
+      $$typeof: l,
+      type: r,
+      key: d,
+      ref: i !== void 0 ? i : null,
+      props: s
+    };
+  }
+  return _.Fragment = t, _.jsx = n, _.jsxs = n, _;
+}
+var T = {};
+var W;
+function ce() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
+    function l(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ne ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case b:
+          return "Fragment";
+        case v:
+          return "Profiler";
+        case R:
+          return "StrictMode";
+        case Q:
+          return "Suspense";
+        case ee:
+          return "SuspenseList";
+        case re:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case y:
+            return "Portal";
+          case X:
+            return e.displayName || "Context";
+          case B:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Z:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case te:
+            return o = e.displayName || null, o !== null ? o : l(e.type) || "Memo";
+          case P:
+            o = e._payload, e = e._init;
+            try {
+              return l(e(o));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function t(e) {
+      return "" + e;
+    }
+    function n(e) {
+      try {
+        t(e);
+        var o = !1;
+      } catch {
+        o = !0;
+      }
+      if (o) {
+        o = console;
+        var a = o.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          o,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          c
+        ), t(e);
+      }
+    }
+    function r(e) {
+      if (e === b) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === P)
+        return "<...>";
+      try {
+        var o = l(e);
+        return o ? "<" + o + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (U.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function h(e, o) {
+      function a() {
+        N || (N = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          o
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function S() {
+      var e = l(this.type);
+      return M[e] || (M[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function E(e, o, a, c, k, D) {
+      var u = a.ref;
+      return e = {
+        $$typeof: w,
+        type: e,
+        key: o,
+        props: a,
+        _owner: c
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: S
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: D
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function p(e, o, a, c, k, D) {
+      var u = o.children;
+      if (u !== void 0)
+        if (c)
+          if (ie(u)) {
+            for (c = 0; c < u.length; c++)
+              f(u[c]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else f(u);
+      if (U.call(o, "key")) {
+        u = l(e);
+        var x = Object.keys(o).filter(function(oe) {
+          return oe !== "key";
+        });
+        c = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", F[u + c] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          c,
+          u,
+          x,
+          u
+        ), F[u + c] = !0);
+      }
+      if (u = null, a !== void 0 && (n(a), u = "" + a), d(o) && (n(o.key), u = "" + o.key), "key" in o) {
+        a = {};
+        for (var j in o)
+          j !== "key" && (a[j] = o[j]);
+      } else a = o;
+      return u && h(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), E(
+        e,
+        u,
+        a,
+        i(),
+        k,
+        D
+      );
+    }
+    function f(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === w;
+    }
+    var m = se, w = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), X = Symbol.for("react.context"), Z = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), C = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ie = Array.isArray, O = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    m = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var N, M = {}, z = m.react_stack_bottom_frame.bind(
+      m,
+      s
+    )(), Y = O(r(s)), F = {};
+    T.Fragment = b, T.jsx = function(e, o, a) {
+      var c = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        o,
+        a,
+        !1,
+        c ? Error("react-stack-top-frame") : z,
+        c ? O(r(e)) : Y
+      );
+    }, T.jsxs = function(e, o, a) {
+      var c = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        o,
+        a,
+        !0,
+        c ? Error("react-stack-top-frame") : z,
+        c ? O(r(e)) : Y
+      );
+    };
+  })()), T;
+}
+var q;
+function ue() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? A.exports = le() : A.exports = ce()), A.exports;
+}
+var V = ue();
+class de {
+  constructor(t) {
+    if (this.iframe = null, this.messageListener = null, this.containerElement = null, this.config = t, this.iframeUrl = t.iframeUrl || "http://localhost:3000/iframe/checkout", this.environment = this.getEnvironmentFromApiKey(t.apiKey || ""), this.usePopup = !t.container, t.container)
+      if (typeof t.container == "string") {
+        if (this.containerElement = document.querySelector(t.container), !this.containerElement)
+          throw new Error(`Container not found: ${t.container}`);
+      } else
+        this.containerElement = t.container;
+  }
+  /**
+   * Initialize and open the payment iframe
+   */
+  init() {
+    this.iframe || (this.createIframe(), this.addMessageListener(), this.sendConfigToIframe());
+  }
+  /**
+   * Create and append the iframe to the document
+   */
+  createIframe() {
+    const t = new URL(this.iframeUrl);
+    this.config.apiKey && t.searchParams.set("apiKey", this.config.apiKey), this.config.config?.paymentId && t.searchParams.set("paymentId", this.config.config.paymentId);
+    const n = t.toString();
+    if (this.usePopup) {
+      const r = document.createElement("div");
+      r.id = "inflowpay-sdk-overlay", r.style.cssText = `
+        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: 999999;
+      `;
+      const i = document.createElement("div");
+      i.style.cssText = `
+        position: relative;
+        width: 90%;
+        max-width: 500px;
+        height: 90%;
+        max-height: 600px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      `;
+      const s = document.createElement("button");
+      s.innerHTML = "×", s.style.cssText = `
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 30px;
+        height: 30px;
+        border: none;
+        background: transparent;
+        font-size: 24px;
+        cursor: pointer;
+        z-index: 1000000;
+        color: #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      `, s.onclick = () => this.close(), this.iframe = document.createElement("iframe"), this.iframe.src = n, this.iframe.style.cssText = `
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 8px;
+      `, this.iframe.setAttribute("allow", "payment"), i.appendChild(s), i.appendChild(this.iframe), r.appendChild(i), document.body.appendChild(r), r.addEventListener("click", (d) => {
+        d.target === r && this.close();
+      });
+    } else {
+      if (!this.containerElement)
+        throw new Error("Container element is required for inline mode");
+      if (this.containerElement.innerHTML = "", this.containerElement instanceof HTMLElement) {
+        const r = this.containerElement.getAttribute("style") || "";
+        r.includes("min-height") || (this.containerElement.style.minHeight = "300px"), r.includes("position") || (this.containerElement.style.position = "relative"), r.includes("overflow") || (this.containerElement.style.overflow = "hidden");
+      }
+      this.iframe = document.createElement("iframe"), this.iframe.src = n, this.iframe.style.cssText = `
+        width: 100%;
+        height: 100%;
+        min-height: 300px;
+        border: none;
+        display: block;
+      `, this.iframe.setAttribute("allow", "payment"), this.containerElement.appendChild(this.iframe);
+    }
+  }
+  /**
+   * Add message listener for communication with iframe
+   */
+  addMessageListener() {
+    this.messageListener = (t) => {
+      const n = new URL(this.iframeUrl).origin;
+      let i = t.origin === n;
+      if (i || ((this.environment === "sandbox" || this.environment === "development") && (i = (t.origin.includes("localhost") || t.origin.includes("127.0.0.1")) && (n.includes("localhost") || n.includes("127.0.0.1"))), i || (i = t.origin === "https://dev.api.inflowpay.com" || t.origin === "https://pre-prod.api.inflowpay.xyz" || t.origin === "https://api.inflowpay.xyz")), !i) {
+        this.config.debug && console.warn("[SDK] Rejected message from unauthorized origin:", t.origin);
+        return;
+      }
+      const s = t.data;
+      if (!(!s || !s.type))
+        switch (s.type) {
+          case "close":
+            this.close();
+            break;
+          case "success":
+            this.config.onSuccess && this.config.onSuccess(s.data);
+            break;
+          case "error":
+            this.config.onError && this.config.onError(s.data);
+            break;
+          case "3ds-required":
+            this.config.debug && console.log("[SDK] Received 3DS request:", s.threeDsSessionUrl), s.threeDsSessionUrl ? (this.config.debug && console.log("[SDK] Opening 3DS modal..."), this.open3DSModal(s.threeDsSessionUrl).then((d) => {
+              if (this.config.debug && console.log("[SDK] 3DS modal closed, result:", d), this.iframe && this.iframe.contentWindow) {
+                const h = this.getTargetOrigin();
+                this.iframe.contentWindow.postMessage({
+                  type: "3ds-result",
+                  success: d,
+                  paymentId: s.paymentId || this.config.config?.paymentId
+                }, h);
+              }
+            })) : this.config.debug && console.error("[SDK] 3DS required but no threeDsSessionUrl provided");
+            break;
+          default:
+            this.config.debug && console.log("SDK: Received message:", s);
+        }
+    }, 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 t = {
+      type: "sdkData",
+      config: {
+        ...this.config.config || {},
+        paymentId: this.config.config?.paymentId
+      },
+      data: {
+        apiKey: this.config.apiKey
+      }
+    }, n = this.getTargetOrigin();
+    this.iframe.contentWindow.postMessage(t, n);
+  }
+  /**
+   * Close the iframe and cleanup
+   */
+  close() {
+    if (this.config.onClose && this.config.onClose(), this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null), this.usePopup) {
+      const t = document.getElementById("inflowpay-sdk-overlay");
+      t && t.remove();
+    } else
+      this.containerElement && this.iframe && this.containerElement.removeChild(this.iframe);
+    this.iframe = null;
+  }
+  /**
+   * Open 3DS authentication modal
+   * Called when iframe requests 3DS authentication
+   */
+  open3DSModal(t) {
+    return this.config.debug && console.log("[SDK] open3DSModal called with URL:", t), new Promise((n) => {
+      const r = document.createElement("div");
+      r.id = "inflowpay-3ds-overlay", r.style.cssText = `
+        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: 999999;
+      `;
+      const i = document.createElement("div");
+      i.style.cssText = `
+        position: relative;
+        width: 90%;
+        max-width: 500px;
+        height: 90%;
+        max-height: 600px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+      `;
+      const s = document.createElement("div");
+      s.style.cssText = `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 15px 20px;
+        border-bottom: 1px solid #e5e5e5;
+      `, s.innerHTML = `
+        <h3 style="margin: 0; font-size: 18px; font-weight: 600;">Secure Payment Authentication</h3>
+        <button id="inflowpay-3ds-close" style="background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #333;">×</button>
+      `;
+      const d = document.createElement("div");
+      d.style.cssText = `
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+      `;
+      const h = document.createElement("iframe");
+      h.src = t, h.style.cssText = `
+        width: 100%;
+        height: 100%;
+        border: none;
+      `, h.setAttribute("allow", "payment"), h.setAttribute("sandbox", "allow-forms allow-scripts allow-same-origin allow-popups"), d.appendChild(h), i.appendChild(s), i.appendChild(d), r.appendChild(i), document.body.appendChild(r);
+      const S = r.querySelector("#inflowpay-3ds-close"), E = () => {
+        r.remove(), window.removeEventListener("message", p), n(!1);
+      };
+      S?.addEventListener("click", E);
+      const p = (f) => {
+        if (!f.data) return;
+        const g = [
+          "https://dev.api.inflowpay.com",
+          "https://pre-prod.api.inflowpay.xyz",
+          "https://api.inflowpay.xyz"
+        ];
+        if (this.environment === "sandbox" || this.environment === "development") {
+          if (!(f.origin.includes("localhost") || f.origin.includes("127.0.0.1"))) {
+            if (!g.includes(f.origin)) {
+              this.config.debug && console.warn("[SDK] Rejected 3DS message from unauthorized origin:", f.origin);
+              return;
+            }
+          }
+        } else if (!g.includes(f.origin)) {
+          this.config.debug && console.warn("[SDK] Rejected 3DS message from unauthorized origin:", f.origin);
+          return;
+        }
+        const m = f.data, w = m.type === "THREE_DS_COMPLETE" || m.type === "3ds-complete", y = m.status === "success", b = m.status === "failed" || m.status === "failure";
+        if (w && y) {
+          r.remove(), window.removeEventListener("message", p), n(!0);
+          return;
+        }
+        if (y && !w) {
+          r.remove(), window.removeEventListener("message", p), n(!0);
+          return;
+        }
+        if (w && b || m.type === "3ds-failed" || b) {
+          r.remove(), window.removeEventListener("message", p), n(!1);
+          return;
+        }
+      };
+      window.addEventListener("message", p);
+    });
+  }
+  /**
+   * 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 : "*";
+  }
+  /**
+   * Detect environment from API key
+   */
+  getEnvironmentFromApiKey(t) {
+    return !t || 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";
+  }
+  /**
+   * Public method to close the iframe
+   */
+  destroy() {
+    this.close();
+  }
+}
+let fe = class {
+  constructor(t, n) {
+    this.mounted = !1;
+    let r;
+    if (typeof n.container == "string") {
+      if (r = document.querySelector(n.container), !r)
+        throw new Error(`Container not found: ${n.container}`);
+    } else
+      r = n.container;
+    this.container = r, this.sdk = new de({
+      iframeUrl: t.iframeUrl,
+      apiKey: t.apiKey,
+      container: this.container,
+      config: {
+        paymentId: n.paymentId
+      },
+      onSuccess: (i) => {
+        n.onComplete && n.onComplete({
+          status: i?.data?.transaction?.status || "CHECKOUT_SUCCESS",
+          data: i
+        });
+      },
+      onError: (i) => {
+        n.onError ? n.onError(i) : n.onComplete && n.onComplete({
+          status: "PAYMENT_FAILED",
+          error: i
+        });
+      },
+      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 G {
+  /**
+   * Initialize the InflowPay Payment SDK
+   * 
+   * @param config - SDK configuration
+   * 
+   * @example
+   * ```typescript
+   * const sdk = new PaymentSDK({
+   *   apiKey: 'inflow_pub_local_xxx'
+   * });
+   * ```
+   */
+  constructor(t) {
+    if (!t.apiKey || typeof t.apiKey != "string")
+      throw new Error("API key is required");
+    let n = t.iframeUrl;
+    const r = this.getEnvironmentFromApiKey(t.apiKey);
+    n || (r === "production" ? n = "https://api.inflowpay.xyz/iframe/checkout" : r === "preprod" ? n = "https://pre-prod.api.inflowpay.xyz/iframe/checkout" : r === "development" ? n = "https://dev.api.inflowpay.com/iframe/checkout" : n = "http://localhost:3000/iframe/checkout");
+    const i = t.debug ?? !1;
+    i && (r === "production" || r === "preprod") && console.warn("[InflowPay SDK] Debug mode is not allowed in production/pre-prod environments. Debug mode disabled.");
+    const s = i && (r === "sandbox" || r === "development");
+    this.config = {
+      apiKey: t.apiKey,
+      iframeUrl: n,
+      timeout: t.timeout ?? 3e4,
+      debug: s
+    };
+  }
+  /**
+   * 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(t) {
+    return new fe(this.config, t);
+  }
+  /**
+   * Get the iframe URL being used
+   */
+  getIframeUrl() {
+    return this.config.iframeUrl;
+  }
+  /**
+   * Get the API key
+   */
+  getApiKey() {
+    return this.config.apiKey;
+  }
+  /**
+   * Auto-detect environment from API key
+   */
+  getEnvironmentFromApiKey(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";
+  }
+}
+const L = ae(null);
+function pe({
+  config: l,
+  children: t
+}) {
+  const [n] = H(() => {
+    const r = {
+      apiKey: l.apiKey,
+      iframeUrl: l.iframeUrl,
+      timeout: l.timeout,
+      debug: l.debug
+    };
+    return new G(r);
+  });
+  return /* @__PURE__ */ V.jsx(L.Provider, { value: { sdk: n }, children: t });
+}
+function ge() {
+  const l = J(L);
+  if (!l)
+    throw new Error("useInflowPay must be used within InflowPayProvider");
+  return l.sdk;
+}
+function Ee({
+  paymentId: l,
+  onReady: t,
+  onChange: n,
+  onComplete: r,
+  onError: i,
+  buttonText: s,
+  buttonStyle: d,
+  style: h,
+  placeholders: S,
+  config: E
+}) {
+  const p = J(L), f = K(null), g = K(null), [m, w] = H(!1), y = p?.sdk || (E ? new G({
+    apiKey: E.apiKey,
+    iframeUrl: E.iframeUrl,
+    timeout: E.timeout,
+    debug: E.debug
+  }) : null);
+  if (!y)
+    throw new Error("CardElement must be used within InflowPayProvider or have a config prop");
+  return I(() => {
+    if (!f.current || m)
+      return;
+    f.current.id || (f.current.id = `inflowpay-card-element-${Date.now()}`);
+    const b = {
+      container: f.current,
+      paymentId: l,
+      onComplete: (v) => {
+        r && r(v);
+      },
+      onError: (v) => {
+        i ? i(v) : r && r({
+          status: "PAYMENT_FAILED",
+          error: v
+        });
+      },
+      onClose: () => {
+      }
+    }, R = y.createCardElement(b);
+    if (g.current = R, R.mount(), w(!0), t) {
+      const v = setTimeout(() => {
+        t();
+      }, 100);
+      return () => clearTimeout(v);
+    }
+  }, [l, y, m, r, i, t]), I(() => {
+    n && m && n({ complete: !1 });
+  }, [m, n]), I(() => () => {
+    g.current && (g.current.destroy(), g.current = null);
+  }, []), /* @__PURE__ */ V.jsx(
+    "div",
+    {
+      ref: f,
+      style: {
+        width: "100%",
+        minHeight: "300px",
+        position: "relative",
+        ...h
+      }
+    }
+  );
+}
+export {
+  Ee as CardElement,
+  pe as InflowPayProvider,
+  ge as useInflowPay
+};
+//# sourceMappingURL=react.esm.js.map