@blocklet/payment-react 1.18.34 → 1.18.36

package/lib/components/country-select.js

@@ -10,11 +10,20 @@ var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _mobile = require("../hooks/mobile");
+const Transition = (0, _react.forwardRef)(function Transition2(props, ref) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Slide, {
+    direction: "up",
+    ref,
+    timeout: 200,
+    ...props
+  });
+});
 const CountrySelect = (0, _react.forwardRef)(({
   value,
   onChange,
   name,
-  sx
+  sx,
+  showDialCode = false
 }, ref) => {
   const {
     setValue
@@ -121,10 +130,6 @@ const CountrySelect = (0, _react.forwardRef)(({
       name: ""
     };
   }, [value]);
-  const onCountryChange = e => {
-    onChange(e.target.value);
-    setValue(name, e.target.value);
-  };
   const handleCountryClick = code => {
     onChange(code);
     setValue(name, code);
@@ -169,79 +174,7 @@ const CountrySelect = (0, _react.forwardRef)(({
       handleCountryClick(country.iso2);
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Select, {
-    ref,
-    open,
-    onOpen: () => setOpen(true),
-    onClose: () => setOpen(false),
-    MenuProps: {
-      style: {
-        maxHeight: "300px",
-        top: "10px"
-      },
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      PaperProps: {
-        ref: menuRef,
-        sx: {
-          display: "flex",
-          "& .MuiList-root": {
-            pt: 0,
-            display: "flex",
-            flexDirection: "column",
-            overflowY: "hidden"
-          }
-        }
-      }
-    },
-    sx: {
-      width: "100%",
-      minWidth: "60px",
-      fieldset: {
-        display: "none"
-      },
-      '&.Mui-focused:has(div[aria-expanded="false"])': {
-        fieldset: {
-          display: "block"
-        }
-      },
-      ".MuiSelect-select": {
-        padding: "8px",
-        paddingRight: "24px !important"
-      },
-      svg: {
-        right: 0
-      },
-      ".MuiMenuItem-root": {
-        justifyContent: "flex-start"
-      },
-      ...sx
-    },
-    value,
-    onChange: onCountryChange,
-    renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "nowrap",
-      gap: 0.5,
-      sx: {
-        cursor: "pointer"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-        iso2: code,
-        style: {
-          display: "flex"
-        }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        children: countryDetail?.name
-      })]
-    }),
+  const countryListContent = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {
         position: "sticky",
@@ -271,7 +204,7 @@ const CountrySelect = (0, _react.forwardRef)(({
         flex: 1,
         overflowY: "auto",
         overflowX: "hidden",
-        maxHeight: "calc(300px - 65px)",
+        maxHeight: isMobile ? "calc(60vh - 80px)" : "calc(300px - 65px)",
         scrollBehavior: "smooth"
       },
       children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
@@ -282,6 +215,8 @@ const CountrySelect = (0, _react.forwardRef)(({
           selected: parsed.iso2 === value,
           onClick: () => handleCountryClick(parsed.iso2),
           sx: {
+            display: "flex",
+            alignItems: "center",
             "&.Mui-selected": {
               backgroundColor: "rgba(0, 0, 0, 0.04)"
             },
@@ -300,6 +235,12 @@ const CountrySelect = (0, _react.forwardRef)(({
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: parsed.name
+          }), showDialCode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              ml: 1
+            },
+            color: "text.secondary",
+            children: `+${parsed.dialCode}`
           })]
         }, parsed.iso2);
       }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
@@ -311,8 +252,175 @@ const CountrySelect = (0, _react.forwardRef)(({
       })
     })]
   });
+  if (!isMobile) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+      ref,
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
+      MenuProps: {
+        style: {
+          maxHeight: "300px",
+          top: "10px"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          ref: menuRef,
+          sx: {
+            display: "flex",
+            "& .MuiList-root": {
+              pt: 0,
+              display: "flex",
+              flexDirection: "column",
+              overflowY: "hidden"
+            }
+          }
+        }
+      },
+      sx: {
+        width: "100%",
+        minWidth: "60px",
+        fieldset: {
+          display: "none"
+        },
+        '&.Mui-focused:has(div[aria-expanded="false"])': {
+          fieldset: {
+            display: "block"
+          }
+        },
+        ".MuiSelect-select": {
+          padding: "8px",
+          paddingRight: "24px !important"
+        },
+        svg: {
+          right: 0
+        },
+        ".MuiMenuItem-root": {
+          justifyContent: "flex-start"
+        },
+        ...sx
+      },
+      value,
+      onChange: e => {
+        onChange(e.target.value);
+        setValue(name, e.target.value);
+      },
+      renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
+        sx: {
+          cursor: "pointer"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: code,
+          style: {
+            display: "flex"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: countryDetail?.name
+        })]
+      }),
+      children: countryListContent
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref,
+    sx: {
+      ...sx
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      onClick: () => setOpen(true),
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      gap: 0.5,
+      sx: {
+        cursor: "pointer",
+        padding: "8px",
+        paddingRight: "24px",
+        position: "relative",
+        border: "none",
+        "-webkit-tap-highlight-color": "transparent",
+        userSelect: "none",
+        background: "none",
+        "&:hover, &:focus, &:active": {
+          backgroundColor: "transparent",
+          outline: "none"
+        },
+        touchAction: "manipulation"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+        iso2: value,
+        style: {
+          display: "flex"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: countryDetail?.name
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          position: "absolute",
+          right: "8px",
+          width: 0,
+          height: 0,
+          borderLeft: "5px solid transparent",
+          borderRight: "5px solid transparent",
+          borderTop: "5px solid currentColor"
+        }
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open,
+      onClose: () => setOpen(false),
+      fullWidth: true,
+      maxWidth: "xs",
+      TransitionComponent: Transition,
+      PaperProps: {
+        sx: {
+          position: "absolute",
+          bottom: 0,
+          m: 0,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          width: "100%"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          p: 2,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          children: "Select Country"
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          onClick: () => setOpen(false),
+          sx: {
+            "-webkit-tap-highlight-color": "transparent"
+          },
+          children: "\u2715"
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        sx: {
+          p: 0
+        },
+        children: countryListContent
+      })]
+    })]
+  });
 });
 CountrySelect.defaultProps = {
-  sx: {}
+  sx: {},
+  showDialCode: false
 };
 module.exports = CountrySelect;

package/lib/contexts/payment.js

@@ -53,6 +53,20 @@ const getCurrency = (currencyId, methods) => {
 const getMethod = (methodId, methods) => {
   return methods.find(x => x.id === methodId);
 };
+const syncToSpaceRequest = (userDid, spaceDid) => {
+  const cacheKey = `sync-space-${userDid}-${spaceDid}`;
+  const cachedRequest = new _cachedRequest.CachedRequest(cacheKey, () => _api.default.post("/api/customers/sync-to-space"), {
+    ttl: 1e3 * 60 * 60
+    // 1 hour
+  });
+
+  return cachedRequest.fetch(false).then(res => {
+    if (!res.success) {
+      cachedRequest.clearCache();
+    }
+    return res;
+  });
+};
 function PaymentProvider({
   session,
   connect,
@@ -84,6 +98,13 @@ function PaymentProvider({
   } = (0, _ahooks.useRequest)(getSettings, {
     refreshDeps: [livemode]
   });
+  (0, _react.useEffect)(() => {
+    const didSpace = session?.user?.didSpace;
+    const userDid = session?.user?.did;
+    if (userDid && didSpace && didSpace.endpoint && didSpace.did) {
+      syncToSpaceRequest(userDid, didSpace.did);
+    }
+  }, [session?.user]);
   const prefix = (0, _util.getPrefix)();
   const [payable, setPayable] = (0, _react.useState)(true);
   if (error) {

package/lib/libs/cached-request.d.ts

@@ -11,7 +11,7 @@ export declare class CachedRequest {
     private getCache;
     private getCachedData;
     private setCachedData;
-    private clearCache;
+    clearCache(): void;
     fetch(forceRefresh?: boolean): Promise<any>;
 }
 export {};

package/lib/libs/util.d.ts

@@ -120,3 +120,4 @@ export declare function parseMarkedText(text: string): Array<{
     type: 'text' | 'marked';
     content: string;
 }>;
+export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;

package/lib/libs/util.js

@@ -44,7 +44,9 @@ exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
-exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
+exports.getSubscriptionTimeSummary = void 0;
+exports.getTokenBalanceLink = getTokenBalanceLink;
+exports.getTxLink = void 0;
 exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
@@ -1169,4 +1171,17 @@ function parseMarkedText(text) {
     }
   }
   return result.filter(p => p.content !== "");
+}
+function getTokenBalanceLink(method, address) {
+  if (!method || !address) {
+    return "";
+  }
+  const explorerHost = method?.settings?.[method?.type]?.explorer_host || "";
+  if (method.type === "arcblock" && address) {
+    return (0, _ufo.joinURL)(explorerHost, "accounts", address, "tokens");
+  }
+  if (["ethereum", "base"].includes(method.type) && address) {
+    return (0, _ufo.joinURL)(explorerHost, "address", address);
+  }
+  return "";
 }

package/lib/libs/validator.d.ts

@@ -1 +1,2 @@
 export declare function validatePostalCode(postalCode: string, country?: string): boolean;
+export declare function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale?: string): Record<string, any>;

package/lib/libs/validator.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFieldValidation = getFieldValidation;
 exports.validatePostalCode = validatePostalCode;
 var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
+var _locales = require("../locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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"];
 function validatePostalCode(postalCode, country) {
@@ -17,4 +19,16 @@ function validatePostalCode(postalCode, country) {
     console.error(error);
     return false;
   }
+}
+function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || (0, _locales.t)("payment.checkout.invalid", locale)
+    };
+  }
+  return rules;
 }

package/lib/locales/en.js

@@ -239,7 +239,8 @@ module.exports = (0, _flat.default)({
         confirmPrompt: "Please confirm the details before proceeding.",
         payer: "Account",
         amount: "Amount",
-        failed: "Account changed, please pay manually."
+        failed: "Account changed, please pay manually.",
+        balanceLink: "View Balance"
       }
     },
     customer: {

package/lib/locales/zh.js

@@ -239,7 +239,8 @@ module.exports = (0, _flat.default)({
         confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
-        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
+        balanceLink: "\u67E5\u770B\u4F59\u989D"
       }
     },
     customer: {

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

@@ -3,11 +3,15 @@ type Props = {
     mode: string;
     stripe: boolean;
     sx?: SxProps;
+    fieldValidation?: Record<string, any>;
+    errorPosition?: 'right' | 'bottom';
 };
-declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
 declare namespace AddressForm {
     var defaultProps: {
         sx: {};
+        fieldValidation: {};
+        errorPosition: string;
     };
 }
 export default AddressForm;

package/lib/payment/form/address.js

@@ -13,15 +13,20 @@ var _countrySelect = _interopRequireDefault(require("../../components/country-se
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 AddressForm.defaultProps = {
-  sx: {}
+  sx: {},
+  fieldValidation: {},
+  errorPosition: "right"
 };
 function AddressForm({
   mode,
   stripe,
-  sx = {}
+  sx = {},
+  fieldValidation,
+  errorPosition
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     control
@@ -46,9 +51,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.line1",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation, locale)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -57,9 +63,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.city",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation, locale)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -68,9 +75,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.state",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -83,9 +91,10 @@ function AddressForm({
               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)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.postal_code"),
             InputProps: {
@@ -139,9 +148,10 @@ function AddressForm({
                 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)
               },
-              errorPosition: "right",
+              errorPosition,
               variant: "outlined",
               placeholder: t("payment.checkout.billing.postal_code"),
               wrapperStyle: {

package/lib/payment/form/index.js

@@ -36,6 +36,7 @@ var _loadingButton = _interopRequireDefault(require("../../components/loading-bu
 var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
 var _currency2 = require("../../libs/currency");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
+var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -123,6 +124,7 @@ function PaymentForm({
     payable
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
+  const formErrorPosition = "bottom";
   const {
     control,
     getValues,
@@ -535,6 +537,7 @@ function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const balanceLink = (0, _util2.getTokenBalanceLink)(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
     onConfirm: handleFastCheckoutConfirm,
     onCancel: handleFastCheckoutCancel,
@@ -561,12 +564,33 @@ function PaymentForm({
               whiteSpace: "nowrap"
             },
             children: t("payment.checkout.fastPay.payer")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
               did: state.fastCheckoutInfo.payer || "",
               compact: true,
               responsive: false
-            })
+            }), balanceLink && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t("payment.checkout.fastPay.balanceLink"),
+              placement: "top",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNew, {
+                sx: {
+                  color: "text.lighter",
+                  fontSize: "0.85rem",
+                  cursor: "pointer",
+                  "&:hover": {
+                    color: "text.primary"
+                  }
+                },
+                onClick: () => {
+                  window.open(balanceLink, "_blank");
+                }
+              })
+            })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           flexDirection: "row",
@@ -709,9 +733,10 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_name",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
@@ -719,10 +744,11 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_email",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
               required: t("payment.checkout.required"),
-              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid")
+              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid"),
+              ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -731,14 +757,15 @@ function PaymentForm({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
               name: "customer_phone",
               variant: "outlined",
-              errorPosition: "right",
+              errorPosition: formErrorPosition,
               placeholder: "Phone number",
               rules: {
                 required: t("payment.checkout.required"),
                 validate: async x => {
                   const isValid = await (0, _phoneValidator.validatePhoneNumber)(x);
                   return isValid ? true : t("payment.checkout.invalid");
-                }
+                },
+                ...(0, _validator.getFieldValidation)("customer_phone", checkoutSession.metadata?.page_info?.field_validation, locale)
               }
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
@@ -746,7 +773,9 @@ function PaymentForm({
             stripe: method?.type === "stripe",
             sx: {
               marginTop: "0 !important"
-            }
+            },
+            fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
+            errorPosition: formErrorPosition
           })]
         })]
       })

package/lib/payment/form/phone.js

@@ -103,7 +103,8 @@ function PhoneInput({
               "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                 borderColor: "transparent"
               }
-            }
+            },
+            showDialCode: true
           })
         })
       },