cppay-sdk 0.0.2-beta.20 → 0.0.2-beta.21

package/dist/vue.js

@@ -1,27 +1,49 @@
-import { i as __toESM, n as injectStyle, r as payment_dialog_default, t as require_browser } from "./browser-Dm8HHcNy.js";
-import { t as cppay_default } from "./cppay-LnYTnh4d.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderList, toDisplayString, watch, withCtx, withModifiers } from "vue";
+import { a as payment_dialog_default, i as injectStyle, n as metamask_default, o as __toESM, r as require_browser, t as walletconnect_default } from "./walletconnect-B0L70Mgc.js";
+import { t as cppay_default } from "./cppay-BcCDwXlg.js";
+import { Fragment, Teleport, Transition, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 import { EMPTY, defer, timer } from "rxjs";
 import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
-var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-header" }, _hoisted_3 = { class: "_cppay-title" }, _hoisted_4 = ["disabled"], _hoisted_5 = { class: "_cppay-content" }, _hoisted_6 = { key: 0 }, _hoisted_7 = { class: "_cppay-section" }, _hoisted_8 = { class: "_cppay-grid" }, _hoisted_9 = ["onClick"], _hoisted_10 = ["src", "alt"], _hoisted_11 = { class: "_cppay-section" }, _hoisted_12 = { class: "_cppay-grid" }, _hoisted_13 = ["onClick"], _hoisted_14 = ["src", "alt"], _hoisted_15 = { class: "_cppay-section" }, _hoisted_16 = { class: "_cppay-price-box" }, _hoisted_17 = { class: "_cppay-price-row" }, _hoisted_18 = { class: "_cppay-price-amount" }, _hoisted_19 = { class: "_cppay-price-main" }, _hoisted_20 = { class: "_cppay-price-sub" }, _hoisted_21 = { class: "_cppay-section" }, _hoisted_22 = ["disabled"], _hoisted_23 = { key: 1 }, _hoisted_24 = { class: "_cppay-qr-container" }, _hoisted_25 = {
-	class: "_cppay-qr-code",
+import { createWalletClient, custom, parseUnits } from "viem";
+import { arbitrum, base, bsc, mainnet, optimism, polygon } from "viem/chains";
+import EthereumProvider from "@walletconnect/ethereum-provider";
+var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 = { class: "_cppay-dialog" }, _hoisted_2 = { class: "_cppay-header" }, _hoisted_3 = { class: "_cppay-title" }, _hoisted_4 = ["disabled"], _hoisted_5 = { class: "_cppay-content" }, _hoisted_6 = {
+	key: 0,
 	style: {
-		background: "white",
-		padding: "16px",
-		"border-radius": "16px",
-		display: "inline-block"
+		"text-align": "center",
+		padding: "2rem 0"
 	}
-}, _hoisted_26 = ["src"], _hoisted_27 = { class: "_cppay-section" }, _hoisted_28 = { class: "_cppay-info-box" }, _hoisted_29 = { class: "_cppay-info-label" }, _hoisted_30 = { class: "_cppay-info-value" }, _hoisted_31 = { class: "_cppay-info-box" }, _hoisted_32 = { class: "_cppay-info-label" }, _hoisted_33 = { class: "_cppay-address-row" }, _hoisted_34 = {
+}, _hoisted_7 = { style: {
+	"font-size": "1.5rem",
+	"font-weight": "600",
+	color: "#10b981",
+	margin: "0 0 0.5rem 0"
+} }, _hoisted_8 = { style: {
+	color: "#6b7280",
+	margin: "0"
+} }, _hoisted_9 = { key: 1 }, _hoisted_10 = { class: "_cppay-section" }, _hoisted_11 = { class: "_cppay-grid" }, _hoisted_12 = ["onClick"], _hoisted_13 = ["src", "alt"], _hoisted_14 = { class: "_cppay-section" }, _hoisted_15 = { class: "_cppay-grid" }, _hoisted_16 = ["onClick"], _hoisted_17 = ["src", "alt"], _hoisted_18 = { class: "_cppay-section" }, _hoisted_19 = { class: "_cppay-price-box" }, _hoisted_20 = { class: "_cppay-price-row" }, _hoisted_21 = { class: "_cppay-price-amount" }, _hoisted_22 = { class: "_cppay-price-main" }, _hoisted_23 = { class: "_cppay-price-sub" }, _hoisted_24 = { class: "_cppay-section" }, _hoisted_25 = ["disabled"], _hoisted_26 = { key: 2 }, _hoisted_27 = { class: "_cppay-qr-container" }, _hoisted_28 = { class: "_cppay-qr-code" }, _hoisted_29 = ["src"], _hoisted_30 = { class: "_cppay-section" }, _hoisted_31 = { class: "_cppay-info-box" }, _hoisted_32 = { class: "_cppay-info-label" }, _hoisted_33 = { class: "_cppay-info-value" }, _hoisted_34 = { class: "_cppay-info-box" }, _hoisted_35 = { class: "_cppay-info-label" }, _hoisted_36 = { class: "_cppay-address-row" }, _hoisted_37 = {
 	key: 0,
 	class: "_cppay-info-box",
 	style: {
 		background: "#fff3cd",
 		"border-color": "#ffc107"
 	}
-}, _hoisted_35 = { class: "_cppay-section" }, _hoisted_36 = ["disabled"], _hoisted_37 = { class: "_cppay-section" }, _hoisted_38 = ["disabled"], PaymentDialog_default = /* @__PURE__ */ ((r, M) => {
-	let N = r.__vccOpts || r;
-	for (let [r, P] of M) N[r] = P;
-	return N;
+}, _hoisted_38 = { class: "_cppay-section" }, _hoisted_39 = {
+	key: 0,
+	style: {
+		display: "flex",
+		"flex-direction": "row",
+		gap: "0.5rem",
+		"justify-content": "center"
+	}
+}, _hoisted_40 = ["disabled"], _hoisted_41 = ["src"], _hoisted_42 = ["disabled"], _hoisted_43 = ["src"], _hoisted_44 = { key: 1 }, _hoisted_45 = ["disabled"], _hoisted_46 = { style: {
+	"text-align": "center",
+	"margin-top": "8px",
+	"font-size": "12px",
+	color: "#666"
+} }, _hoisted_47 = { class: "_cppay-section" }, _hoisted_48 = ["disabled"], _hoisted_49 = { class: "_cppay-section" }, _hoisted_50 = ["disabled"], PaymentDialog_default = /* @__PURE__ */ ((e, v) => {
+	let y = e.__vccOpts || e;
+	for (let [e, b] of v) y[e] = b;
+	return y;
 })(/* @__PURE__ */ defineComponent({
 	__name: "PaymentDialog",
 	props: {
@@ -37,91 +59,260 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 =
 		"success",
 		"error"
 	],
-	setup(r, { emit: M }) {
-		let N = r, P = M, F = new cppay_default(N.apikey), I = ref("select"), L = ref(!1), R = ref([]), z = ref(""), B = ref(""), V = ref(null), H = ref(""), U = ref(null), W = computed(() => R.value.find((r) => r.chain === z.value)), G = computed(() => W.value?.tokens || []);
-		computed(() => G.value.find((r) => r.symbol === B.value));
-		let K = ref(1), q = computed(() => B.value ? (parseFloat(N.amount) / K.value).toFixed(6) : "0"), J = () => {
-			P("update:modelValue", !1), setTimeout(() => {
-				I.value = "select", V.value = null;
-			}, 300);
-		}, Y = async () => {
+	setup(e, { emit: v }) {
+		let b = e, x = v, S = new cppay_default(b.apikey), C = ref("select"), w = ref(!1), T = ref([]), E = ref(""), D = ref(""), O = ref(null), k = ref(""), A = ref(""), j = ref(!1), M = ref(!0), N = ref(null), P = ref(null), F = ref(null), I = computed(() => T.value.find((e) => e.chain === E.value)), L = computed(() => I.value?.tokens || []), R = computed(() => L.value.find((e) => e.symbol === D.value)), z = (e) => [
+			"USDT",
+			"USDC",
+			"BUSD",
+			"DAI",
+			"TUSD",
+			"USDD",
+			"FDUSD"
+		].includes(e.toUpperCase()) ? 2 : 6, B = (e, v) => {
+			let y = parseFloat(e);
+			return isNaN(y) ? "0" : y.toFixed(v).replace(/\.?0+$/, "");
+		}, V = computed(() => {
+			if (!D.value || !R.value) return "0";
+			let e = parseFloat(R.value.price);
+			if (isNaN(e) || e === 0) return "0";
+			let v = z(D.value);
+			return B((parseFloat(b.amount) / e).toFixed(v), v);
+		}), H = () => {
+			O.value && (w.value = !0, b.plain === "one-time" ? Q(O.value.paymentId) : b.plain === "subscription" && Q(O.value.subscriptionId));
+		}, U = () => {
+			w.value || (x("update:modelValue", !1), setTimeout(() => {
+				C.value = "select", O.value = null;
+			}, 300));
+		}, W = async () => {
+			try {
+				w.value = !0, T.value = await S.getSupportedChains(), T.value.length > 0 && (E.value = T.value[0].chain);
+			} catch (e) {
+				x("error", e);
+			} finally {
+				w.value = !1;
+			}
+		}, G = (e) => ({
+			ETH: mainnet,
+			BSC: bsc,
+			Polygon: polygon,
+			Arbitrum: arbitrum,
+			Optimism: optimism,
+			Base: base
+		})[e] || mainnet, K = async (e) => {
 			try {
-				L.value = !0, R.value = await F.getSupportedChains(), R.value.length > 0 && (z.value = R.value[0].chain);
-			} catch (r) {
-				P("error", r);
+				if (j.value = !0, e === "metamask") {
+					if (typeof window < "u" && window.ethereum?.isMetaMask) {
+						let e = await window.ethereum.request({ method: "eth_requestAccounts" });
+						if (e && e.length > 0) {
+							A.value = e[0], N.value = "metamask", M.value = !1;
+							return;
+						}
+					}
+					throw Error("请安装 MetaMask 扩展");
+				}
+				if (e === "walletconnect") {
+					let e = await EthereumProvider.init({
+						projectId: "8d2e1854d3f1782e45aa15fbd8938894",
+						chains: [1],
+						showQrModal: !0,
+						optionalChains: [
+							56,
+							137,
+							42161,
+							10,
+							8453
+						],
+						methods: [
+							"eth_sendTransaction",
+							"eth_signTransaction",
+							"eth_sign",
+							"personal_sign",
+							"eth_signTypedData"
+						],
+						events: ["chainChanged", "accountsChanged"],
+						metadata: {
+							name: "Cppay",
+							description: "Cppay Payment Gateway",
+							url: typeof window < "u" ? window.location.origin : "https://cppay.com",
+							icons: ["https://cppay.com/icon.png"]
+						},
+						rpcMap: {
+							1: "https://ethereum.publicnode.com",
+							56: "https://bsc-dataseed.binance.org",
+							137: "https://polygon-rpc.com",
+							42161: "https://arb1.arbitrum.io/rpc",
+							10: "https://mainnet.optimism.io",
+							8453: "https://mainnet.base.org"
+						}
+					});
+					await e.enable();
+					let v = await e.request({ method: "eth_accounts" });
+					v && v.length > 0 && (A.value = v[0], N.value = "walletconnect", P.value = e, M.value = !1);
+				}
+			} catch (e) {
+				console.error("钱包连接失败:", e), x("error", e);
+			} finally {
+				j.value = !1;
+			}
+		}, q = async (e) => {
+			let v;
+			if (v = N.value === "walletconnect" ? P.value : window.ethereum, v) try {
+				await v.request({
+					method: "wallet_switchEthereumChain",
+					params: [{ chainId: `0x${e.toString(16)}` }]
+				});
+			} catch (e) {
+				throw e.code === 4902 ? Error("请在钱包中添加该网络") : e;
+			}
+		}, J = async () => {
+			if (!(!A.value || !O.value || !R.value)) try {
+				w.value = !0;
+				let e = O.value, v = G(E.value);
+				await q(I.value.chainId);
+				let y = createWalletClient({
+					account: A.value,
+					chain: v,
+					transport: custom(N.value === "walletconnect" ? P.value : window.ethereum)
+				});
+				if (R.value.address) {
+					let v = await y.writeContract({
+						address: R.value.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, R.value.decimals)],
+						chain: null
+					});
+					console.log("转账交易哈希:", v);
+				} else {
+					let v = await y.sendTransaction({
+						to: e.receiveAddress,
+						value: parseUnits(e.paymentAmount, R.value.decimals),
+						chain: null
+					});
+					console.log("转账交易哈希:", v);
+				}
+				Q(e.paymentId);
+			} catch (e) {
+				console.error("钱包支付失败:", e), x("error", e);
 			} finally {
-				L.value = !1;
+				w.value = !1;
+			}
+		}, Y = async () => {
+			if (!(!A.value || !O.value || !R.value)) try {
+				w.value = !0;
+				let e = O.value, v = G(E.value);
+				await q(I.value.chainId);
+				let y = createWalletClient({
+					account: A.value,
+					chain: v,
+					transport: custom(N.value === "walletconnect" ? P.value : window.ethereum)
+				});
+				if (!R.value.address) throw Error("订阅支付不支持原生代币");
+				let b = await y.writeContract({
+					address: R.value.address,
+					abi: [{
+						name: "approve",
+						type: "function",
+						stateMutability: "nonpayable",
+						inputs: [{
+							name: "spender",
+							type: "address"
+						}, {
+							name: "amount",
+							type: "uint256"
+						}],
+						outputs: [{ type: "bool" }]
+					}],
+					functionName: "approve",
+					args: [e.receiveAddress, parseUnits(e.paymentAmount, R.value.decimals)],
+					chain: null
+				});
+				console.log("授权交易哈希:", b), Q(e.paymentId);
+			} catch (e) {
+				console.error("钱包授权失败:", e), x("error", e);
+			} finally {
+				w.value = !1;
 			}
 		}, X = async () => {
-			if (!(!z.value || !B.value)) try {
-				L.value = !0;
-				let r;
-				N.plain === "one-time" ? r = await F.createPayment("one-time", {
-					paymentChain: z.value,
-					paymentToken: B.value,
-					orderId: N.orderId,
-					amount: q.value
-				}) : N.plain === "subscription" && (r = await F.createPayment("subscription", {
-					paymentChain: z.value,
-					paymentToken: B.value,
-					orderId: N.orderId,
-					amountOfUsd: q.value,
-					intervalDays: N.intervalDays || 30
-				})), V.value = {
-					paymentId: r.paymentId || r.subscriptionId,
-					paymentAmount: r.paymentAmount || r.approveAmount,
-					receiveAddress: r.receiveAddress || r.spenderAddress || ""
+			if (!A.value) {
+				M.value = !0;
+				return;
+			}
+			b.plain === "one-time" ? await J() : b.plain === "subscription" && await Y();
+		}, Z = async () => {
+			if (!(!E.value || !D.value)) try {
+				w.value = !0;
+				let e;
+				b.plain === "one-time" ? e = await S.createPayment("one-time", {
+					paymentChain: E.value,
+					paymentToken: D.value,
+					orderId: b.orderId,
+					amount: V.value
+				}) : b.plain === "subscription" && (e = await S.createPayment("subscription", {
+					paymentChain: E.value,
+					paymentToken: D.value,
+					orderId: b.orderId,
+					amountOfUsd: V.value,
+					intervalDays: b.intervalDays || 30
+				})), O.value = {
+					paymentId: e.paymentId || e.subscriptionId,
+					paymentAmount: e.paymentAmount || e.approveAmount,
+					receiveAddress: e.receiveAddress || e.spenderAddress || ""
 				};
-				let M = `${z.value.toLowerCase()}:${V.value.receiveAddress}?amount=${V.value.paymentAmount}`;
-				H.value = await import_browser.toDataURL(M, {
+				let v = `${E.value.toLowerCase()}:${O.value.receiveAddress}?amount=${O.value.paymentAmount}`;
+				k.value = await import_browser.toDataURL(v, {
 					width: 200,
 					margin: 2,
 					errorCorrectionLevel: "H"
-				}), I.value = "payment";
-			} catch (r) {
-				P("error", r);
+				}), C.value = "payment";
+			} catch (e) {
+				x("error", e);
 			} finally {
-				L.value = !1;
+				w.value = !1;
 			}
-		}, Z = (r) => {
-			let M = () => defer(() => N.plain === "subscription" ? F.checkSubscriptionPaymentStatus({ subscriptionId: r }) : F.checkOnetimePaymentStatus({ paymentId: r })).pipe(timeout(15e3), retry({
+		}, Q = (e) => {
+			let v = () => defer(() => b.plain === "subscription" ? S.checkSubscriptionPaymentStatus({ subscriptionId: e }) : S.checkOnetimePaymentStatus({ paymentId: e })).pipe(timeout(15e3), retry({
 				count: 3,
 				delay: 2e3
 			}));
-			U.value?.unsubscribe(), U.value = M().pipe(expand((r) => r.status === "pending" ? timer(2e3).pipe(switchMap(() => M())) : EMPTY), tap((M) => {
-				M.status === "expired" && alert("支付已过期"), M.status === "paid" && (alert("支付成功!"), P("success", r), J()), M.status === "failed" && alert("支付失败"), M.status === "approved" && (alert("订阅成功!"), P("success", r), J());
-			})).subscribe({ error: (r) => {
-				console.error("支付状态检查错误:", r), P("error", r);
+			F.value?.unsubscribe(), F.value = v().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => v())) : EMPTY), tap((e) => {
+				e.status === "expired" && (w.value = !1), e.status === "paid" && (w.value = !1, C.value = "success", x("success", e)), e.status === "failed" && (w.value = !1), e.status === "approved" && (w.value = !1, C.value = "success", x("success", e));
+			})).subscribe({ error: (e) => {
+				console.error("支付状态检查错误:", e), w.value = !1, x("error", e);
 			} });
-		}, Q = async () => {
-			if (V.value) try {
-				L.value = !0, Z(V.value.paymentId);
-			} catch (r) {
-				P("error", r);
-			} finally {
-				L.value = !1;
-			}
 		}, $ = async () => {
-			V.value?.receiveAddress && (await navigator.clipboard.writeText(V.value.receiveAddress), alert("地址已复制"));
+			O.value?.receiveAddress && await navigator.clipboard.writeText(O.value.receiveAddress);
 		};
-		return watch(() => N.modelValue, (r) => {
-			r && R.value.length === 0 && Y();
-		}), watch(z, () => {
-			G.value.length > 0 && (B.value = G.value[0].symbol);
-		}), watch(I, (r) => {
-			r === "payment" && V.value && Z(V.value.paymentId);
+		return watch(() => b.modelValue, (e) => {
+			e && T.value.length === 0 && W();
+		}), watch(E, () => {
+			L.value.length > 0 && (D.value = L.value[0].symbol);
+		}), watch(C, (e) => {
+			e === "payment" && O.value && Q(O.value.paymentId);
 		}), onUnmounted(() => {
-			U.value?.unsubscribe();
-		}), (M, P) => (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "_cppay-fade" }, {
-			default: withCtx(() => [r.modelValue ? (openBlock(), createElementBlock("div", {
+			F.value?.unsubscribe();
+		}), (v, x) => (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "_cppay-fade" }, {
+			default: withCtx(() => [e.modelValue ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "_cppay-overlay",
-				onClick: withModifiers(J, ["self"])
-			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(I.value === "select" ? "选择支付方式" : "完成支付"), 1), createElementVNode("button", {
-				onClick: J,
+				onClick: x[3] ||= withModifiers((e) => !w.value && U(), ["self"])
+			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(C.value === "select" ? "选择支付方式" : C.value === "success" ? "支付结果" : "完成支付"), 1), createElementVNode("button", {
+				onClick: U,
 				class: "_cppay-close-btn",
-				disabled: L.value
-			}, [...P[1] ||= [createElementVNode("svg", {
+				disabled: w.value
+			}, [...x[4] ||= [createElementVNode("svg", {
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24"
@@ -130,48 +321,56 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 =
 				"stroke-linejoin": "round",
 				"stroke-width": "2",
 				d: "M6 18L18 6M6 6l12 12"
-			})], -1)]], 8, _hoisted_4)]), createElementVNode("div", _hoisted_5, [I.value === "select" ? (openBlock(), createElementBlock("div", _hoisted_6, [
-				createElementVNode("div", _hoisted_7, [P[2] ||= createElementVNode("label", { class: "_cppay-label" }, "支付网络", -1), createElementVNode("div", _hoisted_8, [(openBlock(!0), createElementBlock(Fragment, null, renderList(R.value, (r) => (openBlock(), createElementBlock("button", {
-					key: r.chain,
-					onClick: (M) => z.value = r.chain,
-					class: normalizeClass(["_cppay-select-btn", z.value === r.chain ? "_cppay-selected" : ""])
-				}, [r.icon ? (openBlock(), createElementBlock("img", {
+			})], -1)]], 8, _hoisted_4)]), createElementVNode("div", _hoisted_5, [C.value === "success" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+				x[5] ||= createElementVNode("div", { style: {
+					"font-size": "64px",
+					"margin-bottom": "1rem"
+				} }, "✅", -1),
+				createElementVNode("h3", _hoisted_7, toDisplayString(b.plain === "subscription" ? "授权成功!" : "支付成功!"), 1),
+				createElementVNode("p", _hoisted_8, toDisplayString(b.plain === "subscription" ? "订阅已激活" : "交易已完成"), 1)
+			])) : createCommentVNode("", !0), C.value === "select" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+				createElementVNode("div", _hoisted_10, [x[6] ||= createElementVNode("label", { class: "_cppay-label" }, "支付网络", -1), createElementVNode("div", _hoisted_11, [(openBlock(!0), createElementBlock(Fragment, null, renderList(T.value, (e) => (openBlock(), createElementBlock("button", {
+					key: e.chain,
+					onClick: (v) => E.value = e.chain,
+					class: normalizeClass(["_cppay-select-btn", E.value === e.chain ? "_cppay-selected" : ""])
+				}, [e.icon ? (openBlock(), createElementBlock("img", {
 					key: 0,
-					src: r.icon,
-					alt: r.chain
-				}, null, 8, _hoisted_10)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(r.chain), 1)], 10, _hoisted_9))), 128))])]),
-				createElementVNode("div", _hoisted_11, [P[3] ||= createElementVNode("label", { class: "_cppay-label" }, "支付代币", -1), createElementVNode("div", _hoisted_12, [(openBlock(!0), createElementBlock(Fragment, null, renderList(G.value, (r) => (openBlock(), createElementBlock("button", {
-					key: r.symbol,
-					onClick: (M) => B.value = r.symbol,
-					class: normalizeClass(["_cppay-select-btn", B.value === r.symbol ? "_cppay-selected" : ""])
-				}, [r.icon ? (openBlock(), createElementBlock("img", {
+					src: e.icon,
+					alt: e.chain
+				}, null, 8, _hoisted_13)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.chain), 1)], 10, _hoisted_12))), 128))])]),
+				createElementVNode("div", _hoisted_14, [x[7] ||= createElementVNode("label", { class: "_cppay-label" }, "支付代币", -1), createElementVNode("div", _hoisted_15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(L.value, (e) => (openBlock(), createElementBlock("button", {
+					key: e.symbol,
+					onClick: (v) => D.value = e.symbol,
+					class: normalizeClass(["_cppay-select-btn", D.value === e.symbol ? "_cppay-selected" : ""])
+				}, [e.icon ? (openBlock(), createElementBlock("img", {
 					key: 0,
-					src: r.icon,
-					alt: r.symbol
-				}, null, 8, _hoisted_14)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(r.symbol), 1)], 10, _hoisted_13))), 128))])]),
-				createElementVNode("div", _hoisted_15, [createElementVNode("div", _hoisted_16, [createElementVNode("div", _hoisted_17, [P[4] ||= createElementVNode("span", { class: "_cppay-price-label" }, "支付金额", -1), createElementVNode("div", _hoisted_18, [createElementVNode("div", _hoisted_19, toDisplayString(q.value) + " " + toDisplayString(B.value), 1), createElementVNode("div", _hoisted_20, "≈ $" + toDisplayString(r.amount), 1)])])])]),
-				createElementVNode("div", _hoisted_21, [createElementVNode("button", {
-					onClick: X,
-					disabled: !z.value || !B.value || L.value,
+					src: e.icon,
+					alt: e.symbol
+				}, null, 8, _hoisted_17)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(e.symbol), 1)], 10, _hoisted_16))), 128))])]),
+				createElementVNode("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createElementVNode("div", _hoisted_20, [x[8] ||= createElementVNode("span", { class: "_cppay-price-label" }, "支付金额", -1), createElementVNode("div", _hoisted_21, [createElementVNode("div", _hoisted_22, toDisplayString(V.value) + " " + toDisplayString(D.value), 1), createElementVNode("div", _hoisted_23, "≈ $" + toDisplayString(e.amount), 1)])])])]),
+				createElementVNode("div", _hoisted_24, [createElementVNode("button", {
+					onClick: Z,
+					disabled: !E.value || !D.value || w.value,
 					class: "_cppay-btn _cppay-btn-primary"
-				}, toDisplayString(L.value ? "处理中..." : "继续支付"), 9, _hoisted_22)])
-			])) : I.value === "payment" && V.value ? (openBlock(), createElementBlock("div", _hoisted_23, [
-				createElementVNode("div", _hoisted_24, [createElementVNode("div", _hoisted_25, [H.value ? (openBlock(), createElementBlock("img", {
+				}, toDisplayString(w.value ? "处理中..." : "继续支付"), 9, _hoisted_25)])
+			])) : C.value === "payment" && O.value ? (openBlock(), createElementBlock("div", _hoisted_26, [
+				createElementVNode("div", _hoisted_27, [createElementVNode("div", _hoisted_28, [k.value ? (openBlock(), createElementBlock("img", {
 					key: 0,
-					src: H.value,
+					src: k.value,
 					alt: "QR Code",
 					style: {
-						width: "200px",
-						height: "200px"
+						width: "160px",
+						height: "160px",
+						display: "block"
 					}
-				}, null, 8, _hoisted_26)) : createCommentVNode("", !0)])]),
-				createElementVNode("div", _hoisted_27, [
-					createElementVNode("div", _hoisted_28, [createElementVNode("div", _hoisted_29, toDisplayString(N.plain === "subscription" ? "授权金额" : "支付金额"), 1), createElementVNode("div", _hoisted_30, toDisplayString(V.value.paymentAmount) + " " + toDisplayString(B.value), 1)]),
-					createElementVNode("div", _hoisted_31, [createElementVNode("div", _hoisted_32, toDisplayString(N.plain === "subscription" ? "授权合约地址" : "支付地址"), 1), createElementVNode("div", _hoisted_33, [createElementVNode("code", null, toDisplayString(V.value.receiveAddress), 1), createElementVNode("button", {
+				}, null, 8, _hoisted_29)) : createCommentVNode("", !0)])]),
+				createElementVNode("div", _hoisted_30, [
+					createElementVNode("div", _hoisted_31, [createElementVNode("div", _hoisted_32, toDisplayString(b.plain === "subscription" ? "授权金额" : "支付金额"), 1), createElementVNode("div", _hoisted_33, toDisplayString(O.value.paymentAmount) + " " + toDisplayString(D.value), 1)]),
+					createElementVNode("div", _hoisted_34, [createElementVNode("div", _hoisted_35, toDisplayString(b.plain === "subscription" ? "授权合约地址" : "支付地址"), 1), createElementVNode("div", _hoisted_36, [createElementVNode("code", null, toDisplayString(O.value.receiveAddress), 1), createElementVNode("button", {
 						onClick: $,
 						class: "_cppay-copy-btn",
 						title: "复制地址"
-					}, [...P[5] ||= [createElementVNode("svg", {
+					}, [...x[9] ||= [createElementVNode("svg", {
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24"
@@ -181,7 +380,7 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 =
 						"stroke-width": "2",
 						d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
 					})], -1)]])])]),
-					N.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_34, [...P[6] ||= [createElementVNode("div", {
+					b.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_37, [...x[10] ||= [createElementVNode("div", {
 						class: "_cppay-info-label",
 						style: { color: "#856404" }
 					}, "📌 订阅说明", -1), createElementVNode("div", {
@@ -192,20 +391,102 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), _hoisted_1 =
 						}
 					}, " 订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。 ", -1)]])) : createCommentVNode("", !0)
 				]),
-				createElementVNode("div", _hoisted_35, [createElementVNode("button", {
-					onClick: Q,
-					disabled: L.value,
+				createElementVNode("div", _hoisted_38, [A.value ? (openBlock(), createElementBlock("div", _hoisted_44, [createElementVNode("button", {
+					onClick: X,
+					disabled: w.value,
+					class: "_cppay-btn _cppay-btn-primary"
+				}, toDisplayString(w.value ? e.plain === "subscription" ? "授权中..." : "支付中..." : e.plain === "subscription" ? "💳 钱包授权" : "💳 钱包支付"), 9, _hoisted_45), createElementVNode("div", _hoisted_46, " 已连接: " + toDisplayString(A.value.slice(0, 6)) + "..." + toDisplayString(A.value.slice(-4)), 1)])) : (openBlock(), createElementBlock("div", _hoisted_39, [createElementVNode("button", {
+					onClick: x[0] ||= () => K("metamask"),
+					disabled: j.value,
+					class: "_cppay-btn _cppay-btn-secondary",
+					style: {
+						display: "flex",
+						"align-items": "center",
+						"justify-content": "center",
+						gap: "0.5rem",
+						padding: "0.5rem 1rem",
+						"font-size": "14px",
+						flex: "1"
+					}
+				}, [createElementVNode("img", {
+					src: unref(metamask_default),
+					alt: "MetaMask",
+					style: {
+						width: "20px",
+						height: "20px"
+					}
+				}, null, 8, _hoisted_41), x[11] ||= createElementVNode("span", null, "MetaMask", -1)], 8, _hoisted_40), createElementVNode("button", {
+					onClick: x[1] ||= () => K("walletconnect"),
+					disabled: j.value,
+					class: "_cppay-btn _cppay-btn-secondary",
+					style: {
+						display: "flex",
+						"align-items": "center",
+						"justify-content": "center",
+						gap: "0.5rem",
+						padding: "0.5rem 1rem",
+						"font-size": "14px",
+						flex: "1"
+					}
+				}, [createElementVNode("img", {
+					src: unref(walletconnect_default),
+					alt: "WalletConnect",
+					style: {
+						width: "20px",
+						height: "20px"
+					}
+				}, null, 8, _hoisted_43), x[12] ||= createElementVNode("span", null, "WalletConnect", -1)], 8, _hoisted_42)]))]),
+				createElementVNode("div", _hoisted_47, [createElementVNode("button", {
+					onClick: H,
+					disabled: w.value,
 					class: "_cppay-btn _cppay-btn-primary"
-				}, toDisplayString(L.value ? "检查支付状态..." : "我已完成支付"), 9, _hoisted_36)]),
-				createElementVNode("div", _hoisted_37, [createElementVNode("button", {
-					onClick: P[0] ||= (r) => I.value = "select",
-					disabled: L.value,
-					class: "_cppay-btn _cppay-btn-secondary"
-				}, " 更改支付方式 ", 8, _hoisted_38)])
+				}, toDisplayString(w.value ? "检查中..." : "我已完成支付"), 9, _hoisted_48)]),
+				createElementVNode("div", _hoisted_49, [createElementVNode("button", {
+					onClick: x[2] ||= (e) => C.value = "select",
+					disabled: w.value,
+					class: "_cppay-btn _cppay-btn-text"
+				}, " 更改支付方式 ", 8, _hoisted_50)])
 			])) : createCommentVNode("", !0)])])])) : createCommentVNode("", !0)]),
 			_: 1
 		})]));
 	}
-}), [["__scopeId", "data-v-681ced40"]]);
+}), [["__scopeId", "data-v-1a5fedf2"]]), cppayState = ref({
+	apikey: "",
+	open: !1,
+	options: null
+});
+const showPayment = (e) => {
+	cppayState.value.options = e, cppayState.value.open = !0;
+};
+var handleClose = () => {
+	cppayState.value.open = !1;
+}, handleSuccess = (e) => {
+	cppayState.value.options?.onSuccess?.(e), cppayState.value.open = !1;
+}, handleError = (e) => {
+	cppayState.value.options?.onError?.(e);
+};
+const CppayPlugin = { install(e, v) {
+	if (!v?.apikey) throw Error("Cppay plugin requires an apikey");
+	cppayState.value.apikey = v.apikey, e.config.globalProperties.$showPayment = showPayment;
+	let y = document.createElement("div");
+	document.body.appendChild(y), createApp({ setup() {
+		return () => cppayState.value.options ? h(PaymentDialog_default, {
+			modelValue: cppayState.value.open,
+			"onUpdate:modelValue": (e) => {
+				cppayState.value.open = e, e || handleClose();
+			},
+			apikey: cppayState.value.apikey,
+			plain: cppayState.value.options.plain,
+			orderId: cppayState.value.options.orderId,
+			amount: cppayState.value.options.amount,
+			intervalDays: cppayState.value.options.intervalDays,
+			onSuccess: handleSuccess,
+			onError: handleError
+		}) : null;
+	} }).mount(y);
+} }, useCppayPayment = () => {
+	if (!cppayState.value.apikey) throw Error("useCppayPayment must be used after installing CppayPlugin");
+	return { showPayment };
+};
 injectStyle(payment_dialog_default);
-export { PaymentDialog_default as PaymentDialog };
+export { CppayPlugin, PaymentDialog_default as PaymentDialog, showPayment, useCppayPayment };