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

package/dist/react.js

@@ -0,0 +1,327 @@
+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 { EMPTY, defer, timer } from "rxjs";
+import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialog_default = React.memo(({ open: t, onClose: d, apikey: f, plain: p, orderId: b, amount: x, intervalDays: S, onExpired: C, onSuccess: w, onFailed: T, onError: E }) => {
+	let D = useMemo(() => new cppay_default(f), [f]), [O, k] = useState("select"), [A, j] = useState(!1), [M, N] = useState([]), [P, F] = useState(""), [I, L] = useState(""), [R, z] = useState(""), B = useRef(null), V = useMemo(() => M.find((t) => t.chain === P), [M, P]), H = useMemo(() => V?.tokens || [], [V]);
+	useMemo(() => H.find((t) => t.symbol === I), [H, I]);
+	let U = (t) => [
+		"USDT",
+		"USDC",
+		"BUSD",
+		"DAI",
+		"TUSD",
+		"USDD",
+		"FDUSD"
+	].includes(t.toUpperCase()) ? 2 : 6, W = (t, d) => {
+		let f = parseFloat(t);
+		return isNaN(f) ? "0" : f.toFixed(d).replace(/\.?0+$/, "");
+	}, G = useMemo(() => {
+		if (!I) return "0";
+		let t = U(I);
+		return W((parseFloat(x) / 1).toFixed(t), t);
+	}, [
+		x,
+		I,
+		1
+	]), K = async () => {
+		try {
+			j(!0);
+			let t = await D.getSupportedChains();
+			N(t), t.length > 0 && F(t[0].chain);
+		} catch (t) {
+			E?.(t);
+		} finally {
+			j(!1);
+		}
+	}, q = useRef(null), J = async () => {
+		if (!(!P || !I)) try {
+			j(!0);
+			let t = "";
+			p === "one-time" ? (q.current = await D.createOnetimePayment({
+				paymentChain: P,
+				paymentToken: I,
+				orderId: b,
+				amount: G
+			}), t = `${P.toLowerCase()}:${q.current.receiveAddress}?amount=${q.current.paymentAmount}`) : p === "subscription" && (q.current = await D.createSubscriptionPayment({
+				paymentChain: P,
+				paymentToken: I,
+				orderId: b,
+				amountOfUsd: G,
+				intervalDays: S || 30
+			}), t = `${P.toLowerCase()}:${q.current.spenderAddress}?amount=${q.current.approveAmount}`), k("payment"), z(await import_browser.toDataURL(t, {
+				width: 200,
+				margin: 2,
+				errorCorrectionLevel: "H"
+			}));
+		} catch (t) {
+			E?.(t);
+		} finally {
+			j(!1);
+		}
+	}, Y = async () => {
+		if (q.current) try {
+			j(!0), p === "one-time" && X(q.current.subscriptionId), p === "subscription" && X(q.current.paymentId);
+		} catch (t) {
+			console.error("支付状态检查错误:", t), E?.(t);
+		} finally {
+			j(!1);
+		}
+	}, X = (t) => {
+		let d = () => defer(() => p === "subscription" ? D.checkSubscriptionPaymentStatus({ subscriptionId: t }) : D.checkOnetimePaymentStatus({ paymentId: t })).pipe(timeout(15e3), retry({
+			count: 3,
+			delay: 2e3
+		}));
+		B.current?.unsubscribe(), B.current = d().pipe(expand((t) => t.status === "pending" ? timer(2e3).pipe(switchMap(() => d())) : EMPTY), tap((t) => {
+			t.status === "expired" && C?.(t), t.status === "paid" && (w?.(t), Q()), t.status === "failed" && T?.(t), t.status === "approved" && (w?.(t), Q());
+		})).subscribe({ error: (t) => {
+			console.error("支付状态检查错误:", t), E?.(t);
+		} });
+	}, Z = async () => {
+		if (!q.current) return;
+		let t = p === "subscription" ? q.current.spenderAddress : q.current.receiveAddress;
+		t && await navigator.clipboard.writeText(t);
+	}, Q = () => {
+		d(), setTimeout(() => {
+			k("select"), q.current = null;
+		}, 300);
+	};
+	return useEffect(() => {
+		t && M.length === 0 && K();
+	}, [t]), useEffect(() => {
+		H.length > 0 && L(H[0].symbol);
+	}, [H]), useEffect(() => () => {
+		B.current?.unsubscribe();
+	}, []), t ? /* @__PURE__ */ jsx("div", {
+		className: "_cppay-overlay",
+		onClick: (t) => t.target === t.currentTarget && Q(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "_cppay-dialog",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "_cppay-header",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "_cppay-title",
+					children: O === "select" ? "选择支付方式" : "完成支付"
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: Q,
+					disabled: A,
+					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("div", {
+				className: "_cppay-content",
+				children: O === "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: M.map((t) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => F(t.chain),
+								className: `_cppay-select-btn ${P === 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: H.map((t) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => L(t.symbol),
+								className: `_cppay-select-btn ${I === 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__ */ 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: [
+											G,
+											" ",
+											I
+										]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "_cppay-price-sub",
+										children: ["≈ $", x]
+									})]
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-section",
+						children: /* @__PURE__ */ jsx("button", {
+							onClick: J,
+							disabled: !P || !I || A,
+							className: "_cppay-btn _cppay-btn-primary",
+							children: A ? "处理中..." : "继续支付"
+						})
+					})
+				] }) : /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-qr-container",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "_cppay-qr-code",
+							style: {
+								background: "white",
+								padding: "16px",
+								borderRadius: "16px"
+							},
+							children: R && /* @__PURE__ */ jsx("img", {
+								src: R,
+								alt: "Payment QR Code",
+								style: {
+									width: "200px",
+									height: "200px"
+								}
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "_cppay-section",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-info-box",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "_cppay-info-label",
+									children: p === "subscription" ? "授权金额" : "支付金额"
+								}), /* @__PURE__ */ jsx("div", {
+									className: "_cppay-info-value",
+									children: p === "subscription" ? `${W(q.current.approveAmount, U(I))} ${I}` : `${W(q.current.paymentAmount, U(I))} ${I}`
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "_cppay-info-box",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "_cppay-info-label",
+									children: p === "subscription" ? "授权合约地址" : "支付地址"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "_cppay-address-row",
+									children: [/* @__PURE__ */ jsx("code", { children: p === "subscription" ? q.current.spenderAddress : q.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
+										onClick: Z,
+										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"
+											})
+										})
+									})]
+								})]
+							}),
+							p === "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: "订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。"
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-section",
+						children: /* @__PURE__ */ jsx("button", {
+							onClick: Y,
+							disabled: A,
+							className: "_cppay-btn _cppay-btn-primary",
+							children: A ? "检查中..." : "我已完成支付"
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-section",
+						children: /* @__PURE__ */ jsx("button", {
+							onClick: () => k("select"),
+							disabled: A,
+							className: "_cppay-btn _cppay-btn-secondary",
+							children: "更改支付方式"
+						})
+					})
+				] })
+			})]
+		})
+	}) : null;
+}), CppayContext = createContext(null);
+const CppayProvider = ({ apikey: t, children: d }) => {
+	let [f, p] = useState(!1), [m, h] = useState(null), g = useCallback((t) => {
+		h(t), p(!0);
+	}, []), _ = useCallback(() => {
+		p(!1);
+	}, []), v = useCallback((t) => {
+		m?.onSuccess?.(t), p(!1);
+	}, [m]), y = useCallback((t) => {
+		m?.onError?.(t);
+	}, [m]);
+	return /* @__PURE__ */ jsxs(CppayContext.Provider, {
+		value: { showPayment: g },
+		children: [d, m && /* @__PURE__ */ jsx(PaymentDialog_default, {
+			open: f,
+			onClose: _,
+			apikey: t,
+			plain: m.plain,
+			orderId: m.orderId,
+			amount: m.amount,
+			intervalDays: m.intervalDays,
+			onSuccess: v,
+			onError: y
+		})]
+	});
+}, useCppayPayment = () => {
+	let t = useContext(CppayContext);
+	if (!t) throw Error("useCppayPayment must be used within CppayProvider");
+	return t;
+};
+injectStyle(payment_dialog_default);
+export { CppayProvider, PaymentDialog_default as PaymentDialog, useCppayPayment };

package/dist/vue.cjs

@@ -0,0 +1 @@
+const e=require(`./browser-B4fiRjvC.cjs`),t=require(`./cppay-ClXaSwp8.cjs`);let n=require(`vue`),r=require(`rxjs`),i=require(`rxjs/operators`);var a=e.i(e.t(),1),o={class:`_cppay-dialog`},s={class:`_cppay-header`},c={class:`_cppay-title`},l=[`disabled`],u={class:`_cppay-content`},d={key:0},f={class:`_cppay-section`},p={class:`_cppay-grid`},m=[`onClick`],ee=[`src`,`alt`],te={class:`_cppay-section`},ne={class:`_cppay-grid`},re=[`onClick`],ie=[`src`,`alt`],h={class:`_cppay-section`},g={class:`_cppay-price-box`},_={class:`_cppay-price-row`},v={class:`_cppay-price-amount`},y={class:`_cppay-price-main`},b={class:`_cppay-price-sub`},x={class:`_cppay-section`},S=[`disabled`],C={key:1},w={class:`_cppay-qr-container`},T={class:`_cppay-qr-code`,style:{background:`white`,padding:`16px`,"border-radius":`16px`,display:`inline-block`}},E=[`src`],D={class:`_cppay-section`},O={class:`_cppay-info-box`},k={class:`_cppay-info-label`},A={class:`_cppay-info-value`},j={class:`_cppay-info-box`},M={class:`_cppay-info-label`},N={class:`_cppay-address-row`},P={key:0,class:`_cppay-info-box`,style:{background:`#fff3cd`,"border-color":`#ffc107`}},F={class:`_cppay-section`},I=[`disabled`],ae={class:`_cppay-section`},L=[`disabled`],R=(0,n.defineComponent)({__name:`PaymentDialog`,props:{modelValue:{type:Boolean},apikey:{},orderId:{},amount:{},plain:{default:`one-time`},intervalDays:{default:30}},emits:[`update:modelValue`,`success`,`error`],setup(e,{emit:R}){let z=e,B=R,V=new t.t(z.apikey),H=(0,n.ref)(`select`),U=(0,n.ref)(!1),W=(0,n.ref)([]),G=(0,n.ref)(``),K=(0,n.ref)(``),q=(0,n.ref)(null),J=(0,n.ref)(``),Y=(0,n.ref)(null),oe=(0,n.computed)(()=>W.value.find(e=>e.chain===G.value)),X=(0,n.computed)(()=>oe.value?.tokens||[]);(0,n.computed)(()=>X.value.find(e=>e.symbol===K.value));let se=(0,n.ref)(1),Z=(0,n.computed)(()=>K.value?(parseFloat(z.amount)/se.value).toFixed(6):`0`),Q=()=>{B(`update:modelValue`,!1),setTimeout(()=>{H.value=`select`,q.value=null},300)},ce=async()=>{try{U.value=!0,W.value=await V.getSupportedChains(),W.value.length>0&&(G.value=W.value[0].chain)}catch(e){B(`error`,e)}finally{U.value=!1}},le=async()=>{if(!(!G.value||!K.value))try{U.value=!0;let e;z.plain===`one-time`?e=await V.createPayment(`one-time`,{paymentChain:G.value,paymentToken:K.value,orderId:z.orderId,amount:Z.value}):z.plain===`subscription`&&(e=await V.createPayment(`subscription`,{paymentChain:G.value,paymentToken:K.value,orderId:z.orderId,amountOfUsd:Z.value,intervalDays:z.intervalDays||30})),q.value={paymentId:e.paymentId||e.subscriptionId,paymentAmount:e.paymentAmount||e.approveAmount,receiveAddress:e.receiveAddress||e.spenderAddress||``};let t=`${G.value.toLowerCase()}:${q.value.receiveAddress}?amount=${q.value.paymentAmount}`;J.value=await a.toDataURL(t,{width:200,margin:2,errorCorrectionLevel:`H`}),H.value=`payment`}catch(e){B(`error`,e)}finally{U.value=!1}},$=e=>{let t=()=>(0,r.defer)(()=>z.plain===`subscription`?V.checkSubscriptionPaymentStatus({subscriptionId:e}):V.checkOnetimePaymentStatus({paymentId:e})).pipe((0,i.timeout)(15e3),(0,i.retry)({count:3,delay:2e3}));Y.value?.unsubscribe(),Y.value=t().pipe((0,i.expand)(e=>e.status===`pending`?(0,r.timer)(2e3).pipe((0,i.switchMap)(()=>t())):r.EMPTY),(0,i.tap)(t=>{t.status===`expired`&&alert(`支付已过期`),t.status===`paid`&&(alert(`支付成功!`),B(`success`,e),Q()),t.status===`failed`&&alert(`支付失败`),t.status===`approved`&&(alert(`订阅成功!`),B(`success`,e),Q())})).subscribe({error:e=>{console.error(`支付状态检查错误:`,e),B(`error`,e)}})},ue=async()=>{if(q.value)try{U.value=!0,$(q.value.paymentId)}catch(e){B(`error`,e)}finally{U.value=!1}},de=async()=>{q.value?.receiveAddress&&(await navigator.clipboard.writeText(q.value.receiveAddress),alert(`地址已复制`))};return(0,n.watch)(()=>z.modelValue,e=>{e&&W.value.length===0&&ce()}),(0,n.watch)(G,()=>{X.value.length>0&&(K.value=X.value[0].symbol)}),(0,n.watch)(H,e=>{e===`payment`&&q.value&&$(q.value.paymentId)}),(0,n.onUnmounted)(()=>{Y.value?.unsubscribe()}),(t,r)=>((0,n.openBlock)(),(0,n.createBlock)(n.Teleport,{to:`body`},[(0,n.createVNode)(n.Transition,{name:`_cppay-fade`},{default:(0,n.withCtx)(()=>[e.modelValue?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:0,class:`_cppay-overlay`,onClick:(0,n.withModifiers)(Q,[`self`])},[(0,n.createElementVNode)(`div`,o,[(0,n.createElementVNode)(`div`,s,[(0,n.createElementVNode)(`h2`,c,(0,n.toDisplayString)(H.value===`select`?`选择支付方式`:`完成支付`),1),(0,n.createElementVNode)(`button`,{onClick:Q,class:`_cppay-close-btn`,disabled:U.value},[...r[1]||=[(0,n.createElementVNode)(`svg`,{fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[(0,n.createElementVNode)(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M6 18L18 6M6 6l12 12`})],-1)]],8,l)]),(0,n.createElementVNode)(`div`,u,[H.value===`select`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[(0,n.createElementVNode)(`div`,f,[r[2]||=(0,n.createElementVNode)(`label`,{class:`_cppay-label`},`支付网络`,-1),(0,n.createElementVNode)(`div`,p,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(W.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:e.chain,onClick:t=>G.value=e.chain,class:(0,n.normalizeClass)([`_cppay-select-btn`,G.value===e.chain?`_cppay-selected`:``])},[e.icon?((0,n.openBlock)(),(0,n.createElementBlock)(`img`,{key:0,src:e.icon,alt:e.chain},null,8,ee)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.chain),1)],10,m))),128))])]),(0,n.createElementVNode)(`div`,te,[r[3]||=(0,n.createElementVNode)(`label`,{class:`_cppay-label`},`支付代币`,-1),(0,n.createElementVNode)(`div`,ne,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(X.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:e.symbol,onClick:t=>K.value=e.symbol,class:(0,n.normalizeClass)([`_cppay-select-btn`,K.value===e.symbol?`_cppay-selected`:``])},[e.icon?((0,n.openBlock)(),(0,n.createElementBlock)(`img`,{key:0,src:e.icon,alt:e.symbol},null,8,ie)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.symbol),1)],10,re))),128))])]),(0,n.createElementVNode)(`div`,h,[(0,n.createElementVNode)(`div`,g,[(0,n.createElementVNode)(`div`,_,[r[4]||=(0,n.createElementVNode)(`span`,{class:`_cppay-price-label`},`支付金额`,-1),(0,n.createElementVNode)(`div`,v,[(0,n.createElementVNode)(`div`,y,(0,n.toDisplayString)(Z.value)+` `+(0,n.toDisplayString)(K.value),1),(0,n.createElementVNode)(`div`,b,`≈ $`+(0,n.toDisplayString)(e.amount),1)])])])]),(0,n.createElementVNode)(`div`,x,[(0,n.createElementVNode)(`button`,{onClick:le,disabled:!G.value||!K.value||U.value,class:`_cppay-btn _cppay-btn-primary`},(0,n.toDisplayString)(U.value?`处理中...`:`继续支付`),9,S)])])):H.value===`payment`&&q.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,C,[(0,n.createElementVNode)(`div`,w,[(0,n.createElementVNode)(`div`,T,[J.value?((0,n.openBlock)(),(0,n.createElementBlock)(`img`,{key:0,src:J.value,alt:`QR Code`,style:{width:`200px`,height:`200px`}},null,8,E)):(0,n.createCommentVNode)(``,!0)])]),(0,n.createElementVNode)(`div`,D,[(0,n.createElementVNode)(`div`,O,[(0,n.createElementVNode)(`div`,k,(0,n.toDisplayString)(z.plain===`subscription`?`授权金额`:`支付金额`),1),(0,n.createElementVNode)(`div`,A,(0,n.toDisplayString)(q.value.paymentAmount)+` `+(0,n.toDisplayString)(K.value),1)]),(0,n.createElementVNode)(`div`,j,[(0,n.createElementVNode)(`div`,M,(0,n.toDisplayString)(z.plain===`subscription`?`授权合约地址`:`支付地址`),1),(0,n.createElementVNode)(`div`,N,[(0,n.createElementVNode)(`code`,null,(0,n.toDisplayString)(q.value.receiveAddress),1),(0,n.createElementVNode)(`button`,{onClick:de,class:`_cppay-copy-btn`,title:`复制地址`},[...r[5]||=[(0,n.createElementVNode)(`svg`,{fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[(0,n.createElementVNode)(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z`})],-1)]])])]),z.plain===`subscription`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,P,[...r[6]||=[(0,n.createElementVNode)(`div`,{class:`_cppay-info-label`,style:{color:`#856404`}},`📌 订阅说明`,-1),(0,n.createElementVNode)(`div`,{class:`_cppay-info-value`,style:{"font-size":`12px`,color:`#856404`}},` 订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。 `,-1)]])):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`div`,F,[(0,n.createElementVNode)(`button`,{onClick:ue,disabled:U.value,class:`_cppay-btn _cppay-btn-primary`},(0,n.toDisplayString)(U.value?`检查支付状态...`:`我已完成支付`),9,I)]),(0,n.createElementVNode)(`div`,ae,[(0,n.createElementVNode)(`button`,{onClick:r[0]||=e=>H.value=`select`,disabled:U.value,class:`_cppay-btn _cppay-btn-secondary`},` 更改支付方式 `,8,L)])])):(0,n.createCommentVNode)(``,!0)])])])):(0,n.createCommentVNode)(``,!0)]),_:1})]))}}),z=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},B=z(R,[[`__scopeId`,`data-v-681ced40`]]);e.n(e.r),exports.PaymentDialog=B;

package/dist/vue.d.ts

@@ -0,0 +1,28 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+export declare const PaymentDialog: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+error: (error: Error) => any;
+"update:modelValue": (value: boolean) => any;
+success: (paymentId: string) => any;
+}, string, PublicProps, Readonly<Props> & Readonly<{
+onError?: ((error: Error) => any) | undefined;
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+onSuccess?: ((paymentId: string) => any) | undefined;
+}>, {
+intervalDays: number;
+plain: "one-time" | "subscription";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare interface Props {
+    modelValue: boolean;
+    apikey: string;
+    orderId: string;
+    amount: string;
+    plain?: "one-time" | "subscription";
+    intervalDays?: number;
+}
+
+export { }

package/dist/vue.js

@@ -0,0 +1,211 @@
+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 { 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",
+	style: {
+		background: "white",
+		padding: "16px",
+		"border-radius": "16px",
+		display: "inline-block"
+	}
+}, _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 = {
+	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;
+})(/* @__PURE__ */ defineComponent({
+	__name: "PaymentDialog",
+	props: {
+		modelValue: { type: Boolean },
+		apikey: {},
+		orderId: {},
+		amount: {},
+		plain: { default: "one-time" },
+		intervalDays: { default: 30 }
+	},
+	emits: [
+		"update:modelValue",
+		"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 () => {
+			try {
+				L.value = !0, R.value = await F.getSupportedChains(), R.value.length > 0 && (z.value = R.value[0].chain);
+			} catch (r) {
+				P("error", r);
+			} finally {
+				L.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 || ""
+				};
+				let M = `${z.value.toLowerCase()}:${V.value.receiveAddress}?amount=${V.value.paymentAmount}`;
+				H.value = await import_browser.toDataURL(M, {
+					width: 200,
+					margin: 2,
+					errorCorrectionLevel: "H"
+				}), I.value = "payment";
+			} catch (r) {
+				P("error", r);
+			} finally {
+				L.value = !1;
+			}
+		}, Z = (r) => {
+			let M = () => defer(() => N.plain === "subscription" ? F.checkSubscriptionPaymentStatus({ subscriptionId: r }) : F.checkOnetimePaymentStatus({ paymentId: r })).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);
+			} });
+		}, 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("地址已复制"));
+		};
+		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);
+		}), onUnmounted(() => {
+			U.value?.unsubscribe();
+		}), (M, P) => (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "_cppay-fade" }, {
+			default: withCtx(() => [r.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,
+				class: "_cppay-close-btn",
+				disabled: L.value
+			}, [...P[1] ||= [createElementVNode("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24"
+			}, [createElementVNode("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": "2",
+				d: "M6 18L18 6M6 6l12 12"
+			})], -1)]], 8, _hoisted_4)]), 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", {
+					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", {
+					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,
+					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", {
+					key: 0,
+					src: H.value,
+					alt: "QR Code",
+					style: {
+						width: "200px",
+						height: "200px"
+					}
+				}, 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", {
+						onClick: $,
+						class: "_cppay-copy-btn",
+						title: "复制地址"
+					}, [...P[5] ||= [createElementVNode("svg", {
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+					})], -1)]])])]),
+					N.plain === "subscription" ? (openBlock(), createElementBlock("div", _hoisted_34, [...P[6] ||= [createElementVNode("div", {
+						class: "_cppay-info-label",
+						style: { color: "#856404" }
+					}, "📌 订阅说明", -1), createElementVNode("div", {
+						class: "_cppay-info-value",
+						style: {
+							"font-size": "12px",
+							color: "#856404"
+						}
+					}, " 订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。 ", -1)]])) : createCommentVNode("", !0)
+				]),
+				createElementVNode("div", _hoisted_35, [createElementVNode("button", {
+					onClick: Q,
+					disabled: L.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)])
+			])) : createCommentVNode("", !0)])])])) : createCommentVNode("", !0)]),
+			_: 1
+		})]));
+	}
+}), [["__scopeId", "data-v-681ced40"]]);
+injectStyle(payment_dialog_default);
+export { PaymentDialog_default as PaymentDialog };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "cppay-sdk",
-  "version": "0.0.2-beta.2",
+  "version": "0.0.2-beta.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "rm -rf dist && vite build",
     "test": "vitest",
     "preview": "vite preview"
   },
@@ -12,15 +12,56 @@
     "dist",
     "README.md"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs",
+      "types": "./dist/vue.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs",
+      "types": "./dist/react.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^25.0.8",
+    "@types/qrcode": "^1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "~5.9.3",
     "vite": "npm:rolldown-vite@7.2.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "vue": "^3.5.26"
   },
   "resolutions": {
     "vite": "npm:rolldown-vite@7.2.5"
@@ -30,5 +71,9 @@
   "author": "",
   "license": "MIT",
   "repository": "",
-  "keywords": []
+  "keywords": [],
+  "dependencies": {
+    "qrcode": "^1.5.4",
+    "rxjs": "^7.8.2"
+  }
 }