cppay-sdk 0.0.2-beta.12 → 0.0.2-beta.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cppay-ClXaSwp8.cjs +1 -0
- package/dist/cppay-DNvA2evq.js +216 -0
- package/dist/cppay-sdk.css +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +69 -7
- package/dist/index.js +1 -1
- package/dist/inject-style-F1LzEPFL.cjs +1 -0
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +64 -2
- package/dist/react.js +204 -105
- package/dist/vue.cjs +1 -1
- package/dist/vue.d.ts +7 -2
- package/dist/vue.js +165 -96
- package/package.json +12 -7
- package/dist/cppay-Co7VAb5Q.js +0 -109
- package/dist/cppay-DUOs8RUI.cjs +0 -1
- package/dist/inject-style-Dz7JsQxo.cjs +0 -1
package/dist/react.js
CHANGED
|
@@ -1,73 +1,113 @@
|
|
|
1
|
-
import { t as cppay_default } from "./cppay-
|
|
1
|
+
import { t as cppay_default } from "./cppay-DNvA2evq.js";
|
|
2
2
|
import { n as payment_dialog_default, t as injectStyle } from "./inject-style-qX_0AjjE.js";
|
|
3
|
-
import
|
|
3
|
+
import QRCode from "qrcode";
|
|
4
|
+
import { EMPTY, defer, timer } from "rxjs";
|
|
5
|
+
import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
|
|
6
|
+
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
4
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
var PaymentDialog_default = React.memo(({ open:
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
var PaymentDialog_default = React.memo(({ open: l, onClose: u, apikey: v, plain: y, orderId: b, amount: x, intervalDays: S, onExpired: C, onSuccess: w, onFailed: T, onError: E }) => {
|
|
9
|
+
let D = useMemo(() => new cppay_default(v), [v]), [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]);
|
|
10
|
+
useMemo(() => H.find((t) => t.symbol === I), [H, I]);
|
|
11
|
+
let U = (t) => [
|
|
12
|
+
"USDT",
|
|
13
|
+
"USDC",
|
|
14
|
+
"BUSD",
|
|
15
|
+
"DAI",
|
|
16
|
+
"TUSD",
|
|
17
|
+
"USDD",
|
|
18
|
+
"FDUSD"
|
|
19
|
+
].includes(t.toUpperCase()) ? 2 : 6, W = (t, l) => {
|
|
20
|
+
let u = parseFloat(t);
|
|
21
|
+
return isNaN(u) ? "0" : u.toFixed(l).replace(/\.?0+$/, "");
|
|
22
|
+
}, G = useMemo(() => {
|
|
23
|
+
if (!I) return "0";
|
|
24
|
+
let t = U(I);
|
|
25
|
+
return W((parseFloat(x) / 1).toFixed(t), t);
|
|
26
|
+
}, [
|
|
27
|
+
x,
|
|
28
|
+
I,
|
|
9
29
|
1
|
|
10
|
-
]),
|
|
30
|
+
]), K = async () => {
|
|
11
31
|
try {
|
|
12
|
-
|
|
13
|
-
let t = await
|
|
14
|
-
|
|
32
|
+
j(!0);
|
|
33
|
+
let t = await D.getSupportedChains();
|
|
34
|
+
N(t), t.length > 0 && F(t[0].chain);
|
|
15
35
|
} catch (t) {
|
|
16
|
-
|
|
36
|
+
E?.(t);
|
|
17
37
|
} finally {
|
|
18
|
-
|
|
38
|
+
j(!1);
|
|
19
39
|
}
|
|
20
|
-
},
|
|
21
|
-
if (!(!
|
|
22
|
-
|
|
23
|
-
let t =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
}, q = useRef(null), J = async () => {
|
|
41
|
+
if (!(!P || !I)) try {
|
|
42
|
+
j(!0);
|
|
43
|
+
let t = "";
|
|
44
|
+
y === "one-time" ? (q.current = await D.createOnetimePayment({
|
|
45
|
+
paymentChain: P,
|
|
46
|
+
paymentToken: I,
|
|
47
|
+
orderId: b,
|
|
48
|
+
amount: G
|
|
49
|
+
}), t = `${P.toLowerCase()}:${q.current.receiveAddress}?amount=${q.current.paymentAmount}`) : y === "subscription" && (q.current = await D.createSubscriptionPayment({
|
|
50
|
+
paymentChain: P,
|
|
51
|
+
paymentToken: I,
|
|
52
|
+
orderId: b,
|
|
53
|
+
amountOfUsd: G,
|
|
54
|
+
intervalDays: S || 30
|
|
55
|
+
}), t = `${P.toLowerCase()}:${q.current.spenderAddress}?amount=${q.current.approveAmount}`), k("payment"), z(await QRCode.toDataURL(t, {
|
|
56
|
+
width: 200,
|
|
57
|
+
margin: 2,
|
|
58
|
+
errorCorrectionLevel: "H"
|
|
59
|
+
}));
|
|
34
60
|
} catch (t) {
|
|
35
|
-
|
|
61
|
+
E?.(t);
|
|
36
62
|
} finally {
|
|
37
|
-
|
|
63
|
+
j(!1);
|
|
38
64
|
}
|
|
39
|
-
},
|
|
40
|
-
if (
|
|
41
|
-
|
|
65
|
+
}, Y = async () => {
|
|
66
|
+
if (q.current) try {
|
|
67
|
+
j(!0), y === "one-time" && X(q.current.subscriptionId), y === "subscription" && X(q.current.paymentId);
|
|
42
68
|
} catch (t) {
|
|
43
|
-
|
|
69
|
+
console.error("支付状态检查错误:", t), E?.(t);
|
|
44
70
|
} finally {
|
|
45
|
-
|
|
71
|
+
j(!1);
|
|
46
72
|
}
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
73
|
+
}, X = (t) => {
|
|
74
|
+
let l = () => defer(() => y === "subscription" ? D.checkSubscriptionPaymentStatus({ subscriptionId: t }) : D.checkOnetimePaymentStatus({ paymentId: t })).pipe(timeout(15e3), retry({
|
|
75
|
+
count: 3,
|
|
76
|
+
delay: 2e3
|
|
77
|
+
}));
|
|
78
|
+
B.current?.unsubscribe(), B.current = l().pipe(expand((t) => t.status === "pending" ? timer(2e3).pipe(switchMap(() => l())) : EMPTY), tap((t) => {
|
|
79
|
+
t.status === "expired" && C?.(t), t.status === "paid" && (w?.(t), Q()), t.status === "failed" && T?.(t), t.status === "approved" && (w?.(t), Q());
|
|
80
|
+
})).subscribe({ error: (t) => {
|
|
81
|
+
console.error("支付状态检查错误:", t), E?.(t);
|
|
82
|
+
} });
|
|
83
|
+
}, Z = async () => {
|
|
84
|
+
if (!q.current) return;
|
|
85
|
+
let t = y === "subscription" ? q.current.spenderAddress : q.current.receiveAddress;
|
|
86
|
+
t && await navigator.clipboard.writeText(t);
|
|
87
|
+
}, Q = () => {
|
|
88
|
+
u(), setTimeout(() => {
|
|
89
|
+
k("select"), q.current = null;
|
|
52
90
|
}, 300);
|
|
53
91
|
};
|
|
54
92
|
return useEffect(() => {
|
|
55
|
-
|
|
56
|
-
}, [
|
|
57
|
-
|
|
58
|
-
}, [
|
|
93
|
+
l && M.length === 0 && K();
|
|
94
|
+
}, [l]), useEffect(() => {
|
|
95
|
+
H.length > 0 && L(H[0].symbol);
|
|
96
|
+
}, [H]), useEffect(() => () => {
|
|
97
|
+
B.current?.unsubscribe();
|
|
98
|
+
}, []), l ? /* @__PURE__ */ jsx("div", {
|
|
59
99
|
className: "_cppay-overlay",
|
|
60
|
-
onClick: (t) => t.target === t.currentTarget &&
|
|
100
|
+
onClick: (t) => t.target === t.currentTarget && Q(),
|
|
61
101
|
children: /* @__PURE__ */ jsxs("div", {
|
|
62
102
|
className: "_cppay-dialog",
|
|
63
103
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
64
104
|
className: "_cppay-header",
|
|
65
105
|
children: [/* @__PURE__ */ jsx("h2", {
|
|
66
106
|
className: "_cppay-title",
|
|
67
|
-
children:
|
|
107
|
+
children: O === "select" ? "选择支付方式" : "完成支付"
|
|
68
108
|
}), /* @__PURE__ */ jsx("button", {
|
|
69
|
-
onClick:
|
|
70
|
-
disabled:
|
|
109
|
+
onClick: Q,
|
|
110
|
+
disabled: A,
|
|
71
111
|
className: "_cppay-close-btn",
|
|
72
112
|
children: /* @__PURE__ */ jsx("svg", {
|
|
73
113
|
fill: "none",
|
|
@@ -83,7 +123,7 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
83
123
|
})]
|
|
84
124
|
}), /* @__PURE__ */ jsx("div", {
|
|
85
125
|
className: "_cppay-content",
|
|
86
|
-
children:
|
|
126
|
+
children: O === "select" ? /* @__PURE__ */ jsxs("div", { children: [
|
|
87
127
|
/* @__PURE__ */ jsxs("div", {
|
|
88
128
|
className: "_cppay-section",
|
|
89
129
|
children: [/* @__PURE__ */ jsx("label", {
|
|
@@ -91,9 +131,9 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
91
131
|
children: "支付网络"
|
|
92
132
|
}), /* @__PURE__ */ jsx("div", {
|
|
93
133
|
className: "_cppay-grid",
|
|
94
|
-
children:
|
|
95
|
-
onClick: () =>
|
|
96
|
-
className: `_cppay-select-btn ${
|
|
134
|
+
children: M.map((t) => /* @__PURE__ */ jsxs("button", {
|
|
135
|
+
onClick: () => F(t.chain),
|
|
136
|
+
className: `_cppay-select-btn ${P === t.chain ? "_cppay-selected" : ""}`,
|
|
97
137
|
children: [t.icon && /* @__PURE__ */ jsx("img", {
|
|
98
138
|
src: t.icon,
|
|
99
139
|
alt: t.chain
|
|
@@ -108,9 +148,9 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
108
148
|
children: "支付代币"
|
|
109
149
|
}), /* @__PURE__ */ jsx("div", {
|
|
110
150
|
className: "_cppay-grid",
|
|
111
|
-
children:
|
|
112
|
-
onClick: () =>
|
|
113
|
-
className: `_cppay-select-btn ${
|
|
151
|
+
children: H.map((t) => /* @__PURE__ */ jsxs("button", {
|
|
152
|
+
onClick: () => L(t.symbol),
|
|
153
|
+
className: `_cppay-select-btn ${I === t.symbol ? "_cppay-selected" : ""}`,
|
|
114
154
|
children: [t.icon && /* @__PURE__ */ jsx("img", {
|
|
115
155
|
src: t.icon,
|
|
116
156
|
alt: t.symbol
|
|
@@ -132,13 +172,13 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
132
172
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
133
173
|
className: "_cppay-price-main",
|
|
134
174
|
children: [
|
|
135
|
-
|
|
175
|
+
G,
|
|
136
176
|
" ",
|
|
137
|
-
|
|
177
|
+
I
|
|
138
178
|
]
|
|
139
179
|
}), /* @__PURE__ */ jsxs("div", {
|
|
140
180
|
className: "_cppay-price-sub",
|
|
141
|
-
children: ["≈ $",
|
|
181
|
+
children: ["≈ $", x]
|
|
142
182
|
})]
|
|
143
183
|
})]
|
|
144
184
|
})
|
|
@@ -147,75 +187,105 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
147
187
|
/* @__PURE__ */ jsx("div", {
|
|
148
188
|
className: "_cppay-section",
|
|
149
189
|
children: /* @__PURE__ */ jsx("button", {
|
|
150
|
-
onClick:
|
|
151
|
-
disabled: !
|
|
190
|
+
onClick: J,
|
|
191
|
+
disabled: !P || !I || A,
|
|
152
192
|
className: "_cppay-btn _cppay-btn-primary",
|
|
153
|
-
children:
|
|
193
|
+
children: A ? "处理中..." : "继续支付"
|
|
154
194
|
})
|
|
155
195
|
})
|
|
156
|
-
] }) :
|
|
196
|
+
] }) : /* @__PURE__ */ jsxs("div", { children: [
|
|
157
197
|
/* @__PURE__ */ jsx("div", {
|
|
158
198
|
className: "_cppay-qr-container",
|
|
159
199
|
children: /* @__PURE__ */ jsx("div", {
|
|
160
|
-
className: "_cppay-qr-
|
|
161
|
-
|
|
200
|
+
className: "_cppay-qr-code",
|
|
201
|
+
style: {
|
|
202
|
+
background: "white",
|
|
203
|
+
padding: "16px",
|
|
204
|
+
borderRadius: "16px"
|
|
205
|
+
},
|
|
206
|
+
children: R && /* @__PURE__ */ jsx("img", {
|
|
207
|
+
src: R,
|
|
208
|
+
alt: "Payment QR Code",
|
|
209
|
+
style: {
|
|
210
|
+
width: "200px",
|
|
211
|
+
height: "200px"
|
|
212
|
+
}
|
|
213
|
+
})
|
|
162
214
|
})
|
|
163
215
|
}),
|
|
164
216
|
/* @__PURE__ */ jsxs("div", {
|
|
165
217
|
className: "_cppay-section",
|
|
166
|
-
children: [
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
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"
|
|
218
|
+
children: [
|
|
219
|
+
/* @__PURE__ */ jsxs("div", {
|
|
220
|
+
className: "_cppay-info-box",
|
|
221
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
222
|
+
className: "_cppay-info-label",
|
|
223
|
+
children: y === "subscription" ? "授权金额" : "支付金额"
|
|
224
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
225
|
+
className: "_cppay-info-value",
|
|
226
|
+
children: y === "subscription" ? `${W(q.current.approveAmount, U(I))} ${I}` : `${W(q.current.paymentAmount, U(I))} ${I}`
|
|
227
|
+
})]
|
|
228
|
+
}),
|
|
229
|
+
/* @__PURE__ */ jsxs("div", {
|
|
230
|
+
className: "_cppay-info-box",
|
|
231
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
232
|
+
className: "_cppay-info-label",
|
|
233
|
+
children: y === "subscription" ? "授权合约地址" : "支付地址"
|
|
234
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
235
|
+
className: "_cppay-address-row",
|
|
236
|
+
children: [/* @__PURE__ */ jsx("code", { children: y === "subscription" ? q.current.spenderAddress : q.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
|
|
237
|
+
onClick: Z,
|
|
238
|
+
className: "_cppay-copy-btn",
|
|
239
|
+
title: "复制地址",
|
|
240
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
241
|
+
fill: "none",
|
|
242
|
+
stroke: "currentColor",
|
|
243
|
+
viewBox: "0 0 24 24",
|
|
244
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
245
|
+
strokeLinecap: "round",
|
|
246
|
+
strokeLinejoin: "round",
|
|
247
|
+
strokeWidth: 2,
|
|
248
|
+
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"
|
|
249
|
+
})
|
|
199
250
|
})
|
|
200
|
-
})
|
|
251
|
+
})]
|
|
201
252
|
})]
|
|
202
|
-
})
|
|
203
|
-
|
|
253
|
+
}),
|
|
254
|
+
y === "subscription" && /* @__PURE__ */ jsxs("div", {
|
|
255
|
+
className: "_cppay-info-box",
|
|
256
|
+
style: {
|
|
257
|
+
background: "#fff3cd",
|
|
258
|
+
borderColor: "#ffc107"
|
|
259
|
+
},
|
|
260
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
261
|
+
className: "_cppay-info-label",
|
|
262
|
+
style: { color: "#856404" },
|
|
263
|
+
children: "📌 订阅说明"
|
|
264
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
265
|
+
className: "_cppay-info-value",
|
|
266
|
+
style: {
|
|
267
|
+
fontSize: "12px",
|
|
268
|
+
color: "#856404"
|
|
269
|
+
},
|
|
270
|
+
children: "订阅支付需要授权代币给合约地址，系统将按周期自动扣款。授权后无需每次手动支付。"
|
|
271
|
+
})]
|
|
272
|
+
})
|
|
273
|
+
]
|
|
204
274
|
}),
|
|
205
275
|
/* @__PURE__ */ jsx("div", {
|
|
206
276
|
className: "_cppay-section",
|
|
207
277
|
children: /* @__PURE__ */ jsx("button", {
|
|
208
|
-
onClick:
|
|
209
|
-
disabled:
|
|
278
|
+
onClick: Y,
|
|
279
|
+
disabled: A,
|
|
210
280
|
className: "_cppay-btn _cppay-btn-primary",
|
|
211
|
-
children:
|
|
281
|
+
children: A ? "检查中..." : "我已完成支付"
|
|
212
282
|
})
|
|
213
283
|
}),
|
|
214
284
|
/* @__PURE__ */ jsx("div", {
|
|
215
285
|
className: "_cppay-section",
|
|
216
286
|
children: /* @__PURE__ */ jsx("button", {
|
|
217
|
-
onClick: () =>
|
|
218
|
-
disabled:
|
|
287
|
+
onClick: () => k("select"),
|
|
288
|
+
disabled: A,
|
|
219
289
|
className: "_cppay-btn _cppay-btn-secondary",
|
|
220
290
|
children: "更改支付方式"
|
|
221
291
|
})
|
|
@@ -224,6 +294,35 @@ var PaymentDialog_default = React.memo(({ open: o, onClose: s, apiKey: c, orderI
|
|
|
224
294
|
})]
|
|
225
295
|
})
|
|
226
296
|
}) : null;
|
|
227
|
-
});
|
|
297
|
+
}), CppayContext = createContext(null);
|
|
298
|
+
const CppayProvider = ({ apikey: t, children: l }) => {
|
|
299
|
+
let [u, d] = useState(!1), [f, p] = useState(null), m = useCallback((t) => {
|
|
300
|
+
p(t), d(!0);
|
|
301
|
+
}, []), h = useCallback(() => {
|
|
302
|
+
d(!1);
|
|
303
|
+
}, []), g = useCallback((t) => {
|
|
304
|
+
f?.onSuccess?.(t), d(!1);
|
|
305
|
+
}, [f]), _ = useCallback((t) => {
|
|
306
|
+
f?.onError?.(t);
|
|
307
|
+
}, [f]);
|
|
308
|
+
return /* @__PURE__ */ jsxs(CppayContext.Provider, {
|
|
309
|
+
value: { showPayment: m },
|
|
310
|
+
children: [l, f && /* @__PURE__ */ jsx(PaymentDialog_default, {
|
|
311
|
+
open: u,
|
|
312
|
+
onClose: h,
|
|
313
|
+
apikey: t,
|
|
314
|
+
plain: f.plain,
|
|
315
|
+
orderId: f.orderId,
|
|
316
|
+
amount: f.amount,
|
|
317
|
+
intervalDays: f.intervalDays,
|
|
318
|
+
onSuccess: g,
|
|
319
|
+
onError: _
|
|
320
|
+
})]
|
|
321
|
+
});
|
|
322
|
+
}, useCppayPayment = () => {
|
|
323
|
+
let t = useContext(CppayContext);
|
|
324
|
+
if (!t) throw Error("useCppayPayment must be used within CppayProvider");
|
|
325
|
+
return t;
|
|
326
|
+
};
|
|
228
327
|
injectStyle(payment_dialog_default);
|
|
229
|
-
export { PaymentDialog_default as PaymentDialog };
|
|
328
|
+
export { CppayProvider, PaymentDialog_default as PaymentDialog, useCppayPayment };
|
package/dist/vue.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require(`./
|
|
1
|
+
const e=require(`./inject-style-F1LzEPFL.cjs`),t=require(`./cppay-ClXaSwp8.cjs`);let n=require(`vue`),r=require(`qrcode`);r=e.r(r);let i=require(`rxjs`),a=require(`rxjs/operators`);var 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`],h=[`src`,`alt`],ee={class:`_cppay-section`},te={class:`_cppay-grid`},ne=[`onClick`],re=[`src`,`alt`],ie={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`],L={class:`_cppay-section`},ae=[`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 r.default.toDataURL(t,{width:200,margin:2,errorCorrectionLevel:`H`}),H.value=`payment`}catch(e){B(`error`,e)}finally{U.value=!1}},$=e=>{let t=()=>(0,i.defer)(()=>z.plain===`subscription`?V.checkSubscriptionPaymentStatus({subscriptionId:e}):V.checkOnetimePaymentStatus({paymentId:e})).pipe((0,a.timeout)(15e3),(0,a.retry)({count:3,delay:2e3}));Y.value?.unsubscribe(),Y.value=t().pipe((0,a.expand)(e=>e.status===`pending`?(0,i.timer)(2e3).pipe((0,a.switchMap)(()=>t())):i.EMPTY),(0,a.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,h)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.chain),1)],10,m))),128))])]),(0,n.createElementVNode)(`div`,ee,[r[3]||=(0,n.createElementVNode)(`label`,{class:`_cppay-label`},`支付代币`,-1),(0,n.createElementVNode)(`div`,te,[((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,re)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.symbol),1)],10,ne))),128))])]),(0,n.createElementVNode)(`div`,ie,[(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`,L,[(0,n.createElementVNode)(`button`,{onClick:r[0]||=e=>H.value=`select`,disabled:U.value,class:`_cppay-btn _cppay-btn-secondary`},` 更改支付方式 `,8,ae)])])):(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-25169ecd`]]);e.t(e.n),exports.PaymentDialog=B;
|
package/dist/vue.d.ts
CHANGED
|
@@ -11,13 +11,18 @@ success: (paymentId: string) => any;
|
|
|
11
11
|
onError?: ((error: Error) => any) | undefined;
|
|
12
12
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
13
13
|
onSuccess?: ((paymentId: string) => any) | undefined;
|
|
14
|
-
}>, {
|
|
14
|
+
}>, {
|
|
15
|
+
intervalDays: number;
|
|
16
|
+
plain: "one-time" | "subscription";
|
|
17
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
15
18
|
|
|
16
19
|
declare interface Props {
|
|
17
20
|
modelValue: boolean;
|
|
18
|
-
|
|
21
|
+
apikey: string;
|
|
19
22
|
orderId: string;
|
|
20
23
|
amount: string;
|
|
24
|
+
plain?: "one-time" | "subscription";
|
|
25
|
+
intervalDays?: number;
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
export { }
|