@blocklet/payment-react 1.21.13 → 1.21.15

package/lib/libs/validator.js

@@ -4,17 +4,184 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFieldValidation = getFieldValidation;
+exports.postalCodePatterns = void 0;
 exports.validatePostalCode = validatePostalCode;
-var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
 var _locales = require("../locales");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const POSTAL_CODE_SUPPORTED_COUNTRIES = ["AD", "AT", "AU", "BE", "BG", "BR", "CA", "CH", "CN", "CZ", "DE", "DK", "DZ", "EE", "ES", "FI", "FR", "GB", "GR", "HR", "HU", "ID", "IE", "IL", "IN", "IR", "IS", "IT", "JP", "KE", "KR", "LI", "LT", "LU", "LV", "MX", "MT", "NL", "NO", "NZ", "PL", "PR", "PT", "RO", "RU", "SA", "SE", "SI", "SK", "TN", "TW", "UA", "US", "ZA", "ZM"];
+const threeDigit = /^\d{3}$/;
+const fourDigit = /^\d{4}$/;
+const fiveDigit = /^\d{5}$/;
+const sixDigit = /^\d{6}$/;
+const postalCodePatterns = exports.postalCodePatterns = {
+  GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
+  JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  US: /^\d{5}([ -]\d{4})?$/,
+  CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+  DE: /^\d{5}$/,
+  JP: /^\d{3}-?\d{4}$/,
+  FR: /^\d{2}[ ]?\d{3}$/,
+  AU: fourDigit,
+  IT: /^\d{5}$/,
+  CH: fourDigit,
+  AT: fourDigit,
+  ES: /^\d{5}$/,
+  NL: /^\d{4}[ ]?[A-Z]{2}$/i,
+  BE: fourDigit,
+  DK: fourDigit,
+  SE: /^\d{3}[ ]?\d{2}$/,
+  NO: fourDigit,
+  BR: /^\d{5}-?\d{3}$/,
+  PT: /^\d{4}(-\d{3})?$/,
+  FI: fiveDigit,
+  AX: /^22\d{3}$/,
+  KR: /^\d{5}$/,
+  // 2015年起使用5位数字邮编
+  CN: /^\d{6}$/,
+  TW: /^\d{3}(\d{2})?$/,
+  SG: sixDigit,
+  DZ: fiveDigit,
+  AD: /^AD\d{3}$/,
+  AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
+  AM: /^(37)?\d{4}$/,
+  AZ: /^\d{4}$/,
+  BH: /^((1[0-2]|[2-9])\d{2})?$/,
+  BD: fourDigit,
+  BB: /^(BB\d{5})?$/i,
+  BY: sixDigit,
+  BM: /^[A-Z]{2}[ ]?[A-Z0-9]{2}$/i,
+  BA: /^\d{5}$/,
+  IO: /^BBND 1ZZ$/i,
+  BN: /^[A-Z]{2}[ ]?\d{4}$/i,
+  BG: fourDigit,
+  KH: fiveDigit,
+  CV: fourDigit,
+  CL: /^\d{7}$/,
+  CR: /^\d{4,5}|\d{3}-\d{4}$/,
+  HR: /^\d{5}$/,
+  CY: fourDigit,
+  CZ: /^\d{3}[ ]?\d{2}$/,
+  DO: fiveDigit,
+  EC: /^([A-Z]\d{4}[A-Z]|(?:[A-Z]{2})?\d{6})?$/i,
+  EG: fiveDigit,
+  EE: fiveDigit,
+  FO: threeDigit,
+  GE: fourDigit,
+  GR: /^\d{3}[ ]?\d{2}$/,
+  GL: /^39\d{2}$/,
+  GT: fiveDigit,
+  HT: /^\d{4}$/,
+  HN: /^(?:\d{5})?$/,
+  HU: fourDigit,
+  IS: threeDigit,
+  IN: /^[1-9]\d{5}$/,
+  ID: fiveDigit,
+  IL: fiveDigit,
+  JO: fiveDigit,
+  KZ: sixDigit,
+  KE: fiveDigit,
+  KW: fiveDigit,
+  LA: fiveDigit,
+  LV: fourDigit,
+  LB: /^(\d{4}([ ]?\d{4})?)?$/,
+  LI: /^(948[5-9])|(949[0-7])$/,
+  LT: fiveDigit,
+  LU: fourDigit,
+  MK: fourDigit,
+  MY: fiveDigit,
+  MV: fiveDigit,
+  MT: /^[A-Z]{3}[ ]?\d{2,4}$/i,
+  MU: /^(\d{3}[A-Z]{2}\d{3})?$/i,
+  MX: fiveDigit,
+  MD: fourDigit,
+  MC: /^980\d{2}$/,
+  MA: fiveDigit,
+  NP: fiveDigit,
+  NZ: fourDigit,
+  NI: /^((\d{4}-)?\d{3}-\d{3}(-\d{1})?)?$/,
+  NG: /^(\d{6})?$/,
+  OM: /^(PC )?\d{3}$/i,
+  PK: fiveDigit,
+  PY: fourDigit,
+  PH: fourDigit,
+  PL: /^\d{2}-\d{3}$/,
+  PR: /^00[679]\d{2}([ -]\d{4})?$/,
+  RO: sixDigit,
+  RU: sixDigit,
+  SM: /^4789\d$/,
+  SA: fiveDigit,
+  SN: fiveDigit,
+  SK: /^\d{3}[ ]?\d{2}$/,
+  SI: fourDigit,
+  ZA: fourDigit,
+  LK: fiveDigit,
+  TJ: sixDigit,
+  TH: fiveDigit,
+  TN: fourDigit,
+  TR: fiveDigit,
+  TM: sixDigit,
+  UA: fiveDigit,
+  UY: fiveDigit,
+  UZ: sixDigit,
+  VA: /^00120$/,
+  VE: fourDigit,
+  ZM: fiveDigit,
+  // Territories & special regions
+  AS: /^96799$/,
+  CC: /^6799$/,
+  CK: fourDigit,
+  RS: sixDigit,
+  ME: /^8\d{4}$/,
+  CS: /^\d{5}$/,
+  // historical
+  YU: /^\d{5}$/,
+  // historical
+  CX: /^6798$/,
+  ET: fourDigit,
+  FK: /^FIQQ 1ZZ$/i,
+  NF: /^2899$/,
+  FM: /^(9694[1-4])([ -]\d{4})?$/,
+  GF: /^9[78]3\d{2}$/,
+  GN: threeDigit,
+  GP: /^9[78][01]\d{2}$/,
+  GS: /^SIQQ 1ZZ$/i,
+  GU: /^969[123]\d([ -]\d{4})?$/,
+  GW: fourDigit,
+  HM: fourDigit,
+  IQ: fiveDigit,
+  KG: sixDigit,
+  LR: fourDigit,
+  LS: threeDigit,
+  MG: threeDigit,
+  MH: /^969[67]\d([ -]\d{4})?$/,
+  MN: sixDigit,
+  MP: /^9695[012]([ -]\d{4})?$/,
+  MQ: /^9[78]2\d{2}$/,
+  NC: /^988\d{2}$/,
+  NE: fourDigit,
+  VI: /^008(([0-4]\d)|(5[01]))([ -]\d{4})?$/,
+  VN: sixDigit,
+  PF: /^987\d{2}$/,
+  PG: threeDigit,
+  PM: /^9[78]5\d{2}$/,
+  PN: /^PCRN 1ZZ$/i,
+  PW: /^96940$/,
+  RE: /^9[78]4\d{2}$/,
+  SH: /^(ASCN|STHL) 1ZZ$/i,
+  SJ: fourDigit,
+  SO: fiveDigit,
+  SZ: /^[HLMS]\d{3}$/i,
+  TC: /^TKCA 1ZZ$/i,
+  WF: /^986\d{2}$/,
+  XK: fiveDigit,
+  YT: /^976\d{2}$/
+};
 function validatePostalCode(postalCode, country) {
   if (!postalCode) return true;
-  const countryUpper = country?.toUpperCase();
-  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
   try {
-    return (0, _isPostalCode.default)(postalCode, isSupported ? countryUpper : "any");
+    const countryUpper = country?.toUpperCase();
+    if (!countryUpper) return false;
+    return !postalCodePatterns[countryUpper] || postalCodePatterns[countryUpper].test(postalCode);
   } catch (error) {
     console.error(error);
     return false;

package/lib/locales/en.js

@@ -228,6 +228,7 @@ module.exports = (0, _flat.default)({
         phonePlaceholder: "Phone number",
         phoneTip: "In case we need to contact you about your order"
       },
+      customerInfo: "Customer Information",
       upsell: {
         save: "Save with {recurring} billing",
         revert: "Switch to {recurring} billing",

package/lib/locales/zh.js

@@ -228,6 +228,7 @@ module.exports = (0, _flat.default)({
         phonePlaceholder: "\u7535\u8BDD\u53F7\u7801",
         phoneTip: "\u4EE5\u9632\u9700\u8981\u4E0E\u60A8\u8054\u7CFB\u6709\u5173\u60A8\u7684\u8BA2\u5355"
       },
+      customerInfo: "\u5BA2\u6237\u4FE1\u606F",
       upsell: {
         save: "\u4F7F\u7528{recurring}\u8BA1\u8D39\u65B9\u5F0F",
         revert: "\u5207\u6362\u5230{recurring}\u8BA1\u8D39\u65B9\u5F0F",

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

@@ -1,10 +1,9 @@
 import type { SxProps } from '@mui/material';
 type Props = {
     mode: string;
-    stripe: boolean;
     sx?: SxProps;
     fieldValidation?: Record<string, any>;
     errorPosition?: 'right' | 'bottom';
 };
-export default function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
+export default function AddressForm({ mode, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element;
 export {};

package/lib/payment/form/address.js

@@ -15,7 +15,6 @@ var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AddressForm({
   mode,
-  stripe,
   sx = {},
   fieldValidation = {},
   errorPosition = "right"
@@ -122,64 +121,73 @@ function AddressForm({
       })
     });
   }
-  if (stripe) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-      in: true,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-        className: "cko-payment-address cko-payment-form",
-        sx,
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "column",
-          className: "cko-payment-form",
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      className: "cko-payment-address cko-payment-form",
+      sx,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "column",
+        className: "cko-payment-form",
+        spacing: 0,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          className: "base-label",
+          children: t("payment.checkout.billing.state")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+          name: "billing_address.state",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
+          },
+          errorPosition,
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.state")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          className: "base-label",
+          children: t("payment.checkout.billing.postal_code")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
-            className: "base-label",
-            children: t("payment.checkout.billing.postal_code")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-            direction: "row",
-            spacing: 0,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-              name: "billing_address.postal_code",
-              rules: {
-                required: t("payment.checkout.required"),
-                validate: x => {
-                  const isValid = (0, _validator.validatePostalCode)(x, country);
-                  return isValid ? true : t("payment.checkout.invalid");
-                },
-                ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.postal_code",
+            rules: {
+              required: t("payment.checkout.required"),
+              validate: x => {
+                const isValid = (0, _validator.validatePostalCode)(x, country);
+                return isValid ? true : t("payment.checkout.invalid");
               },
-              errorPosition,
-              variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code"),
-              InputProps: {
-                startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-                  position: "start",
-                  style: {
-                    marginRight: "2px",
-                    marginLeft: "-8px"
-                  },
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-                    name: "billing_address.country",
-                    control,
-                    render: ({
-                      field
-                    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
-                      ...field,
-                      ref: field.ref,
-                      sx: {
-                        ".MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent !important"
-                        }
+              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
+            },
+            errorPosition,
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.postal_code"),
+            InputProps: {
+              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "start",
+                style: {
+                  marginRight: "2px",
+                  marginLeft: "-8px"
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                  name: "billing_address.country",
+                  control,
+                  render: ({
+                    field
+                  }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                    ...field,
+                    ref: field.ref,
+                    sx: {
+                      ".MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent !important"
                       }
-                    })
+                    }
                   })
                 })
-              }
-            })
-          })]
-        })
+              })
+            }
+          })
+        })]
       })
-    });
-  }
-  return null;
+    })
+  });
 }

package/lib/payment/form/index.js

@@ -8,6 +8,7 @@ exports.waitForCheckoutComplete = exports.hasDidWallet = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 require("react-international-phone/style.css");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _reactInternationalPhone = require("react-international-phone");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
@@ -159,7 +160,8 @@ function PaymentForm({
     customerLimited: false,
     stripePaying: false,
     fastCheckoutInfo: null,
-    creditInsufficientInfo: null
+    creditInsufficientInfo: null,
+    showEditForm: false
   });
   const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
   const searchParams = (0, _util2.getQueryParams)(window.location.href);
@@ -277,25 +279,103 @@ function PaymentForm({
   const paymentCurrency = currencies.find(x => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = (0, _react.useMemo)(() => {
+  const validateUserInfo = () => {
     if (!session?.user) {
       return false;
     }
-    if (method.type === "stripe") {
-      return true;
+    const {
+      fullName,
+      name,
+      email,
+      phone,
+      address
+    } = session.user;
+    const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
+    const hasName = !!(fullName || name);
+    if (!hasName) {
+      return false;
     }
-    if (checkoutSession.phone_number_collection?.enabled) {
-      return true;
+    const hasValidEmail = email && (0, _isEmail.default)(email);
+    if (!hasValidEmail) {
+      return false;
     }
-    const mode = checkoutSession.billing_address_collection;
-    if (mode === "required") {
-      return true;
+    const nameValidation = (0, _validator.getFieldValidation)("customer_name", fieldValidation, locale);
+    if (nameValidation.pattern && fullName) {
+      const pattern = nameValidation.pattern.value;
+      if (!pattern.test(fullName)) {
+        return false;
+      }
+    }
+    const emailValidation = (0, _validator.getFieldValidation)("customer_email", fieldValidation, locale);
+    if (emailValidation.pattern && email) {
+      const pattern = emailValidation.pattern.value;
+      if (!pattern.test(email)) {
+        return false;
+      }
+    }
+    if (!address || !address.postalCode || !(0, _validator.validatePostalCode)(address.postalCode, address.country)) {
+      return false;
+    }
+    const postalCodeValidation = (0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale);
+    if (postalCodeValidation.pattern) {
+      const pattern = postalCodeValidation.pattern.value;
+      if (!pattern.test(address.postalCode)) {
+        return false;
+      }
     }
-    if (session?.user?.fullName && session?.user?.email) {
+    if (!address.province) {
       return false;
     }
+    const stateValidation = (0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      if (!phone || phone.trim() === "") {
+        return false;
+      }
+      const phoneValidation = (0, _validator.getFieldValidation)("customer_phone", fieldValidation, locale);
+      if (phoneValidation.pattern) {
+        const pattern = phoneValidation.pattern.value;
+        if (!pattern.test(phone)) {
+          return false;
+        }
+      }
+    }
+    const addressMode = checkoutSession.billing_address_collection;
+    if (addressMode === "required") {
+      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+        return false;
+      }
+      const line1Validation = (0, _validator.getFieldValidation)("billing_address.line1", fieldValidation, locale);
+      if (line1Validation.pattern) {
+        const pattern = line1Validation.pattern.value;
+        if (!pattern.test(address.line1)) {
+          return false;
+        }
+      }
+      const cityValidation = (0, _validator.getFieldValidation)("billing_address.city", fieldValidation, locale);
+      if (cityValidation.pattern) {
+        const pattern = cityValidation.pattern.value;
+        if (!pattern.test(address.city)) {
+          return false;
+        }
+      }
+    }
     return true;
-  }, [session?.user, method, checkoutSession]);
+  };
+  const showForm = (0, _react.useMemo)(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (state.showEditForm) {
+      return true;
+    }
+    return !validateUserInfo();
+  }, [session?.user, method, state.showEditForm]);
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -822,6 +902,86 @@ function PaymentForm({
               returnUrl: getRedirectUrl()
             })]
           })
+        }), !showForm && session?.user && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 1.25,
+          sx: {
+            mt: 2,
+            p: 2,
+            pt: 1,
+            backgroundColor: "background.paper",
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            sx: {
+              mb: 0.25
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "subtitle2",
+              sx: {
+                color: "text.primary",
+                fontSize: "0.875rem"
+              },
+              children: t("payment.checkout.customerInfo")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              size: "small",
+              variant: "text",
+              onClick: () => setState({
+                showEditForm: true
+              }),
+              sx: {
+                minWidth: 0
+              },
+              children: t("common.edit")
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 0.5,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: "text.primary",
+                fontWeight: 600,
+                fontSize: "0.9375rem"
+              },
+              children: session.user.fullName || session.user.name
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                fontSize: "0.8125rem"
+              },
+              children: session.user.email
+            }), checkoutSession.phone_number_collection?.enabled && session.user.phone && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                fontSize: "0.8125rem"
+              },
+              children: session.user.phone
+            }), session.user.address && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.75,
+              children: [session.user.address.country && /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+                iso2: session.user.address.country.toLowerCase(),
+                style: {
+                  width: 18,
+                  height: 14
+                }
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary",
+                  fontSize: "0.8125rem"
+                },
+                children: [[session.user.address.line1, session.user.address.city, session.user.address.province, session.user.address.country?.toUpperCase()].filter(Boolean).join(", "), session.user.address.postalCode && ` [ ${t("payment.checkout.billing.postal_code")}: ${session.user.address.postalCode} ]`]
+              })]
+            })]
+          })]
         }), showForm && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
@@ -876,7 +1036,6 @@ function PaymentForm({
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
             mode: checkoutSession.billing_address_collection,
-            stripe: method?.type === "stripe",
             sx: {
               marginTop: "0 !important"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.21.13",
+  "version": "1.21.15",
   "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.13",
+    "@blocklet/payment-types": "1.21.15",
     "@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": "b101cbdeded522328ac7c5ccd2ba44930467fe25"
+  "gitHead": "fd48f9233f19514b537e30b013e09a7d9f7a9f48"
 }