@blocklet/payment-react 1.18.29 → 1.18.31

package/lib/payment/success.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ufo = require("ufo");
+var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
 function PaymentSuccess({
   mode,
@@ -16,7 +17,8 @@ function PaymentSuccess({
   action,
   payee,
   invoiceId,
-  subscriptionId
+  subscriptionId,
+  subscriptions
 }) {
   const {
     t
@@ -25,19 +27,69 @@ function PaymentSuccess({
     prefix
   } = (0, _payment.usePaymentContext)();
   let next = null;
-  if (["subscription", "setup"].includes(action) && subscriptionId) {
-    next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      textAlign: "center",
-      sx: {
-        mt: 2
-      },
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
-        href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
-        children: t("payment.checkout.next.subscription", {
-          payee
+  if (["subscription", "setup"].includes(action)) {
+    if (subscriptions && subscriptions.length > 1) {
+      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+        elevation: 0,
+        sx: {
+          p: 3,
+          backgroundColor: "grey.50",
+          borderRadius: 2,
+          width: "100%",
+          mt: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: subscriptions.map(subscription => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              fontWeight: 500
+            },
+            children: subscription.description
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              flex: 1,
+              borderBottom: "1px dashed",
+              borderColor: "grey.300",
+              mx: 2
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+            variant: "text",
+            color: "primary",
+            size: "small",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+              href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscription.id}`),
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("payment.checkout.next.view")
+            })
+          })]
+        }, subscription.id))
+      });
+    } else if (subscriptionId) {
+      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+        variant: "outlined",
+        color: "primary",
+        sx: {
+          mt: 2
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+          href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
+          children: t("payment.checkout.next.subscription", {
+            payee
+          })
         })
-      })
-    });
+      });
+    }
   } else if (invoiceId) {
     next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       textAlign: "center",
@@ -59,7 +111,7 @@ function PaymentSuccess({
       alignItems: "center",
       justifyContent: mode === "standalone" ? "center" : "flex-start",
       sx: {
-        height: mode === "standalone" ? 360 : 300
+        height: mode === "standalone" ? "fit-content" : 300
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
@@ -95,7 +147,8 @@ function PaymentSuccess({
 }
 PaymentSuccess.defaultProps = {
   invoiceId: "",
-  subscriptionId: ""
+  subscriptionId: "",
+  subscriptions: []
 };
 const Div = (0, _system.styled)("div")`
   width: 80px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.29",
+  "version": "1.18.31",
   "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.5",
+    "@arcblock/ux": "^2.13.5",
+    "@arcblock/ws": "^1.20.1",
+    "@blocklet/ui-react": "^2.13.5",
     "@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.1",
     "@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.29",
+    "@blocklet/payment-types": "1.18.31",
     "@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": "bb8d03a1da62822cbc2ae57d7c5f2912aaebc0da"
+  "gitHead": "c9b1eff248ecd07bc1f606df039464dafa786914"
 }

package/src/checkout/donate.tsx

@@ -368,7 +368,17 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
           })
         )}
       </Typography>
-      <AvatarGroup total={customersNum} max={10}>
+      <AvatarGroup
+        total={customersNum}
+        max={10}
+        spacing={4}
+        sx={{
+          '& .MuiAvatar-root': {
+            width: 24,
+            height: 24,
+            fontSize: '0.6rem',
+          },
+        }}>
         {customers.map((x) => (
           <Avatar
             key={x.id}
@@ -376,7 +386,6 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
             alt={x.customer?.metadata?.anonymous ? '' : x.customer?.name}
             src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
-            sx={{ width: 24, height: 24 }}
           />
         ))}
       </AvatarGroup>
@@ -708,7 +717,17 @@ function CheckoutDonateInner({
           toolbar={
             isMobile ? null : (
               <Box display="flex" alignItems="center" gap={1} sx={{ color: 'text.secondary' }}>
-                <AvatarGroup total={customers?.length} max={5}>
+                <AvatarGroup
+                  total={customers?.length}
+                  max={5}
+                  spacing={4}
+                  sx={{
+                    '& .MuiAvatar-root': {
+                      width: 18,
+                      height: 18,
+                      fontSize: '0.6rem',
+                    },
+                  }}>
                   {customers.map((x: any) => (
                     <Avatar
                       key={x.id}
@@ -716,10 +735,9 @@ function CheckoutDonateInner({
                       src={getCustomerAvatar(
                         x.customer?.did,
                         x?.updated_at ? new Date(x.updated_at).toISOString() : '',
-                        18
+                        24
                       )}
                       variant="circular"
-                      sx={{ width: 18, height: 18 }}
                     />
                   ))}
                 </AvatarGroup>

package/src/components/country-select.tsx

@@ -230,6 +230,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
       }}
       sx={{
         width: '100%',
+        minWidth: '60px',
         fieldset: {
           display: 'none',
         },

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/indent */
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Typography, Stack, Alert, SxProps } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -13,11 +13,12 @@ import type {
   TInvoiceExpanded,
 } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
+import pWaitFor from 'p-wait-for';
 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';
@@ -113,6 +114,7 @@ function OverdueInvoicePayment({
   const sourceType = subscriptionId ? 'subscription' : 'customer';
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
+  const customerIdRef = useRef(effectiveCustomerId);
   const {
     data = {
       summary: {},
@@ -123,6 +125,11 @@ function OverdueInvoicePayment({
     runAsync: refresh,
   } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
     ready: !!subscriptionId || !!effectiveCustomerId,
+    onSuccess: (res) => {
+      if (res.customer?.id && res.customer?.id !== customerIdRef.current) {
+        customerIdRef.current = res.customer?.id;
+      }
+    },
   });
 
   const detailUrl = useMemo(() => {
@@ -163,16 +170,50 @@ function OverdueInvoicePayment({
     }
   );
 
+  const isCrossOriginRequest = isCrossOrigin();
+
   const subscription = useSubscription('events');
+  const waitForInvoiceAllPaid = async () => {
+    let isPaid = false;
+    await pWaitFor(
+      async () => {
+        const res = await refresh();
+        isPaid = res.invoices?.length === 0;
+        return isPaid;
+      },
+      { interval: 2000, timeout: 3 * 60 * 1000 }
+    );
+    return isPaid;
+  };
+
+  const handleConnected = async () => {
+    if (isCrossOriginRequest) {
+      try {
+        const paid = await waitForInvoiceAllPaid();
+        if (successToast) {
+          Toast.close();
+          Toast.success(t('payment.customer.invoice.paySuccess'));
+        }
+        if (paid) {
+          setDialogOpen(false);
+          onPaid(sourceId as string, selectCurrencyId, sourceType as 'subscription' | 'customer');
+        }
+      } catch (err) {
+        console.error('Check payment status failed:', err);
+      }
+    }
+  };
+
   useEffect(() => {
-    if (subscription) {
+    if (subscription && !isCrossOriginRequest) {
       subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
 
         if (
           (subscriptionId && response.subscription_id === subscriptionId) ||
-          (effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id))
+          (effectiveCustomerId && effectiveCustomerId === response.customer_id) ||
+          (customerIdRef.current && customerIdRef.current === response.customer_id)
         ) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
@@ -214,9 +255,11 @@ function OverdueInvoicePayment({
         saveConnect: false,
         action: 'collect-batch',
         prefix: joinURL(getPrefix(), '/api/did'),
+        useSocket: !isCrossOriginRequest,
         extraParams,
         onSuccess: () => {
           connect.close();
+          handleConnected();
           setPayLoading(false);
           setPaymentStatus((prev) => ({
             ...prev,

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 '-';
@@ -586,6 +597,19 @@ export function formatPriceDisplay(
   return [amount, then].filter(Boolean).join(' ');
 }
 
+export function hasMultipleRecurringIntervals(items: TLineItemExpanded[]): boolean {
+  const intervals = new Set<string>();
+  for (const item of items) {
+    if (item.price?.recurring?.interval && item.price?.type === 'recurring') {
+      intervals.add(`${item.price.recurring.interval}-${item.price.recurring.interval_count}`);
+      if (intervals.size > 1) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 export function getFreeTrialTime(
   { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
   locale: string = 'en'
@@ -674,8 +698,10 @@ export function formatCheckoutHeadlines(
     locale
   );
   const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
+  const differentRecurring = hasMultipleRecurringIntervals(items);
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
+    // check if there has different recurring price
     const subscription = [
       hasMetered ? t('payment.checkout.least', locale) : '',
       fromUnitToToken(
@@ -738,7 +764,7 @@ export function formatCheckoutHeadlines(
       action: t('payment.checkout.sub1', locale, { name }),
       amount,
       then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
-      showThen: hasMetered,
+      showThen: hasMetered && !differentRecurring,
       actualAmount,
     };
     return {
@@ -769,7 +795,7 @@ export function formatCheckoutHeadlines(
       hasMetered && Number(subscription) === 0,
       locale
     ),
-    showThen: true,
+    showThen: !differentRecurring,
     actualAmount,
   };
 

package/src/locales/en.tsx

@@ -118,6 +118,7 @@ export default flat({
       next: {
         subscription: 'View subscription',
         invoice: 'View invoice',
+        view: 'View',
       },
       paymentRequired: 'Payment Required',
       staking: {

package/src/locales/zh.tsx

@@ -118,6 +118,7 @@ export default flat({
       next: {
         subscription: '查看订阅',
         invoice: '查看账单',
+        view: '查看',
       },
       paymentRequired: '支付金额',
       staking: {

package/src/payment/form/currency.tsx

@@ -3,7 +3,7 @@ import { Avatar, Card, Radio, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
 type Props = {
-  value: number;
+  value: string;
   currencies: TPaymentCurrency[];
   onChange: Function;
 };
@@ -18,13 +18,13 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
         gap: 12,
         gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
       }}>
-      {currencies.map((x, i) => {
-        const selected = i === value;
+      {currencies.map((x) => {
+        const selected = x.id === value;
         return (
           <Card
             key={x.id}
             variant="outlined"
-            onClick={() => onChange(i)}
+            onClick={() => onChange(x.id, (x as any).method?.id)}
             className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
             <Stack direction="row" alignItems="center" sx={{ position: 'relative' }}>
               <Avatar src={x.logo} alt={x.name} sx={{ width: 40, height: 40, marginRight: '12px' }} />

package/src/payment/form/index.tsx

@@ -4,17 +4,11 @@ import 'react-international-phone/style.css';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
-import type {
-  TCheckoutSession,
-  TCustomer,
-  TInvoice,
-  TPaymentIntent,
-  TPaymentMethodExpanded,
-} from '@blocklet/payment-types';
+import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
@@ -30,8 +24,8 @@ import {
   formatError,
   formatQuantityInventory,
   getPrefix,
-  getQueryParams,
   getStatementDescriptor,
+  isCrossOrigin,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
 import AddressForm from './address';
@@ -161,7 +155,6 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId,
   onlyShowBtn,
   isDonation = false,
 }: PageData) {
@@ -214,37 +207,15 @@ export default function PaymentForm({
 
   const currencies = flattenPaymentMethods(paymentMethods);
 
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
-    const query = getQueryParams(window.location.href);
-    const queryCurrencyId = query.currencyId || currencyId;
-    const index = currencies.findIndex((x) => x.id === queryCurrencyId);
-    return index >= 0 ? index : 0;
-  });
-
-  const handleCurrencyChange = (index: number) => {
-    setPaymentCurrencyIndex(index);
-    const selectedCurrencyId = currencies[index]?.id;
-    if (selectedCurrencyId) {
-      saveCurrencyPreference(selectedCurrencyId, session?.user?.did);
-    }
-  };
-
   const onCheckoutComplete = useMemoizedFn(async ({ response }: { response: TCheckoutSession }) => {
     if (response.id === checkoutSession.id && state.paid === false) {
       await handleConnected();
     }
   });
 
-  const onInvoicePaid = useMemoizedFn(async ({ response }: { response: TInvoice }) => {
-    if (response.customer_id === customer?.id && state.customerLimited) {
-      await onAction();
-    }
-  });
-
   useEffect(() => {
     if (subscription) {
       subscription.on('checkout.session.completed', onCheckoutComplete);
-      subscription.on('invoice.paid', onInvoicePaid);
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -316,11 +287,6 @@ export default function PaymentForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
 
-  useEffect(() => {
-    setValue('payment_method', (currencies[paymentCurrencyIndex] as any)?.method?.id);
-    setValue('payment_currency', currencies[paymentCurrencyIndex]?.id);
-  }, [paymentCurrencyIndex, currencies, setValue]);
-
   const paymentMethod = useWatch({ control, name: 'payment_method' });
 
   // const domSize = useSize(document.body);
@@ -426,6 +392,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();
@@ -440,6 +407,11 @@ export default function PaymentForm({
               setState({ submitting: false, paying: false });
               onError(err);
             },
+            messages: {
+              title: 'DID Connect',
+              scan: 'Use following methods to complete this payment',
+              confirm: 'Confirm',
+            },
           } as any);
         }
       }
@@ -488,14 +460,14 @@ export default function PaymentForm({
       }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
-      } else {
-        session.bindWallet(() => {
-          // timeout required because https://github.com/ArcBlock/ux/issues/1241
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 2000);
-        });
+        return;
       }
+      session.bindWallet(() => {
+        // timeout required because https://github.com/ArcBlock/ux/issues/1241
+        setTimeout(() => {
+          handleSubmit(onFormSubmit, onFormError)();
+        }, 2000);
+      });
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -620,11 +592,15 @@ export default function PaymentForm({
                 <Controller
                   name="payment_currency"
                   control={control}
-                  render={() => (
+                  render={({ field }) => (
                     <CurrencySelector
-                      value={paymentCurrencyIndex}
+                      value={field.value}
                       currencies={currencies}
-                      onChange={handleCurrencyChange}
+                      onChange={(id: string, methodId: string) => {
+                        field.onChange(id);
+                        setValue('payment_method', methodId);
+                        saveCurrencyPreference(id, session?.user?.did);
+                      }}
                     />
                   )}
                 />

package/src/payment/form/stripe/form.tsx

@@ -178,10 +178,12 @@ function StripeCheckoutForm({
 
   return (
     <Content onSubmit={handleSubmit}>
-      {(!state.paymentMethod || state.paymentMethod === 'card') && (
+      {(!state.paymentMethod || ['link', 'card'].includes(state.paymentMethod)) && (
         <LinkAuthenticationElement
           options={{
-            defaultEmail: customer.email,
+            defaultValues: {
+              email: customer.email,
+            },
           }}
         />
       )}

package/src/payment/index.tsx

@@ -142,6 +142,16 @@ function PaymentInner({
     },
   });
 
+  useEffect(() => {
+    if (defaultCurrencyId) {
+      methods.setValue('payment_currency', defaultCurrencyId);
+    }
+    if (defaultMethodId) {
+      methods.setValue('payment_method', defaultMethodId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultCurrencyId, defaultMethodId]);
+
   useEffect(() => {
     if (!isMobileSafari()) {
       return () => {};
@@ -258,7 +268,7 @@ function PaymentInner({
                   // @ts-ignore
                   state.checkoutSession.subscription_data?.min_stake_amount || 0
                 )}
-                showStaking={method.type === 'arcblock'}
+                showStaking={method.type === 'arcblock' && !state.checkoutSession.subscription_data?.no_stake}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
@@ -290,6 +300,7 @@ function PaymentInner({
               action={state.checkoutSession.mode}
               invoiceId={state.checkoutSession.invoice_id}
               subscriptionId={state.checkoutSession.subscription_id}
+              subscriptions={state.checkoutSession.subscriptions}
               message={
                 paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
                 t(

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 = () => {