@monei-js/components 1.7.9 → 2.0.0

package/dist/index.js

@@ -1,8 +1,1597 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./components.cjs.production.min.js')
-} else {
-  module.exports = require('./components.cjs.development.js')
+import { t as __exportAll } from "./chunk.js";
+import { Thumbmark } from "@thumbmarkjs/thumbmarkjs";
+import { WindowMessenger, connect } from "penpal";
+//#region ../shared/lib/utils.ts
+/** Parse a CSS px value — accepts "10px", "10", or 10. Returns number or defaultValue. */
+const parsePx = (value, defaultValue) => {
+	if (value == null) return defaultValue;
+	if (typeof value === "number") return value;
+	const parsed = parseInt(value);
+	return isNaN(parsed) ? defaultValue : parsed;
+};
+/** Convert a value to CSS px string — 10 → "10px", "10px" → "10px", undefined → defaultValue */
+const toCssPx = (value, defaultValue) => {
+	if (value == null) return defaultValue;
+	return typeof value === "number" ? `${value}px` : value || defaultValue;
+};
+//#endregion
+//#region src/utils.ts
+var utils_exports = /* @__PURE__ */ __exportAll({
+	fixLocalstorage: () => fixLocalstorage,
+	getClientEnv: () => getClientEnv,
+	getClientFingerprint: () => getClientFingerprint,
+	isMethodSupported: () => isMethodSupported,
+	loadScript: () => loadScript,
+	parsePx: () => parsePx,
+	stringify: () => stringify,
+	toCssPx: () => toCssPx,
+	transformStyle: () => transformStyle,
+	validateComponentProps: () => validateComponentProps,
+	withError: () => withError
+});
+const transformStyle = (style) => {
+	return Object.keys(style).reduce((result, prop) => {
+		if (typeof style[prop] === "string") result[prop] = style[prop];
+		else result[prop] = `${style[prop]}px`;
+		return result;
+	}, {});
+};
+const loadScript = (src, nonce, dataset, forceReload) => {
+	return new Promise((resolve, reject) => {
+		const existingScript = Array.from(document.scripts).find((s) => s.src === src);
+		if (existingScript) if (forceReload) existingScript.remove();
+		else {
+			resolve(existingScript);
+			return;
+		}
+		const script = document.createElement("script");
+		script.src = src;
+		script.onload = () => resolve(script);
+		script.onerror = (error) => reject(error);
+		if (nonce) script.setAttribute("nonce", nonce);
+		if (dataset) Object.keys(dataset).forEach((key) => {
+			if (dataset[key]) script.dataset[key] = dataset[key];
+		});
+		document.head.appendChild(script);
+	});
+};
+const stringify = (obj) => {
+	return Object.keys(obj).reduce((result, key) => {
+		if (obj[key] !== void 0) result.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`);
+		return result;
+	}, []).join("&");
+};
+const fixLocalstorage = () => {
+	let localStorage;
+	try {
+		({localStorage} = window);
+	} catch (_error) {
+		const localStorageMock = (() => {
+			let store = /* @__PURE__ */ new Map();
+			return {
+				getItem(key) {
+					return store.get(key);
+				},
+				setItem: function(key, value) {
+					store.set(key, value);
+				},
+				clear: function() {
+					store = /* @__PURE__ */ new Map();
+				},
+				removeItem: function(key) {
+					store.delete(key);
+				}
+			};
+		})();
+		Object.defineProperty(window, "localStorage", { value: localStorageMock });
+		localStorage = localStorageMock;
+	}
+	return localStorage;
+};
+const getLanguage = () => {
+	let lang;
+	const localStorage = fixLocalstorage();
+	try {
+		lang = localStorage.getItem("i18nextLng");
+	} catch (_error) {}
+	if (lang) return lang.split("-")[0];
+	return "";
+};
+const safe = (fn) => {
+	try {
+		return String(fn() ?? "");
+	} catch {
+		return "";
+	}
+};
+const getClientEnv = () => {
+	const env = [
+		window.screen.colorDepth,
+		window.screen.height,
+		window.screen.width,
+		(/* @__PURE__ */ new Date()).getTimezoneOffset(),
+		getLanguage(),
+		safe(() => Intl.DateTimeFormat().resolvedOptions().timeZone),
+		safe(() => window.devicePixelRatio),
+		safe(() => navigator.hardwareConcurrency),
+		safe(() => navigator.deviceMemory),
+		safe(() => navigator.maxTouchPoints),
+		safe(() => navigator.platform),
+		safe(() => navigator.languages?.join(","))
+	].join("|");
+	return window.btoa(env);
+};
+const FINGERPRINT_SEED_KEY = "_monei_fp";
+const randomHex = (length) => {
+	if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+		const bytes = new Uint8Array(length);
+		crypto.getRandomValues(bytes);
+		return Array.from(bytes, (b) => (b % 16).toString(16)).join("");
+	}
+	return Array.from({ length }, () => Math.floor(Math.random() * 16).toString(16)).join("");
+};
+let cachedSeed = null;
+const getPersistentSeed = async () => {
+	if (cachedSeed) return { seed: cachedSeed };
+	try {
+		const localStorage = fixLocalstorage();
+		cachedSeed = localStorage.getItem(FINGERPRINT_SEED_KEY);
+		if (!cachedSeed) {
+			cachedSeed = randomHex(32);
+			try {
+				localStorage.setItem(FINGERPRINT_SEED_KEY, cachedSeed);
+			} catch {}
+		}
+	} catch {
+		cachedSeed = randomHex(32);
+	}
+	return { seed: cachedSeed };
+};
+const thumbmark = new Thumbmark({ logging: false });
+thumbmark.includeComponent("persistent_seed", getPersistentSeed);
+const getClientFingerprint = async () => {
+	const [, result] = await withError(thumbmark.get());
+	return result?.thumbmark ?? "";
+};
+const withError = async (p) => {
+	try {
+		return [void 0, await p];
+	} catch (err) {
+		return [err, void 0];
+	}
+};
+const isMethodSupported = (config, paymentMethod) => {
+	return config.paymentMethods && config.paymentMethods.includes(paymentMethod);
+};
+const validateComponentProps = ({ props }) => {
+	if (props.paymentId) return;
+	if (props.accountId && props.amount && props.currency) return;
+	throw new Error("You need to provide paymentId or accountId amount and currency");
+};
+//#endregion
+//#region src/config.ts
+const stage = import.meta.env?.STAGE || "local";
+const domain = import.meta.env?.DOMAIN || "http://localhost:3001";
+const version = import.meta.env?.VERSION || "v1";
+const globalConfig = {
+	domain,
+	version,
+	stage,
+	isProduction: stage === "prod",
+	paymentPageUrl: `${domain}/${version}/payment-page/`,
+	cardInputUrl: `${domain}/${version}/inner-card-input/`,
+	paymentModalUrl: `${domain}/${version}/inner-payment-modal/`,
+	paypalUrl: `${domain}/${version}/inner-paypal/`,
+	bizumUrl: `${domain}/${version}/inner-bizum/`,
+	bizumButtonUrl: `${domain}/${version}/inner-bizum-button/`,
+	paymentRequestUrl: `${domain}/${version}/inner-payment-request/`
+};
+const stageConfig = {
+	local: {
+		domain: "http://card-input.localhost:1355",
+		paymentPageUrl: `http://payment-page.localhost:1355/`,
+		cardInputUrl: `http://card-input.localhost:1355/`,
+		paymentModalUrl: `http://payment-modal.localhost:1355/`,
+		paypalUrl: `http://paypal.localhost:1355/`,
+		bizumUrl: `http://bizum.localhost:1355/`,
+		bizumButtonUrl: `http://bizum-button.localhost:1355/`,
+		paymentRequestUrl: `http://payment-request.localhost:1355/`,
+		apiUrl: "https://api.monei-dev.com/v1",
+		secureDomain: "https://secure.monei-dev.com",
+		rootDomain: "monei-dev.com"
+	},
+	"local-prod": {
+		domain: "http://card-input.localhost:1355",
+		paymentPageUrl: `http://payment-page.localhost:1355/`,
+		cardInputUrl: `http://card-input.localhost:1355/`,
+		paymentModalUrl: `http://payment-modal.localhost:1355/`,
+		paypalUrl: `http://paypal.localhost:1355/`,
+		bizumUrl: `http://bizum.localhost:1355/`,
+		bizumButtonUrl: `http://bizum-button.localhost:1355/`,
+		paymentRequestUrl: `http://payment-request.localhost:1355/`,
+		apiUrl: "https://api.monei.com/v1",
+		secureDomain: "https://secure.monei.com",
+		rootDomain: "monei.com"
+	},
+	tunnel: {
+		domain: "https://card-input.monei-dev-tunnel.com",
+		paymentPageUrl: `https://payment-page.monei-dev-tunnel.com/`,
+		cardInputUrl: `https://card-input.monei-dev-tunnel.com/`,
+		paymentModalUrl: `https://payment-modal.monei-dev-tunnel.com/`,
+		paypalUrl: `https://paypal.monei-dev-tunnel.com/`,
+		bizumUrl: `https://bizum.monei-dev-tunnel.com/`,
+		bizumButtonUrl: `https://bizum-button.monei-dev-tunnel.com/`,
+		paymentRequestUrl: `https://payment-request.monei-dev-tunnel.com/`,
+		apiUrl: "https://api.monei.com/v1",
+		secureDomain: "https://secure.monei.com",
+		rootDomain: "monei.com"
+	},
+	dev: {
+		apiUrl: "https://api.monei-dev.com/v1",
+		secureDomain: "https://secure.monei-dev.com",
+		rootDomain: "monei-dev.com"
+	},
+	prod: {
+		apiUrl: "https://api.monei.com/v1",
+		secureDomain: "https://secure.monei.com",
+		rootDomain: "monei.com"
+	}
+};
+const config = {
+	...globalConfig,
+	...stageConfig[stage]
+};
+//#endregion
+//#region src/api.ts
+var api_exports = /* @__PURE__ */ __exportAll({
+	confirmPayment: () => confirmPayment$1,
+	createApplePaySession: () => createApplePaySession,
+	createPayment: () => createPayment,
+	createToken: () => createToken$1,
+	getPayment: () => getPayment,
+	getPaymentMethods: () => getPaymentMethods,
+	sendPaymentReceipt: () => sendPaymentReceipt,
+	validateBizumPhone: () => validateBizumPhone
+});
+const request = async (url, { method = "GET", headers, body } = {}) => {
+	if (method === "POST") headers = {
+		"Content-Type": "application/json",
+		...headers
+	};
+	const res = await fetch(`${config.apiUrl}${url}`, {
+		method,
+		headers,
+		body: body ? JSON.stringify(body) : void 0
+	});
+	const [, result] = await withError(res.json());
+	if (!res.ok) throw result || new Error(res.statusText);
+	return result;
+};
+const pmCache = {};
+const getPaymentMethods = async ({ accountId, paymentId }) => {
+	let params;
+	if (paymentId) params = { paymentId };
+	else if (accountId) params = { accountId };
+	else throw new Error("You need to provide paymentId or accountId");
+	const query = stringify(params);
+	if (query in pmCache) return pmCache[query];
+	const promise = request(`/payment-methods?${query}`);
+	pmCache[query] = promise;
+	promise.catch(() => delete pmCache[query]);
+	return promise;
+};
+const createToken$1 = async ({ paymentMethod, paymentId, sessionId, amount, currency, accountId, transactionType }) => {
+	let body;
+	if (paymentId) body = {
+		paymentId,
+		paymentMethod
+	};
+	else if (accountId) body = {
+		accountId,
+		paymentMethod,
+		sessionId,
+		amount,
+		currency,
+		transactionType
+	};
+	else throw new Error("You need to provide paymentId or accountId");
+	const res = await request("/tokens", {
+		method: "POST",
+		headers: {
+			"X-Client-Env": getClientEnv(),
+			"X-Client-Fingerprint": await getClientFingerprint()
+		},
+		body
+	});
+	if (res.paymentToken && !res.token) res.token = res.paymentToken;
+	return res;
+};
+const getPayment = async (paymentId) => {
+	return request(`/payments/${paymentId}/client-get`);
+};
+const confirmPayment$1 = async ({ paymentId, ...body }) => {
+	return request(`/payments/${paymentId}/client-confirm`, {
+		method: "POST",
+		headers: {
+			"X-Client-Env": getClientEnv(),
+			"X-Client-Fingerprint": await getClientFingerprint()
+		},
+		body
+	});
+};
+const createPayment = async ({ signature, ...body }) => {
+	return request("/client-payments", {
+		method: "POST",
+		headers: {
+			"X-Client-Env": getClientEnv(),
+			"X-Client-Fingerprint": await getClientFingerprint(),
+			"Client-Signature": signature
+		},
+		body
+	});
+};
+const sendPaymentReceipt = async ({ paymentId, customerEmail, signature, language }) => {
+	return request(`/payments/${paymentId}/client-receipt`, {
+		method: "POST",
+		body: {
+			customerEmail,
+			signature,
+			language
+		}
+	});
+};
+const createApplePaySession = async (body) => {
+	return request(`/apple-pay/sessions`, {
+		method: "POST",
+		body
+	});
+};
+const validateBizumPhone = async (req) => {
+	return request(`/bizum/validate-phone`, {
+		method: "POST",
+		body: req
+	});
+};
+//#endregion
+//#region src/bridge/event-emitter.ts
+var EventEmitter = class {
+	constructor() {
+		this.listeners = /* @__PURE__ */ new Map();
+		this.destroyed = false;
+	}
+	on(eventName, handler) {
+		if (this.destroyed) return { cancel: () => {} };
+		let handlers = this.listeners.get(eventName);
+		if (!handlers) {
+			handlers = /* @__PURE__ */ new Set();
+			this.listeners.set(eventName, handlers);
+		}
+		handlers.add(handler);
+		return { cancel: () => {
+			handlers.delete(handler);
+		} };
+	}
+	once(eventName, handler) {
+		const wrapper = (...args) => {
+			this.off(eventName, wrapper);
+			handler(...args);
+		};
+		return this.on(eventName, wrapper);
+	}
+	trigger(eventName, ...args) {
+		if (this.destroyed) return;
+		const handlers = this.listeners.get(eventName);
+		if (!handlers) return;
+		for (const handler of handlers) try {
+			handler(...args);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+	off(eventName, handler) {
+		const handlers = this.listeners.get(eventName);
+		if (handlers) handlers.delete(handler);
+	}
+	destroy() {
+		this.destroyed = true;
+		this.listeners.clear();
+	}
+};
+//#endregion
+//#region src/bridge/drivers/react.ts
+/**
+* Creates a React driver for a bridge component.
+* Returns a forwardRef component that:
+* - On mount: creates bridge instance, renders into container div
+* - On update: calls updateProps with new props
+* - On unmount: calls destroy
+* - Exposes bridge instance via ref (needed for CardInput's createToken)
+*/
+function createReactDriver(ComponentClass) {
+	return ({ React }) => {
+		return React.forwardRef(function BridgeReactWrapper(props, ref) {
+			const containerRef = React.useRef(null);
+			const instanceRef = React.useRef(null);
+			const isMounted = React.useRef(false);
+			const prevPropsRef = React.useRef({});
+			React.useLayoutEffect(() => {
+				const el = containerRef.current;
+				if (!el) return;
+				let cancelled = false;
+				const instance = new ComponentClass({ ...props });
+				instanceRef.current = instance;
+				instance.render(el).then(() => {
+					if (cancelled) return;
+					setRef(ref, instance);
+					isMounted.current = true;
+				}).catch((err) => {
+					if (!cancelled) console.error(err);
+				});
+				return () => {
+					cancelled = true;
+					instance.destroy();
+					instanceRef.current = null;
+					isMounted.current = false;
+					setRef(ref, null);
+				};
+			}, []);
+			React.useEffect(() => {
+				if (!isMounted.current || !instanceRef.current) return;
+				if (shallowEqual$1(prevPropsRef.current, props)) return;
+				prevPropsRef.current = { ...props };
+				instanceRef.current.updateProps({ ...props }).catch(noop);
+			});
+			return React.createElement("div", { ref: containerRef });
+		});
+	};
 }
+/** Set a React ref (callback or object ref) */
+function setRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function shallowEqual$1(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (a[key] !== b[key]) return false;
+	return true;
+}
+function noop() {}
+//#endregion
+//#region src/bridge/drivers/vue.ts
+/**
+* Creates a Vue 3 driver for a bridge component.
+* Returns a Vue component options object that:
+* - On mounted: creates bridge instance, renders into template div
+* - On $attrs change: calls updateProps
+* - On unmounted: calls destroy
+* - Exposes bridge instance via template ref
+*/
+function createVue3Driver(ComponentClass) {
+	return () => ({
+		template: "<div></div>",
+		inheritAttrs: false,
+		mounted() {
+			const el = this.$el;
+			this.__bridgeInstance = new ComponentClass({ ...this.$attrs });
+			this.__bridgeInstance.render(el).catch(console.error);
+		},
+		watch: { $attrs: {
+			handler() {
+				if (this.__bridgeInstance) this.__bridgeInstance.updateProps({ ...this.$attrs }).catch(() => {});
+			},
+			deep: true
+		} },
+		unmounted() {
+			if (this.__bridgeInstance) {
+				this.__bridgeInstance.destroy();
+				this.__bridgeInstance = null;
+			}
+		}
+	});
+}
+//#endregion
+//#region src/bridge/drivers/angular.ts
+/**
+* Creates an Angular driver for a bridge component.
+* Returns an Angular module that declares a component which:
+* - On ngOnInit: creates bridge instance, renders into host element
+* - On ngDoCheck: calls updateProps when props change
+* - On ngOnDestroy: calls destroy
+*/
+function createAngularDriver(ComponentClass) {
+	return ({ Component: AngularComponent, NgModule, ElementRef, NgZone, Inject }) => {
+		class ComponentInstance {
+			constructor(elementRef, zone) {
+				this.props = {};
+				this.__bridgeInstance = null;
+				this._prevProps = {};
+				this.elementRef = elementRef;
+				this.zone = zone;
+			}
+			getProps() {
+				const wrapped = { ...this.props };
+				const { zone } = this;
+				for (const [key, value] of Object.entries(wrapped)) if (typeof value === "function") wrapped[key] = function angularZoneWrapped(...args) {
+					return zone.run(() => value.apply(this, args));
+				};
+				return wrapped;
+			}
+			ngOnInit() {
+				const el = this.elementRef.nativeElement;
+				this.__bridgeInstance = new ComponentClass(this.getProps());
+				this.__bridgeInstance.render(el).catch(console.error);
+			}
+			ngDoCheck() {
+				if (this.__bridgeInstance && !shallowEqual(this._prevProps, this.props)) {
+					this._prevProps = { ...this.props };
+					this.__bridgeInstance.updateProps(this.getProps()).catch(() => {});
+				}
+			}
+			ngOnDestroy() {
+				if (this.__bridgeInstance) {
+					this.__bridgeInstance.destroy();
+					this.__bridgeInstance = null;
+				}
+			}
+		}
+		ComponentInstance.parameters = [[new Inject(ElementRef)], [new Inject(NgZone)]];
+		ComponentInstance.annotations = [new AngularComponent({
+			selector: ComponentClass.prototype.__options?.tag || "bridge-component",
+			template: "<div></div>",
+			inputs: ["props"]
+		})];
+		class ModuleInstance {}
+		ModuleInstance.annotations = [new NgModule({
+			declarations: [ComponentInstance],
+			exports: [ComponentInstance]
+		})];
+		return ModuleInstance;
+	};
+}
+function shallowEqual(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (a[key] !== b[key]) return false;
+	return true;
+}
+//#endregion
+//#region src/bridge/drivers/index.ts
+const driverFactories = {
+	react: createReactDriver,
+	vue3: createVue3Driver,
+	angular: createAngularDriver
+};
+/**
+* Resolve a framework driver for a bridge component constructor.
+* Called by both the static and instance .driver() methods.
+*/
+function resolveDriver(name, ComponentClass, deps) {
+	const factory = driverFactories[name];
+	if (!factory) throw new Error(`Unknown driver: ${name}. Available: ${Object.keys(driverFactories).join(", ")}`);
+	return factory(ComponentClass)(deps);
+}
+//#endregion
+//#region ../shared/lib/bridge-constants.ts
+/** Protocol identifier for sync bootstrap messages between parent and child bridges */
+const BRIDGE_INIT_MSG = "__monei_bridge_init__";
+//#endregion
+//#region src/bridge/constants.ts
+/** Bridge lifecycle events (replaces zoid.EVENT) */
+const EVENT = {
+	RENDERED: "RENDERED",
+	RESIZE: "RESIZE",
+	DESTROY: "DESTROY",
+	BEFORE_CLOSE: "BEFORE_CLOSE",
+	DISPLAY: "DISPLAY"
+};
+/**
+* Lifecycle prop names filtered from dispatch.
+* These are wired to bridge events, NOT forwarded to child.
+*
+* NOTE: onError, onFocus, onLoad are NOT here — they are user-facing
+* props that merchants pass and children call.
+*/
+const LIFECYCLE_PROPS = new Set([
+	"onClose",
+	"onDestroy",
+	"onRendered",
+	"onRender",
+	"onDisplay",
+	"onResize",
+	"onProps"
+]);
+//#endregion
+//#region src/bridge/props.ts
+/**
+* DOM utility: remove element from DOM.
+* Replaces belter.destroyElement().
+*/
+function destroyElement(el) {
+	if (el) el.remove();
+}
+/**
+* CSS utility: convert number to CSS pixel string, pass strings through.
+* Replaces belter.toCSS().
+*/
+function toCSS(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+//#endregion
+//#region src/bridge/render.ts
+/** Per-component iframe sandbox attributes — least-privilege per component */
+const SANDBOX = {
+	"monei-card-input": "allow-scripts allow-forms allow-same-origin",
+	"monei-bizum": "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+	"monei-bizum-button": "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+	"monei-paypal": "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+	"monei-payment-request": "allow-scripts allow-forms allow-same-origin allow-popups",
+	"monei-payment-modal": "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+	"monei-google-pay": "allow-scripts allow-forms allow-same-origin allow-popups"
+};
+/**
+* Resolve a container argument to an HTMLElement.
+*/
+function resolveContainer(container) {
+	if (!container) throw new Error("render() requires a container element or selector");
+	if (typeof container === "string") {
+		const el = document.querySelector(container);
+		if (!el) throw new Error(`Container not found: ${container}`);
+		return el;
+	}
+	return container;
+}
+/**
+* Generate a unique ID for the container element.
+*/
+function generateUid(tag) {
+	return `${tag}-${Math.random().toString(36).slice(2, 9)}`;
+}
+/**
+* Wire lifecycle props to bridge events.
+* Called before containerTemplate in the render flow.
+*/
+function wireLifecycleProps(props, event) {
+	const mappings = [
+		["onClose", EVENT.DESTROY],
+		["onDestroy", EVENT.DESTROY],
+		["onRendered", EVENT.RENDERED],
+		["onResize", EVENT.RESIZE]
+	];
+	for (const [propKey, eventName] of mappings) event.on(eventName, (...args) => {
+		const fn = props[propKey];
+		if (typeof fn === "function") fn(...args);
+	});
+}
+/**
+* Execute computed prop factories and classify remaining user props into
+* dispatch map (functions) and data payload (everything else).
+* Called AFTER containerTemplate so computed factories see state mutations.
+*/
+function buildDataPayload(context) {
+	const { props, options, state, dispatchMap } = context;
+	const dataProps = {};
+	const computedPropKeys = new Set(options.computedProps ? Object.keys(options.computedProps) : []);
+	if (options.computedProps) for (const [key, config] of Object.entries(options.computedProps)) {
+		const result = config.factory({
+			props,
+			state
+		});
+		if (config.type === "function") dispatchMap.set(key, result);
+		else dataProps[key] = result;
+	}
+	for (const [key, value] of Object.entries(props)) {
+		if (LIFECYCLE_PROPS.has(key) || computedPropKeys.has(key)) continue;
+		if (typeof value === "function") dispatchMap.set(key, value);
+		else dataProps[key] = value;
+	}
+	const builtins = new Set([
+		"close",
+		"resize",
+		"show",
+		"hide",
+		"getParentDomain",
+		"focus"
+	]);
+	return {
+		dataProps,
+		functionNames: [...dispatchMap.keys()].filter((k) => !builtins.has(k))
+	};
+}
+/**
+* Implements .render(), .updateProps(), .destroy(), .close() on a bridge component instance.
+* Called once from createComponent to wire up the actual rendering logic.
+*/
+function attachRenderMethods(instance, options) {
+	const renderState = {
+		dispatchMap: /* @__PURE__ */ new Map(),
+		connection: null,
+		remote: null,
+		containerEl: null,
+		frame: null,
+		destroyed: false,
+		ownsContainer: false,
+		pendingPropsUpdate: null,
+		pendingRemovals: /* @__PURE__ */ new Set()
+	};
+	let renderedTriggered = false;
+	let lifecycleWired = false;
+	renderState.dispatchMap.set("resize", (dimensions) => {
+		const { autoResize } = options;
+		const applied = {};
+		if (dimensions.width !== void 0 && (!autoResize || autoResize.width === true)) applied.width = dimensions.width;
+		if (dimensions.height !== void 0 && (!autoResize || autoResize.height === true)) applied.height = dimensions.height;
+		if (renderState.frame) {
+			if (applied.width !== void 0) renderState.frame.style.width = toCSS(applied.width);
+			if (applied.height !== void 0) renderState.frame.style.height = toCSS(applied.height);
+		}
+		if (!renderedTriggered) {
+			renderedTriggered = true;
+			instance.event.trigger(EVENT.RENDERED);
+		}
+		instance.event.trigger(EVENT.RESIZE, applied);
+	});
+	renderState.dispatchMap.set("close", () => instance.close());
+	renderState.dispatchMap.set("show", () => {
+		if (renderState.frame) renderState.frame.style.display = "";
+	});
+	renderState.dispatchMap.set("hide", () => {
+		if (renderState.frame) renderState.frame.style.display = "none";
+	});
+	renderState.dispatchMap.set("getParentDomain", () => window.location.origin);
+	renderState.dispatchMap.set("focus", () => {
+		if (renderState.frame) renderState.frame.focus();
+	});
+	/**
+	* Render the component into the DOM and establish Penpal connection.
+	*
+	* Phase ordering:
+	* 1. wireLifecycleProps — bind onClose/onRendered/onResize to bridge events
+	* 2. prerenderTemplate — create loading placeholder (optional)
+	* 3. containerTemplate — build wrapper DOM, may mutate `state` (e.g., state.__container for PayPal)
+	* 4. buildDataPayload — run computed prop factories (read state mutations from step 3),
+	*    classify user props into dispatch map (functions) and data payload (serializable values)
+	* 5. appendToDOM — container or bare iframe inserted into target element
+	* 6. triggerDISPLAY — notify container template that DOM is ready
+	* 7. sendBootstrap — postMessage initial props to iframe before script loads
+	* 8. createConnection — establish Penpal async RPC channel, deliver props via updateProps
+	*/
+	instance.render = async (container) => {
+		if (renderState.destroyed) throw new Error("Component is destroyed");
+		if (renderState.frame) throw new Error("Component already rendered");
+		const targetEl = resolveContainer(container);
+		const uid = generateUid(options.tag);
+		const doc = targetEl.ownerDocument;
+		const frame = doc.createElement("iframe");
+		frame.src = options.url;
+		frame.setAttribute("title", options.tag.replace(/-/g, "_"));
+		frame.setAttribute("allowpaymentrequest", "true");
+		frame.setAttribute("allow", "payment");
+		frame.style.border = "none";
+		const sandbox = SANDBOX[options.tag] ?? "allow-scripts allow-forms allow-same-origin";
+		frame.setAttribute("sandbox", sandbox);
+		if (!lifecycleWired) {
+			wireLifecycleProps(instance.props, instance.event);
+			lifecycleWired = true;
+		}
+		const templateSubs = [];
+		const trackedEvent = {
+			on(eventName, handler) {
+				const sub = instance.event.on(eventName, handler);
+				templateSubs.push(sub);
+				return sub;
+			},
+			once(eventName, handler) {
+				const sub = instance.event.once(eventName, handler);
+				templateSubs.push(sub);
+				return sub;
+			},
+			trigger(eventName, ...args) {
+				instance.event.trigger(eventName, ...args);
+			},
+			off(eventName, handler) {
+				instance.event.off(eventName, handler);
+			},
+			destroy() {
+				instance.event.destroy();
+			}
+		};
+		let placeholder;
+		let containerNode;
+		let dataProps = {};
+		let functionNames = [];
+		try {
+			if (options.prerenderTemplate) placeholder = options.prerenderTemplate({
+				uid,
+				frame,
+				placeholder: void 0,
+				doc,
+				props: instance.props,
+				event: trackedEvent,
+				dimensions: options.dimensions ?? {
+					width: "100%",
+					height: "auto"
+				},
+				state: instance.state,
+				container: targetEl
+			});
+			if (options.containerTemplate) containerNode = options.containerTemplate({
+				uid,
+				frame,
+				placeholder,
+				doc,
+				props: instance.props,
+				event: trackedEvent,
+				dimensions: options.dimensions ?? {
+					width: "100%",
+					height: "auto"
+				},
+				state: instance.state,
+				container: targetEl
+			});
+			({dataProps, functionNames} = buildDataPayload({
+				props: instance.props,
+				options,
+				state: instance.state,
+				dispatchMap: renderState.dispatchMap
+			}));
+		} catch (err) {
+			for (const sub of templateSubs) sub.cancel();
+			const builtins = new Set([
+				"close",
+				"resize",
+				"show",
+				"hide",
+				"getParentDomain",
+				"focus"
+			]);
+			for (const key of renderState.dispatchMap.keys()) if (!builtins.has(key)) renderState.dispatchMap.delete(key);
+			throw err;
+		}
+		renderState.frame = frame;
+		const sendInitialProps = () => {
+			if (frame.contentWindow) frame.contentWindow.postMessage({
+				type: BRIDGE_INIT_MSG,
+				props: dataProps,
+				functionNames
+			}, new URL(options.url).origin);
+		};
+		try {
+			if (containerNode) {
+				targetEl.appendChild(containerNode);
+				renderState.containerEl = containerNode;
+				renderState.ownsContainer = true;
+			} else {
+				targetEl.appendChild(frame);
+				renderState.containerEl = targetEl;
+			}
+			instance.event.trigger(EVENT.DISPLAY);
+			frame.addEventListener("load", sendInitialProps);
+			if (frame.contentWindow) sendInitialProps();
+			if (!frame.contentWindow) throw new Error("iframe contentWindow is not available — frame may not be in the DOM");
+			const connection = connect({
+				messenger: new WindowMessenger({
+					remoteWindow: frame.contentWindow,
+					allowedOrigins: [new URL(options.url).origin]
+				}),
+				methods: { callParent: (name, args) => {
+					const fn = renderState.dispatchMap.get(name);
+					if (!fn) throw new Error(`Unknown parent method: ${name}`);
+					return fn(...args);
+				} }
+			});
+			renderState.connection = connection;
+			let remote;
+			try {
+				remote = await connection.promise;
+			} catch (err) {
+				if (renderState.destroyed) return;
+				throw err;
+			}
+			if (renderState.destroyed) return;
+			renderState.remote = remote;
+			instance.state.__callChild = remote.callChild;
+			await remote.updateProps(dataProps, functionNames);
+			if (renderState.destroyed) return;
+			if (renderState.pendingPropsUpdate) {
+				const pending = renderState.pendingPropsUpdate;
+				renderState.pendingPropsUpdate = null;
+				const retainedFns = new Set(pending.functionNames ?? []);
+				const flushRemovals = /* @__PURE__ */ new Map();
+				for (const key of Object.keys(pending.dataProps)) if (renderState.dispatchMap.has(key) && !retainedFns.has(key)) {
+					flushRemovals.set(key, renderState.dispatchMap.get(key));
+					renderState.pendingRemovals.add(key);
+				}
+				await renderState.remote.updateProps(pending.dataProps, pending.functionNames);
+				if (renderState.destroyed) return;
+				for (const [key, originalFn] of flushRemovals) {
+					renderState.pendingRemovals.delete(key);
+					if (renderState.dispatchMap.get(key) === originalFn) renderState.dispatchMap.delete(key);
+				}
+			}
+			if (!renderedTriggered) {
+				renderedTriggered = true;
+				instance.event.trigger(EVENT.RENDERED);
+			}
+			frame.removeEventListener("load", sendInitialProps);
+		} catch (err) {
+			frame.removeEventListener("load", sendInitialProps);
+			for (const sub of templateSubs) sub.cancel();
+			delete instance.state.__callChild;
+			if (renderState.connection) {
+				renderState.connection.destroy();
+				renderState.connection = null;
+			}
+			renderState.remote = null;
+			renderState.frame = null;
+			if (renderState.ownsContainer && renderState.containerEl) renderState.containerEl.remove();
+			else if (frame.parentNode) frame.remove();
+			renderState.containerEl = null;
+			renderState.ownsContainer = false;
+			renderState.pendingPropsUpdate = null;
+			renderState.pendingRemovals.clear();
+			const builtins = new Set([
+				"close",
+				"resize",
+				"show",
+				"hide",
+				"getParentDomain",
+				"focus"
+			]);
+			for (const key of renderState.dispatchMap.keys()) if (!builtins.has(key)) renderState.dispatchMap.delete(key);
+			renderedTriggered = false;
+			throw err;
+		}
+	};
+	instance.updateProps = async (newProps) => {
+		if (renderState.destroyed) throw new Error("Component is destroyed");
+		const normalized = normalizeAliases(newProps, options.aliases);
+		Object.assign(instance.props, normalized);
+		if (!renderState.frame) return;
+		const newDataProps = {};
+		const newFunctionNames = [];
+		const computedPropKeys = new Set(options.computedProps ? Object.keys(options.computedProps) : []);
+		const deferredRemovals = /* @__PURE__ */ new Map();
+		for (const [key, value] of Object.entries(normalized)) {
+			if (LIFECYCLE_PROPS.has(key) || computedPropKeys.has(key)) continue;
+			if (typeof value === "function") {
+				const hasStaleBufferedData = renderState.pendingPropsUpdate != null && key in renderState.pendingPropsUpdate.dataProps;
+				const hasPendingRemoval = renderState.pendingRemovals.has(key);
+				if (!renderState.dispatchMap.has(key) || hasStaleBufferedData || hasPendingRemoval) newFunctionNames.push(key);
+				renderState.dispatchMap.set(key, value);
+			} else {
+				if (renderState.dispatchMap.has(key)) {
+					if (renderState.remote) {
+						deferredRemovals.set(key, renderState.dispatchMap.get(key));
+						renderState.pendingRemovals.add(key);
+					}
+				}
+				newDataProps[key] = value;
+			}
+		}
+		const resolvedFunctionNames = newFunctionNames.length > 0 ? newFunctionNames : void 0;
+		if (renderState.remote) {
+			await renderState.remote.updateProps(newDataProps, resolvedFunctionNames);
+			for (const [key, originalFn] of deferredRemovals) {
+				renderState.pendingRemovals.delete(key);
+				if (renderState.dispatchMap.get(key) === originalFn) renderState.dispatchMap.delete(key);
+			}
+		} else {
+			if (!renderState.pendingPropsUpdate) renderState.pendingPropsUpdate = {
+				dataProps: {},
+				functionNames: void 0
+			};
+			Object.assign(renderState.pendingPropsUpdate.dataProps, newDataProps);
+			if (renderState.pendingPropsUpdate.functionNames) {
+				const dataKeys = Object.keys(newDataProps);
+				if (dataKeys.length > 0) {
+					const dataKeySet = new Set(dataKeys);
+					renderState.pendingPropsUpdate.functionNames = renderState.pendingPropsUpdate.functionNames.filter((n) => !dataKeySet.has(n));
+					if (renderState.pendingPropsUpdate.functionNames.length === 0) renderState.pendingPropsUpdate.functionNames = void 0;
+				}
+			}
+			if (resolvedFunctionNames) {
+				for (const name of resolvedFunctionNames) delete renderState.pendingPropsUpdate.dataProps[name];
+				renderState.pendingPropsUpdate.functionNames = [...renderState.pendingPropsUpdate.functionNames ?? [], ...resolvedFunctionNames];
+			}
+		}
+	};
+	instance.destroy = async () => {
+		if (renderState.destroyed) return;
+		renderState.destroyed = true;
+		instance.event.trigger(EVENT.DESTROY);
+		if (renderState.connection) {
+			renderState.connection.destroy();
+			renderState.connection = null;
+		}
+		renderState.remote = null;
+		if (renderState.frame) {
+			renderState.frame.remove();
+			renderState.frame = null;
+		}
+		if (renderState.ownsContainer && renderState.containerEl) renderState.containerEl.remove();
+		instance.event.destroy();
+		renderState.dispatchMap.clear();
+	};
+	instance.close = async () => {
+		await instance.destroy();
+	};
+	/**
+	* Expose renderState for tests
+	*/
+	instance.__renderState = renderState;
+}
+//#endregion
+//#region src/bridge/create-component.ts
+/**
+* Normalize aliased prop names to canonical names.
+* Aliases define alternative INPUT names: { style: 'innerStyle' } means
+* merchants can pass either `style` or `innerStyle`, but internally
+* the canonical name `style` is always used (matching zoid semantics).
+*/
+function normalizeAliases(props, aliases) {
+	if (!aliases) return props;
+	const reverseMap = /* @__PURE__ */ new Map();
+	for (const [canonical, alias] of Object.entries(aliases)) reverseMap.set(alias, canonical);
+	const result = {};
+	for (const [key, value] of Object.entries(props)) {
+		const canonicalKey = reverseMap.get(key) ?? key;
+		result[canonicalKey] = value;
+	}
+	return result;
+}
+/**
+* Creates a bridge component constructor (replaces zoid.create).
+*
+* Returns a class that can be instantiated with `new Component(props)`
+* and has a static `.driver()` method for framework wrappers.
+*/
+function createComponent(options) {
+	class Component {
+		constructor(props) {
+			this.state = {};
+			this.event = new EventEmitter();
+			const normalizedProps = normalizeAliases(props, options.aliases);
+			if (options.defaultProps) this.props = {
+				...options.defaultProps({ event: this.event }),
+				...normalizedProps
+			};
+			else this.props = { ...normalizedProps };
+			if (options.validate) options.validate({ props: this.props });
+			attachRenderMethods(this, options);
+		}
+		async render(_container) {
+			throw new Error("render() not attached");
+		}
+		async updateProps(_props) {
+			throw new Error("updateProps() not attached — call render() first");
+		}
+		async close() {
+			throw new Error("close() not attached");
+		}
+		async destroy() {
+			throw new Error("destroy() not attached");
+		}
+		driver(name, deps) {
+			return resolveDriver(name, Component, deps);
+		}
+	}
+	function ComponentWrapper(props) {
+		if (!(this instanceof ComponentWrapper)) return new ComponentWrapper(props);
+		return new Component(props);
+	}
+	ComponentWrapper.prototype = Component.prototype;
+	ComponentWrapper.driver = function(name, deps) {
+		return resolveDriver(name, ComponentWrapper, deps);
+	};
+	Component.prototype.__options = options;
+	return ComponentWrapper;
+}
+//#endregion
+//#region src/enums.ts
+let CLASS = /* @__PURE__ */ function(CLASS) {
+	CLASS["VISIBLE"] = "is-visible";
+	CLASS["INVISIBLE"] = "is-invisible";
+	return CLASS;
+}({});
+//#endregion
+//#region src/container.ts
+function createContainerTemplate(config = {}) {
+	const { background = "#fff", overflow, borderRadius, fadeOnRender = true, allowTransparency = false, modal = false } = config;
+	return function containerTemplateFn({ uid, frame, placeholder, doc, props, event, dimensions: { width, height } }) {
+		if (!frame) return;
+		if (allowTransparency) {
+			frame.setAttribute("allowtransparency", "true");
+			frame.style.background = "transparent";
+		}
+		const div = doc.createElement("div");
+		div.setAttribute("id", uid);
+		const style = doc.createElement("style");
+		if (props?.cspNonce) style.setAttribute("nonce", props.cspNonce);
+		if (modal) {
+			const backdrop = doc.createElement("div");
+			backdrop.classList.add("backdrop");
+			style.appendChild(doc.createTextNode(`
+        #${uid} {
+            position: fixed;
+            inset: 0;
+            z-index: 99999;
+        }
+        #${uid} > .backdrop {
+            position: fixed;
+            inset: 0;
+            background-color: rgba(40, 40, 40, 0.7);
+            opacity: 0;
+            transition: opacity 0.35s ease-in-out;
+            will-change: opacity;
+        }
+        #${uid} > .backdrop.${CLASS.VISIBLE} {
+            opacity: 1;
+        }
+        #${uid} > iframe {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            transition: opacity .2s ease-in-out;
+        }
+        #${uid} > iframe.${CLASS.INVISIBLE} {
+            opacity: 0;
+        }
+        #${uid} > iframe.${CLASS.VISIBLE} {
+            opacity: 1;
+        }
+      `));
+			div.appendChild(backdrop);
+			div.appendChild(frame);
+			if (placeholder) div.appendChild(placeholder);
+			div.appendChild(style);
+			event.on(EVENT.DISPLAY, () => {
+				backdrop.offsetHeight;
+				requestAnimationFrame(() => backdrop.classList.add(CLASS.VISIBLE));
+			});
+			event.on(EVENT.BEFORE_CLOSE, () => {
+				backdrop.classList.remove(CLASS.VISIBLE);
+			});
+			frame.classList.add(CLASS.INVISIBLE);
+			if (fadeOnRender && placeholder) placeholder.classList.add(CLASS.VISIBLE);
+			event.on(EVENT.RENDERED, () => {
+				if (fadeOnRender) {
+					if (placeholder) {
+						placeholder.classList.remove(CLASS.VISIBLE);
+						placeholder.classList.add(CLASS.INVISIBLE);
+					}
+					frame.classList.remove(CLASS.INVISIBLE);
+					frame.classList.add(CLASS.VISIBLE);
+					setTimeout(() => destroyElement(placeholder), 1);
+				} else {
+					if (placeholder) destroyElement(placeholder);
+					frame.style.transition = "none";
+					frame.classList.remove(CLASS.INVISIBLE);
+					frame.classList.add(CLASS.VISIBLE);
+				}
+			});
+		} else {
+			const innerStyle = props?.style || props?.innerStyle;
+			const initialHeight = height === "0" ? "0" : toCSS(innerStyle?.base?.height || innerStyle?.height || (height === "auto" ? 45 : height));
+			const containerStyles = [
+				"display: block",
+				"position: relative",
+				`width: ${width}`,
+				`height: ${allowTransparency ? height : initialHeight}`,
+				`background: ${background}`
+			];
+			if (overflow) containerStyles.push(`overflow: ${overflow}`);
+			if (borderRadius) containerStyles.push(`border-radius: ${borderRadius}`);
+			style.appendChild(doc.createTextNode(`
+        #${uid} {
+            ${containerStyles.join(";\n          ")};
+        }
+        #${uid} > iframe {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            transition: opacity .2s ease-in-out;
+        }
+        #${uid} > iframe.${CLASS.INVISIBLE} {
+            opacity: 0;
+        }
+        #${uid} > iframe.${CLASS.VISIBLE} {
+            opacity: 1;
+        }
+      `));
+			div.appendChild(frame);
+			if (placeholder) div.appendChild(placeholder);
+			div.appendChild(style);
+			event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
+				if (typeof newWidth === "number") div.style.width = toCSS(newWidth);
+				if (typeof newHeight === "number") div.style.height = toCSS(newHeight);
+			});
+			if (placeholder) {
+				frame.classList.add(CLASS.INVISIBLE);
+				if (fadeOnRender) placeholder.classList.add(CLASS.VISIBLE);
+				event.on(EVENT.RENDERED, () => {
+					if (fadeOnRender) {
+						placeholder.classList.remove(CLASS.VISIBLE);
+						placeholder.classList.add(CLASS.INVISIBLE);
+						frame.classList.remove(CLASS.INVISIBLE);
+						frame.classList.add(CLASS.VISIBLE);
+						setTimeout(() => destroyElement(placeholder), 1);
+					} else {
+						destroyElement(placeholder);
+						frame.style.transition = "none";
+						frame.classList.remove(CLASS.INVISIBLE);
+						frame.classList.add(CLASS.VISIBLE);
+					}
+				});
+			}
+		}
+		return div;
+	};
+}
+const containerTemplate = createContainerTemplate({
+	overflow: "hidden",
+	borderRadius: "var(--monei-radius, 4px)"
+});
+const modalContainerTemplate = createContainerTemplate({ modal: true });
+//#endregion
+//#region src/card-input/index.ts
+const getCreateTokenFunction = (ref) => {
+	if (ref.state?.__createToken) return ref.state.__createToken;
+	throw new Error("Index is not registered");
+};
+const createToken = async (component, options) => {
+	const { data } = await getCreateTokenFunction(component)(options);
+	return data;
+};
+const CardInput = createComponent({
+	tag: "monei-card-input",
+	url: config.cardInputUrl,
+	dimensions: {
+		width: "100%",
+		height: "auto"
+	},
+	autoResize: {
+		width: false,
+		height: true
+	},
+	aliases: {
+		sessionId: "orderId",
+		style: "innerStyle"
+	},
+	computedProps: { __getConfig: {
+		factory: ({ props }) => getPaymentMethods.bind(null, props),
+		type: "function"
+	} },
+	validate: validateComponentProps,
+	containerTemplate: (params) => {
+		params.state.__createToken = async (data = {}) => {
+			const callChild = params.state.__callChild;
+			if (!callChild) throw new Error("CardInput instance is not registered");
+			return { data: await callChild("createToken", [data]) };
+		};
+		return containerTemplate(params);
+	},
+	prerenderTemplate: ({ doc, props }) => {
+		const html = doc.createElement("html");
+		const body = doc.createElement("body");
+		body.style.margin = "0";
+		body.style.background = "#fff";
+		const div = doc.createElement("div");
+		div.style.height = "45px";
+		div.style.boxSizing = "border-box";
+		const style = props.style || props.innerStyle;
+		if (style?.base) Object.assign(div.style, transformStyle(style.base));
+		if (style?.loading) Object.assign(div.style, transformStyle(style.loading));
+		body.appendChild(div);
+		html.appendChild(body);
+		return html;
+	}
+});
+const PaymentModal = createComponent({
+	tag: "monei-payment-modal",
+	url: config.paymentModalUrl,
+	dimensions: {
+		width: "100%",
+		height: "100%"
+	},
+	autoResize: {
+		width: false,
+		height: false
+	},
+	aliases: { style: "innerStyle" },
+	containerTemplate: createContainerTemplate({
+		background: "transparent",
+		fadeOnRender: false,
+		allowTransparency: true
+	})
+});
+const confirmPayment = (params) => {
+	const rootNode = document.createElement("div");
+	const bodyOverflow = document.body.style.overflow;
+	Object.assign(document.body.style, { overflow: "hidden" });
+	Object.assign(rootNode.style, {
+		position: "fixed",
+		overflow: "hidden",
+		display: "block",
+		top: "0",
+		bottom: "0",
+		left: "0",
+		right: "0",
+		width: "100%",
+		height: "100%",
+		zIndex: "99999"
+	});
+	document.body.appendChild(rootNode);
+	let modal = null;
+	const cleanup = () => {
+		modal?.destroy();
+		modal = null;
+		Object.assign(document.body.style, { overflow: bodyOverflow });
+		if (rootNode.parentNode) rootNode.parentNode.removeChild(rootNode);
+	};
+	return new Promise((resolve, reject) => {
+		modal = new PaymentModal({
+			...params,
+			isOpen: true,
+			onResult: (result) => {
+				resolve(result);
+				cleanup();
+			},
+			onError: (error) => {
+				reject(error);
+				cleanup();
+			}
+		});
+		modal.render(rootNode).catch((err) => {
+			cleanup();
+			reject(err);
+		});
+	});
+};
+//#endregion
+//#region src/paypal/index.ts
+const namespace = "monei-paypal";
+const onLoadPaypal = async (props, state, src) => {
+	state.__scriptId = (await loadScript(src, props.cspNonce, {
+		namespace,
+		cspNonce: props.cspNonce
+	}, true)).dataset.uidAuto;
+	const defaultStyle = {
+		layout: "horizontal",
+		tagline: false,
+		height: 45
+	};
+	const radius = parsePx(props.style?.borderRadius ?? props.borderRadius);
+	if (radius) defaultStyle.borderRadius = radius;
+	const style = {
+		...defaultStyle,
+		...props.style
+	};
+	style.height = parsePx(style.height, 45);
+	props.onLoad?.(true);
+	let token;
+	await window[namespace].Buttons({
+		createOrder: async () => {
+			try {
+				const result = await createToken$1({
+					paymentId: props.paymentId,
+					accountId: props.accountId,
+					sessionId: props.sessionId,
+					amount: props.amount,
+					currency: props.currency,
+					transactionType: props.transactionType,
+					paymentMethod: { paypal: {} }
+				});
+				({token} = result);
+				return result.paypal?.orderId;
+			} catch (error) {
+				props.onError?.(error);
+				return;
+			}
+		},
+		onApprove: function(data) {
+			if (data.orderID) props.onSubmit({ token });
+			else props.onError?.(data);
+		},
+		onClick: function(_data, actions) {
+			let shouldOpen = true;
+			if (props.onBeforeOpen) shouldOpen = props.onBeforeOpen();
+			if (!shouldOpen) return actions.reject();
+		},
+		style
+	}).render(state.__container);
+};
+const PayPal = createComponent({
+	tag: namespace,
+	url: config.paypalUrl,
+	dimensions: {
+		width: "100%",
+		height: "0"
+	},
+	autoResize: {
+		width: false,
+		height: false
+	},
+	aliases: { style: "innerStyle" },
+	computedProps: {
+		__getConfig: {
+			factory: ({ props }) => getPaymentMethods.bind(null, props),
+			type: "function"
+		},
+		__onLoadPayPal: {
+			factory: ({ props, state }) => onLoadPaypal.bind(null, props, state),
+			type: "function"
+		}
+	},
+	containerTemplate: (params) => {
+		params.state.__container = params.container;
+		if (!params.props.accountId && !params.props.paymentId) throw new Error("You need to provide paymentId or accountId");
+		const container = containerTemplate(params);
+		params.event.on(EVENT.DESTROY, () => {
+			window[namespace]?.Buttons?.instances?.forEach((instance) => {
+				instance.close();
+			});
+			const scriptId = params.state.__scriptId;
+			if (scriptId) {
+				const script = document.querySelector(`script[data-uid-auto="${scriptId}"]`);
+				if (script) script.remove();
+			}
+		});
+		return container;
+	}
+});
+const BizumModal = createComponent({
+	tag: "monei-bizum",
+	url: config.bizumUrl,
+	autoResize: {
+		width: false,
+		height: false
+	},
+	containerTemplate: (params) => {
+		if (!params.frame) return;
+		if (params.props.isHidden) {
+			const div = params.doc.createElement("div");
+			div.setAttribute("id", params.uid);
+			div.style.display = "none";
+			div.appendChild(params.frame);
+			if (params.placeholder) div.appendChild(params.placeholder);
+			return div;
+		}
+		return modalContainerTemplate(params);
+	},
+	defaultProps: ({ event }) => ({ onBeforeClose: () => {
+		event.trigger(EVENT.BEFORE_CLOSE);
+	} })
+});
+const Bizum = createComponent({
+	tag: "monei-bizum-button",
+	url: config.bizumButtonUrl,
+	dimensions: {
+		width: "100%",
+		height: "auto"
+	},
+	autoResize: {
+		width: false,
+		height: true
+	},
+	aliases: { style: "innerStyle" },
+	computedProps: {
+		__getConfig: {
+			factory: ({ props }) => getPaymentMethods.bind(null, props),
+			type: "function"
+		},
+		__onClick: {
+			factory: ({ props, state }) => {
+				const rootNode = document.createElement("div");
+				return ({ amount, currency }) => {
+					if (state.isOpen) return;
+					let shouldOpen = true;
+					if (props.onBeforeOpen) shouldOpen = props.onBeforeOpen();
+					if (!shouldOpen) return;
+					state.isOpen = true;
+					if (!rootNode.parentNode) document.body.appendChild(rootNode);
+					const bizumModal = new BizumModal({
+						amount,
+						currency,
+						...props,
+						onClose: () => {
+							state.isOpen = false;
+							window.onpopstate = null;
+							document.body.style.overflow = "";
+						},
+						isOpen: true
+					});
+					window.history.pushState(null, "", window.location.href);
+					window.onpopstate = () => bizumModal.updateProps({ isOpen: false });
+					Object.assign(document.body.style, { overflow: "hidden" });
+					return bizumModal.render(rootNode);
+				};
+			},
+			type: "function"
+		}
+	},
+	validate: validateComponentProps,
+	containerTemplate
+});
+const GooglePay = createComponent({
+	tag: "monei-google-pay",
+	url: config.paymentRequestUrl,
+	dimensions: {
+		width: "100%",
+		height: "0"
+	},
+	autoResize: {
+		width: false,
+		height: true
+	},
+	aliases: { style: "innerStyle" },
+	computedProps: { __getConfig: {
+		factory: ({ props }) => getPaymentMethods.bind(null, props),
+		type: "function"
+	} },
+	validate: validateComponentProps,
+	containerTemplate
+});
+const PaymentRequest = createComponent({
+	tag: "monei-payment-request",
+	url: config.paymentRequestUrl,
+	dimensions: {
+		width: "100%",
+		height: "auto"
+	},
+	autoResize: {
+		width: false,
+		height: true
+	},
+	aliases: { style: "innerStyle" },
+	computedProps: { __getConfig: {
+		factory: ({ props }) => getPaymentMethods.bind(null, props),
+		type: "function"
+	} },
+	validate: validateComponentProps,
+	containerTemplate
+});
+//#endregion
+//#region src/types.ts
+let NextActionType = /* @__PURE__ */ function(NextActionType) {
+	NextActionType["CONFIRM"] = "CONFIRM";
+	NextActionType["FRICTIONLESS_CHALLENGE"] = "FRICTIONLESS_CHALLENGE";
+	NextActionType["BIZUM_CHALLENGE"] = "BIZUM_CHALLENGE";
+	NextActionType["CHALLENGE"] = "CHALLENGE";
+	NextActionType["COMPLETE"] = "COMPLETE";
+	return NextActionType;
+}({});
+let CardBrand = /* @__PURE__ */ function(CardBrand) {
+	CardBrand["Visa"] = "visa";
+	CardBrand["Mastercard"] = "mastercard";
+	CardBrand["Amex"] = "amex";
+	CardBrand["Discover"] = "discover";
+	CardBrand["Diners"] = "diners";
+	CardBrand["JCB"] = "jcb";
+	CardBrand["Maestro"] = "maestro";
+	CardBrand["UnionPay"] = "unionpay";
+	CardBrand["Elo"] = "elo";
+	CardBrand["Hipercard"] = "hipercard";
+	return CardBrand;
+}({});
+let TransactionType = /* @__PURE__ */ function(TransactionType) {
+	TransactionType["AUTH"] = "AUTH";
+	TransactionType["SALE"] = "SALE";
+	TransactionType["PAYOUT"] = "PAYOUT";
+	TransactionType["VERIF"] = "VERIF";
+	return TransactionType;
+}({});
+//#endregion
+//#region src/index.ts
+const api = api_exports;
+const utils = utils_exports;
+//#endregion
+export { Bizum, BizumModal, CardBrand, CardInput, GooglePay, NextActionType, PayPal, PaymentModal, PaymentRequest, TransactionType, api, config, confirmPayment, createToken, utils };