@blocklet/payment-react 1.13.159 → 1.13.161

package/lib/payment/index.js

@@ -223,6 +223,12 @@ function PaymentInner({
       _Toast.default.error((0, _util.formatError)(err));
     }
   };
+  const handlePaid = result => {
+    setState({
+      checkoutSession: result.checkoutSession
+    });
+    onPaid(result);
+  };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.FormProvider, {
     ...methods,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
@@ -252,12 +258,15 @@ function PaymentInner({
             children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_header.default, {
               checkoutSession: state.checkoutSession
             }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
-              checkoutSession: state.checkoutSession,
+              items: state.checkoutSession.line_items,
+              trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
               currency,
               onUpsell,
               onDownsell,
               onApplyCrossSell,
-              onCancelCrossSell
+              onCancelCrossSell,
+              checkoutSessionId: state.checkoutSession.id,
+              crossSellBehavior: state.checkoutSession.cross_sell_behavior
             })]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -267,13 +276,14 @@ function PaymentInner({
           children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
             payee: (0, _util.getStatementDescriptor)(state.checkoutSession.line_items),
             action: state.checkoutSession.mode,
+            subscriptionId: state.checkoutSession.subscription_id,
             message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
           }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
             checkoutSession: state.checkoutSession,
             paymentMethods,
             paymentIntent,
             customer,
-            onPaid,
+            onPaid: handlePaid,
             onError,
             mode
           })]
@@ -365,52 +375,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   .cko-payment-methods {
   }
 
-  .cko-payment-card {
-    position: relative;
-    border: 2px solid #3773f2;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    border: 12px solid #3773f2;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-  }
-
-  .cko-payment-card-unselect {
-    border: 2px solid #ddd;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card::after {
-    content: '';
-    width: 6px;
-    height: 10px;
-    position: absolute;
-    right: 3px;
-    top: 0px;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    transform: rotate(35deg);
-  }
-
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;

package/lib/payment/product-item.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
-import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
     item: TLineItemExpanded;
-    session: TCheckoutSessionExpanded;
+    items: TLineItemExpanded[];
+    trialInDays: number;
     currency: TPaymentCurrency;
     onUpsell: Function;
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props): import("react").JSX.Element;
+declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): import("react").JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;

package/lib/payment/product-item.js

@@ -18,7 +18,8 @@ ProductItem.defaultProps = {
 };
 function ProductItem({
   item,
-  session,
+  items,
+  trialInDays,
   currency,
   mode,
   children,
@@ -29,10 +30,10 @@ function ProductItem({
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const pricing = (0, _util.formatLineItemPricing)(item, currency, session.subscription_data?.trial_period_days || 0, locale);
-  const saving = (0, _util.formatUpsellSaving)(session, currency);
+  const pricing = (0, _util.formatLineItemPricing)(item, currency, trialInDays, locale);
+  const saving = (0, _util.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
-  const canUpsell = mode === "normal" && session.line_items.length === 1;
+  const canUpsell = mode === "normal" && items.length === 1;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     alignItems: "flex-start",

package/lib/payment/success.d.ts

@@ -3,6 +3,12 @@ type Props = {
     message: string;
     action: string;
     payee: string;
+    subscriptionId?: string;
 };
-export default function PaymentSuccess({ message, action, payee }: Props): import("react").JSX.Element;
-export {};
+declare function PaymentSuccess({ message, action, payee, subscriptionId }: Props): import("react").JSX.Element;
+declare namespace PaymentSuccess {
+    var defaultProps: {
+        subscriptionId: string;
+    };
+}
+export default PaymentSuccess;

package/lib/payment/success.js

@@ -13,7 +13,8 @@ var _payment = require("../contexts/payment");
 function PaymentSuccess({
   message,
   action,
-  payee
+  payee,
+  subscriptionId
 }) {
   const {
     t
@@ -61,7 +62,7 @@ function PaymentSuccess({
           mt: 2
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
-          href: (0, _ufo.joinURL)(prefix, "/customer"),
+          href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
           children: t("payment.checkout.portal", {
             payee
           })
@@ -70,6 +71,9 @@ function PaymentSuccess({
     })
   });
 }
+PaymentSuccess.defaultProps = {
+  subscriptionId: ""
+};
 const Div = (0, _system.styled)("div")`
   width: 80px;
   height: 115px;

package/lib/payment/summary.d.ts

@@ -1,12 +1,25 @@
 /// <reference types="react" />
-import type { TCheckoutSessionExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
-    checkoutSession: TCheckoutSessionExpanded;
+    items: TLineItemExpanded[];
     currency: TPaymentCurrency;
-    onUpsell: Function;
-    onDownsell: Function;
-    onApplyCrossSell: Function;
-    onCancelCrossSell: Function;
+    trialInDays: number;
+    onUpsell?: Function;
+    onDownsell?: Function;
+    onApplyCrossSell?: Function;
+    onCancelCrossSell?: Function;
+    checkoutSessionId?: string;
+    crossSellBehavior?: string;
 };
-export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, }: Props): import("react").JSX.Element;
-export {};
+declare function PaymentSummary({ items, currency, trialInDays, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, ...rest }: Props): import("react").JSX.Element;
+declare namespace PaymentSummary {
+    var defaultProps: {
+        onUpsell: any;
+        onDownsell: any;
+        onApplyCrossSell: any;
+        onCancelCrossSell: any;
+        checkoutSessionId: string;
+        crossSellBehavior: string;
+    };
+}
+export default PaymentSummary;

package/lib/payment/summary.js

@@ -47,13 +47,25 @@ async function fetchCrossSell(id) {
     return null;
   }
 }
+PaymentSummary.defaultProps = {
+  onUpsell: _noop.default,
+  onDownsell: _noop.default,
+  onApplyCrossSell: _noop.default,
+  onCancelCrossSell: _noop.default,
+  checkoutSessionId: "",
+  crossSellBehavior: ""
+};
 function PaymentSummary({
-  checkoutSession,
+  items,
   currency,
+  trialInDays,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
-  onCancelCrossSell
+  onCancelCrossSell,
+  checkoutSessionId,
+  crossSellBehavior,
+  ...rest
 }) {
   const {
     t,
@@ -66,8 +78,8 @@ function PaymentSummary({
   const {
     data,
     runAsync
-  } = (0, _ahooks.useRequest)(() => fetchCrossSell(checkoutSession.id));
-  const headlines = (0, _util.formatCheckoutHeadlines)(checkoutSession, currency, locale);
+  } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
+  const headlines = (0, _util.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
     setState({
       shake: true
@@ -121,6 +133,7 @@ function PaymentSummary({
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       className: "cko-product",
       direction: "column",
+      ...rest,
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-product-summary",
         direction: "column",
@@ -146,9 +159,10 @@ function PaymentSummary({
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         spacing: 2,
-        children: checkoutSession.line_items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+        children: items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
           item: x,
-          session: checkoutSession,
+          items,
+          trialInDays,
           currency,
           onUpsell: handleUpsell,
           onDownsell: handleDownsell,
@@ -162,7 +176,7 @@ function PaymentSummary({
             children: t("payment.checkout.cross_sell.remove")
           })
         }, x.price_id))
-      }), data && checkoutSession.line_items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
+      }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
         in: true,
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
@@ -185,7 +199,8 @@ function PaymentSummary({
               price_id: data.id,
               cross_sell: true
             },
-            session: checkoutSession,
+            items,
+            trialInDays,
             currency,
             onUpsell: _noop.default,
             onDownsell: _noop.default
@@ -197,7 +212,7 @@ function PaymentSummary({
               width: 1
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+              children: crossSellBehavior === "required" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                 label: t("payment.checkout.required"),
                 color: "info",
                 variant: "outlined",
@@ -208,8 +223,8 @@ function PaymentSummary({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
               size: "small",
               loadingPosition: "end",
-              color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
-              variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
+              color: crossSellBehavior === "required" ? "info" : "info",
+              variant: crossSellBehavior === "required" ? "text" : "text",
               loading: state.loading,
               onClick: handleApplyCrossSell,
               children: t("payment.checkout.cross_sell.add")

package/lib/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -34,8 +34,8 @@ export declare function getCheckoutAmount(items: TLineItemExpanded[], currency:
     tax: string;
 };
 export declare function getRecurringPeriod(recurring: PriceRecurring): number;
-export declare function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency): string;
-export declare function formatCheckoutHeadlines(session: TCheckoutSessionExpanded, currency: TPaymentCurrency, locale?: string): {
+export declare function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymentCurrency): string;
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
     action: string;
     amount: string;
     then?: string;
@@ -57,3 +57,6 @@ export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded
     canRenew: boolean;
 } | null;
 export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
+export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
+    omit: never;
+}>[];

package/lib/util.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PAYMENT_KIT_DID = void 0;
 exports.findCurrency = findCurrency;
+exports.flattenPaymentMethods = void 0;
 exports.formatAmount = formatAmount;
 exports.formatCheckoutHeadlines = formatCheckoutHeadlines;
 exports.formatDateTime = formatDateTime;
@@ -341,8 +342,7 @@ function getRecurringPeriod(recurring) {
       throw new Error(`Unsupported recurring interval: ${interval}`);
   }
 }
-function formatUpsellSaving(session, currency) {
-  const items = session.line_items;
+function formatUpsellSaving(items, currency) {
   if (items[0]?.upsell_price_id) {
     return "0";
   }
@@ -365,9 +365,8 @@ function formatUpsellSaving(session, currency) {
   const after = new _util.BN(to.total);
   return Number(before.sub(after).mul(new _util.BN(100)).div(before).toString()).toFixed(0);
 }
-function formatCheckoutHeadlines(session, currency, locale = "en") {
-  const items = session.line_items;
-  const trial = session.subscription_data?.trial_period_days || 0;
+function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
   const {
     total
@@ -526,9 +525,6 @@ const getSubscriptionTimeSummary = subscription => {
 exports.getSubscriptionTimeSummary = getSubscriptionTimeSummary;
 const getSubscriptionAction = subscription => {
   if (subscription.status === "active" || subscription.status === "trialing") {
-    if (subscription.cancel_at) {
-      return null;
-    }
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === "payment_failed") {
         return null;
@@ -540,6 +536,9 @@ const getSubscriptionAction = subscription => {
         canRenew: false
       };
     }
+    if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
+      return null;
+    }
     return {
       action: "cancel",
       variant: "outlined",
@@ -574,4 +573,18 @@ const mergeExtraParams = (extra = {}) => {
   });
   return params.toString();
 };
-exports.mergeExtraParams = mergeExtraParams;
+exports.mergeExtraParams = mergeExtraParams;
+const flattenPaymentMethods = (methods = []) => {
+  const out = [];
+  methods.forEach(method => {
+    const currencies = method.paymentCurrencies || method.payment_currencies || [];
+    currencies.forEach(currency => {
+      out.push({
+        ...currency,
+        method
+      });
+    });
+  });
+  return out;
+};
+exports.flattenPaymentMethods = flattenPaymentMethods;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.159",
+  "version": "1.13.161",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,13 +52,13 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.29",
-    "@arcblock/ux": "^2.9.29",
-    "@mui/icons-material": "^5.15.8",
-    "@mui/lab": "^5.0.0-alpha.164",
-    "@mui/material": "^5.15.7",
-    "@mui/styles": "^5.15.8",
-    "@mui/system": "^5.15.8",
+    "@arcblock/did-connect": "^2.9.39",
+    "@arcblock/ux": "^2.9.39",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/lab": "^5.0.0-alpha.166",
+    "@mui/material": "^5.15.11",
+    "@mui/styles": "^5.15.11",
+    "@mui/system": "^5.15.11",
     "@ocap/util": "^1.18.110",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.4.0",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.159",
+    "@blocklet/payment-types": "1.13.161",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "2663776fb04b0446e2d053eedfb66d1910c507f8"
+  "gitHead": "55cb16d9cd06b91b949a1a1c88b14670b0c1aca8"
 }

package/src/components/input.tsx

@@ -8,6 +8,7 @@ type InputProps = TextFieldProps & {
   placeholder?: string;
   errorPosition?: 'right' | 'bottom';
   rules?: RegisterOptions;
+  wrapperStyle?: React.CSSProperties;
 };
 
 FormInput.defaultProps = {
@@ -15,6 +16,7 @@ FormInput.defaultProps = {
   placeholder: '',
   errorPosition: 'bottom',
   rules: {},
+  wrapperStyle: {},
 };
 
 export function FormInputError({ error }: { error: string }) {
@@ -27,7 +29,15 @@ export function FormInputError({ error }: { error: string }) {
   );
 }
 
-export default function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps) {
+export default function FormInput({
+  name,
+  label,
+  placeholder,
+  rules,
+  errorPosition,
+  wrapperStyle,
+  ...rest
+}: InputProps) {
   const { control, formState } = useFormContext();
   const error = get(formState.errors, name)?.message as string;
   return (
@@ -36,7 +46,7 @@ export default function FormInput({ name, label, placeholder, rules, errorPositi
       control={control}
       rules={rules}
       render={({ field }) => (
-        <Box sx={{ width: '100%', height: '40px' }}>
+        <Box sx={{ width: '100%', ...wrapperStyle }}>
           {!!label && <FormLabel>{label}</FormLabel>}
           <TextField
             fullWidth

package/src/history/invoice/list.tsx

@@ -134,5 +134,5 @@ CustomerInvoiceList.defaultProps = {
   subscription_id: '',
   status: 'open,paid,uncollectible',
   pageSize: 10,
-  target: 'self',
+  target: '_self',
 };

package/src/history/payment/list.tsx

@@ -85,7 +85,7 @@ export default function CustomerPaymentList({ customer_id }: Props) {
               </Box>
               <Box flex={2}>
                 <Typography textAlign="right">
-                  {fromUnitToToken(item.amount, item.paymentCurrency.decimal)}&nbsp;
+                  {fromUnitToToken(item.amount_received, item.paymentCurrency.decimal)}&nbsp;
                   {item.paymentCurrency.symbol}
                 </Typography>
               </Box>

package/src/index.ts

@@ -13,9 +13,13 @@ import CustomerInvoiceList from './history/invoice/list';
 import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
+import AddressForm from './payment/form/address';
+import CurrencySelector from './payment/form/currency';
 import PhoneInput from './payment/form/phone';
+import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
+import PaymentSummary from './payment/summary';
 
 export * from './util';
 export * from './contexts/payment';
@@ -27,13 +31,17 @@ export {
   dayjs,
   FormInput,
   PhoneInput,
+  AddressForm,
+  StripeForm,
   Status,
   Livemode,
   Switch,
   ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
+  CurrencySelector,
   Payment,
+  PaymentSummary,
   PricingTable,
   ProductSkeleton,
   Amount,

package/src/locales/en.tsx

@@ -189,7 +189,7 @@ export default flat({
         title: 'Renew your subscription',
         description: 'Your subscription will no longer be canceled, it will renew on {date}',
       },
-      upgrade: {
+      changePlan: {
         button: 'Update',
         current: 'Current',
         pay: 'Payment Required',
@@ -203,6 +203,18 @@ export default flat({
         appliedCredit: 'Credit applied',
         newCredit: 'Credit issued',
         remaining: 'Amount due today',
+        tableNotFound: 'Plan updates are not available',
+      },
+      changePayment: {
+        limit:
+          'Your changes to payment method will not affect existing open or past-due invoices, all future payments will use the new payment method unless you change it again.',
+        review: 'Review subscription items',
+        select: 'Select payment method',
+        submit: 'Confirm change',
+        confirm:
+          'By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.',
+        completed:
+          'Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again.',
       },
       invoice: {
         summary: 'Summary',
@@ -233,6 +245,7 @@ export default flat({
         title: 'Manage subscriptions',
         current: 'Current subscription',
         empty: 'There are no subscriptions here',
+        changePayment: 'Change payment method',
       },
     },
   },

package/src/locales/zh.tsx

@@ -184,7 +184,7 @@ export default flat({
         title: '续订您的订阅',
         description: '您的订阅将不再被取消，将在{date}续订',
       },
-      upgrade: {
+      changePlan: {
         button: '更新',
         current: '当前订阅',
         pay: '需要支付',
@@ -198,6 +198,16 @@ export default flat({
         appliedCredit: '信用扣除',
         newCredit: '信用增加',
         remaining: '还需支付',
+        tableNotFound: '套餐变更不可用',
+      },
+      changePayment: {
+        limit:
+          '你对支付方式的变更不会影响已经生成或者欠费的账单，只会影响未来的账单。你可以在下一张账单生成之前变更支付方式。',
+        review: '查看订阅详情',
+        select: '选择支付方式',
+        submit: '确认变更',
+        confirm: '确认变更方式意味着你允许{payee}使用新的支付方式支付你的未来账单。你可以随时再次变更支付方式。',
+        completed: '你的支付方式 已经更新成功。你可以在你的账户中查看此支付方式的详细信息。',
       },
       invoice: {
         summary: '摘要',
@@ -228,6 +238,7 @@ export default flat({
         title: '订阅管理',
         current: '当前订阅',
         empty: '没有任何订阅',
+        changePayment: '切换支付方式',
       },
     },
   },

package/src/payment/form/address.tsx

@@ -107,6 +107,7 @@ export default function AddressForm({ mode, stripe }: Props) {
                 errorPosition="right"
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
+                wrapperStyle={{ height: '40px' }}
               />
             </Stack>
           </Stack>