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

package/dist/react.js

@@ -1,5 +1,5 @@
-import { t as cppay_default } from "./cppay-CCxKnEWz.js";
-import { n as payment_dialog_default, t as injectStyle } from "./inject-style-CWza6SKp.js";
+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 * as QRCode from "qrcode";
 import { EMPTY, defer, timer } from "rxjs";
 import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
@@ -7,12 +7,12 @@ 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";
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var PaymentDialog_default = React.memo(({ open: t, onClose: n, apikey: a, plain: o, orderId: s, amount: c, intervalDays: l, onExpired: u, onSuccess: d, onFailed: f, onError: p }) => {
-	let m = useMemo(() => new cppay_default(a), [a]), [h, g] = useState("select"), [_, v] = useState(!1), [y, b] = useState(!1), [x, S] = useState(), [C, w] = useState(!1), [T, E] = useState([]), [D, O] = useState(), [k, A] = useState(), [j, M] = useState(), [N, P] = useState(), [F, I] = useState(!1), [L, R] = useState(), z = useRef(null), B = useRef(null);
+var PaymentContent_default = ({ apikey: t, ott: n, plain: m, orderId: h, amount: g, intervalDays: ge, onSuccess: _e, onExpired: ve, onFailed: ye, onError: _, Slots: be, paymentStep: v, onPaymentStepChange: y, loading: b = !1, isCheckingPayment: x = !1, error: S, onErrorChange: C }) => {
+	let w = useMemo(() => new cppay_default(t, n), [t, n]), [T, xe] = useState([]), [E, D] = useState(), [O, k] = useState(), [A, j] = useState(), [M, N] = useState(), [P, F] = useState(!1), [I, L] = useState(), [R, Se] = useState(""), [z, B] = useState(!1), [Ce, V] = useState(!1), H = useRef(null), U = useRef(null), W = useRef(null);
 	useEffect(() => {
-		typeof window < "u" && !z.current && (z.current = createAppKit({
+		typeof window < "u" && !H.current && (H.current = createAppKit({
 			debug: !1,
 			enableNetworkSwitch: !1,
 			adapters: [new EthersAdapter()],
@@ -33,22 +33,24 @@ var PaymentDialog_default = React.memo(({ open: t, onClose: n, apikey: a, plain:
 				icons: ["https://cppay.com/icon.png"]
 			},
 			features: { analytics: !1 }
-		}), P(z.current.getAddress()), R(z.current.getProvider("eip155")), z.current.subscribeAccount((e) => {
-			e.isConnected ? P(e.address) : (P(void 0), R(void 0));
-		}), z.current.subscribeProviders((e) => {
+		}), N(H.current.getAddress()), L(H.current.getProvider("eip155")), H.current.subscribeAccount((e) => {
+			e.isConnected ? N(e.address) : (N(void 0), L(void 0));
+		}), H.current.subscribeProviders((e) => {
 			let t = e?.eip155;
-			R(t);
+			L(t);
 		}));
 	}, []);
-	let V = async () => {
+	let we = async () => {
 		try {
-			I(!0), S(void 0), z.current && await z.current.open();
+			F(!0), C?.(void 0), H.current && await H.current.open();
 		} catch (e) {
-			console.error("钱包连接失败:", e), S(e instanceof Error ? e.message : "钱包连接失败"), p?.(e);
+			console.error("钱包连接失败:", e);
+			let t = e instanceof Error ? e.message : "钱包连接失败";
+			C?.(t), _?.(e);
 		} finally {
-			I(!1);
+			F(!1);
 		}
-	}, H = useMemo(() => T.find((e) => e.chain === D), [T, D]), U = useMemo(() => H?.tokens || [], [H]), W = useMemo(() => U.find((e) => e.symbol === k), [U, k]), G = (e) => [
+	}, G = useMemo(() => T.find((e) => e.chain === E), [T, E]), K = useMemo(() => G?.tokens || [], [G]), q = useMemo(() => K.find((e) => e.symbol === O), [K, O]), J = (e) => [
 		"USDT",
 		"USDC",
 		"BUSD",
@@ -56,92 +58,97 @@ var PaymentDialog_default = React.memo(({ open: t, onClose: n, apikey: a, plain:
 		"TUSD",
 		"USDD",
 		"FDUSD"
-	].includes(e.toUpperCase()) ? 2 : 6, K = (e, t) => {
+	].includes(e.toUpperCase()) ? 2 : 6, Y = (e, t) => {
 		let n = parseFloat(e);
 		return isNaN(n) ? "0" : n.toFixed(t).replace(/\.?0+$/, "");
-	}, q = useMemo(() => {
-		if (!k || !W) return "0";
-		let e = parseFloat(W.price);
+	}, Te = (e) => {
+		if (e <= 0) return "已过期";
+		let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60;
+		return t > 0 ? `${t}时${n}分${r}秒` : `${n}分${r}秒`;
+	}, X = (e) => {
+		W.current && clearInterval(W.current);
+		let t = () => {
+			let t = e - Math.floor(Date.now() / 1e3);
+			Se(Te(t)), t <= 0 && (y("expired"), Ee());
+		};
+		t(), W.current = setInterval(t, 1e3);
+	}, Ee = () => {
+		W.current &&= (clearInterval(W.current), null);
+	}, Z = useMemo(() => {
+		if (!O || !q) return "0";
+		let e = parseFloat(q.price);
 		if (isNaN(e) || e === 0) return "0";
-		let t = G(k);
-		return K((parseFloat(c) / e).toFixed(t), t);
+		let t = J(O);
+		return Y((parseFloat(g) / e).toFixed(t), t);
 	}, [
-		c,
-		k,
-		W
-	]), Te = async () => {
+		g,
+		O,
+		q
+	]), De = async () => {
 		try {
-			v(!0), S(void 0);
-			let e = await m.getSupportedChains();
-			E(e), e.length > 0 && O(e[0].chain);
+			C?.(void 0);
+			let e = await w.getSupportedChains();
+			xe(e), e.length > 0 && D(e[0].chain);
 		} catch (e) {
-			S(e instanceof Error ? e.message : "加载支付网络失败"), p?.(e);
-		} finally {
-			v(!1);
+			let t = e instanceof Error ? e.message : "加载支付网络失败";
+			C?.(t), _?.(e);
 		}
-	}, J = async (e) => {
-		if (L) try {
-			await L.request({
+	}, Oe = async (e) => {
+		if (I) try {
+			await I.request({
 				method: "wallet_switchEthereumChain",
 				params: [{ chainId: `0x${e.toString(16)}` }]
 			});
 		} catch (e) {
 			throw e.code === 4902 ? Error("请在钱包中添加该网络") : e;
 		}
-	}, Ee = async () => {
-		if (!(!N || !L || !Y.current || !W || !H)) try {
-			v(!0);
-			let e = Y.current;
-			await J(H.chainId);
+	}, ke = async () => {
+		if (!(!M || !I || !Q.current || !q || !G)) try {
+			let e = Q.current;
+			await Oe(G.chainId);
 			let t = createWalletClient({
-				account: N,
-				transport: custom(L)
+				account: M,
+				transport: custom(I)
 			});
-			if (W.address) {
-				let n = await t.writeContract({
-					address: W.address,
-					abi: [{
-						name: "transfer",
-						type: "function",
-						stateMutability: "nonpayable",
-						inputs: [{
-							name: "to",
-							type: "address"
-						}, {
-							name: "amount",
-							type: "uint256"
-						}],
-						outputs: [{ type: "bool" }]
+			q.address ? await t.writeContract({
+				address: q.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, W.decimals)],
-					chain: null
-				});
-				console.log("转账交易哈希:", n);
-			} else {
-				let n = await t.sendTransaction({
-					to: e.receiveAddress,
-					value: parseUnits(e.paymentAmount, W.decimals),
-					chain: null
-				});
-				console.log("转账交易哈希:", n);
-			}
-			v(!1), b(!0), Z(e.paymentId);
+					outputs: [{ type: "bool" }]
+				}],
+				functionName: "transfer",
+				args: [e.receiveAddress, parseUnits(e.paymentAmount, q.decimals)],
+				chain: null
+			}) : await t.sendTransaction({
+				to: e.receiveAddress,
+				value: parseUnits(e.paymentAmount, q.decimals),
+				chain: null
+			}), j(void 0);
 		} catch (e) {
-			console.error("钱包支付失败:", e), S(e instanceof Error ? e.message : "钱包支付失败"), p?.(e), v(!1);
+			console.error("钱包支付失败:", e);
+			let t = e instanceof Error ? e.message : "钱包支付失败";
+			C?.(t), _?.(e);
 		}
-	}, De = async () => {
-		if (!(!N || !L || !Y.current || !W || !H)) try {
-			v(!0);
-			let e = Y.current;
-			await J(H.chainId);
+	}, Ae = async () => {
+		if (!(!M || !I || !Q.current || !q || !G)) try {
+			let e = Q.current;
+			await Oe(G.chainId);
 			let t = createWalletClient({
-				account: N,
-				transport: custom(L)
+				account: M,
+				transport: custom(I)
 			});
-			if (!W.address) throw Error("订阅支付不支持原生代币");
-			let n = await t.writeContract({
-				address: W.address,
+			if (!q.address) throw Error("订阅支付不支持原生代币");
+			await t.writeContract({
+				address: q.address,
 				abi: [{
 					name: "approve",
 					type: "function",
@@ -156,89 +163,409 @@ var PaymentDialog_default = React.memo(({ open: t, onClose: n, apikey: a, plain:
 					outputs: [{ type: "bool" }]
 				}],
 				functionName: "approve",
-				args: [e.spenderAddress, parseUnits(e.approveAmount, W.decimals)],
+				args: [e.spenderAddress, parseUnits(e.approveAmount, q.decimals)],
 				chain: null
-			});
-			console.log("授权交易哈希:", n), v(!1), b(!0), Z(e.subscriptionId);
+			}), j(void 0);
 		} catch (e) {
-			console.error("钱包授权失败:", e), S(e instanceof Error ? e.message : "钱包授权失败"), p?.(e), v(!1);
+			console.error("钱包授权失败:", e);
+			let t = e instanceof Error ? e.message : "钱包授权失败";
+			C?.(t), _?.(e);
 		}
-	}, Oe = async () => {
-		if (!N) {
+	}, je = async () => {
+		if (!M) {
 			let e = "请先连接钱包";
-			S(e), p?.(Error(e));
+			C?.(e), _?.(Error(e));
 			return;
 		}
-		o === "one-time" ? await Ee() : o === "subscription" && await De();
-	}, Y = useRef(null), X = async () => {
-		if (!(!D || !k)) try {
-			v(!0), S(void 0);
+		m === "one-time" ? await ke() : m === "subscription" && await Ae();
+	}, Q = useRef(null), Me = async () => {
+		if (!(!E || !O)) try {
+			C?.(void 0);
 			let e = "";
-			o === "one-time" ? (Y.current = await m.createOnetimePayment({
-				paymentChain: D,
-				paymentToken: k,
-				orderId: s,
-				amount: q
-			}), e = `${D.toLowerCase()}:${Y.current.receiveAddress}?amount=${Y.current.paymentAmount}`) : o === "subscription" && (Y.current = await m.createSubscriptionPayment({
-				paymentChain: D,
-				paymentToken: k,
-				orderId: s,
-				amountOfUsd: q,
-				intervalDays: l || 30
-			}), e = `${D.toLowerCase()}:${Y.current.spenderAddress}?amount=${Y.current.approveAmount}`), g("payment"), M(await QRCode.toDataURL(e, {
+			m === "one-time" ? (Q.current = await w.createOnetimePayment({
+				paymentChain: E,
+				paymentToken: O,
+				orderId: h,
+				amount: Z
+			}), e = `${E.toLowerCase()}:${Q.current.receiveAddress}?amount=${Q.current.paymentAmount}`, X(Q.current.expireAt), $({ paymentId: Q.current.paymentId })) : m === "subscription" && (Q.current = await w.createSubscriptionPayment({
+				paymentChain: E,
+				paymentToken: O,
+				orderId: h,
+				amountOfUsd: Z,
+				intervalDays: ge || 30
+			}), e = `${E.toLowerCase()}:${Q.current.spenderAddress}?amount=${Q.current.approveAmount}`, X(Q.current.expireAt), $({ subscriptionId: Q.current.subscriptionId })), y("payment"), j(await QRCode.toDataURL(e, {
 				width: 200,
 				margin: 2,
 				errorCorrectionLevel: "H"
 			}));
 		} catch (e) {
-			S(e instanceof Error ? e.message : "创建支付失败"), p?.(e);
-		} finally {
-			v(!1);
-		}
-	}, ke = async () => {
-		if (Y.current) try {
-			b(!0), S(void 0), o === "one-time" ? Z(Y.current.paymentId) : o === "subscription" && Z(Y.current.subscriptionId);
-		} catch (e) {
-			console.error("支付状态检查错误:", e), S(e instanceof Error ? e.message : "检查支付状态失败"), p?.(e), b(!1);
+			let t = e instanceof Error ? e.message : "创建支付失败";
+			C?.(t), _?.(e);
 		}
-	}, Z = (e) => {
-		let t = () => defer(() => o === "subscription" ? m.checkSubscriptionPaymentStatus({ subscriptionId: e }) : m.checkOnetimePaymentStatus({ paymentId: e })).pipe(timeout(15e3), retry({
-			count: 3,
-			delay: 2e3
-		}));
-		B.current?.unsubscribe(), B.current = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
-			e.status === "expired" && (b(!1), u?.(e)), e.status === "paid" && (b(!1), g("success"), d?.(e)), e.status === "failed" && (b(!1), f?.(e)), e.status === "approved" && (b(!1), g("success"), d?.(e));
-		})).subscribe({ error: (e) => {
-			console.error("支付状态检查错误:", e), S(e instanceof Error ? e.message : "检查支付状态失败"), b(!1), p?.(e);
-		} });
-	}, Q = async () => {
-		if (!Y.current) return;
-		let e = o === "subscription" ? Y.current.spenderAddress : Y.current.receiveAddress;
-		e && await navigator.clipboard.writeText(e);
-	}, $ = () => {
-		_ || y || (n(), setTimeout(() => {
-			g("select"), S(void 0), Y.current = null;
-		}, 300));
+	}, $ = (e) => {
+		U.current?.unsubscribe();
+		let t = () => defer(() => m === "subscription" ? w.checkSubscriptionPaymentStatus(e) : w.checkOnetimePaymentStatus(e)).pipe(timeout(15e3), retry({ delay: 2e3 }));
+		U.current = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
+			(e.status === "paid" || e.status === "approved") && (y("success"), _e?.(e)), e.status === "expired" && (y("expired"), ve?.(e)), e.status === "failed" && (y("failed"), ye?.(e));
+		})).subscribe({
+			error: (e) => {
+				if (Q.current) {
+					let t = e instanceof Error ? e.message : "检查支付状态失败";
+					y("error"), C?.(t), _?.(e);
+				}
+			},
+			complete: () => {
+				U.current?.unsubscribe();
+			}
+		});
 	};
 	return useEffect(() => {
-		t && T.length === 0 && Te();
-	}, [t]), useEffect(() => {
-		U.length > 0 && A(U[0].symbol);
-	}, [U]), useEffect(() => () => {
-		B.current?.unsubscribe();
-	}, []), t ? /* @__PURE__ */ jsx("div", {
+		T.length === 0 && De();
+	}, []), useEffect(() => {
+		K.length > 0 && k(K[0].symbol);
+	}, [K]), useEffect(() => (h && $({ orderId: h }), () => {
+		U.current?.unsubscribe(), Ee();
+	}), [h]), /* @__PURE__ */ jsx("div", {
+		className: "_cppay-content",
+		children: v === "success" ? /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-icon",
+					children: "✅"
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title",
+					children: m === "subscription" ? "授权成功!" : "支付成功!"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "_cppay-state-message",
+					children: m === "subscription" ? "订阅已激活" : "交易已完成"
+				})
+			]
+		}) : v === "expired" ? /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-icon",
+					children: "⏰"
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title",
+					children: "支付已过期，请重选创建支付订单"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => y("select"),
+					disabled: b || x,
+					className: "_cppay-btn _cppay-btn-text",
+					children: "返回"
+				})
+			]
+		}) : v === "error" ? /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "_cppay-state-icon",
+				children: "❌"
+			}), /* @__PURE__ */ jsx("h3", {
+				className: "_cppay-state-title",
+				children: "检查订单支付状态失败！"
+			})]
+		}) : v === "failed" ? /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "_cppay-state-icon",
+				children: "❌"
+			}), /* @__PURE__ */ jsx("h3", {
+				className: "_cppay-state-title",
+				children: "订单支付失败！"
+			})]
+		}) : v === "select" ? /* @__PURE__ */ jsxs("div", { children: [
+			be?.ChooseTop,
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "_cppay-label",
+					children: "支付网络"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: T.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => D(e.chain),
+						className: `_cppay-select-btn ${E === e.chain ? "_cppay-selected" : ""}`,
+						children: [e.icon && /* @__PURE__ */ jsx("img", {
+							src: e.icon,
+							alt: e.chain
+						}), /* @__PURE__ */ jsx("span", { children: e.chain })]
+					}, e.chain))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "_cppay-label",
+					children: "支付代币"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: K.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => k(e.symbol),
+						className: `_cppay-select-btn ${O === e.symbol ? "_cppay-selected" : ""}`,
+						children: [e.icon && /* @__PURE__ */ jsx("img", {
+							src: e.icon,
+							alt: e.symbol
+						}), /* @__PURE__ */ jsx("span", { children: e.symbol })]
+					}, e.symbol))
+				})]
+			}),
+			be?.ChooseBottom,
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "_cppay-price-box",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "_cppay-price-row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "_cppay-price-label",
+							children: "支付金额"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "_cppay-price-amount",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-main",
+								children: [
+									Z ?? "-",
+									" ",
+									O ?? ""
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-sub",
+								children: ["≈ $", g]
+							})]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [S && /* @__PURE__ */ jsxs("div", {
+					className: "_cppay-error-tooltip-wrapper",
+					onMouseEnter: () => V(!0),
+					onMouseLeave: () => V(!1),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "_cppay-error-tooltip",
+						children: [/* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 20 20",
+							fill: "currentColor",
+							children: /* @__PURE__ */ jsx("path", {
+								fillRule: "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",
+								clipRule: "evenodd"
+							})
+						}), /* @__PURE__ */ jsx("span", { children: S })]
+					}), Ce && /* @__PURE__ */ jsx("div", {
+						className: "_cppay-error-tooltip-full",
+						children: S
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: Me,
+					disabled: !E || !O || b,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: b ? "处理中..." : "继续支付"
+				})]
+			})
+		] }) : /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-qr-container",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "_cppay-qr-code",
+					children: A && /* @__PURE__ */ jsx("img", {
+						src: A,
+						alt: "Payment QR Code",
+						className: "_cppay-qr-image"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [
+					q && /* @__PURE__ */ jsx("div", {
+						className: "_cppay-info-box",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-flex-container",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-info-flex-child",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "_cppay-info-label",
+									children: m === "subscription" ? "授权金额" : "支付金额"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "_cppay-info-value _cppay-info-value-flex",
+									children: [/* @__PURE__ */ jsx("span", { children: m === "subscription" ? `${Y(Q.current.approveAmount, J(q.symbol))} ${q.symbol}` : `${Y(Q.current.paymentAmount, J(q.symbol))} ${q.symbol}` }), /* @__PURE__ */ jsxs("span", { children: ["≈ $", g] })]
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-info-box",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "_cppay-info-flex-child",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-info-label _cppay-info-label-flex",
+								children: [/* @__PURE__ */ jsx("span", { children: m === "subscription" ? "授权合约地址" : "支付地址" }), R && /* @__PURE__ */ jsxs("span", {
+									className: "_cppay-countdown",
+									children: ["⏰ ", R]
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-address-row",
+								children: [/* @__PURE__ */ jsx("code", { children: m === "subscription" ? Q.current.spenderAddress : Q.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
+									onClick: async () => {
+										if (!Q.current) return;
+										let e = m === "subscription" ? Q.current.spenderAddress : Q.current.receiveAddress;
+										if (e) try {
+											await navigator.clipboard.writeText(e), B(!0), setTimeout(() => {
+												B(!1);
+											}, 2e3);
+										} catch (e) {
+											console.error("复制失败:", e);
+										}
+									},
+									className: `_cppay-copy-btn ${z ? "_cppay-copy-success" : ""}`,
+									title: z ? "已复制！" : "复制地址",
+									children: z ? /* @__PURE__ */ jsx("svg", {
+										className: "_cppay-copy-icon",
+										viewBox: "0 0 24 24",
+										fill: "currentColor",
+										children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+									}) : /* @__PURE__ */ jsxs("svg", {
+										className: "_cppay-copy-icon",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										children: [/* @__PURE__ */ jsx("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" }), /* @__PURE__ */ jsx("rect", {
+											x: "8",
+											y: "2",
+											width: "8",
+											height: "4",
+											rx: "1",
+											ry: "1"
+										})]
+									})
+								})]
+							})]
+						})
+					}),
+					m === "subscription" && /* @__PURE__ */ jsxs("div", {
+						className: "_cppay-info-box _cppay-subscription-box",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-label _cppay-subscription-label",
+							children: "📌 订阅说明"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-value _cppay-subscription-message",
+							children: "订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。"
+						})]
+					})
+				]
+			}),
+			S && /* @__PURE__ */ jsxs("div", {
+				className: "_cppay-error-tooltip-wrapper",
+				onMouseEnter: () => V(!0),
+				onMouseLeave: () => V(!1),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "_cppay-error-tooltip",
+					children: [/* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 20 20",
+						fill: "currentColor",
+						children: /* @__PURE__ */ jsx("path", {
+							fillRule: "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",
+							clipRule: "evenodd"
+						})
+					}), /* @__PURE__ */ jsx("span", { children: S })]
+				}), Ce && /* @__PURE__ */ jsx("div", {
+					className: "_cppay-error-tooltip-full",
+					children: S
+				})]
+			}),
+			!x && /* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: M ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					onClick: je,
+					disabled: b,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: b ? m === "subscription" ? "授权中..." : "支付中..." : m === "subscription" ? "💳 钱包授权" : "💳 钱包支付"
+				}), /* @__PURE__ */ jsxs("button", {
+					onClick: we,
+					disabled: b,
+					className: "_cppay-btn _cppay-wallet-address-btn",
+					title: "点击修改或查看钱包状态",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "_cppay-wallet-address-text",
+						children: [
+							M.slice(0, 10),
+							"...",
+							M.slice(-4)
+						]
+					}), /* @__PURE__ */ jsx("svg", {
+						className: "_cppay-wallet-icon",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" })
+					})]
+				})] }) : /* @__PURE__ */ jsx("button", {
+					onClick: we,
+					disabled: P,
+					className: "_cppay-btn _cppay-btn-secondary _cppay-connect-wallet-btn",
+					children: /* @__PURE__ */ jsx("span", { children: P ? "连接中..." : "💳 连接钱包" })
+				})
+			})
+		] })
+	});
+}, PaymentDialog_default = ({ open: e, onClose: t, ott: n, apikey: r, plain: i, orderId: ce, amount: a, intervalDays: o, onExpired: s, onSuccess: c, onFailed: le, onError: ue, Slots: de }) => {
+	let [l, fe] = useState("select"), [u, pe] = useState(!1), [d, me] = useState(!1), [he, f] = useState();
+	useEffect(() => {
+		if (l === "success") {
+			let e = setTimeout(() => {
+				p();
+			}, 1e3);
+			return () => clearTimeout(e);
+		}
+	}, [l]), useEffect(() => {
+		e || (fe("select"), f(void 0), pe(!1), me(!1));
+	}, [e]), useEffect(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.key === "Escape" && !u && !d && p();
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [
+		e,
+		u,
+		d
+	]);
+	let p = () => {
+		u || d || t();
+	};
+	return e ? /* @__PURE__ */ jsx("div", {
 		className: "_cppay-overlay",
-		onClick: (e) => e.target === e.currentTarget && !_ && !y && $(),
+		onClick: (e) => e.target === e.currentTarget && !u && !d && p(),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "_cppay-dialog",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "_cppay-header",
 				children: [/* @__PURE__ */ jsx("h2", {
 					className: "_cppay-title",
-					children: h === "select" ? "选择支付方式" : "完成支付"
+					children: (() => {
+						switch (l) {
+							case "success": return "支付结果";
+							case "expired": return "支付已过期";
+							case "failed": return "支付失败";
+							case "error": return "出错";
+							case "payment": return "完成支付";
+							default: return "选择支付方式";
+						}
+					})()
 				}), /* @__PURE__ */ jsx("button", {
-					onClick: $,
-					disabled: _ || y,
+					onClick: p,
+					disabled: u || d,
 					className: "_cppay-close-btn",
 					children: /* @__PURE__ */ jsx("svg", {
 						fill: "none",
@@ -252,310 +579,67 @@ var PaymentDialog_default = React.memo(({ open: t, onClose: n, apikey: a, plain:
 						})
 					})
 				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "_cppay-content",
-				children: h === "success" ? /* @__PURE__ */ jsxs("div", {
-					style: {
-						textAlign: "center",
-						padding: "2rem 0"
-					},
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							style: {
-								fontSize: "64px",
-								marginBottom: "1rem"
-							},
-							children: "✅"
-						}),
-						/* @__PURE__ */ jsx("h3", {
-							style: {
-								fontSize: "1.5rem",
-								fontWeight: 600,
-								color: "#10b981",
-								margin: "0 0 0.5rem 0"
-							},
-							children: o === "subscription" ? "授权成功!" : "支付成功!"
-						}),
-						/* @__PURE__ */ jsx("p", {
-							style: {
-								color: "#6b7280",
-								margin: 0
-							},
-							children: o === "subscription" ? "订阅已激活" : "交易已完成"
-						})
-					]
-				}) : h === "select" ? /* @__PURE__ */ jsxs("div", { children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [/* @__PURE__ */ jsx("label", {
-							className: "_cppay-label",
-							children: "支付网络"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "_cppay-grid",
-							children: T.map((e) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => O(e.chain),
-								className: `_cppay-select-btn ${D === e.chain ? "_cppay-selected" : ""}`,
-								children: [e.icon && /* @__PURE__ */ jsx("img", {
-									src: e.icon,
-									alt: e.chain
-								}), /* @__PURE__ */ jsx("span", { children: e.chain })]
-							}, e.chain))
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [/* @__PURE__ */ jsx("label", {
-							className: "_cppay-label",
-							children: "支付代币"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "_cppay-grid",
-							children: U.map((e) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => A(e.symbol),
-								className: `_cppay-select-btn ${k === e.symbol ? "_cppay-selected" : ""}`,
-								children: [e.icon && /* @__PURE__ */ jsx("img", {
-									src: e.icon,
-									alt: e.symbol
-								}), /* @__PURE__ */ jsx("span", { children: e.symbol })]
-							}, e.symbol))
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "_cppay-price-box",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "_cppay-price-row",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "_cppay-price-label",
-									children: "支付金额"
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "_cppay-price-amount",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "_cppay-price-main",
-										children: [
-											q ?? "-",
-											" ",
-											k ?? ""
-										]
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "_cppay-price-sub",
-										children: ["≈ $", c]
-									})]
-								})]
-							})
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [x && /* @__PURE__ */ jsxs("div", {
-							className: "_cppay-error-tooltip-wrapper",
-							onMouseEnter: () => w(!0),
-							onMouseLeave: () => w(!1),
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "_cppay-error-tooltip",
-								children: [/* @__PURE__ */ jsx("svg", {
-									viewBox: "0 0 20 20",
-									fill: "currentColor",
-									children: /* @__PURE__ */ jsx("path", {
-										fillRule: "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",
-										clipRule: "evenodd"
-									})
-								}), /* @__PURE__ */ jsx("span", { children: x })]
-							}), C && /* @__PURE__ */ jsx("div", {
-								className: "_cppay-error-tooltip-full",
-								children: x
-							})]
-						}), /* @__PURE__ */ jsx("button", {
-							onClick: X,
-							disabled: !D || !k || _,
-							className: "_cppay-btn _cppay-btn-primary",
-							children: _ ? "处理中..." : "继续支付"
-						})]
-					})
-				] }) : /* @__PURE__ */ jsxs("div", { children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-qr-container",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "_cppay-qr-code",
-							children: j && /* @__PURE__ */ jsx("img", {
-								src: j,
-								alt: "Payment QR Code",
-								style: {
-									width: "160px",
-									height: "160px",
-									display: "block"
-								}
-							})
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [
-							k && /* @__PURE__ */ jsxs("div", {
-								className: "_cppay-info-box",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "_cppay-info-label",
-									children: o === "subscription" ? "授权金额" : "支付金额"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "_cppay-info-value",
-									children: o === "subscription" ? `${K(Y.current.approveAmount, G(k))} ${k}` : `${K(Y.current.paymentAmount, G(k))} ${k}`
-								})]
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "_cppay-info-box",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "_cppay-info-label",
-									children: o === "subscription" ? "授权合约地址" : "支付地址"
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "_cppay-address-row",
-									children: [/* @__PURE__ */ jsx("code", { children: o === "subscription" ? Y.current.spenderAddress : Y.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
-										onClick: Q,
-										className: "_cppay-copy-btn",
-										title: "复制地址",
-										children: /* @__PURE__ */ jsx("svg", {
-											fill: "none",
-											stroke: "currentColor",
-											viewBox: "0 0 24 24",
-											children: /* @__PURE__ */ jsx("path", {
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												strokeWidth: 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"
-											})
-										})
-									})]
-								})]
-							}),
-							o === "subscription" && /* @__PURE__ */ jsxs("div", {
-								className: "_cppay-info-box",
-								style: {
-									background: "#fff3cd",
-									borderColor: "#ffc107"
-								},
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "_cppay-info-label",
-									style: { color: "#856404" },
-									children: "📌 订阅说明"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "_cppay-info-value",
-									style: {
-										fontSize: "12px",
-										color: "#856404"
-									},
-									children: "订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。"
-								})]
-							})
-						]
-					}),
-					x && /* @__PURE__ */ jsxs("div", {
-						className: "_cppay-error-tooltip-wrapper",
-						onMouseEnter: () => w(!0),
-						onMouseLeave: () => w(!1),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "_cppay-error-tooltip",
-							children: [/* @__PURE__ */ jsx("svg", {
-								viewBox: "0 0 20 20",
-								fill: "currentColor",
-								children: /* @__PURE__ */ jsx("path", {
-									fillRule: "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",
-									clipRule: "evenodd"
-								})
-							}), /* @__PURE__ */ jsx("span", { children: x })]
-						}), C && /* @__PURE__ */ jsx("div", {
-							className: "_cppay-error-tooltip-full",
-							children: x
-						})]
-					}),
-					!y && /* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: N ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-							className: "_cppay-btn-container",
-							children: [/* @__PURE__ */ jsx("button", {
-								onClick: Oe,
-								disabled: _,
-								className: "_cppay-btn _cppay-btn-primary",
-								children: _ ? o === "subscription" ? "授权中..." : "支付中..." : o === "subscription" ? "💳 钱包授权" : "💳 钱包支付"
-							}), /* @__PURE__ */ jsx("button", {
-								onClick: V,
-								disabled: _,
-								className: "_cppay-btn _cppay-btn-primary",
-								children: "💰钱包状态"
-							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							style: {
-								textAlign: "center",
-								marginTop: "8px",
-								fontSize: "12px",
-								color: "#666"
-							},
-							children: [
-								"已连接: ",
-								N.slice(0, 6),
-								"...",
-								N.slice(-4)
-							]
-						})] }) : /* @__PURE__ */ jsx("button", {
-							onClick: V,
-							disabled: F,
-							className: "_cppay-btn _cppay-btn-secondary",
-							style: {
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								gap: "0.5rem",
-								padding: "0.75rem 1rem",
-								width: "100%"
-							},
-							children: /* @__PURE__ */ jsx("span", { children: F ? "连接中..." : "💳 连接钱包" })
-						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("button", {
-							onClick: ke,
-							disabled: y,
-							className: "_cppay-btn _cppay-btn-primary",
-							children: y ? "检查中..." : "我已完成支付"
-						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("button", {
-							onClick: () => g("select"),
-							disabled: _ || y,
-							className: "_cppay-btn _cppay-btn-text",
-							children: "更改支付方式"
-						})
-					})
-				] })
+			}), /* @__PURE__ */ jsx(PaymentContent_default, {
+				apikey: r,
+				ott: n,
+				plain: i,
+				orderId: ce,
+				amount: a,
+				intervalDays: o,
+				onSuccess: c,
+				onExpired: s,
+				onFailed: le,
+				onError: ue,
+				Slots: de,
+				paymentStep: l,
+				onPaymentStepChange: fe,
+				loading: u,
+				isCheckingPayment: d,
+				error: he,
+				onErrorChange: f
 			})]
 		})
 	}) : null;
-}), CppayContext = createContext(null);
+}, CppayContext = createContext(null);
 const CppayProvider = ({ apikey: e, children: t }) => {
-	let [n, r] = useState(!1), [i, be] = useState(null), xe = useCallback((e) => {
-		be(e), r(!0);
-	}, []), Se = useCallback(() => {
+	let [n, r] = useState(!1), [i, ce] = useState(null), a = useCallback((e) => {
+		ce(e), r(!0);
+	}, []), o = useCallback(() => {
+		r(!1);
+	}, []), s = useCallback(() => {
 		r(!1);
-	}, []), Ce = useCallback((e) => {
-		i?.onSuccess?.(e), r(!1);
-	}, [i]), we = useCallback((e) => {
+	}, []), c = useCallback((e) => {
+		i?.onSuccess?.(e), setTimeout(() => r(!1), 1e3);
+	}, [i]), le = useCallback((e) => {
+		i?.onExpired?.(e);
+	}, [i]), ue = useCallback((e) => {
+		i?.onFailed?.(e);
+	}, [i]), de = useCallback((e) => {
 		i?.onError?.(e);
 	}, [i]);
-	return /* @__PURE__ */ jsxs(CppayContext.Provider, {
-		value: { showPayment: xe },
+	return useEffect(() => {
+		if (!n) return;
+		let e = (e) => {
+			e.key === "Escape" && s();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [n, s]), /* @__PURE__ */ jsxs(CppayContext.Provider, {
+		value: {
+			showPayment: a,
+			closePayment: o
+		},
 		children: [t, i && /* @__PURE__ */ jsx(PaymentDialog_default, {
 			open: n,
-			onClose: Se,
+			onClose: s,
 			apikey: e,
 			plain: i.plain,
 			orderId: i.orderId,
 			amount: i.amount,
 			intervalDays: i.intervalDays,
-			onSuccess: Ce,
-			onError: we
+			onSuccess: c,
+			onExpired: le,
+			onFailed: ue,
+			onError: de
 		})]
 	});
 }, useCppayPayment = () => {
@@ -564,4 +648,4 @@ const CppayProvider = ({ apikey: e, children: t }) => {
 	return e;
 };
 injectStyle(payment_dialog_default);
-export { CppayProvider, PaymentDialog_default as PaymentDialog, useCppayPayment };
+export { CppayProvider, PaymentContent_default as PaymentContent, PaymentDialog_default as PaymentDialog, useCppayPayment };