@inflow_pay/sdk 0.0.1 → 0.2.0

package/dist/react.esm.js

@@ -1,747 +1,92 @@
-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
+import { jsx as v } from "react/jsx-runtime";
+import { createContext as D, useState as x, useContext as I, useRef as y, useEffect as w } from "react";
+import { P as k } from "./payment-sdk-DCTbabp6.mjs";
+const P = D(null);
+function S({
+  config: e,
+  children: n
 }) {
-  const [n] = H(() => {
-    const r = {
-      apiKey: l.apiKey,
-      iframeUrl: l.iframeUrl,
-      timeout: l.timeout,
-      debug: l.debug
+  const [u] = x(() => {
+    const t = {
+      apiKey: e.apiKey,
+      iframeUrl: e.iframeUrl,
+      timeout: e.timeout,
+      debug: e.debug
     };
-    return new G(r);
+    return new k(t);
   });
-  return /* @__PURE__ */ V.jsx(L.Provider, { value: { sdk: n }, children: t });
+  return /* @__PURE__ */ v(P.Provider, { value: { sdk: u }, children: n });
 }
-function ge() {
-  const l = J(L);
-  if (!l)
+function j() {
+  const e = I(P);
+  if (!e)
     throw new Error("useInflowPay must be used within InflowPayProvider");
-  return l.sdk;
+  return e.sdk;
 }
-function Ee({
-  paymentId: l,
-  onReady: t,
-  onChange: n,
-  onComplete: r,
-  onError: i,
-  buttonText: s,
-  buttonStyle: d,
-  style: h,
-  placeholders: S,
-  config: E
+function F({
+  paymentId: e,
+  onReady: n,
+  onChange: u,
+  onComplete: t,
+  onError: f,
+  style: s,
+  buttonText: a,
+  placeholders: l,
+  config: i
 }) {
-  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
+  const K = I(P), o = y(null), c = y(null), [m, b] = x(!1), d = K?.sdk || (i ? new k({
+    apiKey: i.apiKey,
+    iframeUrl: i.iframeUrl,
+    timeout: i.timeout,
+    debug: i.debug
   }) : null);
-  if (!y)
+  if (!d)
     throw new Error("CardElement must be used within InflowPayProvider or have a config prop");
-  return I(() => {
-    if (!f.current || m)
+  return w(() => {
+    if (!o.current)
       return;
-    f.current.id || (f.current.id = `inflowpay-card-element-${Date.now()}`);
-    const b = {
-      container: f.current,
-      paymentId: l,
-      onComplete: (v) => {
-        r && r(v);
+    o.current.id || (o.current.id = `inflowpay-card-element-${Date.now()}`);
+    const U = {
+      container: o.current,
+      paymentId: e,
+      ...s && { style: s },
+      ...a && { buttonText: a },
+      ...l && { placeholders: l },
+      onComplete: (r) => {
+        t && t(r);
       },
-      onError: (v) => {
-        i ? i(v) : r && r({
+      onError: (r) => {
+        f ? f(r) : t && t({
           status: "PAYMENT_FAILED",
-          error: v
+          error: r
         });
       },
       onClose: () => {
       }
-    }, R = y.createCardElement(b);
-    if (g.current = R, R.mount(), w(!0), t) {
-      const v = setTimeout(() => {
-        t();
+    }, E = d.createCardElement(U);
+    if (c.current = E, E.mount(), b(!0), n) {
+      const r = setTimeout(() => {
+        n();
       }, 100);
-      return () => clearTimeout(v);
+      return () => clearTimeout(r);
     }
-  }, [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(
+  }, [e, d, m, t, f, n, s, a, l]), w(() => {
+    u && m && u({ complete: !1 });
+  }, [m, u]), w(() => () => {
+    c.current && (c.current.destroy(), c.current = null);
+  }, []), /* @__PURE__ */ v(
     "div",
     {
-      ref: f,
+      ref: o,
       style: {
-        width: "100%",
-        minHeight: "300px",
-        position: "relative",
-        ...h
+        width: s?.fillParent ? "100%" : "344px"
       }
     }
   );
 }
 export {
-  Ee as CardElement,
-  pe as InflowPayProvider,
-  ge as useInflowPay
+  F as CardElement,
+  S as InflowPayProvider,
+  j as useInflowPay
 };
 //# sourceMappingURL=react.esm.js.map