@blocklet/payment-react 1.21.16 → 1.21.17

package/.aigne/doc-smith/translation-cache.yaml

@@ -0,0 +1,11 @@
+Payment Kit UI (React):
+  en: Payment Kit UI (React)
+  zh: 支付套件 UI (React)
+  zh-TW: 支付套件 UI (React)
+  ja: 決済キットUI (React)
+"@blocklet/payment-react is a React library for blocklet payment systems with Payment Kit.":
+  en: "@blocklet/payment-react is a React library for blocklet payment systems
+    with Payment Kit."
+  zh: "@blocklet/payment-react 是一个适用于 blocklet 支付系统的 Payment Kit React 库。"
+  zh-TW: "@blocklet/payment-react 是一個適用於 blocklet 支付系統的 Payment Kit React 函式庫。"
+  ja: "@blocklet/payment-react は、blocklet決済システムに対応したPayment KitのReactライブラリです。"

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

@@ -14,6 +14,7 @@ import { formatAmount, formatError, getPrefix, isCrossOrigin } from "../libs/uti
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
 import LoadingButton from "./loading-button.js";
+import StripePaymentAction from "./stripe-payment-action.js";
 const fetchOverdueInvoices = async (params) => {
   if (!params.subscriptionId && !params.customerId) {
     throw new Error("Either subscriptionId or customerId must be provided");
@@ -49,11 +50,18 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState({});
-  const [paymentStatus, setPaymentStatus] = useState({});
+  const [paymentStatus, setPaymentStatus] = useState(
+    {}
+  );
+  const [stripePaymentInProgress, setStripePaymentInProgress] = useState({});
+  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: {},
@@ -87,6 +95,28 @@ function OverdueInvoicePayment({
   }, [data?.summary]);
   const debouncedHandleInvoicePaid = debounce(
     async (currencyId) => {
+      if (stripePaymentInProgressRef.current[currencyId]) {
+        try {
+          const checkData = await fetchOverdueInvoices({
+            subscriptionId,
+            customerId: effectiveCustomerId,
+            authToken
+          });
+          const hasRemainingInvoices = checkData.invoices?.some((inv) => inv.currency_id === currencyId);
+          if (hasRemainingInvoices) {
+            return;
+          }
+          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;
+        }
+      }
       if (successToast) {
         Toast.close();
         Toast.success(t("payment.customer.invoice.paySuccess"));
@@ -119,7 +149,7 @@ function OverdueInvoicePayment({
     );
     return isPaid;
   };
-  const handleConnected = async () => {
+  const handleConnected = async (currencyId, isStripe = false) => {
     if (isCrossOriginRequest) {
       try {
         const paid = await waitForInvoiceAllPaid();
@@ -129,26 +159,34 @@ function OverdueInvoicePayment({
         }
         if (paid) {
           setDialogOpen(false);
-          onPaid(sourceId, selectCurrencyId, sourceType);
+          onPaid(sourceId, currencyId, sourceType);
         }
       } 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 }) => {
-        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 void 0;
     }
+    const handleInvoicePaid = ({ response }) => {
+      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);
+    };
   }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = (item) => {
     const { currency, method } = item;
@@ -187,7 +225,7 @@ function OverdueInvoicePayment({
         },
         onSuccess: () => {
           connect.close();
-          handleConnected();
+          handleConnected(currency.id);
           setPayLoading(false);
           setPaymentStatus((prev) => ({
             ...prev,
@@ -234,7 +272,7 @@ function OverdueInvoicePayment({
     }
     return t("payment.customer.pastDue.view");
   };
-  const renderPayButton = (item, primaryButton = true, props = {
+  const renderPayButton = (item, primaryButton = true, options = {
     variant: "contained"
   }) => {
     const { currency } = item;
@@ -244,7 +282,7 @@ function OverdueInvoicePayment({
       return /* @__PURE__ */ jsx(
         Button,
         {
-          variant: props?.variant || "contained",
+          variant: options?.variant || "contained",
           size: "small",
           ...primaryButton ? {} : {
             color: "success",
@@ -255,20 +293,47 @@ function OverdueInvoicePayment({
       );
     }
     if (status === "error") {
-      return /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", onClick: () => handlePay(item), ...props, children: t("payment.subscription.overdue.retry") });
+      return /* @__PURE__ */ jsx(Button, { variant: options?.variant || "contained", size: "small", onClick: () => handlePay(item), sx: options?.sx, children: t("payment.subscription.overdue.retry") });
     }
     if (item.method.type === "stripe") {
-      return /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => window.open(detailUrl, "_blank"), ...props, children: t("payment.subscription.overdue.viewNow") });
+      return /* @__PURE__ */ jsx(
+        StripePaymentAction,
+        {
+          subscriptionId,
+          customerId: !subscriptionId ? effectiveCustomerId : void 0,
+          currencyId: currency.id,
+          paymentMethod: item.method,
+          onSuccess: () => {
+            handleConnected(currency.id, true);
+          },
+          onError: () => {
+            setPaymentStatus((prev) => ({ ...prev, [currency.id]: "error" }));
+            setStripePaymentInProgress((prev) => ({ ...prev, [currency.id]: false }));
+          },
+          children: (onPay, paying) => /* @__PURE__ */ jsx(
+            LoadingButton,
+            {
+              variant: options?.variant || "contained",
+              size: "small",
+              disabled: paying || status === "processing",
+              loading: paying || status === "processing",
+              onClick: onPay,
+              sx: options?.sx,
+              children: status === "processing" ? t("payment.subscription.overdue.processing") : t("payment.subscription.overdue.payNow")
+            }
+          )
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       LoadingButton,
       {
-        variant: "contained",
+        variant: options?.variant || "contained",
         size: "small",
         disabled: inProcess,
         loading: inProcess,
         onClick: () => handlePay(item),
-        ...props,
+        sx: options?.sx,
         children: t("payment.subscription.overdue.payNow")
       }
     );

package/es/components/payment-beneficiaries.js

@@ -3,9 +3,9 @@ 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.js";
+import { formatBNStr, formatLinkWithLocale } from "../libs/util.js";
 export default function PaymentBeneficiaries({ data, currency, totalAmount = "0" }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
     /* @__PURE__ */ jsx(
       Typography,
@@ -60,7 +60,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/es/components/stripe-payment-action.d.ts

@@ -0,0 +1,16 @@
+import type { TPaymentMethod, TInvoiceExpanded } from '@blocklet/payment-types';
+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): import("react").JSX.Element;

package/es/components/stripe-payment-action.js

@@ -0,0 +1,164 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { Dialog } from "@arcblock/ux";
+import { Button, Typography } from "@mui/material";
+import { useSetState } from "ahooks";
+import { useEffect, useRef } from "react";
+import StripeForm from "../payment/form/stripe/index.js";
+import api from "../libs/api.js";
+import { formatError } from "../libs/util.js";
+export default function StripePaymentAction(props) {
+  const {
+    invoice,
+    invoiceIds,
+    subscriptionId,
+    customerId,
+    currencyId,
+    paymentMethod,
+    autoTrigger = false,
+    onExternalPayment,
+    onSuccess,
+    onError,
+    onClose,
+    children
+  } = props;
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    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]);
+  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 = {};
+      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) {
+        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?.();
+    }, 2e3);
+  };
+  const handleStripeCancel = () => {
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null
+    });
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children?.(handlePay, state.paying),
+    state.confirmDialog && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: state.confirmDialog,
+        title: t("payment.customer.invoice.paymentConfirmTitle"),
+        onClose: handleConfirmCancel,
+        maxWidth: "sm",
+        PaperProps: {
+          style: {
+            minHeight: 0
+          }
+        },
+        actions: [
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleConfirmCancel, children: t("common.cancel") }, "cancel"),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: proceedWithPayment, children: t("payment.customer.invoice.continue") }, "continue")
+        ],
+        children: /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { color: "text.secondary", mt: -2 }, children: t("payment.customer.invoice.paymentConfirmDescription") })
+      }
+    ),
+    state.stripeDialog && state.clientSecret && state.publishableKey && state.customer && /* @__PURE__ */ jsx(
+      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
+      }
+    )
+  ] });
+}

package/es/history/invoice/list.js

@@ -12,6 +12,7 @@ import Status from "../../components/status.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
 import api from "../../libs/api.js";
+import StripePaymentAction from "../../components/stripe-payment-action.js";
 import {
   formatBNStr,
   formatError,
@@ -254,7 +255,37 @@ const InvoiceTable = React.memo((props) => {
           const { connect } = getInvoiceLink(invoice, action);
           const isVoid = invoice.status === "void";
           if (action && !hidePay) {
-            return connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+            if (connect) {
+              if (invoice.paymentMethod?.type === "stripe") {
+                return /* @__PURE__ */ jsx(
+                  StripePaymentAction,
+                  {
+                    invoice,
+                    paymentMethod: invoice.paymentMethod,
+                    onSuccess: () => {
+                      refresh();
+                    },
+                    children: (handlePay, paying) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "text",
+                        size: "small",
+                        sx: { color: "text.link" },
+                        disabled: paying,
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handlePay();
+                        },
+                        children: paying ? t("payment.checkout.processing") : t("payment.customer.invoice.pay")
+                      }
+                    )
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") });
+            }
+            return /* @__PURE__ */ jsx(
               Button,
               {
                 component: "a",
@@ -518,7 +549,32 @@ const InvoiceList = React.memo((props) => {
                     flex: 1,
                     textAlign: "right"
                   },
-                  children: action ? connect ? /* @__PURE__ */ jsx(
+                  children: action ? connect ? invoice.paymentMethod?.type === "stripe" ? /* @__PURE__ */ jsx(
+                    StripePaymentAction,
+                    {
+                      invoice,
+                      paymentMethod: invoice.paymentMethod,
+                      onSuccess: async () => {
+                        await reloadAsync();
+                      },
+                      children: (handlePay, paying) => /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "contained",
+                          color: "primary",
+                          size: "small",
+                          sx: { whiteSpace: "nowrap" },
+                          disabled: paying,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handlePay();
+                          },
+                          children: paying ? t("payment.checkout.processing") : t("payment.customer.invoice.pay")
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: "contained",

package/es/index.d.ts

@@ -32,6 +32,7 @@ import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
+import StripePaymentAction from './components/stripe-payment-action';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
@@ -55,5 +56,6 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };
 export type { CountrySelectProps } from './components/country-select';
+export type { StripePaymentActionProps } from './components/stripe-payment-action';

package/es/index.js

@@ -32,6 +32,7 @@ import TruncatedText from "./components/truncated-text.js";
 import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
 import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
+import StripePaymentAction from "./components/stripe-payment-action.js";
 import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
 import LoadingButton from "./components/loading-button.js";
 import ResumeSubscription from "./components/resume-subscription.js";
@@ -88,6 +89,7 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
+  StripePaymentAction,
   PaymentBeneficiaries,
   LoadingButton,
   DonateDetails,

package/es/libs/util.d.ts

@@ -135,3 +135,4 @@ export declare function parseMarkedText(text: string): Array<{
 export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;
 export declare function isCreditMetered(price: TPrice): boolean;
 export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;
+export declare function formatLinkWithLocale(url: string, locale?: string): string;

package/es/libs/util.js

@@ -1039,3 +1039,19 @@ export function showStaking(method, currency, noStake) {
   }
   return false;
 }
+export function formatLinkWithLocale(url, locale) {
+  if (!locale || !url) {
+    return url;
+  }
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("locale", locale);
+    return urlObj.toString();
+  } catch (error) {
+    if (/[?&]locale=[^&]*/.test(url)) {
+      return url.replace(/([?&])locale=[^&]*/, `$1locale=${locale}`);
+    }
+    const separator = url.includes("?") ? "&" : "?";
+    return `${url}${separator}locale=${locale}`;
+  }
+}

package/es/locales/en.js

@@ -108,7 +108,8 @@ export default flat({
       cancel: "Cancel"
     },
     paymentMethod: "Payment Method",
-    viewInvoice: "View Invoice"
+    viewInvoice: "View Invoice",
+    submit: "Submit"
   },
   payment: {
     checkout: {
@@ -446,7 +447,11 @@ export default flat({
         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",
@@ -455,7 +460,16 @@ export default flat({
         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",
@@ -524,7 +538,8 @@ export default flat({
         list: "Past Due Invoices:",
         empty: "There are no overdue invoices for your subscription {name}.",
         retry: "Retry",
-        paid: "Paid"
+        paid: "Paid",
+        processing: "Processing"
       }
     }
   },

package/es/locales/zh.js

@@ -108,7 +108,8 @@ export default flat({
       cancel: "\u53D6\u6D88"
     },
     paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
-    viewInvoice: "\u67E5\u770B\u8D26\u5355"
+    viewInvoice: "\u67E5\u770B\u8D26\u5355",
+    submit: "\u63D0\u4EA4"
   },
   payment: {
     checkout: {
@@ -450,7 +451,11 @@ export default flat({
         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",
@@ -459,7 +464,10 @@ export default flat({
         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",
@@ -528,7 +536,8 @@ export default flat({
         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/es/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;