cppay-sdk 0.0.2-beta.8 → 0.0.2

package/dist/react.js

@@ -1,229 +1,904 @@
-import { t as cppay_default } from "./cppay-Oxm_gXCa.js";
-import { n as payment_dialog_default, t as injectStyle } from "./inject-style-qX_0AjjE.js";
-import React, { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderId: l, amount: u, onSuccess: d, onError: f }) => {
-	let p = useMemo(() => new cppay_default(c), [c]), [m, h] = useState("select"), [g, _] = useState(!1), [v, y] = useState([]), [b, x] = useState(""), [S, C] = useState(""), [w, T] = useState(null), E = useMemo(() => v.find((t) => t.chain === b), [v, b]), D = useMemo(() => E?.tokens || [], [E]), O = useMemo(() => D.find((t) => t.symbol === S), [D, S]), k = useMemo(() => S ? (parseFloat(u) / 1).toFixed(6) : "0", [
-		u,
-		S,
-		1
-	]), A = async () => {
+import { t as cppay_default } from "./cppay-Db8t1Cra.js";
+import { n as injectStyle, r as payment_dialog_default, t as getLocaleMessages } from "./locales-BZF2EQ2A.js";
+import * as QRCode from "qrcode";
+import { EMPTY, defer, timer } from "rxjs";
+import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
+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 { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PaymentContent_default = ({ apikey: t, ott: n, plain: u, orderId: xe, amount: d, intervalDays: f, remark: Se, locale: Ce, onSuccess: we, onExpired: Te, onFailed: Ee, onError: p, Slots: m, onPaymentStepChange: De }) => {
+	let h = useMemo(() => new cppay_default(t, n), [t, n]), g = useMemo(() => getLocaleMessages(Ce), [Ce]), [_, v] = useState("select"), y = useMemo(() => _ === "checking", [_]), [b, x] = useState(!1), [S, C] = useState(), [w, Oe] = useState([]), [T, E] = useState(), [D, O] = useState(), [ke, k] = useState(), [A, j] = useState(), [Ae, je] = useState(!1), [M, N] = useState(), [Me, Ne] = useState(""), [P, F] = useState(!1), [Pe, I] = useState(!1), [L, R] = useState(""), z = useRef(null), B = useRef(null), V = useRef(null), H = useRef(null), U = useRef("");
+	useEffect(() => {
+		typeof window < "u" && !z.current && (z.current = createAppKit({
+			debug: !1,
+			enableNetworkSwitch: !1,
+			adapters: [new EthersAdapter()],
+			projectId: "8d2e1854d3f1782e45aa15fbd8938894",
+			allowUnsupportedChain: !0,
+			networks: [
+				mainnet,
+				bsc,
+				polygon,
+				arbitrum,
+				optimism,
+				base
+			],
+			metadata: {
+				name: "Cppay",
+				description: "Cppay Payment Gateway",
+				url: window.location.origin,
+				icons: ["https://cppay.com/icon.png"]
+			},
+			features: { analytics: !1 }
+		}), j(z.current.getAddress()), N(z.current.getProvider("eip155")), z.current.subscribeAccount((e) => {
+			e.isConnected ? j(e.address) : (j(void 0), N(void 0));
+		}), z.current.subscribeProviders((e) => {
+			let t = e?.eip155;
+			N(t);
+		}));
+	}, []), useEffect(() => {
+		De?.(_);
+	}, [_]);
+	let Fe = async () => {
 		try {
-			_(!0);
-			let t = await p.getSupportedChains();
-			y(t), t.length > 0 && x(t[0].chain);
-		} catch (t) {
-			f?.(t);
+			je(!0), C(void 0), z.current && await z.current.open();
+		} catch (e) {
+			console.error("钱包连接失败:", e), C(e instanceof Error ? e.message : g.walletConnectionFailed), p?.(e);
 		} finally {
-			_(!1);
+			je(!1);
 		}
-	}, j = async () => {
-		if (!(!b || !S)) try {
-			_(!0);
-			let t = await p.createPayment({
-				paymentChain: b,
-				paymentToken: S,
-				orderId: l,
-				amount: k
-			});
-			T({
-				paymentId: t.paymentId,
-				paymentAmount: t.paymentAmount,
-				receiveAddress: O?.receiveAddresses[0] || ""
-			}), h("payment");
-		} catch (t) {
-			f?.(t);
+	}, W = useMemo(() => w.find((e) => e.chain === T), [w, T]), G = useMemo(() => W?.tokens || [], [W]), K = useMemo(() => G.find((e) => e.symbol === D), [G, D]), q = (e) => [
+		"USDT",
+		"USDC",
+		"BUSD",
+		"DAI",
+		"TUSD",
+		"USDD",
+		"FDUSD"
+	].includes(e.toUpperCase()) ? 2 : 6, J = (e, t) => {
+		let n = parseFloat(e);
+		return isNaN(n) ? "0" : n.toFixed(t).replace(/\.?0+$/, "");
+	}, Ie = (e) => {
+		if (e <= 0) return g.expired;
+		let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60, i = (e) => e.toString().padStart(2, "0");
+		return t > 0 ? `${t}:${i(n)}:${i(r)}` : `${n}:${i(r)}`;
+	}, Y = (e) => {
+		V.current && clearInterval(V.current);
+		let t = () => {
+			if (_ === "checking") {
+				X();
+				return;
+			}
+			let t = e - Math.floor(Date.now() / 1e3);
+			Ne(Ie(t)), t <= 0 && X();
+		};
+		t(), V.current = setInterval(t, 1e3);
+	}, X = () => {
+		V.current &&= (clearInterval(V.current), null);
+	}, Z = useMemo(() => {
+		if (!D || !K) return "0";
+		let e = parseFloat(K.price);
+		if (isNaN(e) || e === 0) return "0";
+		let t = q(D);
+		return J((parseFloat(d) / e).toFixed(t), t);
+	}, [
+		d,
+		D,
+		K
+	]), Le = async () => {
+		try {
+			x(!0), C(void 0);
+			let e = await h.getSupportedChains();
+			Oe(e), e.length > 0 && E(e[0].chain);
+		} catch (e) {
+			C(e instanceof Error ? e.message : g.loadPaymentNetworkFailed), p?.(e);
 		} finally {
-			_(!1);
+			x(!1);
+		}
+	}, Re = async (e) => {
+		if (M) try {
+			await M.request({
+				method: "wallet_switchEthereumChain",
+				params: [{ chainId: `0x${e.toString(16)}` }]
+			});
+		} catch (e) {
+			throw e.code === 4902 ? Error(g.pleaseAddNetwork) : e;
 		}
-	}, M = async () => {
-		if (w) try {
-			_(!0), await p.checkPaymentStatus(w.paymentId), d?.(w.paymentId), P();
-		} catch (t) {
-			f?.(t);
+	}, ze = async () => {
+		if (!(!A || !M || !H.current || !K || !W)) try {
+			x(!0);
+			let e = H.current;
+			await Re(W.chainId);
+			let t = createWalletClient({
+				account: A,
+				transport: custom(M)
+			});
+			if (K.address) {
+				let n = await t.writeContract({
+					address: K.address,
+					abi: [{
+						name: "transfer",
+						type: "function",
+						stateMutability: "nonpayable",
+						inputs: [{
+							name: "to",
+							type: "address"
+						}, {
+							name: "amount",
+							type: "uint256"
+						}],
+						outputs: [{ type: "bool" }]
+					}],
+					functionName: "transfer",
+					args: [e.receiveAddress, parseUnits(e.paymentAmount, K.decimals)],
+					chain: null
+				});
+				console.log("转账交易哈希:", n), R(n), U.current = n;
+			} else {
+				let n = await t.sendTransaction({
+					to: e.receiveAddress,
+					value: parseUnits(e.paymentAmount, K.decimals),
+					chain: null
+				});
+				console.log("转账交易哈希:", n), R(n), U.current = n;
+			}
+			x(!1), v("checking"), Q({ paymentId: e.paymentId });
+		} catch (e) {
+			console.error("钱包支付失败:", e), C(e instanceof Error ? e.message : g.walletPaymentFailed), p?.(e), x(!1);
+		}
+	}, Be = async () => {
+		if (!(!A || !M || !H.current || !K || !W)) try {
+			x(!0);
+			let e = H.current;
+			await Re(W.chainId);
+			let t = createWalletClient({
+				account: A,
+				transport: custom(M)
+			});
+			if (!K.address) throw Error(g.subscriptionDoesNotSupportNative);
+			let n = await t.writeContract({
+				address: K.address,
+				abi: [{
+					name: "approve",
+					type: "function",
+					stateMutability: "nonpayable",
+					inputs: [{
+						name: "spender",
+						type: "address"
+					}, {
+						name: "amount",
+						type: "uint256"
+					}],
+					outputs: [{ type: "bool" }]
+				}],
+				functionName: "approve",
+				args: [e.spenderAddress, parseUnits(e.approveAmount, K.decimals)],
+				chain: null
+			});
+			console.log("授权交易哈希:", n), R(n), U.current = n, x(!1), v("checking"), Q({ subscriptionId: e.subscriptionId });
+		} catch (e) {
+			console.error("钱包授权失败:", e), C(e instanceof Error ? e.message : g.walletPaymentFailed), p?.(e), x(!1);
+		}
+	}, Ve = async () => {
+		if (!A) {
+			let e = g.pleaseConnectWallet;
+			C(e), p?.(Error(e));
+			return;
+		}
+		u === "instant" ? await ze() : u === "subscription" && await Be();
+	}, He = async () => {
+		if (!(!T || !D)) try {
+			x(!0), C(void 0);
+			let e = "";
+			if (u === "instant") H.current = await h.createOnetimePayment({
+				paymentChain: T,
+				paymentToken: D,
+				orderId: xe,
+				amount: Z,
+				remark: Se
+			}), e = `${T.toLowerCase()}:${H.current.receiveAddress}?amount=${H.current.paymentAmount}`, Y(H.current.expireAt), Ke(H.current.paymentId, "instant");
+			else if (u === "subscription") {
+				if (!f) throw Error(`Invalid Renewal Days: ${f ?? ""}`);
+				H.current = await h.createSubscriptionPayment({
+					paymentChain: T,
+					paymentToken: D,
+					orderId: xe,
+					amountOfUsd: Z,
+					intervalDays: f
+				}), e = `${T.toLowerCase()}:${H.current.spenderAddress}?amount=${H.current.approveAmount}`, Y(H.current.expireAt), Ke(H.current.subscriptionId, "subscription");
+			}
+			v("payment"), k(await QRCode.toDataURL(e, {
+				width: 200,
+				margin: 2,
+				errorCorrectionLevel: "H"
+			}));
+		} catch (e) {
+			C(e instanceof Error ? e.message : g.createPaymentFailed), p?.(e);
 		} finally {
-			_(!1);
+			x(!1);
+		}
+	}, Ue = () => {
+		H.current && (v("checking"), C(void 0), u === "instant" ? Q({ paymentId: H.current.paymentId }) : u === "subscription" && Q({ subscriptionId: H.current.subscriptionId }));
+	}, Q = (e) => {
+		B.current?.unsubscribe();
+		let t = () => defer(() => u === "subscription" ? h.checkSubscriptionPaymentStatus(e) : h.checkOnetimePaymentStatus(e)).pipe(timeout(15e3), retry({ delay: 2e3 }));
+		B.current = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
+			if (!H.current && u === "instant") {
+				let t = e;
+				H.current = {
+					paymentId: t.paymentId,
+					orderId: t.orderId,
+					paymentChain: t.chain,
+					paymentToken: t.token,
+					paymentAmount: t.payAmount,
+					receiveAddress: t.receiveAddress,
+					expireAt: t.expireAt
+				}, E(t.chain), O(t.token), Y(t.expireAt);
+				let n = `${t.chain.toLowerCase()}:${t.receiveAddress}?amount=${t.payAmount}`;
+				QRCode.toDataURL(n, {
+					width: 200,
+					margin: 2,
+					errorCorrectionLevel: "H"
+				}).then((e) => {
+					k(e), v("payment");
+				}).catch((e) => {
+					console.error("生成二维码失败:", e), v("payment");
+				});
+			}
+			if (!H.current && u === "subscription") {
+				let t = e;
+				H.current = {
+					subscriptionId: t.subscriptionId,
+					orderId: t.orderId,
+					paymentChain: t.chain,
+					paymentToken: t.token,
+					approveAmount: t.approveAmount,
+					spenderAddress: t.approvedAddress,
+					expireAt: t.expireAt,
+					intervalDays: 0,
+					amountOfUsd: t.amountOfUsd
+				}, E(t.chain), O(t.token), Y(t.expireAt);
+				let n = `${t.chain.toLowerCase()}:${t.approvedAddress}?amount=${t.approveAmount}`;
+				QRCode.toDataURL(n, {
+					width: 200,
+					margin: 2,
+					errorCorrectionLevel: "H"
+				}).then((e) => {
+					k(e), v("payment");
+				}).catch((e) => {
+					console.error("生成二维码失败:", e), v("payment");
+				});
+			}
+			(e.status === "paid" || e.status === "approved") && (v("success"), $(), we?.(e)), e.status === "expired" && (v("expired"), $(), Te?.(e)), e.status === "failed" && (v("failed"), $(), Ee?.(e));
+		})).subscribe({
+			error: (e) => {
+				if (H.current) {
+					let t = e instanceof Error ? e.message : g.checkPaymentStatusFailed;
+					v("error"), C(t), p?.(e);
+				}
+			},
+			complete: () => {
+				B.current?.unsubscribe();
+			}
+		});
+	}, We = async () => {
+		if (!H.current) return;
+		let e = u === "subscription" ? H.current.spenderAddress : H.current.receiveAddress;
+		if (e) try {
+			await navigator.clipboard.writeText(e), F(!0), setTimeout(() => {
+				F(!1);
+			}, 2e3);
+		} catch (e) {
+			console.error("复制失败:", e);
+		}
+	}, Ge = async () => {
+		if (L) try {
+			await navigator.clipboard.writeText(L), F(!0), setTimeout(() => {
+				F(!1);
+			}, 2e3);
+		} catch (e) {
+			console.error("复制失败:", e);
 		}
-	}, N = async () => {
-		w?.receiveAddress && await navigator.clipboard.writeText(w.receiveAddress);
-	}, P = () => {
-		s(), setTimeout(() => {
-			h("select"), T(null);
-		}, 300);
+	}, Ke = (e, t) => {
+		if (!n || typeof window > "u") return;
+		let r = new URL(window.location.href), i = t === "subscription" ? "subscriptionId" : "paymentId";
+		r.searchParams.set(i, e), window.history.replaceState({}, "", r.toString());
+	}, $ = () => {
+		if (typeof window > "u") return;
+		let e = new URL(window.location.href);
+		e.searchParams.delete("paymentId"), e.searchParams.delete("subscriptionId"), window.history.replaceState({}, "", e.toString());
 	};
 	return useEffect(() => {
-		o && v.length === 0 && A();
-	}, [o]), useEffect(() => {
-		D.length > 0 && C(D[0].symbol);
-	}, [D]), o ? /* @__PURE__ */ jsx("div", {
-		className: "_cppay-overlay",
-		onClick: (t) => t.target === t.currentTarget && P(),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "_cppay-dialog",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "_cppay-header",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "_cppay-title",
-					children: m === "select" ? "选择支付方式" : "完成支付"
-				}), /* @__PURE__ */ jsx("button", {
-					onClick: P,
-					disabled: g,
-					className: "_cppay-close-btn",
-					children: /* @__PURE__ */ jsx("svg", {
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ jsx("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M6 18L18 6M6 6l12 12"
+		w.length === 0 && Le();
+	}, []), useEffect(() => {
+		G.length > 0 && O(G[0].symbol);
+	}, [G]), useEffect(() => {
+		if (typeof window > "u") return;
+		let e = new URL(window.location.href);
+		if (u === "instant") {
+			let t = e.searchParams.get("paymentId");
+			t && (v("payment"), Q({ paymentId: t }));
+		}
+		if (u === "subscription") {
+			let t = e.searchParams.get("subscriptionId");
+			t && (v("payment"), Q({ subscriptionId: t }));
+		}
+	}, []), useEffect(() => () => {
+		B.current?.unsubscribe(), X();
+	}, []), /* @__PURE__ */ jsx("div", {
+		className: "_cppay-content",
+		children: _ === "success" ? m?.Success ? /* @__PURE__ */ jsx(m.Success, { paymentInfo: H.current }) : /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-success-bg",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "_cppay-state-success-icon",
+						children: "✓"
+					})
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title _cppay-state-title-success",
+					children: u === "subscription" ? g.authorizationSuccess : g.paymentSuccess
+				}),
+				L && /* @__PURE__ */ jsxs("div", {
+					className: "_cppay-state-hash-container",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "_cppay-state-label",
+						children: g.transactionHash
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "_cppay-hash-row",
+						children: [/* @__PURE__ */ jsx("code", {
+							className: "_cppay-state-hash",
+							children: L
+						}), /* @__PURE__ */ jsx("button", {
+							onClick: Ge,
+							className: "_cppay-state-copy-btn",
+							title: g.copyAddress,
+							children: /* @__PURE__ */ jsxs("svg", {
+								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.current && /* @__PURE__ */ jsxs("div", {
+					className: "_cppay-success-details",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: g.orderId
+							}), /* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-value",
+								children: H.current.orderId
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: u === "subscription" ? g.authorizationAmount : g.paymentAmount
+							}), /* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-value",
+								children: u === "subscription" ? `${J(H.current.approveAmount, q(D))} ${D}` : `${J(H.current.paymentAmount, q(D))} ${D}`
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: g.paymentNetwork
+							}), /* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-value",
+								children: H.current.paymentChain
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: g.paymentToken
+							}), /* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-value",
+								children: H.current.paymentToken
+							})]
+						}),
+						u === "subscription" && /* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: g.renewalInterval
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "_cppay-detail-value",
+								children: [
+									H.current.intervalDays,
+									" ",
+									g.days
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "_cppay-detail-item",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-label",
+								children: u === "subscription" ? g.subscriptionId : g.paymentId
+							}), /* @__PURE__ */ jsx("span", {
+								className: "_cppay-detail-value _cppay-detail-id",
+								children: u === "subscription" ? H.current.subscriptionId : H.current.paymentId
+							})]
 						})
+					]
+				})
+			]
+		}) : _ === "expired" ? m?.Expired ? /* @__PURE__ */ jsx(m.Expired, { paymentInfo: H.current }) : /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-expired-bg",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "_cppay-state-expired-icon",
+						children: "⏰"
+					})
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title _cppay-state-title-expired",
+					children: g.paymentExpired
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "_cppay-state-message",
+					children: g.pleaseInitiatePaymentAgain
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						v("select"), $();
+					},
+					disabled: b || y,
+					className: "_cppay-btn _cppay-btn-primary _cppay-state-btn",
+					children: g.returnButton
+				})
+			]
+		}) : _ === "error" ? m?.Error ? /* @__PURE__ */ jsx(m.Error, { paymentInfo: H.current }) : /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-error-bg",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "_cppay-state-error-icon",
+						children: "!"
 					})
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title _cppay-state-title-error",
+					children: S || g.error
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "_cppay-state-message",
+					children: g.checkStatusFailed
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						v("select"), $();
+					},
+					disabled: b || y,
+					className: "_cppay-btn _cppay-btn-primary _cppay-state-btn",
+					children: g.returnButton
+				})
+			]
+		}) : _ === "failed" ? m?.Failed ? /* @__PURE__ */ jsx(m.Failed, { paymentInfo: H.current }) : /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-state-container",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "_cppay-state-failed-bg",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "_cppay-state-failed-icon",
+						children: "✕"
+					})
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "_cppay-state-title _cppay-state-title-failed",
+					children: g.paymentFailed
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "_cppay-state-message",
+					children: g.pleaseInitiatePaymentAgain
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						v("select"), $();
+					},
+					disabled: b || y,
+					className: "_cppay-btn _cppay-btn-primary _cppay-state-btn",
+					children: g.returnButton
+				})
+			]
+		}) : _ === "select" ? /* @__PURE__ */ jsxs("div", { children: [
+			m?.ChooseTop,
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "_cppay-label",
+					children: g.paymentNetwork
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: w.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => E(e.chain),
+						className: `_cppay-select-btn ${T === 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__ */ jsx("div", {
-				className: "_cppay-content",
-				children: m === "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: v.map((t) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => x(t.chain),
-								className: `_cppay-select-btn ${b === t.chain ? "_cppay-selected" : ""}`,
-								children: [t.icon && /* @__PURE__ */ jsx("img", {
-									src: t.icon,
-									alt: t.chain
-								}), /* @__PURE__ */ jsx("span", { children: t.chain })]
-							}, t.chain))
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [/* @__PURE__ */ jsx("label", {
-							className: "_cppay-label",
-							children: "支付代币"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "_cppay-grid",
-							children: D.map((t) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => C(t.symbol),
-								className: `_cppay-select-btn ${S === t.symbol ? "_cppay-selected" : ""}`,
-								children: [t.icon && /* @__PURE__ */ jsx("img", {
-									src: t.icon,
-									alt: t.symbol
-								}), /* @__PURE__ */ jsx("span", { children: t.symbol })]
-							}, t.symbol))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "_cppay-label",
+					children: g.paymentToken
+				}), /* @__PURE__ */ jsx("div", {
+					className: "_cppay-grid",
+					children: G.map((e) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => O(e.symbol),
+						className: `_cppay-select-btn ${D === e.symbol ? "_cppay-selected" : ""}`,
+						children: [e.icon && /* @__PURE__ */ jsx("img", {
+							src: e.icon,
+							alt: e.symbol
+						}), /* @__PURE__ */ jsx("span", { children: e.symbol })]
+					}, e.symbol))
+				})]
+			}),
+			m?.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: g.paymentAmount
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "_cppay-price-amount",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-main",
+								children: [
+									Z ?? "-",
+									" ",
+									D ?? ""
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "_cppay-price-sub",
+								children: ["≈ $", d]
+							})]
 						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [S && /* @__PURE__ */ jsxs("div", {
+					className: "_cppay-error-tooltip-wrapper",
+					onMouseEnter: () => I(!0),
+					onMouseLeave: () => I(!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 })]
+					}), Pe && /* @__PURE__ */ jsx("div", {
+						className: "_cppay-error-tooltip-full",
+						children: S
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: He,
+					disabled: !T || !D || b,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: b ? g.processing : g.continuePayment
+				})]
+			})
+		] }) : /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-qr-container",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "_cppay-qr-code",
+					children: ke && /* @__PURE__ */ jsx("img", {
+						src: ke,
+						alt: "Payment QR Code",
+						className: "_cppay-qr-image"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-section",
+				children: [
+					K && /* @__PURE__ */ jsx("div", {
+						className: "_cppay-info-box",
 						children: /* @__PURE__ */ jsx("div", {
-							className: "_cppay-price-box",
+							className: "_cppay-info-flex-container",
 							children: /* @__PURE__ */ jsxs("div", {
-								className: "_cppay-price-row",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "_cppay-price-label",
-									children: "支付金额"
+								className: "_cppay-info-flex-child",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "_cppay-info-label",
+									children: u === "subscription" ? g.authorizationAmount : g.paymentAmount
 								}), /* @__PURE__ */ jsxs("div", {
-									className: "_cppay-price-amount",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "_cppay-price-main",
-										children: [
-											k,
-											" ",
-											S
-										]
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "_cppay-price-sub",
-										children: ["≈ $", u]
-									})]
+									className: "_cppay-info-value _cppay-info-value-flex",
+									children: [H.current && /* @__PURE__ */ jsx("span", { children: u === "subscription" ? `${J(H.current.approveAmount, q(K.symbol))} ${K.symbol}` : `${J(H.current.paymentAmount, q(K.symbol))} ${K.symbol}` }), /* @__PURE__ */ jsxs("span", { children: ["≈ $", d] })]
 								})]
 							})
 						})
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("button", {
-							onClick: j,
-							disabled: !b || !S || g,
-							className: "_cppay-btn _cppay-btn-primary",
-							children: g ? "处理中..." : "继续支付"
-						})
-					})
-				] }) : w && /* @__PURE__ */ jsxs("div", { children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-qr-container",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "_cppay-qr-placeholder",
-							children: /* @__PURE__ */ jsx("span", { children: "扫码支付" })
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "_cppay-section",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "_cppay-info-box",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "_cppay-info-label",
-								children: "支付金额"
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "_cppay-info-value",
-								children: [
-									w.paymentAmount,
-									" ",
-									S
-								]
-							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "_cppay-info-box",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "_cppay-info-label",
-								children: "支付地址"
+						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: u === "subscription" ? g.authorizationContractAddress : g.paymentAddress }), Me && /* @__PURE__ */ jsxs("span", {
+									className: "_cppay-countdown",
+									children: ["⏰ ", Me]
+								})]
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "_cppay-address-row",
-								children: [/* @__PURE__ */ jsx("code", { children: w.receiveAddress }), /* @__PURE__ */ jsx("button", {
-									onClick: N,
-									className: "_cppay-copy-btn",
-									title: "复制地址",
-									children: /* @__PURE__ */ jsx("svg", {
+								children: [H.current && /* @__PURE__ */ jsx("code", { children: u === "subscription" ? H.current.spenderAddress : H.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
+									onClick: We,
+									className: `_cppay-copy-btn ${P ? "_cppay-copy-success" : ""}`,
+									title: P ? g.copied : g.copyAddress,
+									children: P ? /* @__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",
-										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"
-										})
+										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"
+										})]
 									})
 								})]
 							})]
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("button", {
-							onClick: M,
-							disabled: g,
-							className: "_cppay-btn _cppay-btn-primary",
-							children: g ? "检查支付状态..." : "我已完成支付"
 						})
 					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "_cppay-section",
-						children: /* @__PURE__ */ jsx("button", {
-							onClick: () => h("select"),
-							disabled: g,
-							className: "_cppay-btn _cppay-btn-secondary",
-							children: "更改支付方式"
+					u === "subscription" && /* @__PURE__ */ jsxs("div", {
+						className: "_cppay-info-box _cppay-subscription-box",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-label _cppay-subscription-label",
+							children: g.subscriptionNotice
+						}), /* @__PURE__ */ jsx("div", {
+							className: "_cppay-info-value _cppay-subscription-message",
+							children: g.subscriptionNoticeMessage
+						})]
+					})
+				]
+			}),
+			S && /* @__PURE__ */ jsxs("div", {
+				className: "_cppay-error-tooltip-wrapper",
+				onMouseEnter: () => I(!0),
+				onMouseLeave: () => I(!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 })]
+				}), Pe && /* @__PURE__ */ jsx("div", {
+					className: "_cppay-error-tooltip-full",
+					children: S
+				})]
+			}),
+			!y && /* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: A ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					onClick: Ve,
+					disabled: b,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: b ? u === "subscription" ? g.authorizing : g.processing : u === "subscription" ? `💳 ${g.connectWallet}` : `💳 ${g.walletPay}`
+				}), /* @__PURE__ */ jsxs("button", {
+					onClick: Fe,
+					disabled: b,
+					className: "_cppay-btn _cppay-wallet-address-btn",
+					title: g.clickToModifyWallet,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "_cppay-wallet-address-text",
+						children: [
+							A.slice(0, 10),
+							"...",
+							A.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: Fe,
+					disabled: Ae,
+					className: "_cppay-btn _cppay-btn-secondary _cppay-connect-wallet-btn",
+					children: /* @__PURE__ */ jsx("span", { children: Ae ? g.processing : `💳 ${g.connectWallet}` })
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: Ue,
+					disabled: y,
+					className: "_cppay-btn _cppay-btn-primary",
+					children: y ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("svg", {
+						className: "_cppay-spinner",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "12",
+							cy: "12",
+							r: "10",
+							stroke: "currentColor",
+							strokeWidth: "3",
+							strokeOpacity: "0.25"
+						}), /* @__PURE__ */ jsx("path", {
+							d: "M12 2a10 10 0 0 1 10 10",
+							stroke: "currentColor",
+							strokeWidth: "3",
+							strokeLinecap: "round"
+						})]
+					}), g.checking] }) : g.completedPayment
+				})
+			}),
+			/* @__PURE__ */ jsx("hr", { className: "_cppay-divider" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "_cppay-section",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						v("select"), $();
+					},
+					disabled: b || y,
+					className: "_cppay-btn _cppay-btn-text",
+					children: g.changePaymentMethod
+				})
+			})
+		] })
+	});
+}, PaymentDialog_default = ({ open: e, onClose: t, ott: n, apikey: i, plain: ue, orderId: de, amount: fe, intervalDays: pe, remark: me, locale: a, onExpired: he, onSuccess: ge, onFailed: _e, onError: ve, Slots: ye }) => {
+	let [o, be] = useState("select"), s = useMemo(() => o !== "checking", [o]);
+	useEffect(() => {
+		e || be("select");
+	}, [e]), useEffect(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.key === "Escape" && s && c();
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [e, s]);
+	let c = () => {
+		s && t();
+	}, l = useMemo(() => getLocaleMessages(a), [a]);
+	return e ? /* @__PURE__ */ jsx("div", {
+		className: "_cppay-overlay",
+		onClick: (e) => e.target === e.currentTarget && c(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-dialog",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-header",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "_cppay-title",
+					children: (() => {
+						switch (o) {
+							case "success": return l.paymentResult;
+							case "expired": return l.paymentExpired;
+							case "failed": return l.paymentFailed;
+							case "error": return l.error;
+							case "payment":
+							case "checking": return l.completePayment;
+							default: return l.selectPaymentMethod;
+						}
+					})()
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: c,
+					disabled: !s,
+					className: "_cppay-close-btn",
+					children: /* @__PURE__ */ jsx("svg", {
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M6 18L18 6M6 6l12 12"
 						})
 					})
-				] })
+				})]
+			}), /* @__PURE__ */ jsx(PaymentContent_default, {
+				apikey: i,
+				ott: n,
+				plain: ue,
+				orderId: de,
+				amount: fe,
+				intervalDays: pe,
+				remark: me,
+				locale: a,
+				onSuccess: ge,
+				onExpired: he,
+				onFailed: _e,
+				onError: ve,
+				Slots: ye,
+				onPaymentStepChange: be
 			})]
 		})
 	}) : null;
-});
+}, CppayContext = createContext(null);
+const CppayProvider = ({ children: e }) => {
+	let [t, n] = useState(!1), [r, i] = useState(null), ue = useCallback((e) => {
+		i(e), n(!0);
+	}, []), de = useCallback(() => {
+		n(!1);
+	}, []), fe = useCallback(() => {
+		n(!1);
+	}, []), pe = useCallback((e) => {
+		r?.onSuccess?.(e);
+	}, [r]), me = useCallback((e) => {
+		r?.onExpired?.(e);
+	}, [r]), a = useCallback((e) => {
+		r?.onFailed?.(e);
+	}, [r]), he = useCallback((e) => {
+		r?.onError?.(e);
+	}, [r]);
+	return /* @__PURE__ */ jsxs(CppayContext.Provider, {
+		value: {
+			showPayment: ue,
+			closePayment: de
+		},
+		children: [e, r && /* @__PURE__ */ jsx(PaymentDialog_default, {
+			open: t,
+			onClose: fe,
+			...r,
+			onSuccess: pe,
+			onExpired: me,
+			onFailed: a,
+			onError: he
+		})]
+	});
+}, useCppayPayment = () => {
+	let e = useContext(CppayContext);
+	if (!e) throw Error("useCppayPayment must be used within CppayProvider");
+	return e;
+};
 injectStyle(payment_dialog_default);
-export { PaymentDialog_default as PaymentDialog };
+export { CppayProvider, PaymentContent_default as PaymentContent, PaymentDialog_default as PaymentDialog, useCppayPayment };