@blocklet/payment-react 1.18.28 → 1.18.30

package/es/components/over-due-invoice-payment.js

@@ -9,7 +9,7 @@ import { Dialog } from "@arcblock/ux";
 import { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
 import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";
-import { formatAmount, formatError, getPrefix } from "../libs/util.js";
+import { formatAmount, formatError, getPrefix, isCrossOrigin } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
 import LoadingButton from "./loading-button.js";
@@ -40,14 +40,15 @@ function OverdueInvoicePayment({
   authToken
 }) {
   const { t } = useLocaleContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState("");
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState({});
   const [paymentStatus, setPaymentStatus] = useState({});
   const sourceType = subscriptionId ? "subscription" : "customer";
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -56,18 +57,18 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
-    ready: !!subscriptionId || !!customerId
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
+    ready: !!subscriptionId || !!effectiveCustomerId
   });
   const detailUrl = useMemo(() => {
     if (subscriptionId) {
       return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return joinURL(getPrefix(), "/customer/invoice/past-due");
     }
     return "";
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
   const summaryList = useMemo(() => {
     if (!data?.summary) {
       return [];
@@ -100,7 +101,7 @@ function OverdueInvoicePayment({
       subscription.on("invoice.paid", ({ response }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || customerId && response.customer_id === customerId) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
             debouncedHandleInvoicePaid(response.currency_id);
@@ -108,7 +109,7 @@ function OverdueInvoicePayment({
         }
       });
     }
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = (item) => {
     const { currency, method } = item;
     if (method.type === "stripe") {
@@ -128,14 +129,15 @@ function OverdueInvoicePayment({
       const extraParams = { currencyId: currency.id };
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
         containerEl: void 0,
         saveConnect: false,
         action: "collect-batch",
         prefix: joinURL(getPrefix(), "/api/did"),
+        useSocket: isCrossOrigin() === false,
         extraParams,
         onSuccess: () => {
           connect.close();
@@ -246,7 +248,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = "";
       if (summaryList.length === 1) {
         title = t("payment.customer.overdue.title", {
@@ -275,10 +277,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description
       });
     }
-    if (customerId) {
-      return t("payment.customer.overdue.empty");
-    }
-    return "";
+    return t("payment.customer.overdue.empty");
   };
   if (mode === "custom" && children && typeof children === "function") {
     return /* @__PURE__ */ jsx(Stack, { children: children(handlePay, {

package/es/history/invoice/list.js

@@ -19,7 +19,8 @@ import {
   formatToDatetime,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
-  getTxLink
+  getTxLink,
+  isCrossOrigin
 } from "../../libs/util.js";
 import Table from "../../components/table.js";
 import { createLink, handleNavigation } from "../../libs/navigation.js";
@@ -479,6 +480,7 @@ export default function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      useSocket: isCrossOrigin() === false,
       messages: {
         scan: "",
         title: t(`payment.customer.invoice.${action || "pay"}`),

package/es/libs/util.d.ts

@@ -3,6 +3,7 @@ import type { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
+export declare function isCrossOrigin(): boolean;
 export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;

package/es/libs/util.js

@@ -36,6 +36,16 @@ export const getPrefix = () => {
   }
   return joinURL(baseUrl, prefix);
 };
+export function isCrossOrigin() {
+  try {
+    const prefix = getPrefix();
+    const prefixOrigin = new URL(prefix).origin;
+    const currentOrigin = window.location.origin;
+    return prefixOrigin !== currentOrigin;
+  } catch (error) {
+    return false;
+  }
+}
 export function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {
     return "-";

package/es/payment/form/index.js

@@ -21,7 +21,8 @@ import {
   formatQuantityInventory,
   getPrefix,
   getQueryParams,
-  getStatementDescriptor
+  getStatementDescriptor,
+  isCrossOrigin
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -311,6 +312,7 @@ export default function PaymentForm({
             action: checkoutSession.mode,
             prefix: joinURL(getPrefix(), "/api/did"),
             saveConnect: false,
+            useSocket: isCrossOrigin() === false,
             extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
             onSuccess: async () => {
               connect.close();
@@ -602,7 +604,7 @@ export default function PaymentForm({
     state.customerLimited && /* @__PURE__ */ jsx(
       OverdueInvoicePayment,
       {
-        customerId: customer?.id || session?.user?.didssion?.user?.did,
+        customerId: customer?.id || session?.user?.did,
         onPaid: () => {
           setState({ customerLimited: false });
           onAction();

package/es/payment/product-donation.js

@@ -85,9 +85,10 @@ export default function ProductDonation({
     if (hasPresets) {
       sortedPresets = [...presets].map((p) => parseFloat(p)).sort((a, b) => a - b);
     }
-    const minPreset = hasPresets ? sortedPresets[0] : 1;
-    const middleIndex = Math.floor(sortedPresets.length / 2);
-    const maxPreset = hasPresets ? sortedPresets[middleIndex] : 10;
+    const minPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] : 1;
+    let maxPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] * 5 : 100;
+    const systemMax = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    maxPreset = Math.min(maxPreset, systemMax);
     const detectPrecision = () => {
       let maxPrecision = 2;
       if (!hasPresets)

package/lib/components/over-due-invoice-payment.js

@@ -51,7 +51,8 @@ function OverdueInvoicePayment({
     t
   } = (0, _context.useLocaleContext)();
   const {
-    connect
+    connect,
+    session
   } = (0, _payment.usePaymentContext)();
   const [selectCurrencyId, setSelectCurrencyId] = (0, _react.useState)("");
   const [payLoading, setPayLoading] = (0, _react.useState)(false);
@@ -59,7 +60,8 @@ function OverdueInvoicePayment({
   const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
   const [paymentStatus, setPaymentStatus] = (0, _react.useState)({});
   const sourceType = subscriptionId ? "subscription" : "customer";
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -70,20 +72,20 @@ function OverdueInvoicePayment({
     runAsync: refresh
   } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices({
     subscriptionId,
-    customerId,
+    customerId: effectiveCustomerId,
     authToken
   }), {
-    ready: !!subscriptionId || !!customerId
+    ready: !!subscriptionId || !!effectiveCustomerId
   });
   const detailUrl = (0, _react.useMemo)(() => {
     if (subscriptionId) {
       return (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return (0, _ufo.joinURL)((0, _util.getPrefix)(), "/customer/invoice/past-due");
     }
     return "";
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
   const summaryList = (0, _react.useMemo)(() => {
     if (!data?.summary) {
       return [];
@@ -114,7 +116,7 @@ function OverdueInvoicePayment({
       }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || customerId && response.customer_id === customerId) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies(prev => ({
               ...prev,
@@ -125,7 +127,7 @@ function OverdueInvoicePayment({
         }
       });
     }
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = item => {
     const {
       currency,
@@ -150,14 +152,15 @@ function OverdueInvoicePayment({
       };
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
         containerEl: void 0,
         saveConnect: false,
         action: "collect-batch",
         prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
+        useSocket: (0, _util.isCrossOrigin)() === false,
         extraParams,
         onSuccess: () => {
           connect.close();
@@ -276,7 +279,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = "";
       if (summaryList.length === 1) {
         title = t("payment.customer.overdue.title", {
@@ -305,10 +308,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description
       });
     }
-    if (customerId) {
-      return t("payment.customer.overdue.empty");
-    }
-    return "";
+    return t("payment.customer.overdue.empty");
   };
   if (mode === "custom" && children && typeof children === "function") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/history/invoice/list.js

@@ -627,6 +627,7 @@ function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      useSocket: (0, _util.isCrossOrigin)() === false,
       messages: {
         scan: "",
         title: t(`payment.customer.invoice.${action || "pay"}`),

package/lib/libs/util.d.ts

@@ -3,6 +3,7 @@ import type { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
+export declare function isCrossOrigin(): boolean;
 export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;

package/lib/libs/util.js

@@ -49,6 +49,7 @@ exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
 exports.hasDelegateTxHash = hasDelegateTxHash;
+exports.isCrossOrigin = isCrossOrigin;
 exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
@@ -100,6 +101,16 @@ const getPrefix = () => {
   return (0, _ufo.joinURL)(baseUrl, prefix);
 };
 exports.getPrefix = getPrefix;
+function isCrossOrigin() {
+  try {
+    const prefix = getPrefix();
+    const prefixOrigin = new URL(prefix).origin;
+    const currentOrigin = window.location.origin;
+    return prefixOrigin !== currentOrigin;
+  } catch (error) {
+    return false;
+  }
+}
 function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {
     return "-";

package/lib/payment/form/index.js

@@ -355,6 +355,7 @@ function PaymentForm({
             action: checkoutSession.mode,
             prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
             saveConnect: false,
+            useSocket: (0, _util.isCrossOrigin)() === false,
             extraParams: {
               checkoutSessionId: checkoutSession.id,
               sessionUserDid: session?.user?.did
@@ -681,7 +682,7 @@ function PaymentForm({
         })]
       })
     }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_overDueInvoicePayment.default, {
-      customerId: customer?.id || session?.user?.didssion?.user?.did,
+      customerId: customer?.id || session?.user?.did,
       onPaid: () => {
         setState({
           customerLimited: false

package/lib/payment/product-donation.js

@@ -105,9 +105,10 @@ function ProductDonation({
     if (hasPresets) {
       sortedPresets = [...presets].map(p => parseFloat(p)).sort((a, b) => a - b);
     }
-    const minPreset = hasPresets ? sortedPresets[0] : 1;
-    const middleIndex = Math.floor(sortedPresets.length / 2);
-    const maxPreset = hasPresets ? sortedPresets[middleIndex] : 10;
+    const minPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] : 1;
+    let maxPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] * 5 : 100;
+    const systemMax = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    maxPreset = Math.min(maxPreset, systemMax);
     const detectPrecision = () => {
       let maxPrecision = 2;
       if (!hasPresets) return 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.28",
+  "version": "1.18.30",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,15 +54,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.70",
-    "@arcblock/ux": "^2.12.70",
-    "@arcblock/ws": "^1.19.19",
-    "@blocklet/ui-react": "^2.12.70",
+    "@arcblock/did-connect": "^2.13.1",
+    "@arcblock/ux": "^2.13.1",
+    "@arcblock/ws": "^1.20.0",
+    "@blocklet/ui-react": "^2.13.1",
     "@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.19.19",
+    "@ocap/util": "^1.20.0",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.28",
+    "@blocklet/payment-types": "1.18.30",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "5e904113fcdc51ef6ef4d67b664ed14f733da384"
+  "gitHead": "ed1753c48ee405a104cd2a0cab87cccb21e70ba8"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -4,13 +4,20 @@ import { Button, Typography, Stack, Alert, SxProps } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
-import type { Invoice, PaymentCurrency, PaymentMethod, Subscription, TInvoiceExpanded } from '@blocklet/payment-types';
+import type {
+  Customer,
+  Invoice,
+  PaymentCurrency,
+  PaymentMethod,
+  Subscription,
+  TInvoiceExpanded,
+} from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 import { Dialog } from '@arcblock/ux';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';
-import { formatAmount, formatError, getPrefix } from '../libs/util';
+import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
@@ -60,6 +67,7 @@ type OverdueInvoicesResult = {
   summary: { [key: string]: SummaryItem };
   invoices: Invoice[];
   subscriptionCount?: number;
+  customer?: Customer;
 };
 
 const fetchOverdueInvoices = async (params: {
@@ -95,7 +103,7 @@ function OverdueInvoicePayment({
   authToken,
 }: Props) {
   const { t } = useLocaleContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState('');
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
@@ -103,7 +111,8 @@ function OverdueInvoicePayment({
   const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' }>({});
 
   const sourceType = subscriptionId ? 'subscription' : 'customer';
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -112,19 +121,19 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh,
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
-    ready: !!subscriptionId || !!customerId,
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
+    ready: !!subscriptionId || !!effectiveCustomerId,
   });
 
   const detailUrl = useMemo(() => {
     if (subscriptionId) {
       return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return joinURL(getPrefix(), '/customer/invoice/past-due');
     }
     return '';
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
 
   const summaryList = useMemo(() => {
     if (!data?.summary) {
@@ -163,7 +172,7 @@ function OverdueInvoicePayment({
 
         if (
           (subscriptionId && response.subscription_id === subscriptionId) ||
-          (customerId && response.customer_id === customerId)
+          (effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id))
         ) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
@@ -173,7 +182,7 @@ function OverdueInvoicePayment({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
 
   const handlePay = (item: SummaryItem) => {
     const { currency, method } = item;
@@ -196,8 +205,8 @@ function OverdueInvoicePayment({
 
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
 
       connect.open({
@@ -205,6 +214,7 @@ function OverdueInvoicePayment({
         saveConnect: false,
         action: 'collect-batch',
         prefix: joinURL(getPrefix(), '/api/did'),
+        useSocket: isCrossOrigin() === false,
         extraParams,
         onSuccess: () => {
           connect.close();
@@ -343,7 +353,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length,
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = '';
       if (summaryList.length === 1) {
         title = t('payment.customer.overdue.title', {
@@ -374,11 +384,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description,
       });
     }
-    if (customerId) {
-      return t('payment.customer.overdue.empty');
-    }
-
-    return '';
+    return t('payment.customer.overdue.empty');
   };
 
   if (mode === 'custom' && children && typeof children === 'function') {

package/src/history/invoice/list.tsx

@@ -28,6 +28,7 @@ import {
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getTxLink,
+  isCrossOrigin,
 } from '../../libs/util';
 import Table from '../../components/table';
 import { createLink, handleNavigation, LinkInfo } from '../../libs/navigation';
@@ -617,6 +618,7 @@ export default function CustomerInvoiceList(props: Props) {
     connect.open({
       action: 'collect',
       saveConnect: false,
+      useSocket: isCrossOrigin() === false,
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),

package/src/libs/util.ts

@@ -61,6 +61,17 @@ export const getPrefix = (): string => {
   return joinURL(baseUrl, prefix);
 };
 
+export function isCrossOrigin() {
+  try {
+    const prefix = getPrefix();
+    const prefixOrigin = new URL(prefix).origin;
+    const currentOrigin = window.location.origin;
+    return prefixOrigin !== currentOrigin;
+  } catch (error) {
+    return false;
+  }
+}
+
 export function formatToDate(date: Date | string | number, locale = 'en', format = 'YYYY-MM-DD HH:mm:ss') {
   if (!date) {
     return '-';

package/src/payment/form/index.tsx

@@ -32,6 +32,7 @@ import {
   getPrefix,
   getQueryParams,
   getStatementDescriptor,
+  isCrossOrigin,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
 import AddressForm from './address';
@@ -426,6 +427,7 @@ export default function PaymentForm({
             action: checkoutSession.mode,
             prefix: joinURL(getPrefix(), '/api/did'),
             saveConnect: false,
+            useSocket: isCrossOrigin() === false,
             extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
             onSuccess: async () => {
               connect.close();
@@ -726,7 +728,7 @@ export default function PaymentForm({
       </Fade>
       {state.customerLimited && (
         <OverdueInvoicePayment
-          customerId={customer?.id || session?.user?.didssion?.user?.did}
+          customerId={customer?.id || session?.user?.did}
           onPaid={() => {
             setState({ customerLimited: false });
             onAction();

package/src/payment/product-donation.tsx

@@ -108,9 +108,10 @@ export default function ProductDonation({
     }
 
     // Get min and max values for random amount
-    const minPreset = hasPresets ? sortedPresets[0] : 1;
-    const middleIndex = Math.floor(sortedPresets.length / 2);
-    const maxPreset = hasPresets ? sortedPresets[middleIndex] : 10;
+    const minPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] : 1;
+    let maxPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] * 5 : 100;
+    const systemMax = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    maxPreset = Math.min(maxPreset, systemMax);
 
     // Detect precision from existing presets
     const detectPrecision = () => {