@blocklet/payment-react 1.18.52 → 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/en.js

@@ -228,8 +228,7 @@ export default flat({
       fastPay: {
         title: "Confirm Payment",
         confirmMessage: "You will pay {amount} {symbol} from {sourceType}.",
-        autoPaymentReason: "This payment will be processed automatically due to prior delegation or sufficient balance.",
-        confirmPrompt: "Please confirm the details before proceeding.",
+        autoPaymentReason: "Your payment will be processed automatically as your account has sufficient balance. Please confirm the following details before proceeding.",
         payer: "Account",
         amount: "Amount",
         failed: "Account changed, please pay manually.",
@@ -341,7 +340,7 @@ export default flat({
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
-        view: "View Subscription",
+        view: "Manage Subscription",
         current: "Current subscription",
         viewAll: "View all",
         empty: "There are no subscriptions here",

package/es/locales/zh.js

@@ -228,8 +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: "\u7531\u4E8E\u6388\u6743\u6216\u4F59\u989D\u5145\u8DB3\uFF0C\u7CFB\u7EDF\u5C06\u65E0\u9700\u94B1\u5305\u786E\u8BA4\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\u3002",
-        confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\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\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/es/payment/form/index.js

@@ -453,7 +453,6 @@ export default function PaymentForm({
       title: t("payment.checkout.fastPay.title"),
       message: /* @__PURE__ */ jsxs(Stack, { children: [
         /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
-        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.confirmPrompt") }),
         /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
           /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [

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/en.js

@@ -235,8 +235,7 @@ module.exports = (0, _flat.default)({
       fastPay: {
         title: "Confirm Payment",
         confirmMessage: "You will pay {amount} {symbol} from {sourceType}.",
-        autoPaymentReason: "This payment will be processed automatically due to prior delegation or sufficient balance.",
-        confirmPrompt: "Please confirm the details before proceeding.",
+        autoPaymentReason: "Your payment will be processed automatically as your account has sufficient balance. Please confirm the following details before proceeding.",
         payer: "Account",
         amount: "Amount",
         failed: "Account changed, please pay manually.",
@@ -348,7 +347,7 @@ module.exports = (0, _flat.default)({
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
-        view: "View Subscription",
+        view: "Manage Subscription",
         current: "Current subscription",
         viewAll: "View all",
         empty: "There are no subscriptions here",

package/lib/locales/zh.js

@@ -235,8 +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: "\u7531\u4E8E\u6388\u6743\u6216\u4F59\u989D\u5145\u8DB3\uFF0C\u7CFB\u7EDF\u5C06\u65E0\u9700\u94B1\u5305\u786E\u8BA4\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\u3002",
-        confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\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\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/payment/form/index.js

@@ -533,8 +533,6 @@ function PaymentForm({
     message: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("payment.checkout.fastPay.autoPaymentReason")
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        children: t("payment.checkout.fastPay.confirmPrompt")
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
         sx: {
           mt: 1.5,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.52",
+  "version": "1.18.54",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.61",
-    "@arcblock/ux": "^2.13.61",
-    "@arcblock/ws": "^1.20.12",
-    "@blocklet/theme": "^2.13.61",
-    "@blocklet/ui-react": "^2.13.61",
+    "@arcblock/did-connect": "^2.13.62",
+    "@arcblock/ux": "^2.13.62",
+    "@arcblock/ws": "^1.20.13",
+    "@blocklet/theme": "^2.13.62",
+    "@blocklet/ui-react": "^2.13.62",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.20.12",
+    "@ocap/util": "^1.20.13",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -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.52",
+    "@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": "dfa2927758a635868ca2ce251d098ab15178a409"
+  "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/en.tsx

@@ -236,8 +236,7 @@ export default flat({
         title: 'Confirm Payment',
         confirmMessage: 'You will pay {amount} {symbol} from {sourceType}.',
         autoPaymentReason:
-          'This payment will be processed automatically due to prior delegation or sufficient balance.',
-        confirmPrompt: 'Please confirm the details before proceeding.',
+          'Your payment will be processed automatically as your account has sufficient balance. Please confirm the following details before proceeding.',
         payer: 'Account',
         amount: 'Amount',
         failed: 'Account changed, please pay manually.',
@@ -356,7 +355,7 @@ export default flat({
         plan: 'Plan',
         nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
-        view: 'View Subscription',
+        view: 'Manage Subscription',
         current: 'Current subscription',
         viewAll: 'View all',
         empty: 'There are no subscriptions here',

package/src/locales/zh.tsx

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

package/src/payment/form/index.tsx

@@ -594,7 +594,6 @@ export default function PaymentForm({
       message={
         <Stack>
           <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
-          <Typography>{t('payment.checkout.fastPay.confirmPrompt')}</Typography>
           <Divider sx={{ mt: 1.5, mb: 1.5 }} />
           <Stack spacing={1}>
             <Stack flexDirection="row" alignItems="center" justifyContent="space-between">