cppay-sdk 0.0.2-beta.34 → 0.0.2-beta.36

package/dist/vue.js

@@ -1,5 +1,5 @@
-import { t as cppay_default } from "./cppay-C_gp2ZZ3.js";
-import { n as injectStyle, r as payment_dialog_default, t as getLocaleMessages } from "./locales-DGvDecya.js";
+import { t as cppay_default } from "./cppay-DnoMkyVy.js";
+import { n as injectStyle, r as payment_dialog_default, t as getLocaleMessages } from "./locales-KW7cSv4d.js";
 import { Fragment, computed, createApp, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, watch, withCtx } from "vue";
 import * as QRCode from "qrcode";
 import { EMPTY, defer, timer } from "rxjs";
@@ -58,16 +58,6 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 		amount: {},
 		plain: { default: "one-time" },
 		intervalDays: {},
-		paymentStep: {},
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		isCheckingPayment: {
-			type: Boolean,
-			default: !1
-		},
-		error: {},
 		slots: {},
 		locale: {}
 	},
@@ -77,11 +67,13 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 		"expired",
 		"failed",
 		"error",
+		"update:loading",
+		"update:isCheckingPayment",
 		"update:error"
 	],
-	setup(c, { emit: l }) {
-		let f = c, p = l, m = computed(() => getLocaleMessages(f.locale || "zh-CN")), g = new cppay_default(f.apikey), b = ref([]), S = ref(), C = ref(), w = ref(), T = ref(), E = ref(!1), D = ref(), O = ref(""), k = ref(!1), A = ref(!1), j = ref(null), M = ref(null), N = ref(null), P = ref(null), F = () => {
-			typeof window < "u" && !j.value && (j.value = createAppKit({
+	setup(t, { emit: n }) {
+		let a = t, o = n, s = computed(() => getLocaleMessages(a.locale || "zh-CN")), c = new cppay_default(a.apikey), f = ref("select"), y = ref(!1), b = ref(!1), x = ref(), S = ref([]), C = ref(), w = ref(), T = ref(), E = ref(), D = ref(!1), O = ref(), k = ref(""), A = ref(!1), j = ref(!1), M = ref(null), N = ref(null), P = ref(null), F = ref(null), I = () => {
+			typeof window < "u" && !M.value && (M.value = createAppKit({
 				debug: !1,
 				enableNetworkSwitch: !1,
 				adapters: [new EthersAdapter()],
@@ -102,20 +94,30 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 					icons: ["https://cppay.com/icon.png"]
 				},
 				features: { analytics: !1 }
-			}), T.value = j.value.getAddress(), D.value = j.value.getProvider("eip155"), j.value.subscribeAccount((r) => {
-				r.isConnected ? T.value = r.address : (T.value = void 0, D.value = void 0);
-			}), j.value.subscribeProviders((r) => {
-				D.value = r?.eip155;
+			}), E.value = M.value.getAddress(), O.value = M.value.getProvider("eip155"), M.value.subscribeAccount((e) => {
+				e.isConnected ? E.value = e.address : (E.value = void 0, O.value = void 0);
+			}), M.value.subscribeProviders((e) => {
+				O.value = e?.eip155;
 			}));
-		}, I = async () => {
+		};
+		watch(f, (e) => {
+			o("update:paymentStep", e);
+		}), watch(y, (e) => {
+			o("update:loading", e);
+		}), watch(b, (e) => {
+			o("update:isCheckingPayment", e);
+		}), watch(x, (e) => {
+			o("update:error", e);
+		});
+		let L = async () => {
 			try {
-				E.value = !0, p("update:error", void 0), j.value && await j.value.open();
-			} catch (r) {
-				p("update:error", r instanceof Error ? r.message : m.value.walletConnectionFailed), p("error", r);
+				D.value = !0, x.value = void 0, M.value && await M.value.open();
+			} catch (e) {
+				x.value = e instanceof Error ? e.message : s.value.walletConnectionFailed, o("error", e);
 			} finally {
-				E.value = !1;
+				D.value = !1;
 			}
-		}, L = computed(() => b.value.find((r) => r.chain === S.value)), R = computed(() => L.value?.tokens || []), z = computed(() => R.value.find((r) => r.symbol === C.value)), B = (r) => [
+		}, R = computed(() => S.value.find((e) => e.chain === C.value)), z = computed(() => R.value?.tokens || []), B = computed(() => z.value.find((e) => e.symbol === w.value)), V = (e) => [
 			"USDT",
 			"USDC",
 			"BUSD",
@@ -123,55 +125,55 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 			"TUSD",
 			"USDD",
 			"FDUSD"
-		].includes(r.toUpperCase()) ? 2 : 6, V = (r, c) => {
-			let l = parseFloat(r);
-			return isNaN(l) ? "0" : l.toFixed(c).replace(/\.?0+$/, "");
-		}, H = (r) => {
-			if (r <= 0) return m.value.expired;
-			let c = Math.floor(r / 3600), l = Math.floor(r % 3600 / 60), u = r % 60;
-			return c > 0 ? `${c}${m.value.hours}${l}${m.value.minutes}${u}${m.value.seconds}` : `${l}${m.value.minutes}${u}${m.value.seconds}`;
-		}, U = (r) => {
-			N.value && clearInterval(N.value);
-			let c = () => {
-				let c = r - Math.floor(Date.now() / 1e3);
-				O.value = H(c), c <= 0 && (p("update:paymentStep", "expired"), W());
+		].includes(e.toUpperCase()) ? 2 : 6, H = (e, t) => {
+			let n = parseFloat(e);
+			return isNaN(n) ? "0" : n.toFixed(t).replace(/\.?0+$/, "");
+		}, U = (e) => {
+			if (e <= 0) return s.value.expired;
+			let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60;
+			return t > 0 ? `${t}${s.value.hours}${n}${s.value.minutes}${r}${s.value.seconds}` : `${n}${s.value.minutes}${r}${s.value.seconds}`;
+		}, W = (e) => {
+			P.value && clearInterval(P.value);
+			let t = () => {
+				let t = e - Math.floor(Date.now() / 1e3);
+				k.value = U(t), t <= 0 && (f.value = "expired", G());
 			};
-			c(), N.value = setInterval(c, 1e3);
-		}, W = () => {
-			N.value &&= (clearInterval(N.value), null);
-		}, G = computed(() => {
-			if (!C.value || !z.value) return "0";
-			let r = parseFloat(z.value.price);
-			if (isNaN(r) || r === 0) return "0";
-			let c = B(C.value);
-			return V((parseFloat(f.amount) / r).toFixed(c), c);
-		}), K = async () => {
+			t(), P.value = setInterval(t, 1e3);
+		}, G = () => {
+			P.value &&= (clearInterval(P.value), null);
+		}, K = computed(() => {
+			if (!w.value || !B.value) return "0";
+			let e = parseFloat(B.value.price);
+			if (isNaN(e) || e === 0) return "0";
+			let t = V(w.value);
+			return H((parseFloat(a.amount) / e).toFixed(t), t);
+		}), q = async () => {
 			try {
-				p("update:error", void 0);
-				let r = await g.getSupportedChains();
-				b.value = r, r.length > 0 && (S.value = r[0].chain);
-			} catch (r) {
-				p("update:error", r instanceof Error ? r.message : m.value.loadPaymentNetworkFailed), p("error", r);
+				x.value = void 0;
+				let e = await c.getSupportedChains();
+				S.value = e, e.length > 0 && (C.value = e[0].chain);
+			} catch (e) {
+				x.value = e instanceof Error ? e.message : s.value.loadPaymentNetworkFailed, o("error", e);
 			}
-		}, q = async (r) => {
-			if (D.value) try {
-				await D.value.request({
+		}, J = async (e) => {
+			if (O.value) try {
+				await O.value.request({
 					method: "wallet_switchEthereumChain",
-					params: [{ chainId: `0x${r.toString(16)}` }]
+					params: [{ chainId: `0x${e.toString(16)}` }]
 				});
-			} catch (r) {
-				throw r.code === 4902 ? Error(m.value.pleaseAddNetwork) : r;
+			} catch (e) {
+				throw e.code === 4902 ? Error(s.value.pleaseAddNetwork) : e;
 			}
-		}, J = async () => {
-			if (!(!T.value || !D.value || !P.value || !z.value || !L.value)) try {
-				let r = P.value;
-				await q(L.value.chainId);
-				let c = createWalletClient({
-					account: T.value,
-					transport: custom(D.value)
+		}, Y = async () => {
+			if (!(!E.value || !O.value || !F.value || !B.value || !R.value)) try {
+				let e = F.value;
+				await J(R.value.chainId);
+				let t = createWalletClient({
+					account: E.value,
+					transport: custom(O.value)
 				});
-				z.value.address ? await c.writeContract({
-					address: z.value.address,
+				B.value.address ? await t.writeContract({
+					address: B.value.address,
 					abi: [{
 						name: "transfer",
 						type: "function",
@@ -186,27 +188,27 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 						outputs: [{ type: "bool" }]
 					}],
 					functionName: "transfer",
-					args: [r.receiveAddress, parseUnits(r.paymentAmount, z.value.decimals)],
+					args: [e.receiveAddress, parseUnits(e.paymentAmount, B.value.decimals)],
 					chain: null
-				}) : await c.sendTransaction({
-					to: r.receiveAddress,
-					value: parseUnits(r.paymentAmount, z.value.decimals),
+				}) : await t.sendTransaction({
+					to: e.receiveAddress,
+					value: parseUnits(e.paymentAmount, B.value.decimals),
 					chain: null
-				}), w.value = void 0;
-			} catch (r) {
-				p("update:error", r instanceof Error ? r.message : m.value.walletPaymentFailed), p("error", r);
+				}), T.value = void 0;
+			} catch (e) {
+				o("update:error", e instanceof Error ? e.message : s.value.walletPaymentFailed), o("error", e);
 			}
-		}, Y = async () => {
-			if (!(!T.value || !D.value || !P.value || !z.value || !L.value)) try {
-				let r = P.value;
-				await q(L.value.chainId);
-				let c = createWalletClient({
-					account: T.value,
-					transport: custom(D.value)
+		}, X = async () => {
+			if (!(!E.value || !O.value || !F.value || !B.value || !R.value)) try {
+				let e = F.value;
+				await J(R.value.chainId);
+				let t = createWalletClient({
+					account: E.value,
+					transport: custom(O.value)
 				});
-				if (!z.value.address) throw Error(m.value.subscriptionDoesNotSupportNative);
-				await c.writeContract({
-					address: z.value.address,
+				if (!B.value.address) throw Error(s.value.subscriptionDoesNotSupportNative);
+				await t.writeContract({
+					address: B.value.address,
 					abi: [{
 						name: "approve",
 						type: "function",
@@ -221,143 +223,143 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 						outputs: [{ type: "bool" }]
 					}],
 					functionName: "approve",
-					args: [r.spenderAddress, parseUnits(r.approveAmount, z.value.decimals)],
+					args: [e.spenderAddress, parseUnits(e.approveAmount, B.value.decimals)],
 					chain: null
-				}), w.value = void 0;
-			} catch (r) {
-				p("update:error", r instanceof Error ? r.message : m.value.walletPaymentFailed), p("error", r);
+				}), T.value = void 0;
+			} catch (e) {
+				x.value = e instanceof Error ? e.message : s.value.walletPaymentFailed, o("error", e);
 			}
-		}, X = async () => {
-			if (!T.value) {
-				p("update:error", m.value.pleaseConnectWallet), p("error", Error(m.value.pleaseConnectWallet));
+		}, Z = async () => {
+			if (!E.value) {
+				x.value = s.value.pleaseConnectWallet, o("error", Error(s.value.pleaseConnectWallet));
 				return;
 			}
-			f.plain === "one-time" ? await J() : f.plain === "subscription" && await Y();
-		}, Z = async () => {
-			if (!(!S.value || !C.value)) try {
-				p("update:error", void 0);
-				let r = "";
-				f.plain === "one-time" ? (P.value = await g.createOnetimePayment({
-					paymentChain: S.value,
-					paymentToken: C.value,
-					orderId: f.orderId,
-					amount: G.value
-				}), r = `${S.value.toLowerCase()}:${P.value.receiveAddress}?amount=${P.value.paymentAmount}`, U(P.value.expireAt), Q({ paymentId: P.value.paymentId })) : f.plain === "subscription" && (P.value = await g.createSubscriptionPayment({
-					paymentChain: S.value,
-					paymentToken: C.value,
-					orderId: f.orderId,
-					amountOfUsd: G.value,
-					intervalDays: f.intervalDays || 30
-				}), r = `${S.value.toLowerCase()}:${P.value.spenderAddress}?amount=${P.value.approveAmount}`, U(P.value.expireAt), Q({ subscriptionId: P.value.subscriptionId })), p("update:paymentStep", "payment"), w.value = await QRCode.toDataURL(r, {
+			a.plain === "one-time" ? await Y() : a.plain === "subscription" && await X();
+		}, Q = async () => {
+			if (!(!C.value || !w.value)) try {
+				x.value = void 0;
+				let e = "";
+				a.plain === "one-time" ? (F.value = await c.createOnetimePayment({
+					paymentChain: C.value,
+					paymentToken: w.value,
+					orderId: a.orderId,
+					amount: K.value
+				}), e = `${C.value.toLowerCase()}:${F.value.receiveAddress}?amount=${F.value.paymentAmount}`, W(F.value.expireAt), $({ paymentId: F.value.paymentId })) : a.plain === "subscription" && (F.value = await c.createSubscriptionPayment({
+					paymentChain: C.value,
+					paymentToken: w.value,
+					orderId: a.orderId,
+					amountOfUsd: K.value,
+					intervalDays: a.intervalDays || 30
+				}), e = `${C.value.toLowerCase()}:${F.value.spenderAddress}?amount=${F.value.approveAmount}`, W(F.value.expireAt), $({ subscriptionId: F.value.subscriptionId })), f.value = "payment", T.value = await QRCode.toDataURL(e, {
 					width: 200,
 					margin: 2,
 					errorCorrectionLevel: "H"
 				});
-			} catch (r) {
-				p("update:error", r instanceof Error ? r.message : m.value.createPaymentFailed), p("error", r);
+			} catch (e) {
+				x.value = e instanceof Error ? e.message : s.value.createPaymentFailed, o("error", e);
 			}
-		}, Q = (r) => {
-			M.value?.unsubscribe();
-			let c = () => defer(() => f.plain === "subscription" ? g.checkSubscriptionPaymentStatus(r) : g.checkOnetimePaymentStatus(r)).pipe(timeout(15e3), retry({ delay: 2e3 }));
-			M.value = c().pipe(expand((r) => r.status === "pending" ? timer(2e3).pipe(switchMap(() => c())) : EMPTY), tap((r) => {
-				(r.status === "paid" || r.status === "approved") && (p("update:paymentStep", "success"), p("success", r)), r.status === "expired" && (p("update:paymentStep", "expired"), p("expired", r)), r.status === "failed" && (p("update:paymentStep", "failed"), p("failed", r));
+		}, $ = (e) => {
+			N.value?.unsubscribe();
+			let t = () => defer(() => a.plain === "subscription" ? c.checkSubscriptionPaymentStatus(e) : c.checkOnetimePaymentStatus(e)).pipe(timeout(15e3), retry({ delay: 2e3 }));
+			N.value = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
+				(e.status === "paid" || e.status === "approved") && (f.value = "success", o("success", e)), e.status === "expired" && (f.value = "expired", o("expired", e)), e.status === "failed" && (f.value = "failed", o("failed", e));
 			})).subscribe({
-				error: (r) => {
-					if (P.value) {
-						let c = r instanceof Error ? r.message : m.value.checkPaymentStatusFailed;
-						p("update:paymentStep", "error"), p("update:error", c), p("error", r);
+				error: (e) => {
+					if (F.value) {
+						let t = e instanceof Error ? e.message : s.value.checkPaymentStatusFailed;
+						f.value = "error", x.value = t, o("error", e);
 					}
 				},
 				complete: () => {
-					M.value?.unsubscribe();
+					N.value?.unsubscribe();
 				}
 			});
-		}, $ = async () => {
-			if (!P.value) return;
-			let r = f.plain === "subscription" ? P.value.spenderAddress : P.value.receiveAddress;
-			if (r) try {
-				await navigator.clipboard.writeText(r), k.value = !0, setTimeout(() => {
-					k.value = !1;
+		}, Rt = async () => {
+			if (!F.value) return;
+			let e = a.plain === "subscription" ? F.value.spenderAddress : F.value.receiveAddress;
+			if (e) try {
+				await navigator.clipboard.writeText(e), A.value = !0, setTimeout(() => {
+					A.value = !1;
 				}, 2e3);
-			} catch (r) {
-				console.error("复制失败:", r);
+			} catch (e) {
+				console.error("复制失败:", e);
 			}
 		};
-		return watch(() => f.paymentStep, (r) => {
-			r === "select" && b.value.length === 0 && K();
-		}, { immediate: !0 }), watch(R, (r) => {
-			r.length > 0 && !C.value && (C.value = r[0].symbol);
-		}), watch(() => f.orderId, (r) => {
-			r && Q({ orderId: r });
+		return watch(() => f.value, (e) => {
+			e === "select" && S.value.length === 0 && q();
+		}, { immediate: !0 }), watch(z, (e) => {
+			e.length > 0 && !w.value && (w.value = e[0].symbol);
+		}), watch(() => a.orderId, (e) => {
+			e && $({ orderId: e });
 		}), onMounted(() => {
-			F();
+			I();
 		}), onUnmounted(() => {
-			M.value?.unsubscribe(), W();
-		}), (r, l) => (openBlock(), createElementBlock("div", _hoisted_1$1, [c.paymentStep === "success" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
-			l[7] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "✅", -1),
-			createElementVNode("h3", _hoisted_3$1, toDisplayString(c.plain === "subscription" ? m.value.authorizationSuccess : m.value.paymentSuccess), 1),
-			createElementVNode("p", _hoisted_4$1, toDisplayString(c.plain === "subscription" ? m.value.subscriptionActivated : m.value.transactionCompleted), 1)
-		])) : c.paymentStep === "expired" ? (openBlock(), createElementBlock("div", _hoisted_5, [
-			l[8] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "⏰", -1),
-			createElementVNode("h3", _hoisted_6, toDisplayString(m.value.paymentExpired), 1),
+			N.value?.unsubscribe(), G();
+		}), (e, n) => (openBlock(), createElementBlock("div", _hoisted_1$1, [f.value === "success" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+			n[7] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "✅", -1),
+			createElementVNode("h3", _hoisted_3$1, toDisplayString(t.plain === "subscription" ? s.value.authorizationSuccess : s.value.paymentSuccess), 1),
+			createElementVNode("p", _hoisted_4$1, toDisplayString(t.plain === "subscription" ? s.value.subscriptionActivated : s.value.transactionCompleted), 1)
+		])) : f.value === "expired" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+			n[8] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "⏰", -1),
+			createElementVNode("h3", _hoisted_6, toDisplayString(s.value.paymentExpired), 1),
 			createElementVNode("button", {
-				onClick: l[0] ||= (c) => r.$emit("update:paymentStep", "select"),
-				disabled: c.loading || c.isCheckingPayment,
+				onClick: n[0] ||= (e) => f.value = "select",
+				disabled: y.value || b.value,
 				class: "_cppay-btn _cppay-btn-text"
-			}, toDisplayString(m.value.returnButton), 9, _hoisted_7)
-		])) : c.paymentStep === "error" ? (openBlock(), createElementBlock("div", _hoisted_8, [l[9] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", _hoisted_9, toDisplayString(m.value.checking), 1)])) : c.paymentStep === "failed" ? (openBlock(), createElementBlock("div", _hoisted_10, [l[10] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", _hoisted_11, toDisplayString(m.value.paymentFailed), 1)])) : c.paymentStep === "select" ? (openBlock(), createElementBlock("div", _hoisted_12, [
-			renderSlot(r.$slots, "choose-top"),
-			createElementVNode("div", _hoisted_13, [createElementVNode("label", _hoisted_14, toDisplayString(m.value.paymentNetwork), 1), createElementVNode("div", _hoisted_15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(b.value, (r) => (openBlock(), createElementBlock("button", {
-				key: r.chain,
-				onClick: (c) => S.value = r.chain,
-				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": S.value === r.chain }])
-			}, [r.icon ? (openBlock(), createElementBlock("img", {
+			}, toDisplayString(s.value.returnButton), 9, _hoisted_7)
+		])) : f.value === "error" ? (openBlock(), createElementBlock("div", _hoisted_8, [n[9] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", _hoisted_9, toDisplayString(s.value.checking), 1)])) : f.value === "failed" ? (openBlock(), createElementBlock("div", _hoisted_10, [n[10] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", _hoisted_11, toDisplayString(s.value.paymentFailed), 1)])) : f.value === "select" ? (openBlock(), createElementBlock("div", _hoisted_12, [
+			renderSlot(e.$slots, "choose-top"),
+			createElementVNode("div", _hoisted_13, [createElementVNode("label", _hoisted_14, toDisplayString(s.value.paymentNetwork), 1), createElementVNode("div", _hoisted_15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(S.value, (e) => (openBlock(), createElementBlock("button", {
+				key: e.chain,
+				onClick: (t) => C.value = e.chain,
+				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": C.value === e.chain }])
+			}, [e.icon ? (openBlock(), createElementBlock("img", {
 				key: 0,
-				src: r.icon,
-				alt: r.chain
-			}, null, 8, _hoisted_17)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(r.chain), 1)], 10, _hoisted_16))), 128))])]),
-			createElementVNode("div", _hoisted_18, [createElementVNode("label", _hoisted_19, toDisplayString(m.value.paymentToken), 1), createElementVNode("div", _hoisted_20, [(openBlock(!0), createElementBlock(Fragment, null, renderList(R.value, (r) => (openBlock(), createElementBlock("button", {
-				key: r.symbol,
-				onClick: (c) => C.value = r.symbol,
-				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": C.value === r.symbol }])
-			}, [r.icon ? (openBlock(), createElementBlock("img", {
+				src: e.icon,
+				alt: e.chain
+			}, null, 8, _hoisted_17)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.chain), 1)], 10, _hoisted_16))), 128))])]),
+			createElementVNode("div", _hoisted_18, [createElementVNode("label", _hoisted_19, toDisplayString(s.value.paymentToken), 1), createElementVNode("div", _hoisted_20, [(openBlock(!0), createElementBlock(Fragment, null, renderList(z.value, (e) => (openBlock(), createElementBlock("button", {
+				key: e.symbol,
+				onClick: (t) => w.value = e.symbol,
+				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": w.value === e.symbol }])
+			}, [e.icon ? (openBlock(), createElementBlock("img", {
 				key: 0,
-				src: r.icon,
-				alt: r.symbol
-			}, null, 8, _hoisted_22)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(r.symbol), 1)], 10, _hoisted_21))), 128))])]),
-			renderSlot(r.$slots, "choose-bottom"),
-			createElementVNode("div", _hoisted_23, [createElementVNode("div", _hoisted_24, [createElementVNode("div", _hoisted_25, [createElementVNode("span", _hoisted_26, toDisplayString(m.value.paymentAmount), 1), createElementVNode("div", _hoisted_27, [createElementVNode("div", _hoisted_28, toDisplayString(G.value ?? "-") + " " + toDisplayString(C.value ?? ""), 1), createElementVNode("div", _hoisted_29, "≈ $" + toDisplayString(c.amount), 1)])])])]),
-			createElementVNode("div", _hoisted_30, [c.error ? (openBlock(), createElementBlock("div", {
+				src: e.icon,
+				alt: e.symbol
+			}, null, 8, _hoisted_22)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.symbol), 1)], 10, _hoisted_21))), 128))])]),
+			renderSlot(e.$slots, "choose-bottom"),
+			createElementVNode("div", _hoisted_23, [createElementVNode("div", _hoisted_24, [createElementVNode("div", _hoisted_25, [createElementVNode("span", _hoisted_26, toDisplayString(s.value.paymentAmount), 1), createElementVNode("div", _hoisted_27, [createElementVNode("div", _hoisted_28, toDisplayString(K.value ?? "-") + " " + toDisplayString(w.value ?? ""), 1), createElementVNode("div", _hoisted_29, "≈ $" + toDisplayString(t.amount), 1)])])])]),
+			createElementVNode("div", _hoisted_30, [x.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "_cppay-error-tooltip-wrapper",
-				onMouseenter: l[1] ||= (r) => A.value = !0,
-				onMouseleave: l[2] ||= (r) => A.value = !1
-			}, [createElementVNode("div", _hoisted_31, [l[11] ||= createElementVNode("svg", {
+				onMouseenter: n[1] ||= (e) => j.value = !0,
+				onMouseleave: n[2] ||= (e) => j.value = !1
+			}, [createElementVNode("div", _hoisted_31, [n[11] ||= createElementVNode("svg", {
 				viewBox: "0 0 20 20",
 				fill: "currentColor"
 			}, [createElementVNode("path", {
 				"fill-rule": "evenodd",
 				d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
 				"clip-rule": "evenodd"
-			})], -1), createElementVNode("span", null, toDisplayString(c.error), 1)]), A.value ? (openBlock(), createElementBlock("div", _hoisted_32, toDisplayString(c.error), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0), createElementVNode("button", {
-				onClick: Z,
-				disabled: !S.value || !C.value || c.loading,
+			})], -1), createElementVNode("span", null, toDisplayString(x.value), 1)]), j.value ? (openBlock(), createElementBlock("div", _hoisted_32, toDisplayString(x.value), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0), createElementVNode("button", {
+				onClick: Q,
+				disabled: !C.value || !w.value || y.value,
 				class: "_cppay-btn _cppay-btn-primary"
-			}, toDisplayString(c.loading ? m.value.processing : m.value.continuePayment), 9, _hoisted_33)])
+			}, toDisplayString(y.value ? s.value.processing : s.value.continuePayment), 9, _hoisted_33)])
 		])) : (openBlock(), createElementBlock("div", _hoisted_34, [
-			createElementVNode("div", _hoisted_35, [createElementVNode("div", _hoisted_36, [w.value ? (openBlock(), createElementBlock("img", {
+			createElementVNode("div", _hoisted_35, [createElementVNode("div", _hoisted_36, [T.value ? (openBlock(), createElementBlock("img", {
 				key: 0,
-				src: w.value,
+				src: T.value,
 				alt: "Payment QR Code",
 				class: "_cppay-qr-image"
 			}, null, 8, _hoisted_37)) : createCommentVNode("", !0)])]),
 			createElementVNode("div", _hoisted_38, [
-				z.value ? (openBlock(), createElementBlock("div", _hoisted_39, [createElementVNode("div", _hoisted_40, [createElementVNode("div", _hoisted_41, [createElementVNode("div", _hoisted_42, toDisplayString(c.plain === "subscription" ? m.value.authorizationAmount : m.value.paymentAmount), 1), createElementVNode("div", _hoisted_43, [P.value ? (openBlock(), createElementBlock("span", _hoisted_44, toDisplayString(c.plain === "subscription" ? `${V(P.value.approveAmount, B(z.value.symbol))} ${z.value.symbol}` : `${V(P.value.paymentAmount, B(z.value.symbol))} ${z.value.symbol}`), 1)) : createCommentVNode("", !0), createElementVNode("span", null, "≈ $" + toDisplayString(c.amount), 1)])])])])) : createCommentVNode("", !0),
-				createElementVNode("div", _hoisted_45, [createElementVNode("div", _hoisted_46, [createElementVNode("div", _hoisted_47, [createElementVNode("span", null, toDisplayString(c.plain === "subscription" ? m.value.authorizationContractAddress : m.value.paymentAddress), 1), O.value ? (openBlock(), createElementBlock("span", _hoisted_48, "⏰ " + toDisplayString(O.value), 1)) : createCommentVNode("", !0)]), createElementVNode("div", _hoisted_49, [P.value ? (openBlock(), createElementBlock("code", _hoisted_50, toDisplayString(c.plain === "subscription" ? P.value.spenderAddress : P.value.receiveAddress), 1)) : createCommentVNode("", !0), createElementVNode("button", {
-					onClick: $,
-					class: normalizeClass(["_cppay-copy-btn", { "_cppay-copy-success": k.value }]),
-					title: k.value ? m.value.copied : m.value.copyAddress
-				}, [k.value ? (openBlock(), createElementBlock("svg", _hoisted_53, [...l[13] ||= [createElementVNode("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }, null, -1)]])) : (openBlock(), createElementBlock("svg", _hoisted_52, [...l[12] ||= [createElementVNode("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }, null, -1), createElementVNode("rect", {
+				B.value ? (openBlock(), createElementBlock("div", _hoisted_39, [createElementVNode("div", _hoisted_40, [createElementVNode("div", _hoisted_41, [createElementVNode("div", _hoisted_42, toDisplayString(t.plain === "subscription" ? s.value.authorizationAmount : s.value.paymentAmount), 1), createElementVNode("div", _hoisted_43, [F.value ? (openBlock(), createElementBlock("span", _hoisted_44, toDisplayString(t.plain === "subscription" ? `${H(F.value.approveAmount, V(B.value.symbol))} ${B.value.symbol}` : `${H(F.value.paymentAmount, V(B.value.symbol))} ${B.value.symbol}`), 1)) : createCommentVNode("", !0), createElementVNode("span", null, "≈ $" + toDisplayString(t.amount), 1)])])])])) : createCommentVNode("", !0),
+				createElementVNode("div", _hoisted_45, [createElementVNode("div", _hoisted_46, [createElementVNode("div", _hoisted_47, [createElementVNode("span", null, toDisplayString(t.plain === "subscription" ? s.value.authorizationContractAddress : s.value.paymentAddress), 1), k.value ? (openBlock(), createElementBlock("span", _hoisted_48, "⏰ " + toDisplayString(k.value), 1)) : createCommentVNode("", !0)]), createElementVNode("div", _hoisted_49, [F.value ? (openBlock(), createElementBlock("code", _hoisted_50, toDisplayString(t.plain === "subscription" ? F.value.spenderAddress : F.value.receiveAddress), 1)) : createCommentVNode("", !0), createElementVNode("button", {
+					onClick: Rt,
+					class: normalizeClass(["_cppay-copy-btn", { "_cppay-copy-success": A.value }]),
+					title: A.value ? s.value.copied : s.value.copyAddress
+				}, [A.value ? (openBlock(), createElementBlock("svg", _hoisted_53, [...n[13] ||= [createElementVNode("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }, null, -1)]])) : (openBlock(), createElementBlock("svg", _hoisted_52, [...n[12] ||= [createElementVNode("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }, null, -1), createElementVNode("rect", {
 					x: "8",
 					y: "2",
 					width: "8",
@@ -365,31 +367,31 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 					rx: "1",
 					ry: "1"
 				}, null, -1)]]))], 10, _hoisted_51)])])]),
-				c.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_54, [createElementVNode("div", _hoisted_55, toDisplayString(m.value.subscriptionNotice), 1), createElementVNode("div", _hoisted_56, toDisplayString(m.value.subscriptionNoticeMessage), 1)])) : createCommentVNode("", !0)
+				t.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_54, [createElementVNode("div", _hoisted_55, toDisplayString(s.value.subscriptionNotice), 1), createElementVNode("div", _hoisted_56, toDisplayString(s.value.subscriptionNoticeMessage), 1)])) : createCommentVNode("", !0)
 			]),
-			c.error ? (openBlock(), createElementBlock("div", {
+			x.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "_cppay-error-tooltip-wrapper",
-				onMouseenter: l[3] ||= (r) => A.value = !0,
-				onMouseleave: l[4] ||= (r) => A.value = !1
-			}, [createElementVNode("div", _hoisted_57, [l[14] ||= createElementVNode("svg", {
+				onMouseenter: n[3] ||= (e) => j.value = !0,
+				onMouseleave: n[4] ||= (e) => j.value = !1
+			}, [createElementVNode("div", _hoisted_57, [n[14] ||= createElementVNode("svg", {
 				viewBox: "0 0 20 20",
 				fill: "currentColor"
 			}, [createElementVNode("path", {
 				"fill-rule": "evenodd",
 				d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
 				"clip-rule": "evenodd"
-			})], -1), createElementVNode("span", null, toDisplayString(c.error), 1)]), A.value ? (openBlock(), createElementBlock("div", _hoisted_58, toDisplayString(c.error), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0),
-			c.isCheckingPayment ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_59, [T.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
-				onClick: X,
-				disabled: c.loading,
+			})], -1), createElementVNode("span", null, toDisplayString(x.value), 1)]), j.value ? (openBlock(), createElementBlock("div", _hoisted_58, toDisplayString(x.value), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0),
+			b.value ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_59, [E.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+				onClick: Z,
+				disabled: y.value,
 				class: "_cppay-btn _cppay-btn-primary"
-			}, toDisplayString(c.loading ? c.plain === "subscription" ? m.value.authorizing : m.value.processing : (c.plain, m.value.walletPay)), 9, _hoisted_61), createElementVNode("button", {
-				onClick: I,
-				disabled: c.loading,
+			}, toDisplayString(y.value ? t.plain === "subscription" ? s.value.authorizing : s.value.processing : (t.plain, s.value.walletPay)), 9, _hoisted_61), createElementVNode("button", {
+				onClick: L,
+				disabled: y.value,
 				class: "_cppay-btn _cppay-wallet-address-btn",
-				title: m.value.clickToModifyWallet
-			}, [createElementVNode("span", _hoisted_63, toDisplayString(T.value.slice(0, 10)) + "..." + toDisplayString(T.value.slice(-4)), 1), l[15] ||= createElementVNode("svg", {
+				title: s.value.clickToModifyWallet
+			}, [createElementVNode("span", _hoisted_63, toDisplayString(E.value.slice(0, 10)) + "..." + toDisplayString(E.value.slice(-4)), 1), n[15] ||= createElementVNode("svg", {
 				class: "_cppay-wallet-arrow",
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -397,21 +399,21 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 				"stroke-width": "2"
 			}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1)], 8, _hoisted_62)], 64)) : (openBlock(), createElementBlock("button", {
 				key: 0,
-				onClick: I,
-				disabled: E.value,
+				onClick: L,
+				disabled: D.value,
 				class: "_cppay-btn _cppay-btn-secondary _cppay-connect-wallet-btn"
-			}, [createElementVNode("span", null, toDisplayString(E.value ? m.value.processing : m.value.connectWallet), 1)], 8, _hoisted_60))])),
+			}, [createElementVNode("span", null, toDisplayString(D.value ? s.value.processing : s.value.connectWallet), 1)], 8, _hoisted_60))])),
 			createElementVNode("div", _hoisted_64, [createElementVNode("button", {
-				onClick: l[5] ||= (c) => r.$emit("update:paymentStep", "payment"),
-				disabled: c.isCheckingPayment,
+				onClick: n[5] ||= (e) => f.value = "payment",
+				disabled: b.value,
 				class: "_cppay-btn _cppay-btn-primary"
-			}, toDisplayString(c.isCheckingPayment ? m.value.checking : m.value.completedPayment), 9, _hoisted_65)]),
-			l[16] ||= createElementVNode("hr", { class: "_cppay-divider" }, null, -1),
+			}, toDisplayString(b.value ? s.value.checking : s.value.completedPayment), 9, _hoisted_65)]),
+			n[16] ||= createElementVNode("hr", { class: "_cppay-divider" }, null, -1),
 			createElementVNode("div", _hoisted_66, [createElementVNode("button", {
-				onClick: l[6] ||= (c) => r.$emit("update:paymentStep", "select"),
-				disabled: c.loading || c.isCheckingPayment,
+				onClick: n[6] ||= (e) => f.value = "select",
+				disabled: y.value || b.value,
 				class: "_cppay-btn _cppay-btn-text"
-			}, toDisplayString(m.value.changePaymentMethod), 9, _hoisted_67)])
+			}, toDisplayString(s.value.changePaymentMethod), 9, _hoisted_67)])
 		]))]));
 	}
 }), _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-header" }, _hoisted_3 = { class: "_cppay-title" }, _hoisted_4 = ["disabled"], PaymentDialog_default = /* @__PURE__ */ defineComponent({
@@ -432,43 +434,53 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 		"failed",
 		"error"
 	],
-	setup(r, { emit: c }) {
-		let l = r, d = c, f = computed(() => getLocaleMessages(l.locale)), m = ref("select"), g = ref(!1), _ = ref(!1), v = ref();
-		watch(() => m.value, (r) => {
-			r === "success" && setTimeout(() => {
-				y();
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = computed(() => getLocaleMessages(n.locale)), s = ref("select"), c = ref(!1), l = ref(!1), u = ref();
+		watch(() => s.value, (e) => {
+			e === "success" && setTimeout(() => {
+				_();
 			}, 1e3);
-		}), watch(() => l.modelValue, (r) => {
-			r || (m.value = "select", v.value = void 0, g.value = !1, _.value = !1);
-		}), onMounted(() => {
-			let r = (r) => {
-				r.key === "Escape" && l.modelValue && !g.value && !_.value && y();
+		}), watch(() => n.modelValue, (e) => {
+			e || (s.value = "select", u.value = void 0, c.value = !1, l.value = !1);
+		});
+		let d = (e) => {
+			s.value = e;
+		}, p = (e) => {
+			c.value = e;
+		}, m = (e) => {
+			l.value = e;
+		}, g = (e) => {
+			u.value = e;
+		};
+		onMounted(() => {
+			let e = (e) => {
+				e.key === "Escape" && n.modelValue && !c.value && !l.value && _();
 			};
-			return window.addEventListener("keydown", r), () => {
-				window.removeEventListener("keydown", r);
+			return window.addEventListener("keydown", e), () => {
+				window.removeEventListener("keydown", e);
 			};
 		});
-		let y = () => {
-			g.value || _.value || d("update:modelValue", !1);
-		}, x = () => {
-			switch (m.value) {
-				case "success": return f.value.paymentResult;
-				case "expired": return f.value.paymentExpired;
-				case "failed": return f.value.paymentFailed;
-				case "error": return f.value.error;
-				case "payment": return f.value.completePayment;
-				default: return f.value.selectPaymentMethod;
+		let _ = () => {
+			c.value || l.value || i("update:modelValue", !1);
+		}, v = () => {
+			switch (s.value) {
+				case "success": return a.value.paymentResult;
+				case "expired": return a.value.paymentExpired;
+				case "failed": return a.value.paymentFailed;
+				case "error": return a.value.error;
+				case "payment": return a.value.completePayment;
+				default: return a.value.selectPaymentMethod;
 			}
 		};
-		return (c, l) => r.modelValue ? (openBlock(), createElementBlock("div", {
+		return (t, n) => e.modelValue ? (openBlock(), createElementBlock("div", {
 			key: 0,
 			class: "_cppay-overlay",
-			onClick: l[6] ||= (r) => r.target === r.currentTarget && !g.value && !_.value && y()
-		}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(x()), 1), createElementVNode("button", {
-			onClick: y,
-			disabled: g.value || _.value,
+			onClick: n[4] ||= (e) => e.target === e.currentTarget && !c.value && !l.value && _()
+		}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(v()), 1), createElementVNode("button", {
+			onClick: _,
+			disabled: c.value || l.value,
 			class: "_cppay-close-btn"
-		}, [...l[7] ||= [createElementVNode("svg", {
+		}, [...n[5] ||= [createElementVNode("svg", {
 			fill: "none",
 			stroke: "currentColor",
 			viewBox: "0 0 24 24"
@@ -478,25 +490,23 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 			"stroke-width": "2",
 			d: "M6 18L18 6M6 6l12 12"
 		})], -1)]], 8, _hoisted_4)]), createVNode(PaymentContent_default, {
-			apikey: r.apikey,
-			orderId: r.orderId,
-			amount: r.amount,
-			plain: r.plain,
-			intervalDays: r.intervalDays,
-			locale: r.locale,
-			paymentStep: m.value,
-			loading: g.value,
-			isCheckingPayment: _.value,
-			error: v.value,
-			"onUpdate:paymentStep": l[0] ||= (r) => m.value = r,
-			"onUpdate:error": l[1] ||= (r) => v.value = r,
-			onSuccess: l[2] ||= (r) => d("success", r),
-			onExpired: l[3] ||= (r) => d("expired", r),
-			onFailed: l[4] ||= (r) => d("failed", r),
-			onError: l[5] ||= (r) => d("error", r)
+			apikey: e.apikey,
+			orderId: e.orderId,
+			amount: e.amount,
+			plain: e.plain,
+			intervalDays: e.intervalDays,
+			locale: e.locale,
+			"onUpdate:paymentStep": d,
+			"onUpdate:loading": p,
+			"onUpdate:isCheckingPayment": m,
+			"onUpdate:error": g,
+			onSuccess: n[0] ||= (e) => i("success", e),
+			onExpired: n[1] ||= (e) => i("expired", e),
+			onFailed: n[2] ||= (e) => i("failed", e),
+			onError: n[3] ||= (e) => i("error", e)
 		}, {
-			"choose-top": withCtx(() => [renderSlot(c.$slots, "choose-top")]),
-			"choose-bottom": withCtx(() => [renderSlot(c.$slots, "choose-bottom")]),
+			"choose-top": withCtx(() => [renderSlot(t.$slots, "choose-top")]),
+			"choose-bottom": withCtx(() => [renderSlot(t.$slots, "choose-bottom")]),
 			_: 3
 		}, 8, [
 			"apikey",
@@ -504,11 +514,7 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 			"amount",
 			"plain",
 			"intervalDays",
-			"locale",
-			"paymentStep",
-			"loading",
-			"isCheckingPayment",
-			"error"
+			"locale"
 		])])])) : createCommentVNode("", !0);
 	}
 }), cppayState = ref({
@@ -516,35 +522,35 @@ var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 	open: !1,
 	options: null
 });
-const showPayment = (r) => {
-	cppayState.value.options = r, cppayState.value.open = !0;
+const showPayment = (e) => {
+	cppayState.value.options = e, cppayState.value.open = !0;
 }, closePayment = () => {
 	cppayState.value.open = !1;
 };
 var handleClose = () => {
 	cppayState.value.open = !1;
-}, handleSuccess = (r) => {
-	cppayState.value.options?.onSuccess?.(r), setTimeout(() => {
+}, handleSuccess = (e) => {
+	cppayState.value.options?.onSuccess?.(e), setTimeout(() => {
 		cppayState.value.open = !1;
 	}, 1e3);
-}, handleExpired = (r) => {
-	cppayState.value.options?.onExpired?.(r);
-}, handleFailed = (r) => {
-	cppayState.value.options?.onFailed?.(r);
-}, handleError = (r) => {
-	cppayState.value.options?.onError?.(r);
+}, handleExpired = (e) => {
+	cppayState.value.options?.onExpired?.(e);
+}, handleFailed = (e) => {
+	cppayState.value.options?.onFailed?.(e);
+}, handleError = (e) => {
+	cppayState.value.options?.onError?.(e);
 };
-const CppayPlugin = { install(r, c) {
-	if (!c?.apikey) throw Error("Cppay plugin requires an apikey");
-	cppayState.value.apikey = c.apikey, r.config.globalProperties.$showPayment = showPayment, r.config.globalProperties.$closePayment = closePayment;
-	let l = (r) => {
-		r.key === "Escape" && cppayState.value.open && handleClose();
-	}, u = document.createElement("div");
-	document.body.appendChild(u), createApp({ setup() {
+const CppayPlugin = { install(e, t) {
+	if (!t?.apikey) throw Error("Cppay plugin requires an apikey");
+	cppayState.value.apikey = t.apikey, e.config.globalProperties.$showPayment = showPayment, e.config.globalProperties.$closePayment = closePayment;
+	let n = (e) => {
+		e.key === "Escape" && cppayState.value.open && handleClose();
+	}, r = document.createElement("div");
+	document.body.appendChild(r), createApp({ setup() {
 		return () => cppayState.value.options ? h(PaymentDialog_default, {
 			modelValue: cppayState.value.open,
-			"onUpdate:modelValue": (r) => {
-				cppayState.value.open = r, r || handleClose();
+			"onUpdate:modelValue": (e) => {
+				cppayState.value.open = e, e || handleClose();
 			},
 			apikey: cppayState.value.apikey,
 			plain: cppayState.value.options.plain,
@@ -556,8 +562,8 @@ const CppayPlugin = { install(r, c) {
 			onFailed: handleFailed,
 			onError: handleError
 		}) : null;
-	} }).mount(u), cppayState.value.open && document.addEventListener("keydown", l), r.config.globalProperties.$watchEffect?.(() => {
-		cppayState.value.open ? document.addEventListener("keydown", l) : document.removeEventListener("keydown", l);
+	} }).mount(r), cppayState.value.open && document.addEventListener("keydown", n), e.config.globalProperties.$watchEffect?.(() => {
+		cppayState.value.open ? document.addEventListener("keydown", n) : document.removeEventListener("keydown", n);
 	});
 } }, useCppayPayment = () => {
 	if (!cppayState.value.apikey) throw Error("useCppayPayment must be used after installing CppayPlugin");