@blocklet/payment-react 1.18.53 → 1.18.55

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.
Files changed (10) hide show
  1. package/es/contexts/payment.js +48 -7
  2. package/es/libs/util.js +2 -4
  3. package/es/locales/zh.js +1 -1
  4. package/lib/contexts/payment.js +46 -6
  5. package/lib/libs/util.js +2 -4
  6. package/lib/locales/zh.js +1 -1
  7. package/package.json +9 -9
  8. package/src/contexts/payment.tsx +59 -8
  9. package/src/libs/util.ts +2 -4
  10. package/src/locales/zh.tsx +1 -1
package/es/contexts/payment.js CHANGED
@@ -2,8 +2,10 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Alert } from "@mui/material";
3
3
  import { useLocalStorageState, useRequest } from "ahooks";
4
4
  import { createContext, useContext, useEffect, useState } from "react";
5
+ import axios from "axios";
6
+ import { joinURL } from "ufo";
5
7
  import api from "../libs/api.js";
6
- import { getPrefix } from "../libs/util.js";
8
+ import { getPrefix, PAYMENT_KIT_DID } from "../libs/util.js";
7
9
  import { CachedRequest } from "../libs/cached-request.js";
8
10
  const formatData = (data) => {
9
11
  if (!data) {
@@ -47,16 +49,55 @@ const syncToSpaceRequest = (userDid, spaceDid) => {
47
49
  });
48
50
  };
49
51
  function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
50
- if (baseUrl) {
51
- window.__PAYMENT_KIT_BASE_URL = baseUrl;
52
- } else {
53
- window.__PAYMENT_KIT_BASE_URL = "";
54
- }
52
+ const [crossOriginLoading, setCrossOriginLoading] = useState(false);
55
53
  if (authToken) {
56
54
  window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
57
55
  } else {
58
56
  window.__PAYMENT_KIT_AUTH_TOKEN = "";
59
57
  }
58
+ useEffect(() => {
59
+ const fetchCrossOriginBlockletInfo = async () => {
60
+ if (!baseUrl) {
61
+ window.__PAYMENT_KIT_BASE_URL = "";
62
+ setCrossOriginLoading(false);
63
+ return;
64
+ }
65
+ const tmp = new URL(baseUrl);
66
+ if (tmp.origin === window.location.origin) {
67
+ window.__PAYMENT_KIT_BASE_URL = "";
68
+ setCrossOriginLoading(false);
69
+ return;
70
+ }
71
+ setCrossOriginLoading(true);
72
+ try {
73
+ const scriptUrl = joinURL(tmp.origin, "__blocklet__.js?type=json");
74
+ const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
75
+ const cachedRequest = new CachedRequest(
76
+ cacheKey,
77
+ () => axios.get(scriptUrl).then((res) => ({ data: res.data })),
78
+ {
79
+ strategy: "session",
80
+ ttl: 10 * 60 * 1e3
81
+ // 10 minutes TTL
82
+ }
83
+ );
84
+ const blockletInfo = await cachedRequest.fetch();
85
+ const componentId = (blockletInfo?.componentId || "").split("/").pop();
86
+ if (componentId === PAYMENT_KIT_DID) {
87
+ window.__PAYMENT_KIT_BASE_URL = joinURL(tmp.origin, blockletInfo.prefix || "/");
88
+ } else {
89
+ const component = (blockletInfo?.componentMountPoints || []).find((x) => x?.did === PAYMENT_KIT_DID);
90
+ window.__PAYMENT_KIT_BASE_URL = component ? joinURL(tmp.origin, component.mountPoint) : baseUrl;
91
+ }
92
+ } catch (err) {
93
+ console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
94
+ window.__PAYMENT_KIT_BASE_URL = baseUrl;
95
+ } finally {
96
+ setCrossOriginLoading(false);
97
+ }
98
+ };
99
+ fetchCrossOriginBlockletInfo();
100
+ }, [baseUrl]);
60
101
  const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
61
102
  const {
62
103
  data = {
@@ -81,7 +122,7 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
81
122
  if (error) {
82
123
  return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
83
124
  }
84
- if (loading) {
125
+ if (loading || crossOriginLoading) {
85
126
  return null;
86
127
  }
87
128
  return /* @__PURE__ */ jsx(
package/es/libs/util.js CHANGED
@@ -13,14 +13,12 @@ export const isPaymentKitMounted = () => {
13
13
  };
14
14
  export const getPrefix = () => {
15
15
  const prefix = window.blocklet?.prefix || "/";
16
- let baseUrl = window.location?.origin;
16
+ const baseUrl = window.location?.origin;
17
17
  if (window.__PAYMENT_KIT_BASE_URL) {
18
18
  try {
19
19
  const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
20
20
  if (tmp.origin !== window.location.origin) {
21
- baseUrl = window.__PAYMENT_KIT_BASE_URL;
22
- } else {
23
- baseUrl = tmp.origin;
21
+ return window.__PAYMENT_KIT_BASE_URL;
24
22
  }
25
23
  } catch (err) {
26
24
  console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);
package/es/locales/zh.js CHANGED
@@ -228,7 +228,7 @@ export default flat({
228
228
  fastPay: {
229
229
  title: "\u786E\u8BA4\u652F\u4ED8",
230
230
  confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
231
- autoPaymentReason: "\u8BE5\u652F\u4ED8\u53EF\u4EE5\u81EA\u52A8\u5904\u7406\uFF0C\u56E0\u4E3A\u60A8\u7684\u8D26\u6237\u4F59\u989D\u5145\u8DB3\uFF0C\u8BF7\u5728\u7EE7\u7EED\u4E4B\u524D\u786E\u8BA4\u4EE5\u4E0B\u8BE6\u7EC6\u4FE1\u606F",
231
+ autoPaymentReason: "\u8BE5\u652F\u4ED8\u53EF\u4EE5\u81EA\u52A8\u5904\u7406\uFF0C\u56E0\u4E3A\u60A8\u7684\u8D26\u6237\u4F59\u989D\u5145\u8DB3\uFF0C\u8BF7\u5728\u7EE7\u7EED\u4E4B\u524D\u786E\u8BA4\u4EE5\u4E0B\u8BE6\u7EC6\u4FE1\u606F\u3002",
232
232
  payer: "\u8D26\u6237\u5730\u5740",
233
233
  amount: "\u652F\u4ED8\u91D1\u989D",
234
234
  failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
package/lib/contexts/payment.js CHANGED
@@ -11,6 +11,8 @@ var _jsxRuntime = require("react/jsx-runtime");
11
11
  var _material = require("@mui/material");
12
12
  var _ahooks = require("ahooks");
13
13
  var _react = require("react");
14
+ var _axios = _interopRequireDefault(require("axios"));
15
+ var _ufo = require("ufo");
14
16
  var _api = _interopRequireDefault(require("../libs/api"));
15
17
  var _util = require("../libs/util");
16
18
  var _cachedRequest = require("../libs/cached-request");
@@ -74,16 +76,54 @@ function PaymentProvider({
74
76
  baseUrl,
75
77
  authToken
76
78
  }) {
77
- if (baseUrl) {
78
- window.__PAYMENT_KIT_BASE_URL = baseUrl;
79
- } else {
80
- window.__PAYMENT_KIT_BASE_URL = "";
81
- }
79
+ const [crossOriginLoading, setCrossOriginLoading] = (0, _react.useState)(false);
82
80
  if (authToken) {
83
81
  window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
84
82
  } else {
85
83
  window.__PAYMENT_KIT_AUTH_TOKEN = "";
86
84
  }
85
+ (0, _react.useEffect)(() => {
86
+ const fetchCrossOriginBlockletInfo = async () => {
87
+ if (!baseUrl) {
88
+ window.__PAYMENT_KIT_BASE_URL = "";
89
+ setCrossOriginLoading(false);
90
+ return;
91
+ }
92
+ const tmp = new URL(baseUrl);
93
+ if (tmp.origin === window.location.origin) {
94
+ window.__PAYMENT_KIT_BASE_URL = "";
95
+ setCrossOriginLoading(false);
96
+ return;
97
+ }
98
+ setCrossOriginLoading(true);
99
+ try {
100
+ const scriptUrl = (0, _ufo.joinURL)(tmp.origin, "__blocklet__.js?type=json");
101
+ const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
102
+ const cachedRequest = new _cachedRequest.CachedRequest(cacheKey, () => _axios.default.get(scriptUrl).then(res => ({
103
+ data: res.data
104
+ })), {
105
+ strategy: "session",
106
+ ttl: 10 * 60 * 1e3
107
+ // 10 minutes TTL
108
+ });
109
+
110
+ const blockletInfo = await cachedRequest.fetch();
111
+ const componentId = (blockletInfo?.componentId || "").split("/").pop();
112
+ if (componentId === _util.PAYMENT_KIT_DID) {
113
+ window.__PAYMENT_KIT_BASE_URL = (0, _ufo.joinURL)(tmp.origin, blockletInfo.prefix || "/");
114
+ } else {
115
+ const component = (blockletInfo?.componentMountPoints || []).find(x => x?.did === _util.PAYMENT_KIT_DID);
116
+ window.__PAYMENT_KIT_BASE_URL = component ? (0, _ufo.joinURL)(tmp.origin, component.mountPoint) : baseUrl;
117
+ }
118
+ } catch (err) {
119
+ console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
120
+ window.__PAYMENT_KIT_BASE_URL = baseUrl;
121
+ } finally {
122
+ setCrossOriginLoading(false);
123
+ }
124
+ };
125
+ fetchCrossOriginBlockletInfo();
126
+ }, [baseUrl]);
87
127
  const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
88
128
  defaultValue: true
89
129
  });
@@ -113,7 +153,7 @@ function PaymentProvider({
113
153
  children: error.message
114
154
  });
115
155
  }
116
- if (loading) {
156
+ if (loading || crossOriginLoading) {
117
157
  return null;
118
158
  }
119
159
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
package/lib/libs/util.js CHANGED
@@ -81,14 +81,12 @@ const isPaymentKitMounted = () => {
81
81
  exports.isPaymentKitMounted = isPaymentKitMounted;
82
82
  const getPrefix = () => {
83
83
  const prefix = window.blocklet?.prefix || "/";
84
- let baseUrl = window.location?.origin;
84
+ const baseUrl = window.location?.origin;
85
85
  if (window.__PAYMENT_KIT_BASE_URL) {
86
86
  try {
87
87
  const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
88
88
  if (tmp.origin !== window.location.origin) {
89
- baseUrl = window.__PAYMENT_KIT_BASE_URL;
90
- } else {
91
- baseUrl = tmp.origin;
89
+ return window.__PAYMENT_KIT_BASE_URL;
92
90
  }
93
91
  } catch (err) {
94
92
  console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);
package/lib/locales/zh.js CHANGED
@@ -235,7 +235,7 @@ module.exports = (0, _flat.default)({
235
235
  fastPay: {
236
236
  title: "\u786E\u8BA4\u652F\u4ED8",
237
237
  confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
238
- autoPaymentReason: "\u8BE5\u652F\u4ED8\u53EF\u4EE5\u81EA\u52A8\u5904\u7406\uFF0C\u56E0\u4E3A\u60A8\u7684\u8D26\u6237\u4F59\u989D\u5145\u8DB3\uFF0C\u8BF7\u5728\u7EE7\u7EED\u4E4B\u524D\u786E\u8BA4\u4EE5\u4E0B\u8BE6\u7EC6\u4FE1\u606F",
238
+ autoPaymentReason: "\u8BE5\u652F\u4ED8\u53EF\u4EE5\u81EA\u52A8\u5904\u7406\uFF0C\u56E0\u4E3A\u60A8\u7684\u8D26\u6237\u4F59\u989D\u5145\u8DB3\uFF0C\u8BF7\u5728\u7EE7\u7EED\u4E4B\u524D\u786E\u8BA4\u4EE5\u4E0B\u8BE6\u7EC6\u4FE1\u606F\u3002",
239
239
  payer: "\u8D26\u6237\u5730\u5740",
240
240
  amount: "\u652F\u4ED8\u91D1\u989D",
241
241
  failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.18.53",
3
+ "version": "1.18.55",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -54,16 +54,16 @@
54
54
  }
55
55
  },
56
56
  "dependencies": {
57
- "@arcblock/did-connect": "^2.13.62",
58
- "@arcblock/ux": "^2.13.62",
59
- "@arcblock/ws": "^1.20.13",
60
- "@blocklet/theme": "^2.13.62",
61
- "@blocklet/ui-react": "^2.13.62",
57
+ "@arcblock/did-connect": "^2.13.66",
58
+ "@arcblock/ux": "^2.13.66",
59
+ "@arcblock/ws": "^1.20.14",
60
+ "@blocklet/theme": "^2.13.66",
61
+ "@blocklet/ui-react": "^2.13.66",
62
62
  "@mui/icons-material": "^5.16.6",
63
63
  "@mui/lab": "^5.0.0-alpha.173",
64
64
  "@mui/material": "^5.16.6",
65
65
  "@mui/system": "^5.16.6",
66
- "@ocap/util": "^1.20.13",
66
+ "@ocap/util": "^1.20.14",
67
67
  "@stripe/react-stripe-js": "^2.7.3",
68
68
  "@stripe/stripe-js": "^2.4.0",
69
69
  "@vitejs/plugin-legacy": "^5.4.1",
@@ -94,7 +94,7 @@
94
94
  "@babel/core": "^7.25.2",
95
95
  "@babel/preset-env": "^7.25.2",
96
96
  "@babel/preset-react": "^7.24.7",
97
- "@blocklet/payment-types": "1.18.53",
97
+ "@blocklet/payment-types": "1.18.55",
98
98
  "@storybook/addon-essentials": "^7.6.20",
99
99
  "@storybook/addon-interactions": "^7.6.20",
100
100
  "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
125
125
  "vite-plugin-babel": "^1.2.0",
126
126
  "vite-plugin-node-polyfills": "^0.21.0"
127
127
  },
128
- "gitHead": "39ab3a392c2367ceff0441fa968c442074827d92"
128
+ "gitHead": "87893b50ad72026312cd6b5d35e7f6f1181ad53a"
129
129
  }
package/src/contexts/payment.tsx CHANGED
@@ -5,8 +5,10 @@ import { useLocalStorageState, useRequest } from 'ahooks';
5
5
  import type { Axios } from 'axios';
6
6
  import { createContext, useContext, useEffect, useState } from 'react';
7
7
 
8
+ import axios from 'axios';
9
+ import { joinURL } from 'ufo';
8
10
  import api from '../libs/api';
9
- import { getPrefix } from '../libs/util';
11
+ import { getPrefix, PAYMENT_KIT_DID } from '../libs/util';
10
12
  import { CachedRequest } from '../libs/cached-request';
11
13
 
12
14
  export interface Settings {
@@ -89,12 +91,7 @@ const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
89
91
  };
90
92
 
91
93
  function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
92
- if (baseUrl) {
93
- // This is hack but efficient to share
94
- window.__PAYMENT_KIT_BASE_URL = baseUrl;
95
- } else {
96
- window.__PAYMENT_KIT_BASE_URL = '';
97
- }
94
+ const [crossOriginLoading, setCrossOriginLoading] = useState(false);
98
95
 
99
96
  if (authToken) {
100
97
  window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
@@ -102,6 +99,60 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
102
99
  window.__PAYMENT_KIT_AUTH_TOKEN = '';
103
100
  }
104
101
 
102
+ // Fetch cross-origin blocklet info if needed
103
+ useEffect(() => {
104
+ const fetchCrossOriginBlockletInfo = async () => {
105
+ if (!baseUrl) {
106
+ window.__PAYMENT_KIT_BASE_URL = '';
107
+ setCrossOriginLoading(false);
108
+ return;
109
+ }
110
+
111
+ const tmp = new URL(baseUrl);
112
+ // Same origin check
113
+ if (tmp.origin === window.location.origin) {
114
+ window.__PAYMENT_KIT_BASE_URL = '';
115
+ setCrossOriginLoading(false);
116
+ return;
117
+ }
118
+
119
+ setCrossOriginLoading(true);
120
+
121
+ try {
122
+ const scriptUrl = joinURL(tmp.origin, '__blocklet__.js?type=json');
123
+ const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
124
+
125
+ const cachedRequest = new CachedRequest(
126
+ cacheKey,
127
+ () => axios.get(scriptUrl).then((res) => ({ data: res.data })),
128
+ {
129
+ strategy: 'session',
130
+ ttl: 10 * 60 * 1000, // 10 minutes TTL
131
+ }
132
+ );
133
+
134
+ const blockletInfo = await cachedRequest.fetch();
135
+ const componentId = (blockletInfo?.componentId || '').split('/').pop();
136
+
137
+ // Set base URL based on component type
138
+ if (componentId === PAYMENT_KIT_DID) {
139
+ window.__PAYMENT_KIT_BASE_URL = joinURL(tmp.origin, blockletInfo.prefix || '/');
140
+ } else {
141
+ const component = (blockletInfo?.componentMountPoints || []).find((x: any) => x?.did === PAYMENT_KIT_DID);
142
+ window.__PAYMENT_KIT_BASE_URL = component ? joinURL(tmp.origin, component.mountPoint) : baseUrl; // Fallback to original baseUrl
143
+ }
144
+ } catch (err) {
145
+ console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
146
+ // Fallback to original baseUrl on error
147
+ window.__PAYMENT_KIT_BASE_URL = baseUrl;
148
+ } finally {
149
+ setCrossOriginLoading(false);
150
+ }
151
+ };
152
+
153
+ fetchCrossOriginBlockletInfo();
154
+ }, [baseUrl]);
155
+
105
156
  const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
106
157
 
107
158
  const {
@@ -136,7 +187,7 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
136
187
  return <Alert severity="error">{error.message}</Alert>;
137
188
  }
138
189
 
139
- if (loading) {
190
+ if (loading || crossOriginLoading) {
140
191
  return null;
141
192
  }
142
193
 
package/src/libs/util.ts CHANGED
@@ -37,14 +37,12 @@ export const isPaymentKitMounted = () => {
37
37
 
38
38
  export const getPrefix = (): string => {
39
39
  const prefix = window.blocklet?.prefix || '/';
40
- let baseUrl = window.location?.origin; // required when use payment feature cross origin
40
+ const baseUrl = window.location?.origin; // required when use payment feature cross origin
41
41
  if (window.__PAYMENT_KIT_BASE_URL) {
42
42
  try {
43
43
  const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
44
44
  if (tmp.origin !== window.location.origin) {
45
- baseUrl = window.__PAYMENT_KIT_BASE_URL;
46
- } else {
47
- baseUrl = tmp.origin;
45
+ return window.__PAYMENT_KIT_BASE_URL;
48
46
  }
49
47
  } catch (err) {
50
48
  console.warn('Invalid baseUrl for PaymentProvider', window.__PAYMENT_KIT_BASE_URL);
package/src/locales/zh.tsx CHANGED
@@ -231,7 +231,7 @@ export default flat({
231
231
  fastPay: {
232
232
  title: '确认支付',
233
233
  confirmMessage: '您将支付 {amount} {symbol}，从{sourceType}扣除。',
234
- autoPaymentReason: '该支付可以自动处理，因为您的账户余额充足，请在继续之前确认以下详细信息',
234
+ autoPaymentReason: '该支付可以自动处理，因为您的账户余额充足，请在继续之前确认以下详细信息。',
235
235
  payer: '账户地址',
236
236
  amount: '支付金额',
237
237
  failed: '账户发生变化，无法自动完成支付，请手动支付。',