@blocklet/payment-react 1.14.20 → 1.14.22

package/src/libs/util.ts

@@ -24,7 +24,7 @@ import { joinURL } from 'ufo';
 
 import { t } from '../locales';
 import dayjs from './dayjs';
-import { PricingRenderProps } from '../types';
+import { ActionProps, PricingRenderProps } from '../types';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
@@ -533,6 +533,32 @@ export function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymen
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
 
+export function formatMeteredThen(
+  subscription: string,
+  recurring: string,
+  hasMetered: boolean,
+  locale: string = 'en'
+): string {
+  if (hasMetered) {
+    return t('payment.checkout.meteredThen', locale, { subscription, recurring });
+  }
+  return t('payment.checkout.then', locale, { subscription, recurring });
+}
+
+export function formatPriceDisplay(
+  { amount, then, actualAmount, showThen }: { amount: string; then?: string; actualAmount: string; showThen?: boolean },
+  recurring: string,
+  hasMetered: boolean,
+  locale: string = 'en'
+) {
+  if (Number(actualAmount) === 0 && hasMetered) {
+    return t('payment.checkout.metered', locale, { recurring });
+  }
+  if (showThen) {
+    return [amount, then].filter(Boolean).join(', ');
+  }
+  return [amount, then].filter(Boolean).join(' ');
+}
 export function formatCheckoutHeadlines(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
@@ -543,9 +569,13 @@ export function formatCheckoutHeadlines(
   amount: string;
   then?: string;
   secondary?: string;
+  showThen?: boolean;
+  actualAmount: string;
+  priceDisplay: string;
 } {
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
+  const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
 
   // empty
@@ -554,6 +584,8 @@ export function formatCheckoutHeadlines(
       action: t('payment.checkout.empty', locale),
       amount: '0',
       then: '',
+      actualAmount: '0',
+      priceDisplay: '0',
     };
   }
 
@@ -563,10 +595,10 @@ export function formatCheckoutHeadlines(
   if (items.every((x) => x.price.type === 'one_time')) {
     const action = t('payment.checkout.pay', locale, { payee: brand });
     if (items.length > 1) {
-      return { action, amount };
+      return { action, amount, actualAmount, priceDisplay: amount };
     }
 
-    return { action, amount, then: '' };
+    return { action, amount, then: '', actualAmount, priceDisplay: amount };
   }
 
   const item = items.find((x) => x.price.type === 'recurring');
@@ -576,10 +608,9 @@ export function formatCheckoutHeadlines(
     'per',
     locale
   );
-
+  const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
-    const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
     const subscription = [
       hasMetered ? t('payment.checkout.least', locale) : '',
       fromUnitToToken(
@@ -597,32 +628,54 @@ export function formatCheckoutHeadlines(
       .join(' ');
     if (items.length > 1) {
       if (trialInDays > 0) {
-        return {
+        const result = {
           action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
           amount: t('payment.checkout.free', locale, { count: trialInDays }),
-          then: t('payment.checkout.then', locale, { subscription, recurring }),
+          then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+          showThen: true,
+          actualAmount: '0',
+        };
+        return {
+          ...result,
+          priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
         };
       }
-
-      return {
+      const result = {
         action: t('payment.checkout.sub2', locale, { name, count: items.length - 1 }),
         amount,
-        then: recurring,
+        then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+        showThen: hasMetered,
+        actualAmount,
+      };
+      return {
+        ...result,
+        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
       };
     }
 
     if (trialInDays > 0) {
-      return {
+      const result = {
         action: t('payment.checkout.try1', locale, { name }),
         amount: t('payment.checkout.free', locale, { count: trialInDays }),
-        then: t('payment.checkout.then', locale, { subscription, recurring }),
+        then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+        showThen: true,
+        actualAmount: '0',
+      };
+      return {
+        ...result,
+        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
       };
     }
-
-    return {
+    const result = {
       action: t('payment.checkout.sub1', locale, { name }),
       amount,
-      then: recurring,
+      then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+      showThen: hasMetered,
+      actualAmount,
+    };
+    return {
+      ...result,
+      priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
     };
   }
 
@@ -639,10 +692,22 @@ export function formatCheckoutHeadlines(
     currency.decimal
   );
 
-  return {
+  const result = {
     action: t('payment.checkout.pay', locale, { payee: brand }),
     amount,
-    then: t('payment.checkout.then', locale, { subscription: `${subscription} ${currency.symbol}`, recurring }),
+    then: formatMeteredThen(
+      `${subscription} ${currency.symbol}`,
+      recurring,
+      hasMetered && Number(subscription) === 0,
+      locale
+    ),
+    showThen: true,
+    actualAmount,
+  };
+
+  return {
+    ...result,
+    priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
   };
 }
 
@@ -690,48 +755,65 @@ export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], ma
 }
 
 export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
-  const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
+  const lines = [`Start on ${formatToDate(subscription.start_date * 1000, 'en', 'YYYY-MM-DD')}`];
+
+  const getLineTimeMessage = (time: number) => {
+    const curDay = dayjs().isSame(dayjs(time), 'day');
+    const timeFormat = curDay ? 'HH:mm:ss' : 'YYYY-MM-DD';
+    return `${curDay ? 'in' : 'on'} ${formatToDate(time, 'en', timeFormat)}`;
+  };
+
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at) {
-      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1000)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1000)}`);
     } else if (subscription.cancel_at_period_end) {
-      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
     } else {
-      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1000)}`);
+      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
     }
   } else if (subscription.status === 'past_due') {
-    lines.push(`will cancel on ${formatToDate((subscription.cancel_at || subscription.current_period_end) * 1000)}`);
+    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1000)}`);
   } else if (subscription.status === 'canceled') {
-    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1000)}`);
+    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1000)}`);
   }
 
-  return lines.join(', ');
+  return lines.join(',');
 };
 
-export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
+export const getSubscriptionAction = (
+  subscription: TSubscriptionExpanded,
+  actionProps: ActionProps
+): {
+  action: string;
+  variant: string;
+  color: string;
+  canRenew: boolean;
+  text?: string;
+  sx?: any;
+} | null => {
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === 'payment_failed') {
         return null;
       }
 
-      return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false };
+      return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false, ...actionProps?.recover };
     }
 
     if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
       return null;
     }
 
-    return { action: 'cancel', variant: 'outlined', color: 'inherit', canRenew: false };
+    return { action: 'cancel', variant: 'outlined', color: 'inherit', canRenew: false, ...actionProps?.cancel };
   }
 
   if (subscription.status === 'past_due') {
     const canRenew = subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end;
-    return { action: 'pastDue', variant: 'contained', color: 'primary', canRenew };
+    return { action: 'pastDue', variant: 'contained', color: 'primary', canRenew, ...actionProps?.pastDue };
   }
 
   if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
-    return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false };
+    return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false, ...actionProps?.recover };
   }
 
   return null;
@@ -855,9 +937,9 @@ export function formatTotalPrice({
   const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
   const currency: TPaymentCurrency = price?.currency ?? {};
 
-  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
+  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol} `;
 
-  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol} `;
 
   const appendUnit = (v: string, alt: string) => {
     if (product.unit_label) {
@@ -893,6 +975,13 @@ export function formatQuantityInventory(price: TPrice, quantity: string | number
   return '';
 }
 
+export function formatSubscriptionStatus(status: string) {
+  if (status === 'canceled') {
+    return 'Ended';
+  }
+  return status;
+}
+
 export function formatAmountPrecisionLimit(amount: string, locale = 'en', precision: number = 6) {
   if (!amount) {
     return '';

package/src/locales/en.tsx

@@ -62,7 +62,7 @@ export default flat({
     continue: 'Continue',
     qty: 'Qty {count}',
     each: '{unit} each',
-    trial: 'Free for {count} days',
+    trial: "Free for {count} day{count > 1 ? 's' : ''}",
     billed: 'billed {rule}',
     metered: 'based on usage',
     hour: 'hour',
@@ -85,6 +85,7 @@ export default flat({
     years: 'years',
     type: 'type',
     donation: 'Donation',
+    recoverFrom: 'Recovered From',
     quantityLimitPerCheckout: 'Exceed purchase limit',
     quantityNotEnough: 'Exceed inventory',
     amountPrecisionLimit: 'Amount decimal places must be less than or equal to {precision}',
@@ -110,11 +111,13 @@ export default flat({
         subscription: 'View subscription',
         invoice: 'View invoice',
       },
+      paymentRequired: 'Payment Required',
       staking: {
         title: 'Staking Required',
         tooltip:
           'Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription.',
       },
+      stakingConfirm: 'In this payment, the staked amount is separate from the product cost.',
       donation: {
         between: 'Please enter an amount between {min} and {max}.',
         custom: 'Custom Amount',
@@ -131,7 +134,9 @@ export default flat({
       sub1: 'Subscribe to {name}',
       sub2: 'Subscribe to {name} and {count} more',
       then: 'Then {subscription} {recurring}',
-      free: '{count} days free',
+      meteredThen: 'Then {recurring} based on usage',
+      metered: '{recurring} based on usage',
+      free: "{count} day{count > 1 ? 's' : ''} free",
       least: 'continue with at least',
       completed: {
         payment: 'Thanks for your purchase',
@@ -140,8 +145,7 @@ export default flat({
         donate: 'Thanks for your support',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
-      confirm:
-        'By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.',
+      confirm: 'Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.',
       required: 'Required',
       invalid: 'Invalid',
       billing: {
@@ -184,12 +188,16 @@ export default flat({
         title: 'Nothing to show here',
         description: 'Seems this checkoutSession is not configured properly',
       },
+      orderSummary: 'Order Summary',
+      paymentDetails: 'Payment Details',
+      productListTotal: 'Includes {total} items',
     },
     customer: {
       payments: 'Payment History',
       invoices: 'Invoice History',
       details: 'Details',
       summary: 'Summary',
+      specifics: 'Specifics',
       update: 'Update Information',
       empty: 'Seems you do not have any subscriptions or payments here',
       cancel: {
@@ -271,12 +279,16 @@ export default flat({
         renewError: 'Failed to renew the subscription',
         empty: 'There are no invoices',
         next: 'No invoices yet, next invoice will be generated on {date}',
+        invoiceNumber: 'Invoice Number',
+        emptyList: 'No Invoice',
       },
       payment: {
         empty: 'There are no payments',
+        emptyList: 'No Payment',
       },
       refund: {
         empty: 'There are no refunds',
+        emptyList: 'No Refund',
       },
       subscriptions: {
         plan: 'Plan',
@@ -310,4 +322,7 @@ export default flat({
       [RefundType.stakeReturn]: 'Stake Return',
     },
   },
+  empty: {
+    records: 'No matching records found',
+  },
 });

package/src/locales/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-prototype-builtins */
+import { template } from 'lodash';
 import en from './en';
 import zh from './zh';
 
@@ -8,9 +9,15 @@ export const translations = {
   en,
 };
 
-export const replace = (template: string, data: Record<string, any> = {}) =>
-  template.replace(/{(\w*)}/g, (_, key) => (data.hasOwnProperty(key) ? data[key] : ''));
-
+const replace = (t: string, data: Record<string, any> = {}): string => {
+  try {
+    const compiled = template(t, { interpolate: /{([\s\S]+?)}/g, escape: /{([\s\S]+?)}/g });
+    return compiled(data);
+  } catch (e) {
+    console.error(`Error evaluating template: ${t}`, e);
+    return '';
+  }
+};
 export const createTranslator = ({ fallbackLocale = 'en' }: { fallbackLocale?: string }, langs: any = translations) => {
   return (key: string, locale = fallbackLocale, data: Record<string, any> = {}) => {
     if (!langs[locale] || !langs[locale][key]) {

package/src/locales/zh.tsx

@@ -85,6 +85,7 @@ export default flat({
     years: '年',
     type: '类型',
     donation: '打赏',
+    recoverFrom: '恢复自',
     quantityLimitPerCheckout: '超出购买限制',
     quantityNotEnough: '库存不足',
     amountPrecisionLimit: '金额小数位数必须在 {precision} 位以内',
@@ -110,10 +111,12 @@ export default flat({
         subscription: '查看订阅',
         invoice: '查看账单',
       },
+      paymentRequired: '支付数量',
       staking: {
         title: '质押数量',
         tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
       },
+      stakingConfirm: '在此支付中，质押金额与产品费用分开',
       donation: {
         between: '金额必须大于 {min} 且小于 {max}',
         custom: '输入金额',
@@ -130,7 +133,9 @@ export default flat({
       sub1: '订阅 {name}',
       sub2: '订阅 {name} 等{count}个产品',
       then: '然后 {subscription} {recurring}',
-      free: '{count} 天',
+      meteredThen: '然后{recurring}按用量计费',
+      metered: '{recurring}按用量计费',
+      free: '免费试用 {count} 天',
       least: '至少',
       completed: {
         payment: '感谢您的购买',
@@ -139,8 +144,7 @@ export default flat({
         donate: '感谢您的支持',
         tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
       },
-      confirm:
-        '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
+      confirm: '确认允许{payee}对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
       required: '必填项',
       invalid: '无效',
       billing: {
@@ -181,12 +185,16 @@ export default flat({
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
       },
+      orderSummary: '订单概览',
+      paymentDetails: '支付信息',
+      productListTotal: '包括 {total} 项',
     },
     customer: {
       payments: '支付历史',
       invoices: '账单历史',
       details: '账户详情',
       summary: '计费摘要',
+      specifics: '具体信息',
       update: '更新客户信息',
       empty: '看起来您在这里没有任何订阅或支付',
       cancel: {
@@ -263,12 +271,16 @@ export default flat({
         renewError: '订阅恢复失败',
         empty: '没有任何账单',
         next: '还没有账单，下次账单将在 {date} 生成',
+        invoiceNumber: '账单编号',
+        emptyList: '没有账单',
       },
       payment: {
         empty: '没有支付记录',
+        emptyList: '没有支付记录',
       },
       refund: {
         empty: '没有退款记录',
+        emptyList: '没有退款记录',
       },
       subscriptions: {
         plan: '订阅',
@@ -302,4 +314,7 @@ export default flat({
       [RefundType.stakeReturn]: '退押金',
     },
   },
+  empty: {
+    records: '没有找到匹配的记录',
+  },
 });

package/src/payment/error.tsx

@@ -13,7 +13,7 @@ type Props = {
 function getHeightStyle(mode: ModeType | undefined): any {
   switch (mode) {
     case 'standalone':
-      return { height: '100vh' }; // 独立模式下，高度为100vh
+      return { height: '100vh', maxHeight: '100%' }; // 独立模式下，高度为100vh
     default:
       return { height: 'auto', minHeight: 200 }; // 默认情况下，高度根据内容自动调整
   }
@@ -29,7 +29,7 @@ export default function PaymentError({ title, description, button, mode }: Props
         <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
           {description}
         </Typography>
-        <Button variant="text" size="small" component={Link} href={window.blocklet?.appUrl}>
+        <Button variant="text" size="small" sx={{ color: 'text.link' }} component={Link} href={window.blocklet?.appUrl}>
           {button}
         </Button>
       </Stack>

package/src/payment/footer.tsx

@@ -2,7 +2,7 @@ import { Typography } from '@mui/material';
 
 export default function CheckoutFooter({ ...props }) {
   return (
-    <Typography color="text.secondary" fontSize={12} {...props}>
+    <Typography color="text.lighter" fontSize={12} {...props}>
       Powered by{' '}
       <Typography component="span" sx={{ fontWeight: 'bold', fontSize: 12 }}>
         ArcBlock

package/src/payment/form/address.tsx

@@ -1,53 +1,59 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, Stack, Typography } from '@mui/material';
+import { Fade, FormLabel, InputAdornment, Stack, SxProps } from '@mui/material';
 import { Controller, useFormContext } from 'react-hook-form';
-import { CountrySelector } from 'react-international-phone';
-
 import FormInput from '../../components/input';
+import CountrySelect from '../../components/country-select';
 
 type Props = {
   mode: string;
   stripe: boolean;
+  sx?: SxProps;
+};
+
+AddressForm.defaultProps = {
+  sx: {},
 };
 
-export default function AddressForm({ mode, stripe }: Props) {
+export default function AddressForm({ mode, stripe, sx = {} }: Props) {
   const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
+  const { control } = useFormContext();
 
   if (mode === 'required') {
     return (
       <Fade in>
-        <Stack className="cko-payment-address cko-payment-form">
-          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-            {t(`payment.checkout.billing.${mode}`)}
-          </Typography>
+        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
+          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
               <FormInput
                 name="billing_address.postal_code"
                 rules={{ required: t('payment.checkout.required') }}
                 errorPosition="right"
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Controller
+                        name="billing_address.country"
+                        control={control}
+                        render={({ field }) => (
+                          <CountrySelect
+                            {...field}
+                            sx={{
+                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'transparent',
+                              },
+                            }}
+                          />
+                        )}
+                      />
+                    </InputAdornment>
+                  ),
+                }}
               />
             </Stack>
+            <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
             <FormInput
               name="billing_address.state"
               rules={{ required: t('payment.checkout.required') }}
@@ -55,6 +61,7 @@ export default function AddressForm({ mode, stripe }: Props) {
               variant="outlined"
               placeholder={t('payment.checkout.billing.state')}
             />
+            <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
               rules={{ required: t('payment.checkout.required') }}
@@ -62,6 +69,7 @@ export default function AddressForm({ mode, stripe }: Props) {
               variant="outlined"
               placeholder={t('payment.checkout.billing.line1')}
             />
+            <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
             <FormInput
               name="billing_address.city"
               rules={{ required: t('payment.checkout.required') }}
@@ -78,29 +86,10 @@ export default function AddressForm({ mode, stripe }: Props) {
   if (stripe) {
     return (
       <Fade in>
-        <Stack className="cko-payment-address cko-payment-form">
-          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-            {t(`payment.checkout.billing.${mode}`)}
-          </Typography>
+        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
+          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
               <FormInput
                 name="billing_address.postal_code"
                 rules={{ required: t('payment.checkout.required') }}
@@ -108,6 +97,26 @@ export default function AddressForm({ mode, stripe }: Props) {
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
                 wrapperStyle={{ height: '40px' }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Controller
+                        name="billing_address.country"
+                        control={control}
+                        render={({ field }) => (
+                          <CountrySelect
+                            {...field}
+                            sx={{
+                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'transparent',
+                              },
+                            }}
+                          />
+                        )}
+                      />
+                    </InputAdornment>
+                  ),
+                }}
               />
             </Stack>
           </Stack>