@blocklet/payment-react 1.21.15 → 1.21.17

package/lib/locales/en.js

@@ -115,7 +115,8 @@ module.exports = (0, _flat.default)({
       cancel: "Cancel"
     },
     paymentMethod: "Payment Method",
-    viewInvoice: "View Invoice"
+    viewInvoice: "View Invoice",
+    submit: "Submit"
   },
   payment: {
     checkout: {
@@ -453,7 +454,11 @@ module.exports = (0, _flat.default)({
         amountApplied: "Applied Credit",
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
+        payProcessing: "Payment is being processed, please refresh in a moment",
         payError: "Failed to pay the invoice",
+        sync: "Sync Status",
+        syncing: "Syncing...",
+        syncSuccess: "Synced successfully",
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
@@ -462,7 +467,16 @@ module.exports = (0, _flat.default)({
         invoiceNumber: "Invoice Number",
         emptyList: "No Invoices",
         noPaymentRequired: "No Payment Required",
-        payBatch: "Pay Due Invoices"
+        payBatch: "Pay Due Invoices",
+        stripePayDescription: "Complete payment using your saved payment method or add a new one.",
+        amount: "Amount",
+        paymentConfirmTitle: "Payment Confirmation",
+        paymentConfirmDescription: "After completing this payment, the payment method you use will be automatically set as the default for this subscription. Additionally, we will retry payment for any other unpaid invoices associated with this subscription.",
+        continue: "Continue"
+      },
+      overduePayment: {
+        setupPaymentDescription: "Use your saved card or add a new one to complete payment via Stripe.",
+        totalAmount: "Total Amount"
       },
       payment: {
         empty: "There are no payments",
@@ -531,7 +545,8 @@ module.exports = (0, _flat.default)({
         list: "Past Due Invoices:",
         empty: "There are no overdue invoices for your subscription {name}.",
         retry: "Retry",
-        paid: "Paid"
+        paid: "Paid",
+        processing: "Processing"
       }
     }
   },

package/lib/locales/zh.js

@@ -115,7 +115,8 @@ module.exports = (0, _flat.default)({
       cancel: "\u53D6\u6D88"
     },
     paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
-    viewInvoice: "\u67E5\u770B\u8D26\u5355"
+    viewInvoice: "\u67E5\u770B\u8D26\u5355",
+    submit: "\u63D0\u4EA4"
   },
   payment: {
     checkout: {
@@ -457,7 +458,11 @@ module.exports = (0, _flat.default)({
         amountApplied: "\u4F59\u989D\u53D8\u66F4",
         pay: "\u652F\u4ED8\u6B64\u8D26\u5355",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
+        payProcessing: "\u652F\u4ED8\u5904\u7406\u4E2D\uFF0C\u8BF7\u7A0D\u5019\u5237\u65B0\u67E5\u770B",
         payError: "\u652F\u4ED8\u5931\u8D25",
+        sync: "\u540C\u6B65\u72B6\u6001",
+        syncing: "\u540C\u6B65\u4E2D...",
+        syncSuccess: "\u540C\u6B65\u6210\u529F",
         renew: "\u6062\u590D\u8BA2\u9605",
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
@@ -466,7 +471,10 @@ module.exports = (0, _flat.default)({
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
         emptyList: "\u6CA1\u6709\u8D26\u5355",
         noPaymentRequired: "\u65E0\u9700\u652F\u4ED8",
-        payBatch: "\u652F\u4ED8\u6B20\u6B3E"
+        payBatch: "\u652F\u4ED8\u6B20\u6B3E",
+        paymentConfirmTitle: "\u652F\u4ED8\u786E\u8BA4",
+        paymentConfirmDescription: "\u5B8C\u6210\u672C\u6B21\u652F\u4ED8\u540E\uFF0C\u60A8\u4F7F\u7528\u7684\u652F\u4ED8\u65B9\u5F0F\u5C06\u81EA\u52A8\u8BBE\u7F6E\u4E3A\u8BE5\u8BA2\u9605\u7684\u9ED8\u8BA4\u652F\u4ED8\u65B9\u5F0F\u3002\u6B64\u5916\uFF0C\u6211\u4EEC\u8FD8\u5C06\u5BF9\u8BE5\u8BA2\u9605\u7684\u5176\u4ED6\u6B20\u8D39\u8D26\u5355\u8FDB\u884C\u91CD\u8BD5\u6536\u8D39\u3002",
+        continue: "\u7EE7\u7EED"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
@@ -535,7 +543,8 @@ module.exports = (0, _flat.default)({
         list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
         empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355",
         retry: "\u91CD\u65B0\u652F\u4ED8",
-        paid: "\u5DF2\u652F\u4ED8"
+        paid: "\u5DF2\u652F\u4ED8",
+        processing: "\u652F\u4ED8\u4E2D"
       }
     }
   },

package/lib/payment/form/stripe/form.d.ts

@@ -6,6 +6,7 @@ export type StripeCheckoutFormProps = {
     mode: string;
     onConfirm: Function;
     returnUrl?: string;
+    submitButtonText?: string;
 };
 export type StripeCheckoutProps = {
     clientSecret: string;
@@ -16,5 +17,7 @@ export type StripeCheckoutProps = {
     onConfirm: Function;
     onCancel: Function;
     returnUrl?: string;
+    title?: string;
+    submitButtonText?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;

package/lib/payment/form/stripe/form.js

@@ -37,7 +37,8 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
-  returnUrl = ""
+  returnUrl = "",
+  submitButtonText = ""
 }) {
   const stripe = useStripe();
   const elements = useElements();
@@ -247,7 +248,7 @@ function StripeCheckoutForm({
       variant: "contained",
       color: "primary",
       size: "large",
-      children: t("payment.checkout.continue", {
+      children: submitButtonText || t("payment.checkout.continue", {
         action: t(`payment.checkout.${mode}`)
       })
     }), state.message && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -276,7 +277,9 @@ function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
-  returnUrl = ""
+  returnUrl = "",
+  title = "",
+  submitButtonText = ""
 }) {
   const stripePromise = loadStripe(publicKey);
   const {
@@ -301,7 +304,7 @@ function StripeCheckout({
     onCancel();
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
-    title: t("payment.checkout.cardPay", {
+    title: title || t("payment.checkout.cardPay", {
       action: t(`payment.checkout.${mode}`)
     }),
     showCloseButton: state.closable,
@@ -352,7 +355,8 @@ function StripeCheckout({
         mode,
         customer,
         onConfirm,
-        returnUrl
+        returnUrl,
+        submitButtonText
       })
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.21.15",
+  "version": "1.21.17",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.21.15",
+    "@blocklet/payment-types": "1.21.17",
     "@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.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "fd48f9233f19514b537e30b013e09a7d9f7a9f48"
+  "gitHead": "a823bc05e706681ee70451437b0460aba909c253"
 }

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

@@ -22,6 +22,7 @@ import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/uti
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
+import StripePaymentAction from './stripe-payment-action';
 
 type DialogProps = {
   open?: boolean;
@@ -112,12 +113,20 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState<{ [key: string]: number }>({});
-  const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' }>({});
+  const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' | 'processing' }>(
+    {}
+  );
+  const [stripePaymentInProgress, setStripePaymentInProgress] = useState<{ [key: string]: boolean }>({});
+  const stripePaymentInProgressRef = useRef(stripePaymentInProgress);
 
   const sourceType = subscriptionId ? 'subscription' : 'customer';
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
   const customerIdRef = useRef(effectiveCustomerId);
+
+  useEffect(() => {
+    stripePaymentInProgressRef.current = stripePaymentInProgress;
+  }, [stripePaymentInProgress]);
   const {
     data = {
       summary: {},
@@ -154,6 +163,36 @@ function OverdueInvoicePayment({
 
   const debouncedHandleInvoicePaid = debounce(
     async (currencyId: string) => {
+      // If Stripe payment is in progress, check if it's complete before refreshing
+      if (stripePaymentInProgressRef.current[currencyId]) {
+        try {
+          const checkData = await fetchOverdueInvoices({
+            subscriptionId,
+            customerId: effectiveCustomerId,
+            authToken,
+          });
+
+          const hasRemainingInvoices = checkData.invoices?.some((inv: Invoice) => inv.currency_id === currencyId);
+
+          // Only refresh UI when all invoices are paid
+          if (hasRemainingInvoices) {
+            return;
+          }
+
+          // Clear Stripe payment state
+          setStripePaymentInProgress((prev) => {
+            const newState = { ...prev };
+            delete newState[currencyId];
+            return newState;
+          });
+          setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'success' }));
+        } catch (err) {
+          console.error('Error checking Stripe payment completion:', err);
+          return;
+        }
+      }
+
+      // Now refresh and update UI
       if (successToast) {
         Toast.close();
         Toast.success(t('payment.customer.invoice.paySuccess'));
@@ -189,7 +228,7 @@ function OverdueInvoicePayment({
     return isPaid;
   };
 
-  const handleConnected = async () => {
+  const handleConnected = async (currencyId: string, isStripe = false) => {
     if (isCrossOriginRequest) {
       try {
         const paid = await waitForInvoiceAllPaid();
@@ -199,32 +238,43 @@ function OverdueInvoicePayment({
         }
         if (paid) {
           setDialogOpen(false);
-          onPaid(sourceId as string, selectCurrencyId, sourceType as 'subscription' | 'customer');
+          onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
         }
       } catch (err) {
         console.error('Check payment status failed:', err);
       }
+    } else if (isStripe) {
+      setStripePaymentInProgress((prev) => ({ ...prev, [currencyId]: true }));
+      setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'processing' }));
     }
   };
 
   useEffect(() => {
-    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 && effectiveCustomerId === response.customer_id) ||
-          (customerIdRef.current && customerIdRef.current === response.customer_id)
-        ) {
-          if (!processedCurrencies[uniqueKey]) {
-            setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
-            debouncedHandleInvoicePaid(response.currency_id);
-          }
-        }
-      });
+    if (!subscription || isCrossOriginRequest) {
+      return undefined;
     }
+
+    const handleInvoicePaid = ({ response }: { response: TInvoiceExpanded }) => {
+      const relevantId = subscriptionId || response.customer_id;
+      const uniqueKey = `${relevantId}-${response.currency_id}`;
+
+      if (
+        (subscriptionId && response.subscription_id === subscriptionId) ||
+        (effectiveCustomerId && effectiveCustomerId === response.customer_id) ||
+        (customerIdRef.current && customerIdRef.current === response.customer_id)
+      ) {
+        if (!processedCurrencies[uniqueKey]) {
+          setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
+          debouncedHandleInvoicePaid(response.currency_id);
+        }
+      }
+    };
+
+    subscription.on('invoice.paid', handleInvoicePaid);
+
+    return () => {
+      subscription.off('invoice.paid', handleInvoicePaid);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subscription, subscriptionId, effectiveCustomerId]);
 
@@ -268,7 +318,7 @@ function OverdueInvoicePayment({
         } as any,
         onSuccess: () => {
           connect.close();
-          handleConnected();
+          handleConnected(currency.id);
           setPayLoading(false);
           setPaymentStatus((prev) => ({
             ...prev,
@@ -325,7 +375,7 @@ function OverdueInvoicePayment({
   const renderPayButton = (
     item: SummaryItem,
     primaryButton = true,
-    props: {
+    options: {
       variant?: 'contained' | 'text';
       sx?: SxProps;
     } = {
@@ -339,8 +389,7 @@ function OverdueInvoicePayment({
     if (status === 'success') {
       return (
         <Button
-          // eslint-disable-next-line react/prop-types
-          variant={props?.variant || 'contained'}
+          variant={options?.variant || 'contained'}
           size="small"
           {...(primaryButton
             ? {}
@@ -355,7 +404,7 @@ function OverdueInvoicePayment({
 
     if (status === 'error') {
       return (
-        <Button variant="contained" size="small" onClick={() => handlePay(item)} {...props}>
+        <Button variant={options?.variant || 'contained'} size="small" onClick={() => handlePay(item)} sx={options?.sx}>
           {t('payment.subscription.overdue.retry')}
         </Button>
       );
@@ -363,19 +412,42 @@ function OverdueInvoicePayment({
 
     if (item.method.type === 'stripe') {
       return (
-        <Button variant="contained" color="primary" onClick={() => window.open(detailUrl, '_blank')} {...props}>
-          {t('payment.subscription.overdue.viewNow')}
-        </Button>
+        <StripePaymentAction
+          subscriptionId={subscriptionId}
+          customerId={!subscriptionId ? effectiveCustomerId : undefined}
+          currencyId={currency.id}
+          paymentMethod={item.method}
+          onSuccess={() => {
+            handleConnected(currency.id, true);
+          }}
+          onError={() => {
+            setPaymentStatus((prev) => ({ ...prev, [currency.id]: 'error' }));
+            setStripePaymentInProgress((prev) => ({ ...prev, [currency.id]: false }));
+          }}>
+          {(onPay: () => void, paying: boolean) => (
+            <LoadingButton
+              variant={options?.variant || 'contained'}
+              size="small"
+              disabled={paying || status === 'processing'}
+              loading={paying || status === 'processing'}
+              onClick={onPay}
+              sx={options?.sx}>
+              {status === 'processing'
+                ? t('payment.subscription.overdue.processing')
+                : t('payment.subscription.overdue.payNow')}
+            </LoadingButton>
+          )}
+        </StripePaymentAction>
       );
     }
     return (
       <LoadingButton
-        variant="contained"
+        variant={options?.variant || 'contained'}
         size="small"
         disabled={inProcess}
         loading={inProcess}
         onClick={() => handlePay(item)}
-        {...props}>
+        sx={options?.sx}>
         {t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );

package/src/components/payment-beneficiaries.tsx

@@ -3,7 +3,7 @@ import { Avatar, Box, Stack, Typography } from '@mui/material';
 import { BN } from '@ocap/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DID from '@arcblock/ux/lib/DID';
-import { formatBNStr } from '../libs/util';
+import { formatBNStr, formatLinkWithLocale } from '../libs/util';
 
 export interface TBeneficiary {
   name: string;
@@ -26,7 +26,7 @@ interface BenefitsProps {
 }
 
 export default function PaymentBeneficiaries({ data, currency, totalAmount = '0' }: BenefitsProps) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   return (
     <Stack spacing={2}>
       <Typography
@@ -78,7 +78,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                   variant="subtitle2"
                   onClick={() => {
                     if (item.url) {
-                      window.open(item.url, '_blank');
+                      window.open(formatLinkWithLocale(item.url, locale), '_blank');
                     }
                   }}
                   sx={{

package/src/components/stripe-payment-action.tsx

@@ -0,0 +1,220 @@
+/* eslint-disable react/require-default-props */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Dialog } from '@arcblock/ux';
+import type { Customer, TPaymentMethod, TInvoiceExpanded } from '@blocklet/payment-types';
+import { Button, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect, useRef } from 'react';
+
+import StripeForm from '../payment/form/stripe';
+import api from '../libs/api';
+import { formatError } from '../libs/util';
+
+export interface StripePaymentActionProps {
+  invoice?: TInvoiceExpanded;
+  invoiceIds?: string[];
+  subscriptionId?: string;
+  customerId?: string;
+  currencyId?: string;
+  paymentMethod?: TPaymentMethod;
+
+  autoTrigger?: boolean;
+  onExternalPayment?: (invoiceId?: string) => void;
+
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+  onClose?: () => void;
+
+  children?: (onPay: () => void, loading: boolean) => React.ReactNode;
+}
+
+export default function StripePaymentAction(props: StripePaymentActionProps) {
+  const {
+    invoice,
+    invoiceIds,
+    subscriptionId,
+    customerId,
+    currencyId,
+    paymentMethod,
+    autoTrigger = false,
+    onExternalPayment,
+    onSuccess,
+    onError,
+    onClose,
+    children,
+  } = props;
+  const { t } = useLocaleContext();
+
+  const [state, setState] = useSetState<{
+    paying: boolean;
+    confirmDialog: boolean;
+    stripeDialog: boolean;
+    clientSecret: string | null;
+    publishableKey: string | null;
+    customer: Customer | null;
+  }>({
+    paying: false,
+    confirmDialog: false,
+    stripeDialog: false,
+    clientSecret: null,
+    publishableKey: null,
+    customer: null,
+  });
+
+  const autoTriggerRef = useRef(false);
+
+  useEffect(() => {
+    if (autoTrigger && !autoTriggerRef.current) {
+      autoTriggerRef.current = true;
+      handlePay();
+    }
+  }, [autoTrigger]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePay = async () => {
+    if (state.paying) {
+      return;
+    }
+
+    const hasSubscription = !!(subscriptionId || invoice?.subscription_id);
+    const method = paymentMethod || invoice?.paymentMethod;
+    const shouldShowConfirm = hasSubscription && method?.type === 'stripe';
+
+    if (shouldShowConfirm) {
+      setState({ confirmDialog: true });
+      return;
+    }
+
+    await proceedWithPayment();
+  };
+
+  const proceedWithPayment = async () => {
+    setState({ paying: true, confirmDialog: false });
+
+    const derivedCurrencyId = currencyId || invoice?.currency_id || invoice?.paymentCurrency?.id;
+    const derivedPaymentMethod = paymentMethod || invoice?.paymentMethod;
+    const isStripePayment = derivedPaymentMethod?.type === 'stripe';
+
+    if (isStripePayment && derivedCurrencyId) {
+      const stripePayload: Record<string, any> = {};
+
+      if (invoiceIds && invoiceIds.length > 0) {
+        stripePayload.invoice_ids = invoiceIds;
+      } else if (invoice) {
+        stripePayload.invoice_ids = [invoice.id];
+      } else if (subscriptionId) {
+        stripePayload.subscription_id = subscriptionId;
+      } else if (customerId) {
+        stripePayload.customer_id = customerId;
+      }
+
+      if (derivedCurrencyId) {
+        stripePayload.currency_id = derivedCurrencyId;
+      }
+
+      try {
+        const { data: paymentData } = await api.post('/api/invoices/pay-stripe', stripePayload);
+        setState({
+          paying: false,
+          stripeDialog: true,
+          clientSecret: paymentData.client_secret,
+          publishableKey: paymentData.publishable_key,
+          customer: paymentData.customer || null,
+        });
+        return;
+      } catch (err: any) {
+        const error = formatError(err);
+        Toast.error(error);
+        setState({ paying: false });
+        onError?.(error);
+        return;
+      }
+    }
+
+    setState({ paying: false });
+    if (onExternalPayment) {
+      onExternalPayment(invoice?.id);
+      return;
+    }
+
+    Toast.error(t('payment.customer.invoice.payError'));
+    onError?.(new Error('EXTERNAL_PAYMENT_HANDLER_NOT_PROVIDED'));
+  };
+
+  const handleConfirmCancel = () => {
+    setState({ confirmDialog: false, paying: false });
+    onClose?.();
+  };
+
+  const handleStripeConfirm = () => {
+    Toast.success(t('payment.customer.invoice.payProcessing'));
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null,
+    });
+
+    setTimeout(() => {
+      onSuccess?.();
+    }, 2000);
+  };
+
+  const handleStripeCancel = () => {
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null,
+    });
+    onClose?.();
+  };
+
+  return (
+    <>
+      {children?.(handlePay, state.paying)}
+
+      {state.confirmDialog && (
+        <Dialog
+          open={state.confirmDialog}
+          title={t('payment.customer.invoice.paymentConfirmTitle')}
+          onClose={handleConfirmCancel}
+          maxWidth="sm"
+          PaperProps={{
+            style: {
+              minHeight: 0,
+            },
+          }}
+          actions={[
+            <Button key="cancel" variant="outlined" onClick={handleConfirmCancel}>
+              {t('common.cancel')}
+            </Button>,
+            <Button key="continue" variant="contained" onClick={proceedWithPayment}>
+              {t('payment.customer.invoice.continue')}
+            </Button>,
+          ]}>
+          <Typography variant="body1" sx={{ color: 'text.secondary', mt: -2 }}>
+            {t('payment.customer.invoice.paymentConfirmDescription')}
+          </Typography>
+        </Dialog>
+      )}
+
+      {state.stripeDialog && state.clientSecret && state.publishableKey && state.customer && (
+        <StripeForm
+          clientSecret={state.clientSecret}
+          intentType="setup_intent"
+          publicKey={state.publishableKey}
+          customer={state.customer}
+          mode="setup"
+          title={t('payment.customer.invoice.pay')}
+          submitButtonText={t('common.submit')}
+          onConfirm={handleStripeConfirm}
+          onCancel={handleStripeCancel}
+          returnUrl={window.location.href}
+        />
+      )}
+    </>
+  );
+}