@monei-js/components 2.1.3 → 2.1.4

package/dist/index.cjs

@@ -111,7 +111,8 @@ const getLanguage = () => {
 };
 const safe = (fn) => {
 	try {
-		return String(fn() ?? "");
+		var _fn;
+		return String((_fn = fn()) !== null && _fn !== void 0 ? _fn : "");
 	} catch {
 		return "";
 	}
@@ -129,7 +130,10 @@ const getClientEnv = () => {
 		safe(() => navigator.deviceMemory),
 		safe(() => navigator.maxTouchPoints),
 		safe(() => navigator.platform),
-		safe(() => navigator.languages?.join(","))
+		safe(() => {
+			var _navigator$languages;
+			return (_navigator$languages = navigator.languages) === null || _navigator$languages === void 0 ? void 0 : _navigator$languages.join(",");
+		})
 	].join("|");
 	return window.btoa(env);
 };
@@ -162,8 +166,9 @@ const getPersistentSeed = async () => {
 const thumbmark = new _thumbmarkjs_thumbmarkjs.Thumbmark({ logging: false });
 thumbmark.includeComponent("persistent_seed", getPersistentSeed);
 const getClientFingerprint = async () => {
+	var _result$thumbmark;
 	const [, result] = await withError(thumbmark.get());
-	return result?.thumbmark ?? "";
+	return (_result$thumbmark = result === null || result === void 0 ? void 0 : result.thumbmark) !== null && _result$thumbmark !== void 0 ? _result$thumbmark : "";
 };
 const withError = async (p) => {
 	try {
@@ -513,6 +518,7 @@ function createVue3Driver(ComponentClass) {
 */
 function createAngularDriver(ComponentClass) {
 	return ({ Component: AngularComponent, NgModule, ElementRef, NgZone, Inject }) => {
+		var _options;
 		class ComponentInstance {
 			constructor(elementRef, zone) {
 				this.props = {};
@@ -549,7 +555,7 @@ function createAngularDriver(ComponentClass) {
 		}
 		ComponentInstance.parameters = [[new Inject(ElementRef)], [new Inject(NgZone)]];
 		ComponentInstance.annotations = [new AngularComponent({
-			selector: ComponentClass.prototype.__options?.tag || "bridge-component",
+			selector: ((_options = ComponentClass.prototype.__options) === null || _options === void 0 ? void 0 : _options.tag) || "bridge-component",
 			template: "<div></div>",
 			inputs: ["props"]
 		})];
@@ -585,10 +591,6 @@ function resolveDriver(name, ComponentClass, deps) {
 	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 = {
@@ -770,6 +772,7 @@ function attachRenderMethods(instance, options) {
 	* 8. createConnection — establish Penpal async RPC channel, deliver props via updateProps
 	*/
 	instance.render = async (container) => {
+		var _SANDBOX$options$tag;
 		if (renderState.destroyed) throw new Error("Component is destroyed");
 		if (renderState.frame) throw new Error("Component already rendered");
 		const targetEl = resolveContainer(container);
@@ -781,7 +784,7 @@ function attachRenderMethods(instance, options) {
 		frame.setAttribute("allowpaymentrequest", "true");
 		frame.setAttribute("allow", "payment");
 		frame.style.border = "none";
-		const sandbox = SANDBOX[options.tag] ?? "allow-scripts allow-forms allow-same-origin";
+		const sandbox = (_SANDBOX$options$tag = SANDBOX[options.tag]) !== null && _SANDBOX$options$tag !== void 0 ? _SANDBOX$options$tag : "allow-scripts allow-forms allow-same-origin";
 		frame.setAttribute("sandbox", sandbox);
 		if (!lifecycleWired) {
 			wireLifecycleProps(instance.props, instance.event);
@@ -814,34 +817,40 @@ function attachRenderMethods(instance, options) {
 		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
-			});
+			if (options.prerenderTemplate) {
+				var _options$dimensions;
+				placeholder = options.prerenderTemplate({
+					uid,
+					frame,
+					placeholder: void 0,
+					doc,
+					props: instance.props,
+					event: trackedEvent,
+					dimensions: (_options$dimensions = options.dimensions) !== null && _options$dimensions !== void 0 ? _options$dimensions : {
+						width: "100%",
+						height: "auto"
+					},
+					state: instance.state,
+					container: targetEl
+				});
+			}
+			if (options.containerTemplate) {
+				var _options$dimensions2;
+				containerNode = options.containerTemplate({
+					uid,
+					frame,
+					placeholder,
+					doc,
+					props: instance.props,
+					event: trackedEvent,
+					dimensions: (_options$dimensions2 = options.dimensions) !== null && _options$dimensions2 !== void 0 ? _options$dimensions2 : {
+						width: "100%",
+						height: "auto"
+					},
+					state: instance.state,
+					container: targetEl
+				});
+			}
 			({dataProps, functionNames} = buildDataPayload({
 				props: instance.props,
 				options,
@@ -865,8 +874,9 @@ function attachRenderMethods(instance, options) {
 		const targetOrigin = new URL(options.url).origin;
 		const sendInitialProps = () => {
 			try {
-				frame.contentWindow?.postMessage({
-					type: BRIDGE_INIT_MSG,
+				var _frame$contentWindow;
+				(_frame$contentWindow = frame.contentWindow) === null || _frame$contentWindow === void 0 || _frame$contentWindow.postMessage({
+					type: "__monei_bridge_init__",
 					props: dataProps,
 					functionNames
 				}, targetOrigin);
@@ -910,9 +920,10 @@ function attachRenderMethods(instance, options) {
 			await remote.updateProps(dataProps, functionNames);
 			if (renderState.destroyed) return;
 			if (renderState.pendingPropsUpdate) {
+				var _pending$functionName;
 				const pending = renderState.pendingPropsUpdate;
 				renderState.pendingPropsUpdate = null;
-				const retainedFns = new Set(pending.functionNames ?? []);
+				const retainedFns = new Set((_pending$functionName = pending.functionNames) !== null && _pending$functionName !== void 0 ? _pending$functionName : []);
 				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));
@@ -1007,8 +1018,9 @@ function attachRenderMethods(instance, options) {
 				}
 			}
 			if (resolvedFunctionNames) {
+				var _renderState$pendingP;
 				for (const name of resolvedFunctionNames) delete renderState.pendingPropsUpdate.dataProps[name];
-				renderState.pendingPropsUpdate.functionNames = [...renderState.pendingPropsUpdate.functionNames ?? [], ...resolvedFunctionNames];
+				renderState.pendingPropsUpdate.functionNames = [...(_renderState$pendingP = renderState.pendingPropsUpdate.functionNames) !== null && _renderState$pendingP !== void 0 ? _renderState$pendingP : [], ...resolvedFunctionNames];
 			}
 		}
 	};
@@ -1061,7 +1073,8 @@ function normalizeAliases(props, aliases) {
 	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;
+		var _reverseMap$get;
+		const canonicalKey = (_reverseMap$get = reverseMap.get(key)) !== null && _reverseMap$get !== void 0 ? _reverseMap$get : key;
 		result[canonicalKey] = value;
 	}
 	return result;
@@ -1136,7 +1149,7 @@ function createContainerTemplate(config = {}) {
 		const div = doc.createElement("div");
 		div.setAttribute("id", uid);
 		const style = doc.createElement("style");
-		if (props?.cspNonce) style.setAttribute("nonce", props.cspNonce);
+		if (props === null || props === void 0 ? void 0 : props.cspNonce) style.setAttribute("nonce", props.cspNonce);
 		if (modal) {
 			const backdrop = doc.createElement("div");
 			backdrop.classList.add("backdrop");
@@ -1203,8 +1216,9 @@ function createContainerTemplate(config = {}) {
 				}
 			});
 		} else {
-			const innerStyle = props?.style || props?.innerStyle;
-			const initialHeight = height === "0" ? "0" : toCSS(innerStyle?.base?.height || innerStyle?.height || (height === "auto" ? 45 : height));
+			var _innerStyle$base;
+			const innerStyle = (props === null || props === void 0 ? void 0 : props.style) || (props === null || props === void 0 ? void 0 : props.innerStyle);
+			const initialHeight = height === "0" ? "0" : toCSS((innerStyle === null || innerStyle === void 0 || (_innerStyle$base = innerStyle.base) === null || _innerStyle$base === void 0 ? void 0 : _innerStyle$base.height) || (innerStyle === null || innerStyle === void 0 ? void 0 : innerStyle.height) || (height === "auto" ? 45 : height));
 			const containerStyles = [
 				"display: block",
 				"position: relative",
@@ -1271,7 +1285,8 @@ const modalContainerTemplate = createContainerTemplate({ modal: true });
 //#endregion
 //#region src/card-input/index.ts
 const getCreateTokenFunction = (ref) => {
-	if (ref.state?.__createToken) return ref.state.__createToken;
+	var _ref$state;
+	if ((_ref$state = ref.state) === null || _ref$state === void 0 ? void 0 : _ref$state.__createToken) return ref.state.__createToken;
 	throw new Error("Index is not registered");
 };
 const createToken = async (component, options) => {
@@ -1300,7 +1315,8 @@ const CardInput = createComponent({
 	} },
 	validate: validateComponentProps,
 	submit: (instance) => async (opts) => {
-		const createTokenFn = instance.state?.__createToken;
+		var _instance$state;
+		const createTokenFn = (_instance$state = instance.state) === null || _instance$state === void 0 ? void 0 : _instance$state.__createToken;
 		if (!createTokenFn) throw new Error("CardInput is not rendered or connection is pending — call render() first");
 		const { data } = await createTokenFn(opts);
 		return data;
@@ -1322,8 +1338,8 @@ const CardInput = createComponent({
 		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));
+		if (style === null || style === void 0 ? void 0 : style.base) Object.assign(div.style, transformStyle(style.base));
+		if (style === null || style === void 0 ? void 0 : style.loading) Object.assign(div.style, transformStyle(style.loading));
 		body.appendChild(div);
 		html.appendChild(body);
 		return html;
@@ -1366,7 +1382,7 @@ const confirmPayment = (params) => {
 	document.body.appendChild(rootNode);
 	let modal = null;
 	const cleanup = () => {
-		modal?.destroy();
+		modal === null || modal === void 0 || modal.destroy();
 		modal = null;
 		Object.assign(document.body.style, { overflow: bodyOverflow });
 		if (rootNode.parentNode) rootNode.parentNode.removeChild(rootNode);
@@ -1394,6 +1410,7 @@ const confirmPayment = (params) => {
 //#region src/paypal/index.ts
 const namespace = "monei-paypal";
 const onLoadPaypal = async (props, state, src) => {
+	var _props$style$borderRa, _props$style, _props$onLoad;
 	state.__scriptId = (await loadScript(src, props.cspNonce, {
 		namespace,
 		cspNonce: props.cspNonce
@@ -1403,18 +1420,19 @@ const onLoadPaypal = async (props, state, src) => {
 		tagline: false,
 		height: 45
 	};
-	const radius = parsePx(props.style?.borderRadius ?? props.borderRadius);
+	const radius = parsePx((_props$style$borderRa = (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.borderRadius) !== null && _props$style$borderRa !== void 0 ? _props$style$borderRa : props.borderRadius);
 	if (radius) defaultStyle.borderRadius = radius;
 	const style = {
 		...defaultStyle,
 		...props.style
 	};
 	style.height = parsePx(style.height, 45);
-	props.onLoad?.(true);
+	(_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, true);
 	let token;
 	await window[namespace].Buttons({
 		createOrder: async () => {
 			try {
+				var _result$paypal;
 				const result = await createToken$1({
 					paymentId: props.paymentId,
 					accountId: props.accountId,
@@ -1425,15 +1443,19 @@ const onLoadPaypal = async (props, state, src) => {
 					paymentMethod: { paypal: {} }
 				});
 				({token} = result);
-				return result.paypal?.orderId;
+				return (_result$paypal = result.paypal) === null || _result$paypal === void 0 ? void 0 : _result$paypal.orderId;
 			} catch (error) {
-				props.onError?.(error);
+				var _props$onError;
+				(_props$onError = props.onError) === null || _props$onError === void 0 || _props$onError.call(props, error);
 				return;
 			}
 		},
 		onApprove: function(data) {
 			if (data.orderID) props.onSubmit({ token });
-			else props.onError?.(data);
+			else {
+				var _props$onError2;
+				(_props$onError2 = props.onError) === null || _props$onError2 === void 0 || _props$onError2.call(props, data);
+			}
 		},
 		onClick: function(_data, actions) {
 			let shouldOpen = true;
@@ -1470,7 +1492,8 @@ const PayPal = createComponent({
 		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) => {
+			var _namespace;
+			(_namespace = window[namespace]) === null || _namespace === void 0 || (_namespace = _namespace.Buttons) === null || _namespace === void 0 || (_namespace = _namespace.instances) === null || _namespace === void 0 || _namespace.forEach((instance) => {
 				instance.close();
 			});
 			const scriptId = params.state.__scriptId;

package/dist/index.js

@@ -99,7 +99,8 @@ const getLanguage = () => {
 };
 const safe = (fn) => {
 	try {
-		return String(fn() ?? "");
+		var _fn;
+		return String((_fn = fn()) !== null && _fn !== void 0 ? _fn : "");
 	} catch {
 		return "";
 	}
@@ -117,7 +118,10 @@ const getClientEnv = () => {
 		safe(() => navigator.deviceMemory),
 		safe(() => navigator.maxTouchPoints),
 		safe(() => navigator.platform),
-		safe(() => navigator.languages?.join(","))
+		safe(() => {
+			var _navigator$languages;
+			return (_navigator$languages = navigator.languages) === null || _navigator$languages === void 0 ? void 0 : _navigator$languages.join(",");
+		})
 	].join("|");
 	return window.btoa(env);
 };
@@ -150,8 +154,9 @@ const getPersistentSeed = async () => {
 const thumbmark = new Thumbmark({ logging: false });
 thumbmark.includeComponent("persistent_seed", getPersistentSeed);
 const getClientFingerprint = async () => {
+	var _result$thumbmark;
 	const [, result] = await withError(thumbmark.get());
-	return result?.thumbmark ?? "";
+	return (_result$thumbmark = result === null || result === void 0 ? void 0 : result.thumbmark) !== null && _result$thumbmark !== void 0 ? _result$thumbmark : "";
 };
 const withError = async (p) => {
 	try {
@@ -501,6 +506,7 @@ function createVue3Driver(ComponentClass) {
 */
 function createAngularDriver(ComponentClass) {
 	return ({ Component: AngularComponent, NgModule, ElementRef, NgZone, Inject }) => {
+		var _options;
 		class ComponentInstance {
 			constructor(elementRef, zone) {
 				this.props = {};
@@ -537,7 +543,7 @@ function createAngularDriver(ComponentClass) {
 		}
 		ComponentInstance.parameters = [[new Inject(ElementRef)], [new Inject(NgZone)]];
 		ComponentInstance.annotations = [new AngularComponent({
-			selector: ComponentClass.prototype.__options?.tag || "bridge-component",
+			selector: ((_options = ComponentClass.prototype.__options) === null || _options === void 0 ? void 0 : _options.tag) || "bridge-component",
 			template: "<div></div>",
 			inputs: ["props"]
 		})];
@@ -573,10 +579,6 @@ function resolveDriver(name, ComponentClass, deps) {
 	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 = {
@@ -758,6 +760,7 @@ function attachRenderMethods(instance, options) {
 	* 8. createConnection — establish Penpal async RPC channel, deliver props via updateProps
 	*/
 	instance.render = async (container) => {
+		var _SANDBOX$options$tag;
 		if (renderState.destroyed) throw new Error("Component is destroyed");
 		if (renderState.frame) throw new Error("Component already rendered");
 		const targetEl = resolveContainer(container);
@@ -769,7 +772,7 @@ function attachRenderMethods(instance, options) {
 		frame.setAttribute("allowpaymentrequest", "true");
 		frame.setAttribute("allow", "payment");
 		frame.style.border = "none";
-		const sandbox = SANDBOX[options.tag] ?? "allow-scripts allow-forms allow-same-origin";
+		const sandbox = (_SANDBOX$options$tag = SANDBOX[options.tag]) !== null && _SANDBOX$options$tag !== void 0 ? _SANDBOX$options$tag : "allow-scripts allow-forms allow-same-origin";
 		frame.setAttribute("sandbox", sandbox);
 		if (!lifecycleWired) {
 			wireLifecycleProps(instance.props, instance.event);
@@ -802,34 +805,40 @@ function attachRenderMethods(instance, options) {
 		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
-			});
+			if (options.prerenderTemplate) {
+				var _options$dimensions;
+				placeholder = options.prerenderTemplate({
+					uid,
+					frame,
+					placeholder: void 0,
+					doc,
+					props: instance.props,
+					event: trackedEvent,
+					dimensions: (_options$dimensions = options.dimensions) !== null && _options$dimensions !== void 0 ? _options$dimensions : {
+						width: "100%",
+						height: "auto"
+					},
+					state: instance.state,
+					container: targetEl
+				});
+			}
+			if (options.containerTemplate) {
+				var _options$dimensions2;
+				containerNode = options.containerTemplate({
+					uid,
+					frame,
+					placeholder,
+					doc,
+					props: instance.props,
+					event: trackedEvent,
+					dimensions: (_options$dimensions2 = options.dimensions) !== null && _options$dimensions2 !== void 0 ? _options$dimensions2 : {
+						width: "100%",
+						height: "auto"
+					},
+					state: instance.state,
+					container: targetEl
+				});
+			}
 			({dataProps, functionNames} = buildDataPayload({
 				props: instance.props,
 				options,
@@ -853,8 +862,9 @@ function attachRenderMethods(instance, options) {
 		const targetOrigin = new URL(options.url).origin;
 		const sendInitialProps = () => {
 			try {
-				frame.contentWindow?.postMessage({
-					type: BRIDGE_INIT_MSG,
+				var _frame$contentWindow;
+				(_frame$contentWindow = frame.contentWindow) === null || _frame$contentWindow === void 0 || _frame$contentWindow.postMessage({
+					type: "__monei_bridge_init__",
 					props: dataProps,
 					functionNames
 				}, targetOrigin);
@@ -898,9 +908,10 @@ function attachRenderMethods(instance, options) {
 			await remote.updateProps(dataProps, functionNames);
 			if (renderState.destroyed) return;
 			if (renderState.pendingPropsUpdate) {
+				var _pending$functionName;
 				const pending = renderState.pendingPropsUpdate;
 				renderState.pendingPropsUpdate = null;
-				const retainedFns = new Set(pending.functionNames ?? []);
+				const retainedFns = new Set((_pending$functionName = pending.functionNames) !== null && _pending$functionName !== void 0 ? _pending$functionName : []);
 				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));
@@ -995,8 +1006,9 @@ function attachRenderMethods(instance, options) {
 				}
 			}
 			if (resolvedFunctionNames) {
+				var _renderState$pendingP;
 				for (const name of resolvedFunctionNames) delete renderState.pendingPropsUpdate.dataProps[name];
-				renderState.pendingPropsUpdate.functionNames = [...renderState.pendingPropsUpdate.functionNames ?? [], ...resolvedFunctionNames];
+				renderState.pendingPropsUpdate.functionNames = [...(_renderState$pendingP = renderState.pendingPropsUpdate.functionNames) !== null && _renderState$pendingP !== void 0 ? _renderState$pendingP : [], ...resolvedFunctionNames];
 			}
 		}
 	};
@@ -1049,7 +1061,8 @@ function normalizeAliases(props, aliases) {
 	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;
+		var _reverseMap$get;
+		const canonicalKey = (_reverseMap$get = reverseMap.get(key)) !== null && _reverseMap$get !== void 0 ? _reverseMap$get : key;
 		result[canonicalKey] = value;
 	}
 	return result;
@@ -1124,7 +1137,7 @@ function createContainerTemplate(config = {}) {
 		const div = doc.createElement("div");
 		div.setAttribute("id", uid);
 		const style = doc.createElement("style");
-		if (props?.cspNonce) style.setAttribute("nonce", props.cspNonce);
+		if (props === null || props === void 0 ? void 0 : props.cspNonce) style.setAttribute("nonce", props.cspNonce);
 		if (modal) {
 			const backdrop = doc.createElement("div");
 			backdrop.classList.add("backdrop");
@@ -1191,8 +1204,9 @@ function createContainerTemplate(config = {}) {
 				}
 			});
 		} else {
-			const innerStyle = props?.style || props?.innerStyle;
-			const initialHeight = height === "0" ? "0" : toCSS(innerStyle?.base?.height || innerStyle?.height || (height === "auto" ? 45 : height));
+			var _innerStyle$base;
+			const innerStyle = (props === null || props === void 0 ? void 0 : props.style) || (props === null || props === void 0 ? void 0 : props.innerStyle);
+			const initialHeight = height === "0" ? "0" : toCSS((innerStyle === null || innerStyle === void 0 || (_innerStyle$base = innerStyle.base) === null || _innerStyle$base === void 0 ? void 0 : _innerStyle$base.height) || (innerStyle === null || innerStyle === void 0 ? void 0 : innerStyle.height) || (height === "auto" ? 45 : height));
 			const containerStyles = [
 				"display: block",
 				"position: relative",
@@ -1259,7 +1273,8 @@ const modalContainerTemplate = createContainerTemplate({ modal: true });
 //#endregion
 //#region src/card-input/index.ts
 const getCreateTokenFunction = (ref) => {
-	if (ref.state?.__createToken) return ref.state.__createToken;
+	var _ref$state;
+	if ((_ref$state = ref.state) === null || _ref$state === void 0 ? void 0 : _ref$state.__createToken) return ref.state.__createToken;
 	throw new Error("Index is not registered");
 };
 const createToken = async (component, options) => {
@@ -1288,7 +1303,8 @@ const CardInput = createComponent({
 	} },
 	validate: validateComponentProps,
 	submit: (instance) => async (opts) => {
-		const createTokenFn = instance.state?.__createToken;
+		var _instance$state;
+		const createTokenFn = (_instance$state = instance.state) === null || _instance$state === void 0 ? void 0 : _instance$state.__createToken;
 		if (!createTokenFn) throw new Error("CardInput is not rendered or connection is pending — call render() first");
 		const { data } = await createTokenFn(opts);
 		return data;
@@ -1310,8 +1326,8 @@ const CardInput = createComponent({
 		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));
+		if (style === null || style === void 0 ? void 0 : style.base) Object.assign(div.style, transformStyle(style.base));
+		if (style === null || style === void 0 ? void 0 : style.loading) Object.assign(div.style, transformStyle(style.loading));
 		body.appendChild(div);
 		html.appendChild(body);
 		return html;
@@ -1354,7 +1370,7 @@ const confirmPayment = (params) => {
 	document.body.appendChild(rootNode);
 	let modal = null;
 	const cleanup = () => {
-		modal?.destroy();
+		modal === null || modal === void 0 || modal.destroy();
 		modal = null;
 		Object.assign(document.body.style, { overflow: bodyOverflow });
 		if (rootNode.parentNode) rootNode.parentNode.removeChild(rootNode);
@@ -1382,6 +1398,7 @@ const confirmPayment = (params) => {
 //#region src/paypal/index.ts
 const namespace = "monei-paypal";
 const onLoadPaypal = async (props, state, src) => {
+	var _props$style$borderRa, _props$style, _props$onLoad;
 	state.__scriptId = (await loadScript(src, props.cspNonce, {
 		namespace,
 		cspNonce: props.cspNonce
@@ -1391,18 +1408,19 @@ const onLoadPaypal = async (props, state, src) => {
 		tagline: false,
 		height: 45
 	};
-	const radius = parsePx(props.style?.borderRadius ?? props.borderRadius);
+	const radius = parsePx((_props$style$borderRa = (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.borderRadius) !== null && _props$style$borderRa !== void 0 ? _props$style$borderRa : props.borderRadius);
 	if (radius) defaultStyle.borderRadius = radius;
 	const style = {
 		...defaultStyle,
 		...props.style
 	};
 	style.height = parsePx(style.height, 45);
-	props.onLoad?.(true);
+	(_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, true);
 	let token;
 	await window[namespace].Buttons({
 		createOrder: async () => {
 			try {
+				var _result$paypal;
 				const result = await createToken$1({
 					paymentId: props.paymentId,
 					accountId: props.accountId,
@@ -1413,15 +1431,19 @@ const onLoadPaypal = async (props, state, src) => {
 					paymentMethod: { paypal: {} }
 				});
 				({token} = result);
-				return result.paypal?.orderId;
+				return (_result$paypal = result.paypal) === null || _result$paypal === void 0 ? void 0 : _result$paypal.orderId;
 			} catch (error) {
-				props.onError?.(error);
+				var _props$onError;
+				(_props$onError = props.onError) === null || _props$onError === void 0 || _props$onError.call(props, error);
 				return;
 			}
 		},
 		onApprove: function(data) {
 			if (data.orderID) props.onSubmit({ token });
-			else props.onError?.(data);
+			else {
+				var _props$onError2;
+				(_props$onError2 = props.onError) === null || _props$onError2 === void 0 || _props$onError2.call(props, data);
+			}
 		},
 		onClick: function(_data, actions) {
 			let shouldOpen = true;
@@ -1458,7 +1480,8 @@ const PayPal = createComponent({
 		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) => {
+			var _namespace;
+			(_namespace = window[namespace]) === null || _namespace === void 0 || (_namespace = _namespace.Buttons) === null || _namespace === void 0 || (_namespace = _namespace.instances) === null || _namespace === void 0 || _namespace.forEach((instance) => {
 				instance.close();
 			});
 			const scriptId = params.state.__scriptId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monei-js/components",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "author": "MONEI <support@monei.com> (https://monei.com)",
   "description": "MONEI UI Components enable you to collect sensitive payment information using customizable UI components.",
   "homepage": "https://monei.com",