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

package/dist/react.js

@@ -1,5 +1,5 @@
-import { t as cppay_default } from "./cppay-BPtRBPjB.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 injectStyle, r as payment_dialog_default, t as getLocaleMessages } from "./locales-DGvDecya.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: h, orderId: g, amount: _, intervalDays: ge, locale: _e = "zh-CN", onSuccess: ve, onExpired: ye, onFailed: be, onError: v, Slots: xe, paymentStep: y, onPaymentStepChange: b, loading: x = !1, isCheckingPayment: S = !1, error: C, onErrorChange: w }) => {
+	let T = useMemo(() => new cppay_default(t, n), [t, n]), E = useMemo(() => getLocaleMessages(_e), [_e]), [D, Se] = useState([]), [O, k] = useState(), [A, j] = useState(), [M, N] = useState(), [P, F] = useState(), [I, L] = useState(!1), [R, z] = useState(), [B, Ce] = useState(""), [V, we] = useState(!1), [Te, H] = useState(!1), U = useRef(null), W = useRef(null), G = useRef(null);
 	useEffect(() => {
-		typeof window < "u" && !z.current && (z.current = createAppKit({
+		typeof window < "u" && !U.current && (U.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) => {
+		}), F(U.current.getAddress()), z(U.current.getProvider("eip155")), U.current.subscribeAccount((e) => {
+			e.isConnected ? F(e.address) : (F(void 0), z(void 0));
+		}), U.current.subscribeProviders((e) => {
 			let t = e?.eip155;
-			R(t);
+			z(t);
 		}));
 	}, []);
-	let V = async () => {
+	let Ee = async () => {
 		try {
-			I(!0), S(void 0), z.current && await z.current.open();
+			L(!0), w?.(void 0), U.current && await U.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 : E.walletConnectionFailed;
+			w?.(t), v?.(e);
 		} finally {
-			I(!1);
+			L(!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) => [
+	}, K = useMemo(() => D.find((e) => e.chain === O), [D, O]), q = useMemo(() => K?.tokens || [], [K]), J = useMemo(() => q.find((e) => e.symbol === A), [q, A]), Y = (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, X = (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);
+	}, De = (e) => {
+		if (e <= 0) return E.expired;
+		let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60;
+		return t > 0 ? `${t}${E.hours}${n}${E.minutes}${r}${E.seconds}` : `${n}${E.minutes}${r}${E.seconds}`;
+	}, Oe = (e) => {
+		G.current && clearInterval(G.current);
+		let t = () => {
+			let t = e - Math.floor(Date.now() / 1e3);
+			Ce(De(t)), t <= 0 && (b("expired"), ke());
+		};
+		t(), G.current = setInterval(t, 1e3);
+	}, ke = () => {
+		G.current &&= (clearInterval(G.current), null);
+	}, Z = useMemo(() => {
+		if (!A || !J) return "0";
+		let e = parseFloat(J.price);
 		if (isNaN(e) || e === 0) return "0";
-		let t = G(k);
-		return K((parseFloat(c) / e).toFixed(t), t);
+		let t = Y(A);
+		return X((parseFloat(_) / e).toFixed(t), t);
 	}, [
-		c,
-		k,
-		W
-	]), Te = async () => {
+		_,
+		A,
+		J
+	]), Ae = async () => {
 		try {
-			v(!0), S(void 0);
-			let e = await m.getSupportedChains();
-			E(e), e.length > 0 && O(e[0].chain);
+			w?.(void 0);
+			let e = await T.getSupportedChains();
+			Se(e), e.length > 0 && k(e[0].chain);
 		} catch (e) {
-			S(e instanceof Error ? e.message : "加载支付网络失败"), p?.(e);
-		} finally {
-			v(!1);
+			let t = e instanceof Error ? e.message : E.loadPaymentNetworkFailed;
+			w?.(t), v?.(e);
 		}
-	}, J = async (e) => {
-		if (L) try {
-			await L.request({
+	}, je = async (e) => {
+		if (R) try {
+			await R.request({
 				method: "wallet_switchEthereumChain",
 				params: [{ chainId: `0x${e.toString(16)}` }]
 			});
 		} catch (e) {
-			throw e.code === 4902 ? Error("请在钱包中添加该网络") : e;
+			throw e.code === 4902 ? Error(E.pleaseAddNetwork) : e;
 		}
-	}, Ee = async () => {
-		if (!(!N || !L || !Y.current || !W || !H)) try {
-			v(!0);
-			let e = Y.current;
-			await J(H.chainId);
+	}, Me = async () => {
+		if (!(!P || !R || !Q.current || !J || !K)) try {
+			let e = Q.current;
+			await je(K.chainId);
 			let t = createWalletClient({
-				account: N,
-				transport: custom(L)
+				account: P,
+				transport: custom(R)
 			});
-			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" }]
+			J.address ? await t.writeContract({
+				address: J.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, J.decimals)],
+				chain: null
+			}) : await t.sendTransaction({
+				to: e.receiveAddress,
+				value: parseUnits(e.paymentAmount, J.decimals),
+				chain: null
+			}), N(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 : E.walletPaymentFailed;
+			w?.(t), v?.(e);
 		}
-	}, De = async () => {
-		if (!(!N || !L || !Y.current || !W || !H)) try {
-			v(!0);
-			let e = Y.current;
-			await J(H.chainId);
+	}, Ne = async () => {
+		if (!(!P || !R || !Q.current || !J || !K)) try {
+			let e = Q.current;
+			await je(K.chainId);
 			let t = createWalletClient({
-				account: N,
-				transport: custom(L)
+				account: P,
+				transport: custom(R)
 			});
-			if (!W.address) throw Error("订阅支付不支持原生代币");
-			let n = await t.writeContract({
-				address: W.address,
+			if (!J.address) throw Error(E.subscriptionDoesNotSupportNative);
+			await t.writeContract({
+				address: J.address,
 				abi: [{
 					name: "approve",
 					type: "function",
@@ -156,89 +163,430 @@ 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, J.decimals)],
 				chain: null
-			});
-			console.log("授权交易哈希:", n), v(!1), b(!0), Z(e.subscriptionId);
+			}), N(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 : E.walletPaymentFailed;
+			w?.(t), v?.(e);
 		}
-	}, Oe = async () => {
-		if (!N) {
-			let e = "请先连接钱包";
-			S(e), p?.(Error(e));
+	}, Pe = async () => {
+		if (!P) {
+			let e = E.pleaseConnectWallet;
+			w?.(e), v?.(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);
+		h === "one-time" ? await Me() : h === "subscription" && await Ne();
+	}, Q = useRef(null), Fe = async () => {
+		if (!(!O || !A)) try {
+			w?.(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, {
+			h === "one-time" ? (Q.current = await T.createOnetimePayment({
+				paymentChain: O,
+				paymentToken: A,
+				orderId: g,
+				amount: Z
+			}), e = `${O.toLowerCase()}:${Q.current.receiveAddress}?amount=${Q.current.paymentAmount}`, Oe(Q.current.expireAt), $({ paymentId: Q.current.paymentId })) : h === "subscription" && (Q.current = await T.createSubscriptionPayment({
+				paymentChain: O,
+				paymentToken: A,
+				orderId: g,
+				amountOfUsd: Z,
+				intervalDays: ge || 30
+			}), e = `${O.toLowerCase()}:${Q.current.spenderAddress}?amount=${Q.current.approveAmount}`, Oe(Q.current.expireAt), $({ subscriptionId: Q.current.subscriptionId })), b("payment"), N(await QRCode.toDataURL(e, {
 				width: 200,
 				margin: 2,
 				errorCorrectionLevel: "H"
 			}));
 		} catch (e) {
-			S(e instanceof Error ? e.message : "创建支付失败"), p?.(e);
-		} finally {
-			v(!1);
+			let t = e instanceof Error ? e.message : E.createPaymentFailed;
+			w?.(t), v?.(e);
 		}
-	}, 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);
-		}
-	}, 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) => {
+		W.current?.unsubscribe();
+		let t = () => defer(() => h === "subscription" ? T.checkSubscriptionPaymentStatus(e) : T.checkOnetimePaymentStatus(e)).pipe(timeout(15e3), retry({ delay: 2e3 }));
+		W.current = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
+			(e.status === "paid" || e.status === "approved") && (b("success"), ve?.(e)), e.status === "expired" && (b("expired"), ye?.(e)), e.status === "failed" && (b("failed"), be?.(e));
+		})).subscribe({
+			error: (e) => {
+				if (Q.current) {
+					let t = e instanceof Error ? e.message : E.checkPaymentStatusFailed;
+					b("error"), w?.(t), v?.(e);
+				}
+			},
+			complete: () => {
+				W.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", {
+		D.length === 0 && Ae();
+	}, []), useEffect(() => {
+		q.length > 0 && j(q[0].symbol);
+	}, [q]), useEffect(() => (g && $({ orderId: g }), () => {
+		W.current?.unsubscribe(), ke();
+	}), [g]), /* @__PURE__ */ jsx("div", {
+		className: "_cppay-content",
+		children: y === "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: h === "subscription" ? E.authorizationSuccess : E.paymentSuccess
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "_cppay-state-message",
+					children: h === "subscription" ? E.subscriptionActivated : E.transactionCompleted
+				})
+			]
+		}) : y === "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: E.paymentExpired
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => b("select"),
+					disabled: x || S,
+					className: "_cppay-btn _cppay-btn-text",
+					children: E.returnButton
+				})
+			]
+		}) : y === "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: C || E.error
+			})]
+		}) : y === "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: E.paymentFailed
+			})]
+		}) : y === "select" ? /* @__PURE__ */ jsxs("div", { children: [
+			xe?.ChooseTop,
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "_cppay-label",
+					children: E.paymentNetwork
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: D.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => k(e.chain),
+						className: `_cppay-select-btn ${O === 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: E.paymentToken
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: q.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => j(e.symbol),
+						className: `_cppay-select-btn ${A === e.symbol ? "_cppay-selected" : ""}`,
+						children: [e.icon && /* @__PURE__ */ jsx("img", {
+							src: e.icon,
+							alt: e.symbol
+						}), /* @__PURE__ */ jsx("span", { children: e.symbol })]
+					}, e.symbol))
+				})]
+			}),
+			xe?.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: E.paymentAmount
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "_cppay-price-amount",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-main",
+								children: [
+									Z ?? "-",
+									" ",
+									A ?? ""
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-sub",
+								children: ["≈ $", _]
+							})]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [C && /* @__PURE__ */ jsxs("div", {
+					className: "_cppay-error-tooltip-wrapper",
+					onMouseEnter: () => H(!0),
+					onMouseLeave: () => H(!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: C })]
+					}), Te && /* @__PURE__ */ jsx("div", {
+						className: "_cppay-error-tooltip-full",
+						children: C
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: Fe,
+					disabled: !O || !A || x,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: x ? E.processing : E.continuePayment
+				})]
+			})
+		] }) : /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-qr-container",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "_cppay-qr-code",
+					children: M && /* @__PURE__ */ jsx("img", {
+						src: M,
+						alt: "Payment QR Code",
+						className: "_cppay-qr-image"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [
+					J && /* @__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: h === "subscription" ? E.authorizationAmount : E.paymentAmount
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "_cppay-info-value _cppay-info-value-flex",
+									children: [/* @__PURE__ */ jsx("span", { children: h === "subscription" ? `${X(Q.current.approveAmount, Y(J.symbol))} ${J.symbol}` : `${X(Q.current.paymentAmount, Y(J.symbol))} ${J.symbol}` }), /* @__PURE__ */ jsxs("span", { children: ["≈ $", _] })]
+								})]
+							})
+						})
+					}),
+					/* @__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: h === "subscription" ? E.authorizationContractAddress : E.paymentAddress }), B && /* @__PURE__ */ jsxs("span", {
+									className: "_cppay-countdown",
+									children: ["⏰ ", B]
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-address-row",
+								children: [/* @__PURE__ */ jsx("code", { children: h === "subscription" ? Q.current.spenderAddress : Q.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
+									onClick: async () => {
+										if (!Q.current) return;
+										let e = h === "subscription" ? Q.current.spenderAddress : Q.current.receiveAddress;
+										if (e) try {
+											await navigator.clipboard.writeText(e), we(!0), setTimeout(() => {
+												we(!1);
+											}, 2e3);
+										} catch (e) {
+											console.error("复制失败:", e);
+										}
+									},
+									className: `_cppay-copy-btn ${V ? "_cppay-copy-success" : ""}`,
+									title: V ? E.copied : E.copyAddress,
+									children: V ? /* @__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"
+										})]
+									})
+								})]
+							})]
+						})
+					}),
+					h === "subscription" && /* @__PURE__ */ jsxs("div", {
+						className: "_cppay-info-box _cppay-subscription-box",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-label _cppay-subscription-label",
+							children: E.subscriptionNotice
+						}), /* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-value _cppay-subscription-message",
+							children: E.subscriptionNoticeMessage
+						})]
+					})
+				]
+			}),
+			C && /* @__PURE__ */ jsxs("div", {
+				className: "_cppay-error-tooltip-wrapper",
+				onMouseEnter: () => H(!0),
+				onMouseLeave: () => H(!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: C })]
+				}), Te && /* @__PURE__ */ jsx("div", {
+					className: "_cppay-error-tooltip-full",
+					children: C
+				})]
+			}),
+			!S && /* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: P ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					onClick: Pe,
+					disabled: x,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: x ? h === "subscription" ? E.authorizing : E.processing : h === "subscription" ? `💳 ${E.connectWallet}` : `💳 ${E.walletPay}`
+				}), /* @__PURE__ */ jsxs("button", {
+					onClick: Ee,
+					disabled: x,
+					className: "_cppay-btn _cppay-wallet-address-btn",
+					title: E.clickToModifyWallet,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "_cppay-wallet-address-text",
+						children: [
+							P.slice(0, 10),
+							"...",
+							P.slice(-4)
+						]
+					}), /* @__PURE__ */ jsx("svg", {
+						className: "_cppay-wallet-arrow",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+					})]
+				})] }) : /* @__PURE__ */ jsx("button", {
+					onClick: Ee,
+					disabled: I,
+					className: "_cppay-btn _cppay-btn-secondary _cppay-connect-wallet-btn",
+					children: /* @__PURE__ */ jsx("span", { children: I ? E.processing : `💳 ${E.connectWallet}` })
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						b("payment");
+					},
+					disabled: S,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: S ? E.checking : E.completedPayment
+				})
+			}),
+			/* @__PURE__ */ jsx("hr", { className: "_cppay-divider" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => b("select"),
+					disabled: x || S,
+					className: "_cppay-btn _cppay-btn-text",
+					children: E.changePaymentMethod
+				})
+			})
+		] })
+	});
+}, PaymentDialog_default = ({ open: e, onClose: t, ott: n, apikey: i, plain: a, orderId: o, amount: s, intervalDays: c, locale: l, onExpired: se, onSuccess: u, onFailed: ce, onError: le, Slots: ue }) => {
+	let [d, de] = useState("select"), [f, fe] = useState(!1), [p, pe] = useState(!1), [me, he] = useState();
+	useEffect(() => {
+		if (d === "success") {
+			let e = setTimeout(() => {
+				m();
+			}, 1e3);
+			return () => clearTimeout(e);
+		}
+	}, [d]), useEffect(() => {
+		e || (de("select"), he(void 0), fe(!1), pe(!1));
+	}, [e]), useEffect(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.key === "Escape" && !f && !p && m();
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [
+		e,
+		f,
+		p
+	]);
+	let m = () => {
+		f || p || t();
+	}, h = useMemo(() => getLocaleMessages(l), [l]);
+	return e ? /* @__PURE__ */ jsx("div", {
 		className: "_cppay-overlay",
-		onClick: (e) => e.target === e.currentTarget && !_ && !y && $(),
+		onClick: (e) => e.target === e.currentTarget && !f && !p && m(),
 		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 (d) {
+							case "success": return h.paymentResult;
+							case "expired": return h.paymentExpired;
+							case "failed": return h.paymentFailed;
+							case "error": return h.error;
+							case "payment": return h.completePayment;
+							default: return h.selectPaymentMethod;
+						}
+					})()
 				}), /* @__PURE__ */ jsx("button", {
-					onClick: $,
-					disabled: _ || y,
+					onClick: m,
+					disabled: f || p,
 					className: "_cppay-close-btn",
 					children: /* @__PURE__ */ jsx("svg", {
 						fill: "none",
@@ -252,310 +600,68 @@ 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: i,
+				ott: n,
+				plain: a,
+				orderId: o,
+				amount: s,
+				intervalDays: c,
+				locale: l,
+				onSuccess: u,
+				onExpired: se,
+				onFailed: ce,
+				onError: le,
+				Slots: ue,
+				paymentStep: d,
+				onPaymentStepChange: de,
+				loading: f,
+				isCheckingPayment: p,
+				error: me,
+				onErrorChange: he
 			})]
 		})
 	}) : 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, a] = useState(null), o = useCallback((e) => {
+		a(e), r(!0);
+	}, []), s = useCallback(() => {
+		r(!1);
+	}, []), c = useCallback(() => {
 		r(!1);
-	}, []), Ce = useCallback((e) => {
-		i?.onSuccess?.(e), r(!1);
-	}, [i]), we = useCallback((e) => {
+	}, []), l = useCallback((e) => {
+		i?.onSuccess?.(e), setTimeout(() => r(!1), 1e3);
+	}, [i]), se = useCallback((e) => {
+		i?.onExpired?.(e);
+	}, [i]), u = useCallback((e) => {
+		i?.onFailed?.(e);
+	}, [i]), ce = 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" && c();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [n, c]), /* @__PURE__ */ jsxs(CppayContext.Provider, {
+		value: {
+			showPayment: o,
+			closePayment: s
+		},
 		children: [t, i && /* @__PURE__ */ jsx(PaymentDialog_default, {
 			open: n,
-			onClose: Se,
+			onClose: c,
 			apikey: e,
 			plain: i.plain,
 			orderId: i.orderId,
 			amount: i.amount,
 			intervalDays: i.intervalDays,
-			onSuccess: Ce,
-			onError: we
+			onSuccess: l,
+			onExpired: se,
+			onFailed: u,
+			onError: ce
 		})]
 	});
 }, useCppayPayment = () => {
@@ -564,4 +670,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 };