@blocklet/payment-react 1.18.53 → 1.18.54

package/es/contexts/payment.js

@@ -2,8 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext, useEffect, useState } from "react";
+import axios from "axios";
+import { joinURL } from "ufo";
 import api from "../libs/api.js";
-import { getPrefix } from "../libs/util.js";
+import { getPrefix, PAYMENT_KIT_DID } from "../libs/util.js";
 import { CachedRequest } from "../libs/cached-request.js";
 const formatData = (data) => {
   if (!data) {
@@ -47,16 +49,55 @@ const syncToSpaceRequest = (userDid, spaceDid) => {
   });
 };
 function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
-  if (baseUrl) {
-    window.__PAYMENT_KIT_BASE_URL = baseUrl;
-  } else {
-    window.__PAYMENT_KIT_BASE_URL = "";
-  }
+  const [crossOriginLoading, setCrossOriginLoading] = useState(false);
   if (authToken) {
     window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
   } else {
     window.__PAYMENT_KIT_AUTH_TOKEN = "";
   }
+  useEffect(() => {
+    const fetchCrossOriginBlockletInfo = async () => {
+      if (!baseUrl) {
+        window.__PAYMENT_KIT_BASE_URL = "";
+        setCrossOriginLoading(false);
+        return;
+      }
+      const tmp = new URL(baseUrl);
+      if (tmp.origin === window.location.origin) {
+        window.__PAYMENT_KIT_BASE_URL = "";
+        setCrossOriginLoading(false);
+        return;
+      }
+      setCrossOriginLoading(true);
+      try {
+        const scriptUrl = joinURL(tmp.origin, "__blocklet__.js?type=json");
+        const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
+        const cachedRequest = new CachedRequest(
+          cacheKey,
+          () => axios.get(scriptUrl).then((res) => ({ data: res.data })),
+          {
+            strategy: "session",
+            ttl: 10 * 60 * 1e3
+            // 10 minutes TTL
+          }
+        );
+        const blockletInfo = await cachedRequest.fetch();
+        const componentId = (blockletInfo?.componentId || "").split("/").pop();
+        if (componentId === PAYMENT_KIT_DID) {
+          window.__PAYMENT_KIT_BASE_URL = joinURL(tmp.origin, blockletInfo.prefix || "/");
+        } else {
+          const component = (blockletInfo?.componentMountPoints || []).find((x) => x?.did === PAYMENT_KIT_DID);
+          window.__PAYMENT_KIT_BASE_URL = component ? joinURL(tmp.origin, component.mountPoint) : baseUrl;
+        }
+      } catch (err) {
+        console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
+        window.__PAYMENT_KIT_BASE_URL = baseUrl;
+      } finally {
+        setCrossOriginLoading(false);
+      }
+    };
+    fetchCrossOriginBlockletInfo();
+  }, [baseUrl]);
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
   const {
     data = {
@@ -81,7 +122,7 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
   if (error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
-  if (loading) {
+  if (loading || crossOriginLoading) {
     return null;
   }
   return /* @__PURE__ */ jsx(

package/es/libs/util.js

@@ -13,14 +13,12 @@ export const isPaymentKitMounted = () => {
 };
 export const getPrefix = () => {
   const prefix = window.blocklet?.prefix || "/";
-  let baseUrl = window.location?.origin;
+  const baseUrl = window.location?.origin;
   if (window.__PAYMENT_KIT_BASE_URL) {
     try {
       const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
       if (tmp.origin !== window.location.origin) {
-        baseUrl = window.__PAYMENT_KIT_BASE_URL;
-      } else {
-        baseUrl = tmp.origin;
+        return window.__PAYMENT_KIT_BASE_URL;
       }
     } catch (err) {
       console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);

package/es/locales/zh.js

@@ -228,7 +228,7 @@ export default flat({
       fastPay: {
         title: "\u786E\u8BA4\u652F\u4ED8",
         confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
-        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",
+        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",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
         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

@@ -11,6 +11,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _axios = _interopRequireDefault(require("axios"));
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _cachedRequest = require("../libs/cached-request");
@@ -74,16 +76,54 @@ function PaymentProvider({
   baseUrl,
   authToken
 }) {
-  if (baseUrl) {
-    window.__PAYMENT_KIT_BASE_URL = baseUrl;
-  } else {
-    window.__PAYMENT_KIT_BASE_URL = "";
-  }
+  const [crossOriginLoading, setCrossOriginLoading] = (0, _react.useState)(false);
   if (authToken) {
     window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
   } else {
     window.__PAYMENT_KIT_AUTH_TOKEN = "";
   }
+  (0, _react.useEffect)(() => {
+    const fetchCrossOriginBlockletInfo = async () => {
+      if (!baseUrl) {
+        window.__PAYMENT_KIT_BASE_URL = "";
+        setCrossOriginLoading(false);
+        return;
+      }
+      const tmp = new URL(baseUrl);
+      if (tmp.origin === window.location.origin) {
+        window.__PAYMENT_KIT_BASE_URL = "";
+        setCrossOriginLoading(false);
+        return;
+      }
+      setCrossOriginLoading(true);
+      try {
+        const scriptUrl = (0, _ufo.joinURL)(tmp.origin, "__blocklet__.js?type=json");
+        const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
+        const cachedRequest = new _cachedRequest.CachedRequest(cacheKey, () => _axios.default.get(scriptUrl).then(res => ({
+          data: res.data
+        })), {
+          strategy: "session",
+          ttl: 10 * 60 * 1e3
+          // 10 minutes TTL
+        });
+
+        const blockletInfo = await cachedRequest.fetch();
+        const componentId = (blockletInfo?.componentId || "").split("/").pop();
+        if (componentId === _util.PAYMENT_KIT_DID) {
+          window.__PAYMENT_KIT_BASE_URL = (0, _ufo.joinURL)(tmp.origin, blockletInfo.prefix || "/");
+        } else {
+          const component = (blockletInfo?.componentMountPoints || []).find(x => x?.did === _util.PAYMENT_KIT_DID);
+          window.__PAYMENT_KIT_BASE_URL = component ? (0, _ufo.joinURL)(tmp.origin, component.mountPoint) : baseUrl;
+        }
+      } catch (err) {
+        console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
+        window.__PAYMENT_KIT_BASE_URL = baseUrl;
+      } finally {
+        setCrossOriginLoading(false);
+      }
+    };
+    fetchCrossOriginBlockletInfo();
+  }, [baseUrl]);
   const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
     defaultValue: true
   });
@@ -113,7 +153,7 @@ function PaymentProvider({
       children: error.message
     });
   }
-  if (loading) {
+  if (loading || crossOriginLoading) {
     return null;
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {

package/lib/libs/util.js

@@ -81,14 +81,12 @@ const isPaymentKitMounted = () => {
 exports.isPaymentKitMounted = isPaymentKitMounted;
 const getPrefix = () => {
   const prefix = window.blocklet?.prefix || "/";
-  let baseUrl = window.location?.origin;
+  const baseUrl = window.location?.origin;
   if (window.__PAYMENT_KIT_BASE_URL) {
     try {
       const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
       if (tmp.origin !== window.location.origin) {
-        baseUrl = window.__PAYMENT_KIT_BASE_URL;
-      } else {
-        baseUrl = tmp.origin;
+        return window.__PAYMENT_KIT_BASE_URL;
       }
     } catch (err) {
       console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);

package/lib/locales/zh.js

@@ -235,7 +235,7 @@ module.exports = (0, _flat.default)({
       fastPay: {
         title: "\u786E\u8BA4\u652F\u4ED8",
         confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
-        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",
+        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",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
         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

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.53",
+  "version": "1.18.54",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.53",
+    "@blocklet/payment-types": "1.18.54",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "39ab3a392c2367ceff0441fa968c442074827d92"
+  "gitHead": "6315d7f4272e88e6a840a1948fd9745db9011e16"
 }

package/src/contexts/payment.tsx

@@ -5,8 +5,10 @@ import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
 import { createContext, useContext, useEffect, useState } from 'react';
 
+import axios from 'axios';
+import { joinURL } from 'ufo';
 import api from '../libs/api';
-import { getPrefix } from '../libs/util';
+import { getPrefix, PAYMENT_KIT_DID } from '../libs/util';
 import { CachedRequest } from '../libs/cached-request';
 
 export interface Settings {
@@ -89,12 +91,7 @@ const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
 };
 
 function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
-  if (baseUrl) {
-    // This is hack but efficient to share
-    window.__PAYMENT_KIT_BASE_URL = baseUrl;
-  } else {
-    window.__PAYMENT_KIT_BASE_URL = '';
-  }
+  const [crossOriginLoading, setCrossOriginLoading] = useState(false);
 
   if (authToken) {
     window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
@@ -102,6 +99,60 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
     window.__PAYMENT_KIT_AUTH_TOKEN = '';
   }
 
+  // Fetch cross-origin blocklet info if needed
+  useEffect(() => {
+    const fetchCrossOriginBlockletInfo = async () => {
+      if (!baseUrl) {
+        window.__PAYMENT_KIT_BASE_URL = '';
+        setCrossOriginLoading(false);
+        return;
+      }
+
+      const tmp = new URL(baseUrl);
+      // Same origin check
+      if (tmp.origin === window.location.origin) {
+        window.__PAYMENT_KIT_BASE_URL = '';
+        setCrossOriginLoading(false);
+        return;
+      }
+
+      setCrossOriginLoading(true);
+
+      try {
+        const scriptUrl = joinURL(tmp.origin, '__blocklet__.js?type=json');
+        const cacheKey = `cross-origin-blocklet-${tmp.origin}`;
+
+        const cachedRequest = new CachedRequest(
+          cacheKey,
+          () => axios.get(scriptUrl).then((res) => ({ data: res.data })),
+          {
+            strategy: 'session',
+            ttl: 10 * 60 * 1000, // 10 minutes TTL
+          }
+        );
+
+        const blockletInfo = await cachedRequest.fetch();
+        const componentId = (blockletInfo?.componentId || '').split('/').pop();
+
+        // Set base URL based on component type
+        if (componentId === PAYMENT_KIT_DID) {
+          window.__PAYMENT_KIT_BASE_URL = joinURL(tmp.origin, blockletInfo.prefix || '/');
+        } else {
+          const component = (blockletInfo?.componentMountPoints || []).find((x: any) => x?.did === PAYMENT_KIT_DID);
+          window.__PAYMENT_KIT_BASE_URL = component ? joinURL(tmp.origin, component.mountPoint) : baseUrl; // Fallback to original baseUrl
+        }
+      } catch (err) {
+        console.warn(`Failed to fetch blocklet json from ${baseUrl}:`, err);
+        // Fallback to original baseUrl on error
+        window.__PAYMENT_KIT_BASE_URL = baseUrl;
+      } finally {
+        setCrossOriginLoading(false);
+      }
+    };
+
+    fetchCrossOriginBlockletInfo();
+  }, [baseUrl]);
+
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
 
   const {
@@ -136,7 +187,7 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if (loading) {
+  if (loading || crossOriginLoading) {
     return null;
   }
 

package/src/libs/util.ts

@@ -37,14 +37,12 @@ export const isPaymentKitMounted = () => {
 
 export const getPrefix = (): string => {
   const prefix = window.blocklet?.prefix || '/';
-  let baseUrl = window.location?.origin; // required when use payment feature cross origin
+  const baseUrl = window.location?.origin; // required when use payment feature cross origin
   if (window.__PAYMENT_KIT_BASE_URL) {
     try {
       const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
       if (tmp.origin !== window.location.origin) {
-        baseUrl = window.__PAYMENT_KIT_BASE_URL;
-      } else {
-        baseUrl = tmp.origin;
+        return window.__PAYMENT_KIT_BASE_URL;
       }
     } catch (err) {
       console.warn('Invalid baseUrl for PaymentProvider', window.__PAYMENT_KIT_BASE_URL);

package/src/locales/zh.tsx

@@ -231,7 +231,7 @@ export default flat({
       fastPay: {
         title: '确认支付',
         confirmMessage: '您将支付 {amount} {symbol}，从{sourceType}扣除。',
-        autoPaymentReason: '该支付可以自动处理，因为您的账户余额充足，请在继续之前确认以下详细信息',
+        autoPaymentReason: '该支付可以自动处理，因为您的账户余额充足，请在继续之前确认以下详细信息。',
         payer: '账户地址',
         amount: '支付金额',
         failed: '账户发生变化，无法自动完成支付，请手动支付。',