cppay-sdk 0.0.2-beta.31 → 0.0.2-beta.32

package/dist/vue.js

@@ -1,6 +1,6 @@
-import { t as cppay_default } from "./cppay-BPtRBPjB.js";
-import { n as payment_dialog_default, t as injectStyle } from "./inject-style-CWza6SKp.js";
-import { Fragment, Teleport, Transition, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, watch, withCtx, withModifiers } from "vue";
+import { t as cppay_default } from "./cppay-C_gp2ZZ3.js";
+import { n as payment_dialog_default, t as injectStyle } from "./inject-style-DtFJ9cds.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";
 import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
@@ -8,98 +8,79 @@ import { createWalletClient, custom, parseUnits } from "viem";
 import { arbitrum, base, bsc, mainnet, optimism, polygon } from "viem/chains";
 import { createAppKit } from "@reown/appkit";
 import { EthersAdapter } from "@reown/appkit-adapter-ethers";
-var _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-header" }, _hoisted_3 = { class: "_cppay-title" }, _hoisted_4 = ["disabled"], _hoisted_5 = { class: "_cppay-content" }, _hoisted_6 = {
+var _hoisted_1$1 = { class: "_cppay-content" }, _hoisted_2$1 = {
 	key: 0,
-	style: {
-		"text-align": "center",
-		padding: "2rem 0"
-	}
-}, _hoisted_7 = { style: {
-	"font-size": "1.5rem",
-	"font-weight": "600",
-	color: "#10b981",
-	margin: "0 0 0.5rem 0"
-} }, _hoisted_8 = { style: {
-	color: "#6b7280",
-	margin: "0"
-} }, _hoisted_9 = { key: 1 }, _hoisted_10 = { class: "_cppay-section" }, _hoisted_11 = { class: "_cppay-grid" }, _hoisted_12 = ["onClick"], _hoisted_13 = ["src", "alt"], _hoisted_14 = { class: "_cppay-section" }, _hoisted_15 = { class: "_cppay-grid" }, _hoisted_16 = ["onClick"], _hoisted_17 = ["src", "alt"], _hoisted_18 = { class: "_cppay-section" }, _hoisted_19 = { class: "_cppay-price-box" }, _hoisted_20 = { class: "_cppay-price-row" }, _hoisted_21 = { class: "_cppay-price-amount" }, _hoisted_22 = { class: "_cppay-price-main" }, _hoisted_23 = { class: "_cppay-price-sub" }, _hoisted_24 = { class: "_cppay-section" }, _hoisted_25 = { class: "_cppay-error-tooltip" }, _hoisted_26 = {
+	class: "_cppay-state-container"
+}, _hoisted_3$1 = { class: "_cppay-state-title" }, _hoisted_4$1 = { class: "_cppay-state-message" }, _hoisted_5 = {
+	key: 1,
+	class: "_cppay-state-container"
+}, _hoisted_6 = ["disabled"], _hoisted_7 = {
+	key: 2,
+	class: "_cppay-state-container"
+}, _hoisted_8 = {
+	key: 3,
+	class: "_cppay-state-container"
+}, _hoisted_9 = { key: 4 }, _hoisted_10 = { class: "_cppay-section" }, _hoisted_11 = { class: "_cppay-grid" }, _hoisted_12 = ["onClick"], _hoisted_13 = ["src", "alt"], _hoisted_14 = { class: "_cppay-section" }, _hoisted_15 = { class: "_cppay-grid" }, _hoisted_16 = ["onClick"], _hoisted_17 = ["src", "alt"], _hoisted_18 = { class: "_cppay-section" }, _hoisted_19 = { class: "_cppay-price-box" }, _hoisted_20 = { class: "_cppay-price-row" }, _hoisted_21 = { class: "_cppay-price-amount" }, _hoisted_22 = { class: "_cppay-price-main" }, _hoisted_23 = { class: "_cppay-price-sub" }, _hoisted_24 = { class: "_cppay-section" }, _hoisted_25 = { class: "_cppay-error-tooltip" }, _hoisted_26 = {
 	key: 0,
 	class: "_cppay-error-tooltip-full"
-}, _hoisted_27 = ["disabled"], _hoisted_28 = { key: 2 }, _hoisted_29 = { class: "_cppay-qr-container" }, _hoisted_30 = { class: "_cppay-qr-code" }, _hoisted_31 = ["src"], _hoisted_32 = { class: "_cppay-section" }, _hoisted_33 = {
+}, _hoisted_27 = ["disabled"], _hoisted_28 = { key: 5 }, _hoisted_29 = { class: "_cppay-qr-container" }, _hoisted_30 = { class: "_cppay-qr-code" }, _hoisted_31 = ["src"], _hoisted_32 = { class: "_cppay-section" }, _hoisted_33 = {
 	key: 0,
 	class: "_cppay-info-box"
-}, _hoisted_34 = { class: "_cppay-info-label" }, _hoisted_35 = { class: "_cppay-info-value" }, _hoisted_36 = { class: "_cppay-info-box" }, _hoisted_37 = { class: "_cppay-info-label" }, _hoisted_38 = { class: "_cppay-address-row" }, _hoisted_39 = {
+}, _hoisted_34 = { class: "_cppay-info-flex-container" }, _hoisted_35 = { class: "_cppay-info-flex-child" }, _hoisted_36 = { class: "_cppay-info-label" }, _hoisted_37 = { class: "_cppay-info-value _cppay-info-value-flex" }, _hoisted_38 = { key: 0 }, _hoisted_39 = { class: "_cppay-info-box" }, _hoisted_40 = { class: "_cppay-info-flex-child" }, _hoisted_41 = { class: "_cppay-info-label _cppay-info-label-flex" }, _hoisted_42 = {
+	key: 0,
+	class: "_cppay-countdown"
+}, _hoisted_43 = { class: "_cppay-address-row" }, _hoisted_44 = { key: 0 }, _hoisted_45 = ["title"], _hoisted_46 = {
+	key: 0,
+	class: "_cppay-copy-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2"
+}, _hoisted_47 = {
 	key: 1,
-	class: "_cppay-info-box",
-	style: {
-		background: "#fff3cd",
-		"border-color": "#ffc107"
-	}
-}, _hoisted_40 = { class: "_cppay-error-tooltip" }, _hoisted_41 = {
+	class: "_cppay-copy-icon",
+	viewBox: "0 0 24 24",
+	fill: "currentColor"
+}, _hoisted_48 = {
+	key: 1,
+	class: "_cppay-info-box _cppay-subscription-box"
+}, _hoisted_49 = { class: "_cppay-error-tooltip" }, _hoisted_50 = {
 	key: 0,
 	class: "_cppay-error-tooltip-full"
-}, _hoisted_42 = {
+}, _hoisted_51 = {
 	key: 1,
 	class: "_cppay-section"
-}, _hoisted_43 = ["disabled"], _hoisted_44 = { key: 1 }, _hoisted_45 = { class: "_cppay-btn-container" }, _hoisted_46 = ["disabled"], _hoisted_47 = ["disabled"], _hoisted_48 = { style: {
-	"text-align": "center",
-	"margin-top": "8px",
-	"font-size": "12px",
-	color: "#666"
-} }, _hoisted_49 = { class: "_cppay-section" }, _hoisted_50 = ["disabled"], _hoisted_51 = { class: "_cppay-section" }, _hoisted_52 = ["disabled"], PaymentDialog_default = /* @__PURE__ */ ((e, g) => {
-	let _ = e.__vccOpts || e;
-	for (let [e, v] of g) _[e] = v;
-	return _;
-})(/* @__PURE__ */ defineComponent({
-	__name: "PaymentDialog",
+}, _hoisted_52 = ["disabled"], _hoisted_53 = ["disabled"], _hoisted_54 = ["disabled"], _hoisted_55 = { class: "_cppay-wallet-address-text" }, PaymentContent_default = /* @__PURE__ */ defineComponent({
+	__name: "PaymentContent",
 	props: {
-		modelValue: { type: Boolean },
 		apikey: {},
 		orderId: {},
 		amount: {},
 		plain: { default: "one-time" },
-		intervalDays: { default: 30 }
+		intervalDays: {},
+		paymentStep: {},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		isCheckingPayment: {
+			type: Boolean,
+			default: !1
+		},
+		error: {},
+		slots: {}
 	},
 	emits: [
-		"update:modelValue",
+		"update:paymentStep",
 		"success",
-		"error"
+		"expired",
+		"failed",
+		"error",
+		"update:error"
 	],
-	setup(g, { emit: _ }) {
-		let y = g, b = _, x = new cppay_default(y.apikey), S = ref("select"), C = ref(!1), w = ref(!1), T = ref(), E = ref(!1), D = ref([]), O = ref(), k = ref(), A = ref(null), j = ref(), M = ref(), N = ref(!1), P = ref(), F = ref(null), I, L = computed(() => D.value.find((e) => e.chain === O.value)), R = computed(() => L.value?.tokens || []), z = computed(() => R.value.find((e) => e.symbol === k.value)), B = (e) => [
-			"USDT",
-			"USDC",
-			"BUSD",
-			"DAI",
-			"TUSD",
-			"USDD",
-			"FDUSD"
-		].includes(e.toUpperCase()) ? 2 : 6, V = (e, g) => {
-			let _ = parseFloat(e);
-			return isNaN(_) ? "0" : _.toFixed(g).replace(/\.?0+$/, "");
-		}, H = computed(() => {
-			if (!k.value || !z.value) return "0";
-			let e = parseFloat(z.value.price);
-			if (isNaN(e) || e === 0) return "0";
-			let g = B(k.value);
-			return V((parseFloat(y.amount) / e).toFixed(g), g);
-		}), U = () => {
-			A.value && (T.value = void 0, w.value = !0, y.plain === "one-time" ? Q(A.value.paymentId) : y.plain === "subscription" && Q(A.value.subscriptionId));
-		}, W = () => {
-			C.value || w.value || (b("update:modelValue", !1), setTimeout(() => {
-				S.value = "select", T.value = void 0, A.value = null;
-			}, 300));
-		}, G = async () => {
-			try {
-				C.value = !0, T.value = void 0, D.value = await x.getSupportedChains(), D.value.length > 0 && (O.value = D.value[0].chain);
-			} catch (e) {
-				T.value = e instanceof Error ? e.message : "加载支付网络失败", b("error", e);
-			} finally {
-				C.value = !1;
-			}
-		};
-		onMounted(() => {
-			typeof window < "u" && !I && (I = createAppKit({
+	setup(d, { emit: f }) {
+		let g = d, _ = f, v = new cppay_default(g.apikey), y = 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({
 				debug: !1,
 				enableNetworkSwitch: !1,
 				adapters: [new EthersAdapter()],
@@ -120,82 +101,110 @@ var _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-heade
 					icons: ["https://cppay.com/icon.png"]
 				},
 				features: { analytics: !1 }
-			}), P.value = I.getProvider("eip155"), M.value = I.getAddress(), I.subscribeAccount((e) => {
-				e.isConnected ? M.value = e.address : (M.value = void 0, P.value = void 0);
-			}), I.subscribeProviders((e) => {
-				P.value = e?.eip155;
+			}), T.value = j.value.getAddress(), D.value = j.value.getProvider("eip155"), j.value.subscribeAccount((t) => {
+				t.isConnected ? T.value = t.address : (T.value = void 0, D.value = void 0);
+			}), j.value.subscribeProviders((t) => {
+				D.value = t?.eip155;
 			}));
-		});
-		let K = async () => {
+		}, I = async () => {
 			try {
-				N.value = !0, T.value = void 0, I && await I.open();
-			} catch (e) {
-				console.error("钱包连接失败:", e), T.value = e instanceof Error ? e.message : "钱包连接失败", b("error", e);
+				E.value = !0, _("update:error", void 0), j.value && await j.value.open();
+			} catch (t) {
+				_("update:error", t instanceof Error ? t.message : "钱包连接失败"), _("error", t);
 			} finally {
-				N.value = !1;
+				E.value = !1;
 			}
-		}, q = async (e) => {
-			if (P.value) try {
-				await P.value.request({
+		}, L = computed(() => y.value.find((t) => t.chain === S.value)), R = computed(() => L.value?.tokens || []), z = computed(() => R.value.find((t) => t.symbol === C.value)), B = (t) => [
+			"USDT",
+			"USDC",
+			"BUSD",
+			"DAI",
+			"TUSD",
+			"USDD",
+			"FDUSD"
+		].includes(t.toUpperCase()) ? 2 : 6, V = (t, d) => {
+			let f = parseFloat(t);
+			return isNaN(f) ? "0" : f.toFixed(d).replace(/\.?0+$/, "");
+		}, H = (t) => {
+			if (t <= 0) return "已过期";
+			let d = Math.floor(t / 3600), f = Math.floor(t % 3600 / 60), p = t % 60;
+			return d > 0 ? `${d}时${f}分${p}秒` : `${f}分${p}秒`;
+		}, U = (t) => {
+			N.value && clearInterval(N.value);
+			let d = () => {
+				let d = t - Math.floor(Date.now() / 1e3);
+				O.value = H(d), d <= 0 && (_("update:paymentStep", "expired"), W());
+			};
+			d(), N.value = setInterval(d, 1e3);
+		}, W = () => {
+			N.value &&= (clearInterval(N.value), null);
+		}, G = computed(() => {
+			if (!C.value || !z.value) return "0";
+			let t = parseFloat(z.value.price);
+			if (isNaN(t) || t === 0) return "0";
+			let d = B(C.value);
+			return V((parseFloat(g.amount) / t).toFixed(d), d);
+		}), K = async () => {
+			try {
+				_("update:error", void 0);
+				let t = await v.getSupportedChains();
+				y.value = t, t.length > 0 && (S.value = t[0].chain);
+			} catch (t) {
+				_("update:error", t instanceof Error ? t.message : "加载支付网络失败"), _("error", t);
+			}
+		}, q = async (t) => {
+			if (D.value) try {
+				await D.value.request({
 					method: "wallet_switchEthereumChain",
-					params: [{ chainId: `0x${e.toString(16)}` }]
+					params: [{ chainId: `0x${t.toString(16)}` }]
 				});
-			} catch (e) {
-				throw e.code === 4902 ? Error("请在钱包中添加该网络") : e;
+			} catch (t) {
+				throw t.code === 4902 ? Error("请在钱包中添加该网络") : t;
 			}
 		}, J = async () => {
-			if (!(!M.value || !P.value || !A.value || !z.value || !L.value)) try {
-				C.value = !0;
-				let e = A.value;
+			if (!(!T.value || !D.value || !P.value || !z.value || !L.value)) try {
+				let t = P.value;
 				await q(L.value.chainId);
-				let g = createWalletClient({
-					account: M.value,
-					transport: custom(P.value)
+				let d = createWalletClient({
+					account: T.value,
+					transport: custom(D.value)
 				});
-				if (z.value.address) {
-					let _ = await g.writeContract({
-						address: z.value.address,
-						abi: [{
-							name: "transfer",
-							type: "function",
-							stateMutability: "nonpayable",
-							inputs: [{
-								name: "to",
-								type: "address"
-							}, {
-								name: "amount",
-								type: "uint256"
-							}],
-							outputs: [{ type: "bool" }]
+				z.value.address ? await d.writeContract({
+					address: z.value.address,
+					abi: [{
+						name: "transfer",
+						type: "function",
+						stateMutability: "nonpayable",
+						inputs: [{
+							name: "to",
+							type: "address"
+						}, {
+							name: "amount",
+							type: "uint256"
 						}],
-						functionName: "transfer",
-						args: [e.receiveAddress, parseUnits(e.paymentAmount, z.value.decimals)],
-						chain: null
-					});
-					console.log("转账交易哈希:", _);
-				} else {
-					let _ = await g.sendTransaction({
-						to: e.receiveAddress,
-						value: parseUnits(e.paymentAmount, z.value.decimals),
-						chain: null
-					});
-					console.log("转账交易哈希:", _);
-				}
-				C.value = !1, w.value = !0, Q(e.paymentId);
-			} catch (e) {
-				console.error("钱包支付失败:", e), T.value = e instanceof Error ? e.message : "钱包支付失败", b("error", e), C.value = !1;
+						outputs: [{ type: "bool" }]
+					}],
+					functionName: "transfer",
+					args: [t.receiveAddress, parseUnits(t.paymentAmount, z.value.decimals)],
+					chain: null
+				}) : await d.sendTransaction({
+					to: t.receiveAddress,
+					value: parseUnits(t.paymentAmount, z.value.decimals),
+					chain: null
+				}), w.value = void 0;
+			} catch (t) {
+				_("update:error", t instanceof Error ? t.message : "钱包支付失败"), _("error", t);
 			}
 		}, Y = async () => {
-			if (!(!M.value || !P.value || !A.value || !z.value || !L.value)) try {
-				C.value = !0;
-				let e = A.value;
+			if (!(!T.value || !D.value || !P.value || !z.value || !L.value)) try {
+				let t = P.value;
 				await q(L.value.chainId);
-				let g = createWalletClient({
-					account: M.value,
-					transport: custom(P.value)
+				let d = createWalletClient({
+					account: T.value,
+					transport: custom(D.value)
 				});
 				if (!z.value.address) throw Error("订阅支付不支持原生代币");
-				let _ = await g.writeContract({
+				await d.writeContract({
 					address: z.value.address,
 					abi: [{
 						name: "approve",
@@ -211,244 +220,316 @@ var _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-heade
 						outputs: [{ type: "bool" }]
 					}],
 					functionName: "approve",
-					args: [e.receiveAddress, parseUnits(e.paymentAmount, z.value.decimals)],
+					args: [t.spenderAddress, parseUnits(t.approveAmount, z.value.decimals)],
 					chain: null
-				});
-				console.log("授权交易哈希:", _), C.value = !1, w.value = !0, Q(e.paymentId);
-			} catch (e) {
-				console.error("钱包授权失败:", e), T.value = e instanceof Error ? e.message : "钱包授权失败", b("error", e), C.value = !1;
+				}), w.value = void 0;
+			} catch (t) {
+				_("update:error", t instanceof Error ? t.message : "钱包授权失败"), _("error", t);
 			}
 		}, X = async () => {
-			if (!M.value) {
-				await K();
+			if (!T.value) {
+				_("update:error", "请先连接钱包"), _("error", /* @__PURE__ */ Error("请先连接钱包"));
 				return;
 			}
-			y.plain === "one-time" ? await J() : y.plain === "subscription" && await Y();
+			g.plain === "one-time" ? await J() : g.plain === "subscription" && await Y();
 		}, Z = async () => {
-			if (!(!O.value || !k.value)) try {
-				C.value = !0, T.value = void 0;
-				let e;
-				y.plain === "one-time" ? e = await x.createPayment("one-time", {
-					paymentChain: O.value,
-					paymentToken: k.value,
-					orderId: y.orderId,
-					amount: H.value
-				}) : y.plain === "subscription" && (e = await x.createPayment("subscription", {
-					paymentChain: O.value,
-					paymentToken: k.value,
-					orderId: y.orderId,
-					amountOfUsd: H.value,
-					intervalDays: y.intervalDays || 30
-				})), A.value = {
-					paymentId: e.paymentId || e.subscriptionId,
-					paymentAmount: e.paymentAmount || e.approveAmount,
-					receiveAddress: e.receiveAddress || e.spenderAddress || ""
-				};
-				let g = `${O.value.toLowerCase()}:${A.value.receiveAddress}?amount=${A.value.paymentAmount}`;
-				j.value = await QRCode.toDataURL(g, {
+			if (!(!S.value || !C.value)) try {
+				_("update:error", void 0);
+				let t = "";
+				g.plain === "one-time" ? (P.value = await v.createOnetimePayment({
+					paymentChain: S.value,
+					paymentToken: C.value,
+					orderId: g.orderId,
+					amount: G.value
+				}), t = `${S.value.toLowerCase()}:${P.value.receiveAddress}?amount=${P.value.paymentAmount}`, U(P.value.expireAt), Q({ paymentId: P.value.paymentId })) : g.plain === "subscription" && (P.value = await v.createSubscriptionPayment({
+					paymentChain: S.value,
+					paymentToken: C.value,
+					orderId: g.orderId,
+					amountOfUsd: G.value,
+					intervalDays: g.intervalDays || 30
+				}), t = `${S.value.toLowerCase()}:${P.value.spenderAddress}?amount=${P.value.approveAmount}`, U(P.value.expireAt), Q({ subscriptionId: P.value.subscriptionId })), _("update:paymentStep", "payment"), w.value = await QRCode.toDataURL(t, {
 					width: 200,
 					margin: 2,
 					errorCorrectionLevel: "H"
-				}), S.value = "payment";
-			} catch (e) {
-				T.value = e instanceof Error ? e.message : "创建支付失败", b("error", e);
-			} finally {
-				C.value = !1;
+				});
+			} catch (t) {
+				_("update:error", t instanceof Error ? t.message : "创建支付失败"), _("error", t);
 			}
-		}, Q = (e) => {
-			let g = () => defer(() => y.plain === "subscription" ? x.checkSubscriptionPaymentStatus({ subscriptionId: e }) : x.checkOnetimePaymentStatus({ paymentId: e })).pipe(timeout(15e3), retry({
-				count: 3,
-				delay: 2e3
-			}));
-			F.value?.unsubscribe(), F.value = g().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => g())) : EMPTY), tap((e) => {
-				e.status === "expired" && (w.value = !1), e.status === "paid" && (w.value = !1, S.value = "success", b("success", e)), e.status === "failed" && (w.value = !1), e.status === "approved" && (w.value = !1, S.value = "success", b("success", e));
-			})).subscribe({ error: (e) => {
-				console.error("支付状态检查错误:", e), T.value = e instanceof Error ? e.message : "检查支付状态失败", w.value = !1, b("error", e);
-			} });
+		}, Q = (t) => {
+			M.value?.unsubscribe();
+			let d = () => defer(() => g.plain === "subscription" ? v.checkSubscriptionPaymentStatus(t) : v.checkOnetimePaymentStatus(t)).pipe(timeout(15e3), retry({ delay: 2e3 }));
+			M.value = d().pipe(expand((t) => t.status === "pending" ? timer(2e3).pipe(switchMap(() => d())) : EMPTY), tap((t) => {
+				(t.status === "paid" || t.status === "approved") && (_("update:paymentStep", "success"), _("success", t)), t.status === "expired" && (_("update:paymentStep", "expired"), _("expired", t)), t.status === "failed" && (_("update:paymentStep", "failed"), _("failed", t));
+			})).subscribe({
+				error: (t) => {
+					if (P.value) {
+						let d = t instanceof Error ? t.message : "检查支付状态失败";
+						_("update:paymentStep", "error"), _("update:error", d), _("error", t);
+					}
+				},
+				complete: () => {
+					M.value?.unsubscribe();
+				}
+			});
 		}, $ = async () => {
-			A.value?.receiveAddress && await navigator.clipboard.writeText(A.value.receiveAddress);
+			if (!P.value) return;
+			let t = g.plain === "subscription" ? P.value.spenderAddress : P.value.receiveAddress;
+			if (t) try {
+				await navigator.clipboard.writeText(t), k.value = !0, setTimeout(() => {
+					k.value = !1;
+				}, 2e3);
+			} catch (t) {
+				console.error("复制失败:", t);
+			}
 		};
-		return watch(() => y.modelValue, (e) => {
-			e && D.value.length === 0 && G();
-		}), watch(O, () => {
-			R.value.length > 0 && (k.value = R.value[0].symbol);
-		}), watch(S, (e) => {
-			e === "payment" && A.value && Q(A.value.paymentId);
+		return watch(() => g.paymentStep, (t) => {
+			t === "select" && y.value.length === 0 && K();
+		}, { immediate: !0 }), watch(R, (t) => {
+			t.length > 0 && !C.value && (C.value = t[0].symbol);
+		}), watch(() => g.orderId, (t) => {
+			t && Q({ orderId: t });
+		}), onMounted(() => {
+			F();
 		}), onUnmounted(() => {
-			F.value?.unsubscribe();
-		}), (e, _) => (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "_cppay-fade" }, {
-			default: withCtx(() => [g.modelValue ? (openBlock(), createElementBlock("div", {
+			M.value?.unsubscribe(), W();
+		}), (t, f) => (openBlock(), createElementBlock("div", _hoisted_1$1, [d.paymentStep === "success" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+			f[5] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "✅", -1),
+			createElementVNode("h3", _hoisted_3$1, toDisplayString(d.plain === "subscription" ? "授权成功!" : "支付成功!"), 1),
+			createElementVNode("p", _hoisted_4$1, toDisplayString(d.plain === "subscription" ? "订阅已激活" : "交易已完成"), 1)
+		])) : d.paymentStep === "expired" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+			f[6] ||= createElementVNode("div", { class: "_cppay-state-icon" }, "⏰", -1),
+			f[7] ||= createElementVNode("h3", { class: "_cppay-state-title" }, "支付已过期，请重选创建支付订单", -1),
+			createElementVNode("button", {
+				onClick: f[0] ||= (d) => t.$emit("update:paymentStep", "select"),
+				disabled: d.loading || d.isCheckingPayment,
+				class: "_cppay-btn _cppay-btn-text"
+			}, " 返回 ", 8, _hoisted_6)
+		])) : d.paymentStep === "error" ? (openBlock(), createElementBlock("div", _hoisted_7, [...f[8] ||= [createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", { class: "_cppay-state-title" }, "检查订单支付状态失败！", -1)]])) : d.paymentStep === "failed" ? (openBlock(), createElementBlock("div", _hoisted_8, [...f[9] ||= [createElementVNode("div", { class: "_cppay-state-icon" }, "❌", -1), createElementVNode("h3", { class: "_cppay-state-title" }, "订单支付失败！", -1)]])) : d.paymentStep === "select" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+			renderSlot(t.$slots, "choose-top"),
+			createElementVNode("div", _hoisted_10, [f[10] ||= createElementVNode("label", { class: "_cppay-label" }, "支付网络", -1), createElementVNode("div", _hoisted_11, [(openBlock(!0), createElementBlock(Fragment, null, renderList(y.value, (t) => (openBlock(), createElementBlock("button", {
+				key: t.chain,
+				onClick: (d) => S.value = t.chain,
+				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": S.value === t.chain }])
+			}, [t.icon ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: t.icon,
+				alt: t.chain
+			}, null, 8, _hoisted_13)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(t.chain), 1)], 10, _hoisted_12))), 128))])]),
+			createElementVNode("div", _hoisted_14, [f[11] ||= createElementVNode("label", { class: "_cppay-label" }, "支付代币", -1), createElementVNode("div", _hoisted_15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(R.value, (t) => (openBlock(), createElementBlock("button", {
+				key: t.symbol,
+				onClick: (d) => C.value = t.symbol,
+				class: normalizeClass(["_cppay-select-btn", { "_cppay-selected": C.value === t.symbol }])
+			}, [t.icon ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: t.icon,
+				alt: t.symbol
+			}, null, 8, _hoisted_17)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(t.symbol), 1)], 10, _hoisted_16))), 128))])]),
+			renderSlot(t.$slots, "choose-bottom"),
+			createElementVNode("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createElementVNode("div", _hoisted_20, [f[12] ||= createElementVNode("span", { class: "_cppay-price-label" }, "支付金额", -1), createElementVNode("div", _hoisted_21, [createElementVNode("div", _hoisted_22, toDisplayString(G.value ?? "-") + " " + toDisplayString(C.value ?? ""), 1), createElementVNode("div", _hoisted_23, "≈ $" + toDisplayString(d.amount), 1)])])])]),
+			createElementVNode("div", _hoisted_24, [d.error ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "_cppay-error-tooltip-wrapper",
+				onMouseenter: f[1] ||= (t) => A.value = !0,
+				onMouseleave: f[2] ||= (t) => A.value = !1
+			}, [createElementVNode("div", _hoisted_25, [f[13] ||= 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(d.error), 1)]), A.value ? (openBlock(), createElementBlock("div", _hoisted_26, toDisplayString(d.error), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0), createElementVNode("button", {
+				onClick: Z,
+				disabled: !S.value || !C.value || d.loading,
+				class: "_cppay-btn _cppay-btn-primary"
+			}, toDisplayString(d.loading ? "处理中..." : "继续支付"), 9, _hoisted_27)])
+		])) : (openBlock(), createElementBlock("div", _hoisted_28, [
+			createElementVNode("div", _hoisted_29, [createElementVNode("div", _hoisted_30, [w.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: w.value,
+				alt: "Payment QR Code",
+				class: "_cppay-qr-image"
+			}, null, 8, _hoisted_31)) : createCommentVNode("", !0)])]),
+			createElementVNode("div", _hoisted_32, [
+				z.value ? (openBlock(), createElementBlock("div", _hoisted_33, [createElementVNode("div", _hoisted_34, [createElementVNode("div", _hoisted_35, [createElementVNode("div", _hoisted_36, toDisplayString(d.plain === "subscription" ? "授权金额" : "支付金额"), 1), createElementVNode("div", _hoisted_37, [P.value ? (openBlock(), createElementBlock("span", _hoisted_38, toDisplayString(d.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(d.amount), 1)])])])])) : createCommentVNode("", !0),
+				createElementVNode("div", _hoisted_39, [createElementVNode("div", _hoisted_40, [createElementVNode("div", _hoisted_41, [createElementVNode("span", null, toDisplayString(d.plain === "subscription" ? "授权合约地址" : "支付地址"), 1), O.value ? (openBlock(), createElementBlock("span", _hoisted_42, "⏰ " + toDisplayString(O.value), 1)) : createCommentVNode("", !0)]), createElementVNode("div", _hoisted_43, [P.value ? (openBlock(), createElementBlock("code", _hoisted_44, toDisplayString(d.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 ? "已复制！" : "复制地址"
+				}, [k.value ? (openBlock(), createElementBlock("svg", _hoisted_47, [...f[15] ||= [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_46, [...f[14] ||= [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",
+					height: "4",
+					rx: "1",
+					ry: "1"
+				}, null, -1)]]))], 10, _hoisted_45)])])]),
+				d.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_48, [...f[16] ||= [createElementVNode("div", { class: "_cppay-info-label _cppay-subscription-label" }, "📌 订阅说明", -1), createElementVNode("div", { class: "_cppay-info-value _cppay-subscription-message" }, " 订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。 ", -1)]])) : createCommentVNode("", !0)
+			]),
+			d.error ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: "_cppay-overlay",
-				onClick: _[5] ||= withModifiers((e) => !C.value && !w.value && W(), ["self"])
-			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(S.value === "select" ? "选择支付方式" : S.value === "success" ? "支付结果" : "完成支付"), 1), createElementVNode("button", {
-				onClick: W,
-				class: "_cppay-close-btn",
-				disabled: C.value || w.value
-			}, [..._[6] ||= [createElementVNode("svg", {
+				class: "_cppay-error-tooltip-wrapper",
+				onMouseenter: f[3] ||= (t) => A.value = !0,
+				onMouseleave: f[4] ||= (t) => A.value = !1
+			}, [createElementVNode("div", _hoisted_49, [f[17] ||= 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(d.error), 1)]), A.value ? (openBlock(), createElementBlock("div", _hoisted_50, toDisplayString(d.error), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0),
+			d.isCheckingPayment ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_51, [T.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+				onClick: X,
+				disabled: d.loading,
+				class: "_cppay-btn _cppay-btn-primary"
+			}, toDisplayString(d.loading ? d.plain === "subscription" ? "授权中..." : "支付中..." : d.plain === "subscription" ? "💳 钱包授权" : "💳 钱包支付"), 9, _hoisted_53), createElementVNode("button", {
+				onClick: I,
+				disabled: d.loading,
+				class: "_cppay-btn _cppay-wallet-address-btn",
+				title: "点击修改或查看钱包状态"
+			}, [createElementVNode("span", _hoisted_55, toDisplayString(T.value.slice(0, 10)) + "..." + toDisplayString(T.value.slice(-4)), 1), f[18] ||= createElementVNode("svg", {
+				class: "_cppay-wallet-arrow",
+				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
-				viewBox: "0 0 24 24"
-			}, [createElementVNode("path", {
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round",
-				"stroke-width": "2",
-				d: "M6 18L18 6M6 6l12 12"
-			})], -1)]], 8, _hoisted_4)]), createElementVNode("div", _hoisted_5, [S.value === "success" ? (openBlock(), createElementBlock("div", _hoisted_6, [
-				_[7] ||= createElementVNode("div", { style: {
-					"font-size": "64px",
-					"margin-bottom": "1rem"
-				} }, "✅", -1),
-				createElementVNode("h3", _hoisted_7, toDisplayString(y.plain === "subscription" ? "授权成功!" : "支付成功!"), 1),
-				createElementVNode("p", _hoisted_8, toDisplayString(y.plain === "subscription" ? "订阅已激活" : "交易已完成"), 1)
-			])) : createCommentVNode("", !0), S.value === "select" ? (openBlock(), createElementBlock("div", _hoisted_9, [
-				createElementVNode("div", _hoisted_10, [_[8] ||= createElementVNode("label", { class: "_cppay-label" }, "支付网络", -1), createElementVNode("div", _hoisted_11, [(openBlock(!0), createElementBlock(Fragment, null, renderList(D.value, (e) => (openBlock(), createElementBlock("button", {
-					key: e.chain,
-					onClick: (g) => O.value = e.chain,
-					class: normalizeClass(["_cppay-select-btn", O.value === e.chain ? "_cppay-selected" : ""])
-				}, [e.icon ? (openBlock(), createElementBlock("img", {
-					key: 0,
-					src: e.icon,
-					alt: e.chain
-				}, null, 8, _hoisted_13)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.chain), 1)], 10, _hoisted_12))), 128))])]),
-				createElementVNode("div", _hoisted_14, [_[9] ||= createElementVNode("label", { class: "_cppay-label" }, "支付代币", -1), createElementVNode("div", _hoisted_15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(R.value, (e) => (openBlock(), createElementBlock("button", {
-					key: e.symbol,
-					onClick: (g) => k.value = e.symbol,
-					class: normalizeClass(["_cppay-select-btn", k.value === e.symbol ? "_cppay-selected" : ""])
-				}, [e.icon ? (openBlock(), createElementBlock("img", {
-					key: 0,
-					src: e.icon,
-					alt: e.symbol
-				}, null, 8, _hoisted_17)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.symbol), 1)], 10, _hoisted_16))), 128))])]),
-				createElementVNode("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createElementVNode("div", _hoisted_20, [_[10] ||= createElementVNode("span", { class: "_cppay-price-label" }, "支付金额", -1), createElementVNode("div", _hoisted_21, [createElementVNode("div", _hoisted_22, toDisplayString(H.value ?? "-") + " " + toDisplayString(k.value ?? ""), 1), createElementVNode("div", _hoisted_23, "≈ $" + toDisplayString(g.amount), 1)])])])]),
-				createElementVNode("div", _hoisted_24, [T.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: "_cppay-error-tooltip-wrapper",
-					onMouseenter: _[0] ||= (e) => E.value = !0,
-					onMouseleave: _[1] ||= (e) => E.value = !1
-				}, [createElementVNode("div", _hoisted_25, [_[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(T.value), 1)]), E.value ? (openBlock(), createElementBlock("div", _hoisted_26, toDisplayString(T.value), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0), createElementVNode("button", {
-					onClick: Z,
-					disabled: !O.value || !k.value || C.value,
-					class: "_cppay-btn _cppay-btn-primary"
-				}, toDisplayString(C.value ? "处理中..." : "继续支付"), 9, _hoisted_27)])
-			])) : S.value === "payment" && A.value ? (openBlock(), createElementBlock("div", _hoisted_28, [
-				createElementVNode("div", _hoisted_29, [createElementVNode("div", _hoisted_30, [j.value ? (openBlock(), createElementBlock("img", {
-					key: 0,
-					src: j.value,
-					alt: "QR Code",
-					style: {
-						width: "160px",
-						height: "160px",
-						display: "block"
-					}
-				}, null, 8, _hoisted_31)) : createCommentVNode("", !0)])]),
-				createElementVNode("div", _hoisted_32, [
-					k.value ? (openBlock(), createElementBlock("div", _hoisted_33, [createElementVNode("div", _hoisted_34, toDisplayString(y.plain === "subscription" ? "授权金额" : "支付金额"), 1), createElementVNode("div", _hoisted_35, toDisplayString(A.value.paymentAmount) + " " + toDisplayString(k.value), 1)])) : createCommentVNode("", !0),
-					createElementVNode("div", _hoisted_36, [createElementVNode("div", _hoisted_37, toDisplayString(y.plain === "subscription" ? "授权合约地址" : "支付地址"), 1), createElementVNode("div", _hoisted_38, [createElementVNode("code", null, toDisplayString(A.value.receiveAddress), 1), createElementVNode("button", {
-						onClick: $,
-						class: "_cppay-copy-btn",
-						title: "复制地址"
-					}, [..._[12] ||= [createElementVNode("svg", {
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24"
-					}, [createElementVNode("path", {
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
-						"stroke-width": "2",
-						d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-					})], -1)]])])]),
-					y.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_39, [..._[13] ||= [createElementVNode("div", {
-						class: "_cppay-info-label",
-						style: { color: "#856404" }
-					}, "📌 订阅说明", -1), createElementVNode("div", {
-						class: "_cppay-info-value",
-						style: {
-							"font-size": "12px",
-							color: "#856404"
-						}
-					}, " 订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。 ", -1)]])) : createCommentVNode("", !0)
-				]),
-				T.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: "_cppay-error-tooltip-wrapper",
-					onMouseenter: _[2] ||= (e) => E.value = !0,
-					onMouseleave: _[3] ||= (e) => E.value = !1
-				}, [createElementVNode("div", _hoisted_40, [_[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(T.value), 1)]), E.value ? (openBlock(), createElementBlock("div", _hoisted_41, toDisplayString(T.value), 1)) : createCommentVNode("", !0)], 32)) : createCommentVNode("", !0),
-				w.value ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_42, [M.value ? (openBlock(), createElementBlock("div", _hoisted_44, [createElementVNode("div", _hoisted_45, [createElementVNode("button", {
-					onClick: X,
-					disabled: C.value,
-					class: "_cppay-btn _cppay-btn-primary"
-				}, toDisplayString(C.value ? g.plain === "subscription" ? "授权中..." : "支付中..." : g.plain === "subscription" ? "💳 钱包授权" : "💳 钱包支付"), 9, _hoisted_46), createElementVNode("button", {
-					onClick: K,
-					disabled: C.value,
-					class: "_cppay-btn _cppay-btn-primary"
-				}, " 💰钱包状态 ", 8, _hoisted_47)]), createElementVNode("div", _hoisted_48, " 已连接: " + toDisplayString(M.value.slice(0, 6)) + "..." + toDisplayString(M.value.slice(-4)), 1)])) : (openBlock(), createElementBlock("button", {
-					key: 0,
-					onClick: K,
-					disabled: N.value,
-					class: "_cppay-btn _cppay-btn-secondary",
-					style: {
-						display: "flex",
-						"align-items": "center",
-						"justify-content": "center",
-						gap: "0.5rem",
-						padding: "0.75rem 1rem",
-						width: "100%"
-					}
-				}, [createElementVNode("span", null, toDisplayString(N.value ? "连接中..." : "💳 连接钱包"), 1)], 8, _hoisted_43))])),
-				createElementVNode("div", _hoisted_49, [createElementVNode("button", {
-					onClick: U,
-					disabled: w.value,
-					class: "_cppay-btn _cppay-btn-primary"
-				}, toDisplayString(w.value ? "检查中..." : "我已完成支付"), 9, _hoisted_50)]),
-				createElementVNode("div", _hoisted_51, [createElementVNode("button", {
-					onClick: _[4] ||= (e) => S.value = "select",
-					disabled: C.value || w.value,
-					class: "_cppay-btn _cppay-btn-text"
-				}, " 更改支付方式 ", 8, _hoisted_52)])
-			])) : createCommentVNode("", !0)])])])) : createCommentVNode("", !0)]),
-			_: 1
-		})]));
+				"stroke-width": "2"
+			}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1)], 8, _hoisted_54)], 64)) : (openBlock(), createElementBlock("button", {
+				key: 0,
+				onClick: I,
+				disabled: E.value,
+				class: "_cppay-btn _cppay-btn-secondary _cppay-connect-wallet-btn"
+			}, [createElementVNode("span", null, toDisplayString(E.value ? "连接中..." : "💳 连接钱包"), 1)], 8, _hoisted_52))]))
+		]))]));
 	}
-}), [["__scopeId", "data-v-9361860d"]]), cppayState = ref({
+}), _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-header" }, _hoisted_3 = { class: "_cppay-title" }, _hoisted_4 = ["disabled"], PaymentDialog_default = /* @__PURE__ */ defineComponent({
+	__name: "PaymentDialog",
+	props: {
+		modelValue: { type: Boolean },
+		apikey: {},
+		orderId: {},
+		amount: {},
+		plain: { default: "one-time" },
+		intervalDays: { default: 30 }
+	},
+	emits: [
+		"update:modelValue",
+		"success",
+		"expired",
+		"failed",
+		"error"
+	],
+	setup(t, { emit: d }) {
+		let f = t, p = d, m = ref("select"), g = ref(!1), v = ref(!1), y = ref();
+		watch(() => m.value, (t) => {
+			t === "success" && setTimeout(() => {
+				b();
+			}, 1e3);
+		}), watch(() => f.modelValue, (t) => {
+			t || (m.value = "select", y.value = void 0, g.value = !1, v.value = !1);
+		}), onMounted(() => {
+			let t = (t) => {
+				t.key === "Escape" && f.modelValue && !g.value && !v.value && b();
+			};
+			return window.addEventListener("keydown", t), () => {
+				window.removeEventListener("keydown", t);
+			};
+		});
+		let b = () => {
+			g.value || v.value || p("update:modelValue", !1);
+		}, x = () => {
+			switch (m.value) {
+				case "success": return "支付结果";
+				case "expired": return "支付已过期";
+				case "failed": return "支付失败";
+				case "error": return "出错";
+				case "payment": return "完成支付";
+				default: return "选择支付方式";
+			}
+		};
+		return (d, f) => t.modelValue ? (openBlock(), createElementBlock("div", {
+			key: 0,
+			class: "_cppay-overlay",
+			onClick: f[6] ||= (t) => t.target === t.currentTarget && !g.value && !v.value && b()
+		}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(x()), 1), createElementVNode("button", {
+			onClick: b,
+			disabled: g.value || v.value,
+			class: "_cppay-close-btn"
+		}, [...f[7] ||= [createElementVNode("svg", {
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24"
+		}, [createElementVNode("path", {
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"stroke-width": "2",
+			d: "M6 18L18 6M6 6l12 12"
+		})], -1)]], 8, _hoisted_4)]), createVNode(PaymentContent_default, {
+			apikey: t.apikey,
+			orderId: t.orderId,
+			amount: t.amount,
+			plain: t.plain,
+			intervalDays: t.intervalDays,
+			paymentStep: m.value,
+			loading: g.value,
+			isCheckingPayment: v.value,
+			error: y.value,
+			"onUpdate:paymentStep": f[0] ||= (t) => m.value = t,
+			"onUpdate:error": f[1] ||= (t) => y.value = t,
+			onSuccess: f[2] ||= (t) => p("success", t),
+			onExpired: f[3] ||= (t) => p("expired", t),
+			onFailed: f[4] ||= (t) => p("failed", t),
+			onError: f[5] ||= (t) => p("error", t)
+		}, {
+			"choose-top": withCtx(() => [renderSlot(d.$slots, "choose-top")]),
+			"choose-bottom": withCtx(() => [renderSlot(d.$slots, "choose-bottom")]),
+			_: 3
+		}, 8, [
+			"apikey",
+			"orderId",
+			"amount",
+			"plain",
+			"intervalDays",
+			"paymentStep",
+			"loading",
+			"isCheckingPayment",
+			"error"
+		])])])) : createCommentVNode("", !0);
+	}
+}), cppayState = ref({
 	apikey: "",
 	open: !1,
 	options: null
 });
-const showPayment = (e) => {
-	cppayState.value.options = e, cppayState.value.open = !0;
+const showPayment = (t) => {
+	cppayState.value.options = t, cppayState.value.open = !0;
+}, closePayment = () => {
+	cppayState.value.open = !1;
 };
 var handleClose = () => {
 	cppayState.value.open = !1;
-}, handleSuccess = (e) => {
-	cppayState.value.options?.onSuccess?.(e), cppayState.value.open = !1;
-}, handleError = (e) => {
-	cppayState.value.options?.onError?.(e);
+}, handleSuccess = (t) => {
+	cppayState.value.options?.onSuccess?.(t), setTimeout(() => {
+		cppayState.value.open = !1;
+	}, 1e3);
+}, handleExpired = (t) => {
+	cppayState.value.options?.onExpired?.(t);
+}, handleFailed = (t) => {
+	cppayState.value.options?.onFailed?.(t);
+}, handleError = (t) => {
+	cppayState.value.options?.onError?.(t);
 };
-const CppayPlugin = { install(e, g) {
-	if (!g?.apikey) throw Error("Cppay plugin requires an apikey");
-	cppayState.value.apikey = g.apikey, e.config.globalProperties.$showPayment = showPayment;
-	let _ = document.createElement("div");
-	document.body.appendChild(_), createApp({ setup() {
+const CppayPlugin = { install(t, d) {
+	if (!d?.apikey) throw Error("Cppay plugin requires an apikey");
+	cppayState.value.apikey = d.apikey, t.config.globalProperties.$showPayment = showPayment, t.config.globalProperties.$closePayment = closePayment;
+	let f = (t) => {
+		t.key === "Escape" && cppayState.value.open && handleClose();
+	}, p = document.createElement("div");
+	document.body.appendChild(p), createApp({ setup() {
 		return () => cppayState.value.options ? h(PaymentDialog_default, {
 			modelValue: cppayState.value.open,
-			"onUpdate:modelValue": (e) => {
-				cppayState.value.open = e, e || handleClose();
+			"onUpdate:modelValue": (t) => {
+				cppayState.value.open = t, t || handleClose();
 			},
 			apikey: cppayState.value.apikey,
 			plain: cppayState.value.options.plain,
@@ -456,12 +537,19 @@ const CppayPlugin = { install(e, g) {
 			amount: cppayState.value.options.amount,
 			intervalDays: cppayState.value.options.intervalDays,
 			onSuccess: handleSuccess,
+			onExpired: handleExpired,
+			onFailed: handleFailed,
 			onError: handleError
 		}) : null;
-	} }).mount(_);
+	} }).mount(p), cppayState.value.open && document.addEventListener("keydown", f), t.config.globalProperties.$watchEffect?.(() => {
+		cppayState.value.open ? document.addEventListener("keydown", f) : document.removeEventListener("keydown", f);
+	});
 } }, useCppayPayment = () => {
 	if (!cppayState.value.apikey) throw Error("useCppayPayment must be used after installing CppayPlugin");
-	return { showPayment };
+	return {
+		showPayment,
+		closePayment
+	};
 };
 injectStyle(payment_dialog_default);
-export { CppayPlugin, PaymentDialog_default as PaymentDialog, showPayment, useCppayPayment };
+export { CppayPlugin, PaymentContent_default as PaymentContent, PaymentDialog_default as PaymentDialog, showPayment, useCppayPayment };