@inflow_pay/sdk 1.1.0 → 1.2.0-beta.0

package/dist/payment-sdk-DqfuWSo1.mjs

@@ -0,0 +1,661 @@
+import { createContext as e, useContext as t, useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/types.ts
+var o = /* @__PURE__ */ function(e) {
+	return e.SUCCESS = "SUCCESS", e.FAILED = "FAILED", e;
+}({}), s = /* @__PURE__ */ function(e) {
+	return e.THREE_DS_FAILED = "THREE_DS_FAILED", e.PAYMENT_PROCESSING_ERROR = "PAYMENT_PROCESSING_ERROR", e;
+}({}), c = e(null);
+function l({ config: e, children: t }) {
+	let [n] = i(() => new Z({
+		publicKey: e.publicKey,
+		locale: e.locale
+	}));
+	return /* @__PURE__ */ a(c.Provider, {
+		value: { sdk: n },
+		children: t
+	});
+}
+function u() {
+	let e = t(c);
+	if (!e) throw Error("useInflowPay must be used within InflowPayProvider");
+	return e.sdk;
+}
+function d(e) {
+	let { paymentId: s, setupId: l, onReady: u, onChange: d, onComplete: f, onError: p, style: m, buttonText: h, placeholders: g, showDefaultSuccessUI: _, config: v } = e, y = t(c), b = r(null), x = r(null), [S, C] = i(!1), w = y?.sdk || (v ? new Z({
+		publicKey: v.publicKey,
+		locale: v.locale
+	}) : null);
+	if (!w) throw Error("CardElement must be used within InflowPayProvider or have a config prop");
+	return n(() => {
+		if (!b.current) return;
+		b.current.id || (b.current.id = `inflowpay-card-element-${Date.now()}`);
+		let e = {
+			container: b.current,
+			...s && { paymentId: s },
+			...l && { setupId: l },
+			...m && { style: m },
+			...h && { buttonText: h },
+			...g && { placeholders: g },
+			..._ !== void 0 && { showDefaultSuccessUI: _ },
+			onComplete: (e) => {
+				f && f(e);
+			},
+			onError: (e) => {
+				p ? p(e) : f && f(l ? {
+					status: o.FAILED,
+					setupId: l,
+					error: e
+				} : {
+					status: o.FAILED,
+					paymentId: s,
+					error: e
+				});
+			},
+			onClose: () => {}
+		}, t = w.createCardElement(e);
+		if (x.current = t, t.mount(), C(!0), u) {
+			let e = setTimeout(() => {
+				u();
+			}, 100);
+			return () => clearTimeout(e);
+		}
+	}, [
+		s,
+		l,
+		w,
+		f,
+		p,
+		u,
+		m,
+		h,
+		g,
+		_
+	]), n(() => {
+		d && S && d({ complete: !1 });
+	}, [S, d]), n(() => () => {
+		x.current && (x.current.destroy(), x.current = null);
+	}, []), /* @__PURE__ */ a("div", {
+		ref: b,
+		style: { width: m?.fillParent ? "100%" : "344px" }
+	});
+}
+//#endregion
+//#region src/constants/sdk-constants.ts
+var f = {
+	OVERLAY: 999999,
+	MODAL: 1e6,
+	LOADER: 1e3
+}, p = {
+	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"
+}, m = [
+	"https://dev.api.inflowpay.xyz",
+	"https://pre-prod.api.inflowpay.xyz",
+	"https://api.inflowpay.xyz"
+], h = {
+	OVERLAY: "inflowpay-sdk-overlay",
+	LOADER: "inflowpay-loader",
+	LOADER_STYLES: "inflowpay-loader-styles",
+	THREE_DS_OVERLAY: "inflowpay-3ds-overlay",
+	THREE_DS_CLOSE: "inflowpay-3ds-close"
+}, g = {
+	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"
+};
+//#endregion
+//#region src/ui/styles.ts
+function _(e) {
+	return {
+		inputBgColor: e ? "#2d2d2d" : "#F5F5F5",
+		shimmerBase: e ? "#3d3d3d" : "#E5E5E5",
+		shimmerLight: e ? "#4d4d4d" : "#F0F0F0"
+	};
+}
+function v(e) {
+	return `linear-gradient(90deg, ${e.shimmerBase} 25%, ${e.shimmerLight} 50%, ${e.shimmerBase} 75%)`;
+}
+function y() {
+	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: ${f.OVERLAY};
+  `;
+}
+function b() {
+	return `
+    position: relative;
+    width: ${p.CONTAINER_WIDTH_PERCENT};
+    max-width: ${p.CONTAINER_MAX_WIDTH};
+    height: ${p.CONTAINER_HEIGHT_PERCENT};
+    max-height: ${p.CONTAINER_MAX_HEIGHT};
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  `;
+}
+function x() {
+	return `
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: ${p.BUTTON_SIZE}px;
+    height: ${p.BUTTON_SIZE}px;
+    border: none;
+    background: transparent;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: ${f.MODAL};
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+}
+function S() {
+	return "\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 8px;\n  ";
+}
+function C(e) {
+	return `
+    width: ${e ? "100%" : p.DEFAULT_IFRAME_WIDTH};
+    max-width: ${e ? "none" : "100%"};
+    height: ${p.MIN_HEIGHT}px;
+    min-height: ${p.MIN_HEIGHT}px;
+    border: none;
+    display: block;
+    transition: height 0.2s ease;
+  `;
+}
+function w() {
+	return `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: ${f.LOADER};
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `;
+}
+function T(e) {
+	return `
+    width: ${e ? "100%" : p.DEFAULT_IFRAME_WIDTH};
+    max-width: 100%;
+    margin: 0 auto;
+  `;
+}
+function E(e) {
+	return `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background-color: ${e};
+    padding: 8px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  `;
+}
+function D(e) {
+	return `
+    background: ${e};
+    background-size: 200% 100%;
+    animation: inflowpay-shimmer 1.5s infinite;
+  `;
+}
+function O(e) {
+	return `
+    flex: 1;
+    min-width: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${D(e)}
+  `;
+}
+function k(e) {
+	return `
+    width: 21.5%;
+    flex-shrink: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${D(e)}
+  `;
+}
+function A(e) {
+	return `
+    width: 17.5%;
+    flex-shrink: 0;
+    height: 32px;
+    border-radius: 6px;
+    ${D(e)}
+  `;
+}
+function j(e) {
+	return `
+    width: 100%;
+    height: 42px;
+    border-radius: 8px;
+    ${D(e)}
+    margin-bottom: 16px;
+  `;
+}
+function M() {
+	return "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    width: 100%;\n    margin-top: 16px;\n  ";
+}
+function N(e) {
+	return `
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    ${D(e)}
+  `;
+}
+function P(e) {
+	return `
+    width: 80%;
+    height: 16px;
+    border-radius: 4px;
+    ${D(e)}
+  `;
+}
+var F = "\n  @keyframes inflowpay-shimmer {\n    0% {\n      background-position: -200% 0;\n    }\n    100% {\n      background-position: 200% 0;\n    }\n  }\n";
+function I() {
+	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: ${f.OVERLAY};
+  `;
+}
+function L() {
+	return `
+    position: relative;
+    width: ${p.CONTAINER_WIDTH_PERCENT};
+    max-width: ${p.CONTAINER_MAX_WIDTH};
+    height: ${p.CONTAINER_HEIGHT_PERCENT};
+    max-height: ${p.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 R() {
+	return "\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 15px 20px;\n    border-bottom: 1px solid #e5e5e5;\n  ";
+}
+function z() {
+	return "\n    flex: 1;\n    position: relative;\n    overflow-y: auto;\n    overflow-x: hidden;\n  ";
+}
+function B() {
+	return "\n    width: 100%;\n    height: 100%;\n    border: none;\n  ";
+}
+//#endregion
+//#region src/ui/loader-manager.ts
+var V = class {
+	constructor(e, t = {}) {
+		this.loaderElement = null, this.container = e, this.config = t;
+	}
+	show(e) {
+		e && (e.style.display = "none");
+		let t = _(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches), n = v(t), r = document.createElement("div");
+		r.id = h.LOADER, r.style.cssText = w();
+		let i = document.createElement("div");
+		i.style.cssText = T(this.config.fillParent || !1);
+		let a = document.createElement("div");
+		a.style.cssText = E(t.inputBgColor);
+		let o = document.createElement("div");
+		o.className = "inflowpay-skeleton", o.style.cssText = O(n);
+		let s = document.createElement("div");
+		s.className = "inflowpay-skeleton", s.style.cssText = k(n);
+		let c = document.createElement("div");
+		c.className = "inflowpay-skeleton", c.style.cssText = A(n), a.appendChild(o), a.appendChild(s), a.appendChild(c);
+		let l = document.createElement("div");
+		l.className = "inflowpay-skeleton", l.style.cssText = j(n);
+		let u = document.createElement("div");
+		u.style.cssText = M();
+		let d = document.createElement("div");
+		d.className = "inflowpay-skeleton", d.style.cssText = N(n);
+		let f = document.createElement("div");
+		f.className = "inflowpay-skeleton", f.style.cssText = P(n), u.appendChild(d), u.appendChild(f), i.appendChild(a), i.appendChild(l), i.appendChild(u), r.appendChild(i), this.injectShimmerStyles(), this.container.appendChild(r), this.loaderElement = r;
+	}
+	hide(e) {
+		let t = document.getElementById(h.LOADER);
+		t && t.remove(), this.loaderElement = null, e && (e.style.display = "");
+	}
+	injectShimmerStyles() {
+		if (!document.getElementById(h.LOADER_STYLES)) {
+			let e = document.createElement("style");
+			e.id = h.LOADER_STYLES, e.textContent = F, document.head.appendChild(e);
+		}
+	}
+}, H, U = class e {
+	constructor(e) {
+		this.config = e;
+	}
+	open(t, n, r) {
+		return this.config.debug && (console.log("[SDK] open3DSModal called with URL:", t), console.log("[SDK] Session ID:", n, "Payment ID:", r)), e.activeModal && (console.warn("[SDK] Closing existing modal before opening new one"), e.activeModal.overlay.remove(), e.activeModal = null), new Promise((i) => {
+			let a = document.createElement("div");
+			a.id = h.THREE_DS_OVERLAY, a.style.cssText = I();
+			let o = document.createElement("div");
+			o.style.cssText = L();
+			let s = document.createElement("div");
+			s.style.cssText = R(), s.innerHTML = "\n        <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Secure Payment Authentication</h3>\n      ";
+			let c = document.createElement("div");
+			c.style.cssText = z();
+			let l = document.createElement("iframe");
+			l.src = t, l.style.cssText = B(), l.setAttribute("allow", "payment"), l.setAttribute("sandbox", "allow-forms allow-scripts allow-same-origin allow-popups"), c.appendChild(l), o.appendChild(s), o.appendChild(c), a.appendChild(o), document.body.appendChild(a), e.activeModal = {
+				overlay: a,
+				sessionId: n,
+				paymentId: r
+			};
+			let u = (e) => {
+				if (!e.data) return;
+				if (!this.isAllowedOrigin(e.origin)) {
+					this.config.debug && console.warn("[SDK] Rejected 3DS message from unauthorized origin:", e.origin);
+					return;
+				}
+				let t = e.data, n = t.type === "THREE_DS_COMPLETE" || t.type === "3ds-complete", r = t.status === "success", o = t.status === "failed" || t.status === "failure";
+				if (n && r) {
+					a.remove(), window.removeEventListener("message", u), i(!0);
+					return;
+				}
+				if (r && !n) {
+					a.remove(), window.removeEventListener("message", u), i(!0);
+					return;
+				}
+				if (n && o || t.type === "3ds-failed" || o) {
+					a.remove(), window.removeEventListener("message", u), i(!1);
+					return;
+				}
+			};
+			window.addEventListener("message", u);
+		});
+	}
+	static close(t) {
+		if (!e.activeModal) {
+			console.log("[SDK] No active modal to close");
+			return;
+		}
+		if (t && e.activeModal.sessionId !== t) {
+			console.warn(`[SDK] Session ID mismatch: webhook for ${t}, but modal is for ${e.activeModal.sessionId}. Ignoring close request.`);
+			return;
+		}
+		console.log("[SDK] Closing modal for session:", t || e.activeModal.sessionId), e.activeModal.overlay.remove(), e.activeModal = null;
+	}
+	static isModalOpen() {
+		return e.activeModal !== null;
+	}
+	static getCurrentSessionId() {
+		return e.activeModal?.sessionId || null;
+	}
+	isAllowedOrigin(e) {
+		return !!(m.includes(e) || (this.config.environment === "sandbox" || this.config.environment === "development") && (e.includes("localhost") || e.includes("127.0.0.1")));
+	}
+};
+H = U, H.activeModal = null;
+//#endregion
+//#region src/ui/overlay-manager.ts
+var W = class {
+	static createOverlay(e, t) {
+		let n = document.createElement("div");
+		n.id = h.OVERLAY, n.style.cssText = y();
+		let r = document.createElement("div");
+		r.style.cssText = b();
+		let i = document.createElement("button");
+		i.innerHTML = "×", i.style.cssText = x(), i.onclick = t;
+		let a = document.createElement("iframe");
+		return a.src = e, a.style.cssText = S(), a.setAttribute("allow", "payment"), r.appendChild(i), r.appendChild(a), n.appendChild(r), n.addEventListener("click", (e) => {
+			e.target === n && t();
+		}), {
+			overlay: n,
+			container: r,
+			iframe: a
+		};
+	}
+	static removeOverlay() {
+		let e = document.getElementById(h.OVERLAY);
+		e && e.remove();
+	}
+}, G = [
+	"en",
+	"de",
+	"es",
+	"fr",
+	"it",
+	"nl",
+	"pl",
+	"pt"
+];
+function K() {
+	if (typeof window > "u") return "en";
+	try {
+		let e = (navigator.language || navigator.userLanguage || "").split("-")[0].toLowerCase();
+		if (G.includes(e)) return e;
+	} catch {}
+	return "en";
+}
+function q(e) {
+	return e.includes("_local_") || e.startsWith("inflow_local_") ? "sandbox" : e.includes("_prod_") && !e.includes("_preprod_") ? "production" : e.includes("_preprod_") || e.startsWith("inflow_preprod_") ? "preprod" : e.includes("_dev_") ? "development" : "sandbox";
+}
+function J(e) {
+	switch (q(e)) {
+		case "production": return g.PRODUCTION;
+		case "preprod": return g.PREPROD;
+		case "development": return g.DEVELOPMENT;
+		default: return g.LOCAL;
+	}
+}
+//#endregion
+//#region src/sdk.ts
+var Y = class {
+	constructor(e) {
+		if (this.iframe = null, this.messageListener = null, this.containerElement = null, this.loaderManager = null, this.config = e, this.iframeUrl = e.iframeUrl || J(e.publicKey || ""), this.environment = q(e.publicKey || ""), this.usePopup = !e.container, e.container) if (typeof e.container == "string") {
+			if (this.containerElement = document.querySelector(e.container), !this.containerElement) throw Error(`Container not found: ${e.container}`);
+		} else this.containerElement = e.container;
+		this.modalManager = new U({
+			environment: this.environment,
+			debug: this.config.debug
+		});
+	}
+	init() {
+		this.iframe || (this.createIframe(), this.addMessageListener());
+	}
+	createIframe() {
+		let 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.config?.setupId && e.searchParams.set("setupId", this.config.config.setupId), this.config.locale && e.searchParams.set("locale", this.config.locale);
+		let t = e.toString();
+		if (this.usePopup) {
+			let { overlay: e, container: n, iframe: r } = W.createOverlay(t, () => this.close());
+			this.iframe = r, document.body.appendChild(e), this.loaderManager = new V(n, { fillParent: this.config.config?.style?.fillParent }), this.loaderManager.show(this.iframe);
+		} else {
+			if (!this.containerElement) throw Error("Container element is required for inline mode");
+			if (this.containerElement.innerHTML = "", this.containerElement instanceof HTMLElement) {
+				let e = this.containerElement.getAttribute("style") || "";
+				e.includes("min-height") || (this.containerElement.style.minHeight = `${p.MIN_HEIGHT}px`), e.includes("position") || (this.containerElement.style.position = "relative"), e.includes("overflow") || (this.containerElement.style.overflow = "hidden");
+			}
+			this.iframe = document.createElement("iframe"), this.iframe.src = t, this.iframe.style.cssText = C(this.config.config?.style?.fillParent || !1), this.iframe.setAttribute("allow", "payment"), this.containerElement.appendChild(this.iframe), this.loaderManager = new V(this.containerElement, { fillParent: this.config.config?.style?.fillParent }), this.loaderManager.show(this.iframe);
+		}
+	}
+	addMessageListener() {
+		this.messageListener = (e) => {
+			let t = new URL(this.iframeUrl).origin, n = e.origin === t;
+			if (n || ((this.environment === "sandbox" || this.environment === "development") && (n = (e.origin.includes("localhost") || e.origin.includes("127.0.0.1")) && (t.includes("localhost") || t.includes("127.0.0.1"))), n || (n = e.origin === "https://dev.iframe.inflowpay.com" || e.origin === "https://pre-prod.iframe.inflowpay.xyz" || e.origin === "https://iframe.inflowpay.xyz")), !n) {
+				this.config.debug && console.warn("[SDK] Rejected message from unauthorized origin:", e.origin);
+				return;
+			}
+			let r = e.data;
+			if (!(!r || !r.type)) switch (r.type) {
+				case "iframe-ready":
+					this.loaderManager && this.loaderManager.hide(this.iframe || void 0), this.sendConfigToIframe();
+					break;
+				case "content-height":
+					r.height && this.iframe && (this.iframe.style.height = `${r.height}px`, this.containerElement && (this.containerElement.style.minHeight = `${r.height}px`));
+					break;
+				case "close":
+					this.close();
+					break;
+				case "success":
+					this.config.onSuccess && this.config.onSuccess(r.data);
+					break;
+				case "error":
+					this.config.onError && this.config.onError(r.data);
+					break;
+				case "3ds-required":
+					if (this.config.debug && (console.log("[SDK] Received 3DS request:", r.threeDsSessionUrl), console.log("[SDK] Session ID:", r.sessionId)), r.threeDsSessionUrl) {
+						let e = r.sessionId, t = r.paymentId || r.setupId || this.config.config?.paymentId || this.config.config?.setupId || "";
+						r.sessionId || console.warn("[SDK] No session ID provided by iframe"), this.config.debug && console.log("[SDK] Opening 3DS modal with session ID:", e), this.modalManager.open(r.threeDsSessionUrl, e, t).then((e) => {
+							this.config.debug && console.log("[SDK] 3DS modal closed, result:", e);
+						});
+					} 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:", r.sessionId)), U.close(r.sessionId);
+					break;
+				case "3ds-failed":
+					this.config.debug && (console.log("[SDK] 3DS failed, closing modal..."), console.log("[SDK] Session ID from webhook:", r.sessionId)), U.close(r.sessionId);
+					break;
+				default: this.config.debug && console.log("SDK: Received message:", r);
+			}
+		}, window.addEventListener("message", this.messageListener);
+	}
+	sendConfigToIframe() {
+		if (!this.iframe || !this.iframe.contentWindow) {
+			this.iframe && (this.iframe.onload = () => {
+				this.sendConfigToIframe();
+			});
+			return;
+		}
+		let e = {
+			type: "sdkData",
+			config: {
+				...this.config.config || {},
+				paymentId: this.config.config?.paymentId,
+				setupId: this.config.config?.setupId
+			},
+			data: { publicKey: this.config.publicKey }
+		}, t = this.getTargetOrigin();
+		this.iframe.contentWindow.postMessage(e, t);
+	}
+	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 ? W.removeOverlay() : this.containerElement && (this.containerElement.innerHTML = ""), this.iframe = null;
+	}
+	switchToSuccessState(e) {
+		if (this.loaderManager && (this.loaderManager.hide(this.iframe || void 0), this.loaderManager = null), this.usePopup) {
+			this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null), W.removeOverlay(), this.iframe = null;
+			return;
+		}
+		!(this.config.config?.showDefaultSuccessUI ?? !0) && this.containerElement && (this.containerElement.innerHTML = "", this.iframe = null);
+	}
+	getTargetOrigin() {
+		return this.environment === "production" || this.environment === "preprod" ? new URL(this.iframeUrl).origin : "*";
+	}
+	destroy() {
+		this.close();
+	}
+}, X = class {
+	constructor(e, t) {
+		if (this.mounted = !1, !t.paymentId && !t.setupId) throw Error("CardElement: paymentId or setupId is required");
+		if (t.paymentId && t.setupId) throw Error("CardElement: paymentId and setupId are mutually exclusive");
+		let n;
+		if (typeof t.container == "string") {
+			if (n = document.querySelector(t.container), !n) throw Error(`Container not found: ${t.container}`);
+		} else n = t.container;
+		this.container = n;
+		let r = !!t.setupId;
+		this.sdk = new Y({
+			publicKey: e.publicKey,
+			container: this.container,
+			locale: e.locale ?? K(),
+			config: {
+				...t.paymentId && { paymentId: t.paymentId },
+				...t.setupId && { setupId: t.setupId },
+				...t.style && { style: t.style },
+				...t.buttonText && { buttonText: t.buttonText },
+				...t.placeholders && { placeholders: t.placeholders },
+				...t.showDefaultSuccessUI !== void 0 && { showDefaultSuccessUI: t.showDefaultSuccessUI }
+			},
+			onSuccess: (e) => {
+				t.onComplete && (r ? t.onComplete({
+					status: o.SUCCESS,
+					setupId: t.setupId
+				}) : t.onComplete({
+					status: o.SUCCESS,
+					paymentId: t.paymentId
+				})), this.sdk.switchToSuccessState(e);
+			},
+			onError: (e) => {
+				t.onError ? t.onError(e) : t.onComplete && (r ? t.onComplete({
+					status: o.FAILED,
+					setupId: t.setupId,
+					error: e
+				}) : t.onComplete({
+					status: o.FAILED,
+					paymentId: t.paymentId,
+					error: e
+				}));
+			},
+			onClose: () => {
+				t.onClose && t.onClose();
+			}
+		});
+	}
+	mount() {
+		if (this.mounted) throw Error("CardElement is already mounted");
+		this.sdk.init(), this.mounted = !0;
+	}
+	destroy() {
+		this.mounted && (this.sdk.destroy(), this.mounted = !1);
+	}
+}, Z = class {
+	constructor(e) {
+		if (!e.publicKey || typeof e.publicKey != "string") throw Error("API key is required");
+		this.config = e, this.timeout = 3e4, this.iframeUrl = J(e.publicKey);
+		let t = q(e.publicKey);
+		this.debug = t === "sandbox" || t === "development";
+	}
+	createCardElement(e) {
+		return new X({
+			publicKey: this.config.publicKey,
+			iframeUrl: this.iframeUrl,
+			timeout: this.timeout,
+			debug: this.debug,
+			locale: this.config.locale
+		}, e);
+	}
+	getIframeUrl() {
+		return this.iframeUrl;
+	}
+	getApiKey() {
+		return this.config.publicKey;
+	}
+};
+//#endregion
+export { u as a, l as i, X as n, s as o, d as r, o as s, Z as t };
+
+//# sourceMappingURL=payment-sdk-DqfuWSo1.mjs.map