@blocklet/payment-react 1.22.0 → 1.22.2

package/es/payment/form/index.js

@@ -83,11 +83,24 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
   }
   const allFields = { ...addressFields, ...basicFields };
+  const updatedFields = {
+    ...currentValues,
+    billing_address: {
+      ...currentValues.billing_address
+    }
+  };
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split(".")[0]]) {
       setValue(field, value, { shouldValidate });
+      if (field.startsWith("billing_address.")) {
+        const addressKey = field.replace("billing_address.", "");
+        updatedFields.billing_address[addressKey] = value;
+      } else {
+        updatedFields[field] = value;
+      }
     }
   });
+  return updatedFields;
 };
 export default function PaymentForm({
   checkoutSession,
@@ -196,10 +209,12 @@ export default function PaymentForm({
           userInfo = mergeUserInfo(customer || {}, userInfo);
           console.error(err);
         }
-        setUserFormValues(userInfo, values, setValue, {
+        const formValues = setUserFormValues(userInfo, values, setValue, {
           preferExisting: false,
           showPhone: checkoutSession.phone_number_collection?.enabled
         });
+        const isValid = validateUserInfo(formValues);
+        setState({ showEditForm: !isValid });
       } else {
         setUserFormValues(
           {
@@ -246,97 +261,95 @@ export default 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 validateUserInfo = () => {
-    if (!session?.user) {
+  const validateUserInfo = (values) => {
+    if (!values) {
       return false;
     }
-    const { fullName, name, email, phone, address } = session.user;
     const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
-    const hasName = !!(fullName || name);
-    if (!hasName) {
+    const customerName2 = values.customer_name;
+    if (!customerName2 || customerName2.trim() === "") {
       return false;
     }
-    const hasValidEmail = email && isEmail(email);
-    if (!hasValidEmail) {
+    const customerEmail2 = values.customer_email;
+    if (!customerEmail2 || !isEmail(customerEmail2)) {
       return false;
     }
     const nameValidation = getFieldValidation("customer_name", fieldValidation, locale);
-    if (nameValidation.pattern && fullName) {
+    if (nameValidation.pattern) {
       const pattern = nameValidation.pattern.value;
-      if (!pattern.test(fullName)) {
+      if (!pattern.test(customerName2)) {
         return false;
       }
     }
     const emailValidation = getFieldValidation("customer_email", fieldValidation, locale);
-    if (emailValidation.pattern && email) {
+    if (emailValidation.pattern) {
       const pattern = emailValidation.pattern.value;
-      if (!pattern.test(email)) {
+      if (!pattern.test(customerEmail2)) {
         return false;
       }
     }
-    if (!address || !address.postalCode || !validatePostalCode(address.postalCode, address.country)) {
+    const billingAddress2 = values.billing_address || {};
+    const { postal_code: postalCode, country, state: stateValue, line1, city } = billingAddress2;
+    if (!postalCode || !validatePostalCode(postalCode, country)) {
       return false;
     }
     const postalCodeValidation = getFieldValidation("billing_address.postal_code", fieldValidation, locale);
     if (postalCodeValidation.pattern) {
       const pattern = postalCodeValidation.pattern.value;
-      if (!pattern.test(address.postalCode)) {
+      if (!pattern.test(postalCode)) {
         return false;
       }
     }
-    if (!address.province) {
+    if (!stateValue) {
       return false;
     }
     const stateValidation = getFieldValidation("billing_address.state", fieldValidation, locale);
     if (stateValidation.pattern) {
       const pattern = stateValidation.pattern.value;
-      if (!pattern.test(address.province)) {
+      if (!pattern.test(stateValue)) {
         return false;
       }
     }
     if (checkoutSession.phone_number_collection?.enabled) {
-      if (!phone || phone.trim() === "") {
+      const customerPhone2 = values.customer_phone;
+      if (!customerPhone2 || customerPhone2.trim() === "") {
         return false;
       }
       const phoneValidation = getFieldValidation("customer_phone", fieldValidation, locale);
       if (phoneValidation.pattern) {
         const pattern = phoneValidation.pattern.value;
-        if (!pattern.test(phone)) {
+        if (!pattern.test(customerPhone2)) {
           return false;
         }
       }
     }
     const addressMode = checkoutSession.billing_address_collection;
     if (addressMode === "required") {
-      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+      if (!country || !stateValue || !line1 || !city || !postalCode) {
         return false;
       }
       const line1Validation = getFieldValidation("billing_address.line1", fieldValidation, locale);
       if (line1Validation.pattern) {
         const pattern = line1Validation.pattern.value;
-        if (!pattern.test(address.line1)) {
+        if (!pattern.test(line1)) {
           return false;
         }
       }
       const cityValidation = getFieldValidation("billing_address.city", fieldValidation, locale);
       if (cityValidation.pattern) {
         const pattern = cityValidation.pattern.value;
-        if (!pattern.test(address.city)) {
+        if (!pattern.test(city)) {
           return false;
         }
       }
     }
     return true;
   };
-  const showForm = useMemo(() => {
-    if (!session?.user) {
-      return false;
-    }
-    if (state.showEditForm) {
-      return true;
-    }
-    return !validateUserInfo();
-  }, [session?.user, method, state.showEditForm]);
+  const customerName = useWatch({ control, name: "customer_name" });
+  const customerEmail = useWatch({ control, name: "customer_email" });
+  const customerPhone = useWatch({ control, name: "customer_phone" });
+  const billingAddress = useWatch({ control, name: "billing_address" });
+  const showForm = session?.user ? state.showEditForm : false;
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -375,11 +388,13 @@ export default function PaymentForm({
     if (profile) {
       const values = getValues();
       const userInfo = mergeUserInfo(profile, session?.user);
-      setUserFormValues(userInfo, values, setValue, {
+      const formValues = setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled,
         shouldValidate: true
       });
+      const isValid = validateUserInfo(formValues);
+      setState({ showEditForm: !isValid });
       await trigger();
     }
   };
@@ -857,19 +872,14 @@ export default function PaymentForm({
               )
             ] }),
             /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 600, fontSize: "0.9375rem" }, children: session.user.fullName || session.user.name }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: session.user.email }),
-              checkoutSession.phone_number_collection?.enabled && session.user.phone && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: session.user.phone }),
-              session.user.address && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, children: [
-                session.user.address.country && /* @__PURE__ */ jsx(FlagEmoji, { iso2: session.user.address.country.toLowerCase(), style: { width: 18, height: 14 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 600, fontSize: "0.9375rem" }, children: customerName }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: customerEmail }),
+              checkoutSession.phone_number_collection?.enabled && customerPhone && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: customerPhone }),
+              billingAddress && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                billingAddress.country && /* @__PURE__ */ jsx(FlagEmoji, { iso2: billingAddress.country.toLowerCase(), style: { width: 18, height: 14 } }),
                 /* @__PURE__ */ jsxs(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} ]`
+                  checkoutSession.billing_address_collection === "required" ? [billingAddress.line1, billingAddress.city, billingAddress.state].filter(Boolean).join(", ") : billingAddress.state || "",
+                  billingAddress.postal_code && ` [ ${t("payment.checkout.billing.postal_code")}: ${billingAddress.postal_code} ]`
                 ] })
               ] })
             ] })

package/lib/payment/form/index.js

@@ -92,13 +92,26 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     ...addressFields,
     ...basicFields
   };
+  const updatedFields = {
+    ...currentValues,
+    billing_address: {
+      ...currentValues.billing_address
+    }
+  };
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split(".")[0]]) {
       setValue(field, value, {
         shouldValidate
       });
+      if (field.startsWith("billing_address.")) {
+        const addressKey = field.replace("billing_address.", "");
+        updatedFields.billing_address[addressKey] = value;
+      } else {
+        updatedFields[field] = value;
+      }
     }
   });
+  return updatedFields;
 };
 function PaymentForm({
   checkoutSession,
@@ -223,10 +236,14 @@ function PaymentForm({
           userInfo = mergeUserInfo(customer || {}, userInfo);
           console.error(err);
         }
-        setUserFormValues(userInfo, values, setValue, {
+        const formValues = setUserFormValues(userInfo, values, setValue, {
           preferExisting: false,
           showPhone: checkoutSession.phone_number_collection?.enabled
         });
+        const isValid = validateUserInfo(formValues);
+        setState({
+          showEditForm: !isValid
+        });
       } else {
         setUserFormValues({
           name: "",
@@ -279,103 +296,113 @@ 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 validateUserInfo = () => {
-    if (!session?.user) {
+  const validateUserInfo = values => {
+    if (!values) {
       return false;
     }
-    const {
-      fullName,
-      name,
-      email,
-      phone,
-      address
-    } = session.user;
     const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
-    const hasName = !!(fullName || name);
-    if (!hasName) {
+    const customerName2 = values.customer_name;
+    if (!customerName2 || customerName2.trim() === "") {
       return false;
     }
-    const hasValidEmail = email && (0, _isEmail.default)(email);
-    if (!hasValidEmail) {
+    const customerEmail2 = values.customer_email;
+    if (!customerEmail2 || !(0, _isEmail.default)(customerEmail2)) {
       return false;
     }
     const nameValidation = (0, _validator.getFieldValidation)("customer_name", fieldValidation, locale);
-    if (nameValidation.pattern && fullName) {
+    if (nameValidation.pattern) {
       const pattern = nameValidation.pattern.value;
-      if (!pattern.test(fullName)) {
+      if (!pattern.test(customerName2)) {
         return false;
       }
     }
     const emailValidation = (0, _validator.getFieldValidation)("customer_email", fieldValidation, locale);
-    if (emailValidation.pattern && email) {
+    if (emailValidation.pattern) {
       const pattern = emailValidation.pattern.value;
-      if (!pattern.test(email)) {
+      if (!pattern.test(customerEmail2)) {
         return false;
       }
     }
-    if (!address || !address.postalCode || !(0, _validator.validatePostalCode)(address.postalCode, address.country)) {
+    const billingAddress2 = values.billing_address || {};
+    const {
+      postal_code: postalCode,
+      country,
+      state: stateValue,
+      line1,
+      city
+    } = billingAddress2;
+    if (!postalCode || !(0, _validator.validatePostalCode)(postalCode, 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)) {
+      if (!pattern.test(postalCode)) {
         return false;
       }
     }
-    if (!address.province) {
+    if (!stateValue) {
       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)) {
+      if (!pattern.test(stateValue)) {
         return false;
       }
     }
     if (checkoutSession.phone_number_collection?.enabled) {
-      if (!phone || phone.trim() === "") {
+      const customerPhone2 = values.customer_phone;
+      if (!customerPhone2 || customerPhone2.trim() === "") {
         return false;
       }
       const phoneValidation = (0, _validator.getFieldValidation)("customer_phone", fieldValidation, locale);
       if (phoneValidation.pattern) {
         const pattern = phoneValidation.pattern.value;
-        if (!pattern.test(phone)) {
+        if (!pattern.test(customerPhone2)) {
           return false;
         }
       }
     }
     const addressMode = checkoutSession.billing_address_collection;
     if (addressMode === "required") {
-      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+      if (!country || !stateValue || !line1 || !city || !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)) {
+        if (!pattern.test(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)) {
+        if (!pattern.test(city)) {
           return false;
         }
       }
     }
     return true;
   };
-  const showForm = (0, _react.useMemo)(() => {
-    if (!session?.user) {
-      return false;
-    }
-    if (state.showEditForm) {
-      return true;
-    }
-    return !validateUserInfo();
-  }, [session?.user, method, state.showEditForm]);
+  const customerName = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_name"
+  });
+  const customerEmail = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_email"
+  });
+  const customerPhone = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_phone"
+  });
+  const billingAddress = (0, _reactHookForm.useWatch)({
+    control,
+    name: "billing_address"
+  });
+  const showForm = session?.user ? state.showEditForm : false;
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -425,11 +452,15 @@ function PaymentForm({
     if (profile) {
       const values = getValues();
       const userInfo = mergeUserInfo(profile, session?.user);
-      setUserFormValues(userInfo, values, setValue, {
+      const formValues = setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled,
         shouldValidate: true
       });
+      const isValid = validateUserInfo(formValues);
+      setState({
+        showEditForm: !isValid
+      });
       await trigger();
     }
   };
@@ -947,27 +978,27 @@ function PaymentForm({
                 fontWeight: 600,
                 fontSize: "0.9375rem"
               },
-              children: session.user.fullName || session.user.name
+              children: customerName
             }), /* @__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, {
+              children: customerEmail
+            }), checkoutSession.phone_number_collection?.enabled && customerPhone && /* @__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, {
+              children: customerPhone
+            }), billingAddress && /* @__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(),
+              children: [billingAddress.country && /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+                iso2: billingAddress.country.toLowerCase(),
                 style: {
                   width: 18,
                   height: 14
@@ -978,7 +1009,7 @@ function PaymentForm({
                   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} ]`]
+                children: [checkoutSession.billing_address_collection === "required" ? [billingAddress.line1, billingAddress.city, billingAddress.state].filter(Boolean).join(", ") : billingAddress.state || "", billingAddress.postal_code && ` [ ${t("payment.checkout.billing.postal_code")}: ${billingAddress.postal_code} ]`]
               })]
             })]
           })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,11 +54,11 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.52",
-    "@arcblock/ux": "^3.1.52",
+    "@arcblock/did-connect-react": "^3.1.53",
+    "@arcblock/ux": "^3.1.53",
     "@arcblock/ws": "^1.26.3",
-    "@blocklet/theme": "^3.1.52",
-    "@blocklet/ui-react": "^3.1.52",
+    "@blocklet/theme": "^3.1.53",
+    "@blocklet/ui-react": "^3.1.53",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
@@ -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.22.0",
+    "@blocklet/payment-types": "1.22.2",
     "@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": "d69619c7d669bc6de8620273ff0f3f7b5d56383f"
+  "gitHead": "13ea906cf090d7069a970d97d9a3f06426b27092"
 }

package/src/payment/form/index.tsx

@@ -155,11 +155,27 @@ const setUserFormValues = (
 
   const allFields = { ...addressFields, ...basicFields };
 
+  const updatedFields: Record<string, any> = {
+    ...currentValues,
+    billing_address: {
+      ...currentValues.billing_address,
+    },
+  };
+
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split('.')[0]]) {
       setValue(field, value, { shouldValidate });
+
+      if (field.startsWith('billing_address.')) {
+        const addressKey = field.replace('billing_address.', '');
+        updatedFields.billing_address[addressKey] = value;
+      } else {
+        updatedFields[field] = value;
+      }
     }
   });
+
+  return updatedFields;
 };
 
 // FIXME: https://stripe.com/docs/elements/address-element
@@ -305,10 +321,13 @@ export default function PaymentForm({
           userInfo = mergeUserInfo(customer || {}, userInfo);
           console.error(err);
         }
-        setUserFormValues(userInfo, values, setValue, {
+        const formValues = setUserFormValues(userInfo, values, setValue, {
           preferExisting: false,
           showPhone: checkoutSession.phone_number_collection?.enabled,
         });
+
+        const isValid = validateUserInfo(formValues);
+        setState({ showEditForm: !isValid });
       } else {
         setUserFormValues(
           {
@@ -372,71 +391,73 @@ export default function PaymentForm({
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
 
-  const validateUserInfo = () => {
-    if (!session?.user) {
+  const validateUserInfo = (values: any) => {
+    if (!values) {
       return false;
     }
 
-    const { fullName, name, email, phone, address } = session.user;
     const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
 
-    const hasName = !!(fullName || name);
-    if (!hasName) {
+    const customerName = values.customer_name;
+    if (!customerName || customerName.trim() === '') {
       return false;
     }
 
-    const hasValidEmail = email && isEmail(email);
-    if (!hasValidEmail) {
+    const customerEmail = values.customer_email;
+    if (!customerEmail || !isEmail(customerEmail)) {
       return false;
     }
 
     const nameValidation = getFieldValidation('customer_name', fieldValidation, locale);
-    if (nameValidation.pattern && fullName) {
+    if (nameValidation.pattern) {
       const pattern = nameValidation.pattern.value;
-      if (!pattern.test(fullName)) {
+      if (!pattern.test(customerName)) {
         return false;
       }
     }
 
     const emailValidation = getFieldValidation('customer_email', fieldValidation, locale);
-    if (emailValidation.pattern && email) {
+    if (emailValidation.pattern) {
       const pattern = emailValidation.pattern.value;
-      if (!pattern.test(email)) {
+      if (!pattern.test(customerEmail)) {
         return false;
       }
     }
 
-    if (!address || !address.postalCode || !validatePostalCode(address.postalCode, address.country)) {
+    const billingAddress = values.billing_address || {};
+    const { postal_code: postalCode, country, state: stateValue, line1, city } = billingAddress;
+    if (!postalCode || !validatePostalCode(postalCode, country)) {
       return false;
     }
 
     const postalCodeValidation = getFieldValidation('billing_address.postal_code', fieldValidation, locale);
     if (postalCodeValidation.pattern) {
       const pattern = postalCodeValidation.pattern.value;
-      if (!pattern.test(address.postalCode)) {
+      if (!pattern.test(postalCode)) {
         return false;
       }
     }
 
-    if (!address.province) {
+    if (!stateValue) {
       return false;
     }
     const stateValidation = getFieldValidation('billing_address.state', fieldValidation, locale);
     if (stateValidation.pattern) {
       const pattern = stateValidation.pattern.value;
-      if (!pattern.test(address.province)) {
+      if (!pattern.test(stateValue)) {
         return false;
       }
     }
 
     if (checkoutSession.phone_number_collection?.enabled) {
-      if (!phone || phone.trim() === '') {
+      const customerPhone = values.customer_phone;
+      if (!customerPhone || customerPhone.trim() === '') {
         return false;
       }
       const phoneValidation = getFieldValidation('customer_phone', fieldValidation, locale);
       if (phoneValidation.pattern) {
         const pattern = phoneValidation.pattern.value;
-        if (!pattern.test(phone)) {
+        if (!pattern.test(customerPhone)) {
           return false;
         }
       }
@@ -444,14 +465,14 @@ export default function PaymentForm({
 
     const addressMode = checkoutSession.billing_address_collection;
     if (addressMode === 'required') {
-      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+      if (!country || !stateValue || !line1 || !city || !postalCode) {
         return false;
       }
 
       const line1Validation = getFieldValidation('billing_address.line1', fieldValidation, locale);
       if (line1Validation.pattern) {
         const pattern = line1Validation.pattern.value;
-        if (!pattern.test(address.line1)) {
+        if (!pattern.test(line1)) {
           return false;
         }
       }
@@ -459,7 +480,7 @@ export default function PaymentForm({
       const cityValidation = getFieldValidation('billing_address.city', fieldValidation, locale);
       if (cityValidation.pattern) {
         const pattern = cityValidation.pattern.value;
-        if (!pattern.test(address.city)) {
+        if (!pattern.test(city)) {
           return false;
         }
       }
@@ -468,16 +489,12 @@ export default function PaymentForm({
     return true;
   };
 
-  const showForm = useMemo(() => {
-    if (!session?.user) {
-      return false;
-    }
-    if (state.showEditForm) {
-      return true;
-    }
-    return !validateUserInfo();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session?.user, method, state.showEditForm]);
+  const customerName = useWatch({ control, name: 'customer_name' });
+  const customerEmail = useWatch({ control, name: 'customer_email' });
+  const customerPhone = useWatch({ control, name: 'customer_phone' });
+  const billingAddress = useWatch({ control, name: 'billing_address' });
+
+  const showForm = session?.user ? state.showEditForm : false;
 
   const handleConnected = async () => {
     if (processingRef.current) {
@@ -520,11 +537,14 @@ export default function PaymentForm({
     if (profile) {
       const values = getValues();
       const userInfo = mergeUserInfo(profile, session?.user);
-      setUserFormValues(userInfo, values, setValue, {
+      const formValues = setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled,
         shouldValidate: true,
       });
+
+      const isValid = validateUserInfo(formValues);
+      setState({ showEditForm: !isValid });
       await trigger();
     }
   };
@@ -1027,32 +1047,27 @@ export default function PaymentForm({
               </Stack>
               <Stack spacing={0.5}>
                 <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 600, fontSize: '0.9375rem' }}>
-                  {session.user.fullName || session.user.name}
+                  {customerName}
                 </Typography>
                 <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
-                  {session.user.email}
+                  {customerEmail}
                 </Typography>
-                {checkoutSession.phone_number_collection?.enabled && session.user.phone && (
+                {checkoutSession.phone_number_collection?.enabled && customerPhone && (
                   <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
-                    {session.user.phone}
+                    {customerPhone}
                   </Typography>
                 )}
-                {session.user.address && (
+                {billingAddress && (
                   <Stack direction="row" alignItems="center" spacing={0.75}>
-                    {session.user.address.country && (
-                      <FlagEmoji iso2={session.user.address.country.toLowerCase()} style={{ width: 18, height: 14 }} />
+                    {billingAddress.country && (
+                      <FlagEmoji iso2={billingAddress.country.toLowerCase()} style={{ width: 18, height: 14 }} />
                     )}
                     <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
-                      {[
-                        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} ]`}
+                      {checkoutSession.billing_address_collection === 'required'
+                        ? [billingAddress.line1, billingAddress.city, billingAddress.state].filter(Boolean).join(', ')
+                        : billingAddress.state || ''}
+                      {billingAddress.postal_code &&
+                        ` [ ${t('payment.checkout.billing.postal_code')}: ${billingAddress.postal_code} ]`}
                     </Typography>
                   </Stack>
                 )}