@blocklet/payment-react 1.14.29 → 1.14.30

package/es/libs/util.d.ts

@@ -105,3 +105,4 @@ export declare function formatQuantityInventory(price: TPrice, quantity: string
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
 export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';
+export declare function isMobileSafari(): boolean;

package/es/libs/util.js

@@ -805,3 +805,10 @@ export function getWordBreakStyle(value) {
   }
   return "break-all";
 }
+export function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
+  const isMobile = ua.indexOf("mobile") > -1 || /iphone|ipad|ipod/.test(ua);
+  const isIOS = /iphone|ipad|ipod/.test(ua);
+  return isSafari && isMobile && isIOS;
+}

package/es/payment/form/index.js

@@ -3,15 +3,16 @@ import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
-import { Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { Box, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
+import { isEmpty } from "lodash";
 import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -29,6 +30,7 @@ import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe.js";
+import { useMobile } from "../../hooks/mobile.js";
 const phoneUtil = PhoneNumberUtil.getInstance();
 const waitForCheckoutComplete = async (sessionId) => {
   let result;
@@ -62,9 +64,17 @@ export default function PaymentForm({
   action
 }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
-  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { errors }
+  } = useFormContext();
+  const errorRef = useRef(null);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -163,6 +173,11 @@ export default function PaymentForm({
       setState({ paying: false });
     }
   };
+  useEffect(() => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [errors, isMobile]);
   const onUserLoggedIn = async () => {
     const { data: profile } = await api.get("/api/customers/me?fallback=1");
     if (profile) {
@@ -267,6 +282,9 @@ export default function PaymentForm({
     setState({ submitting: false });
   };
   const onAction = () => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: "smooth" });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -343,68 +361,79 @@ export default function PaymentForm({
         )
       ] }) }),
       /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between" }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, sx: { flex: 1, overflow: "auto" }, children: [
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "customer_name",
-            variant: "outlined",
-            errorPosition: "right",
-            rules: {
-              required: t("payment.checkout.required")
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.email") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "customer_email",
-            variant: "outlined",
-            errorPosition: "right",
-            rules: {
-              required: t("payment.checkout.required"),
-              validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
-            }
-          }
-        ),
-        checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.phone") }),
-          /* @__PURE__ */ jsx(
-            PhoneInput,
-            {
-              name: "customer_phone",
-              variant: "outlined",
-              errorPosition: "right",
-              placeholder: "Phone number",
-              rules: {
-                required: t("payment.checkout.required"),
-                validate: (x) => {
-                  try {
-                    const parsed = phoneUtil.parseAndKeepRawInput(x);
-                    return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                  } catch {
-                    return t("payment.checkout.invalid");
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          className: "cko-payment-form",
+          id: "cko-payment-form",
+          spacing: 0,
+          ref: !isEmpty(errors) ? errorRef : void 0,
+          sx: { flex: 1, overflow: "auto" },
+          children: [
+            /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                name: "customer_name",
+                variant: "outlined",
+                errorPosition: "right",
+                rules: {
+                  required: t("payment.checkout.required")
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.email") }),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                name: "customer_email",
+                variant: "outlined",
+                errorPosition: "right",
+                rules: {
+                  required: t("payment.checkout.required"),
+                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
+                }
+              }
+            ),
+            checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.phone") }),
+              /* @__PURE__ */ jsx(
+                PhoneInput,
+                {
+                  name: "customer_phone",
+                  variant: "outlined",
+                  errorPosition: "right",
+                  placeholder: "Phone number",
+                  rules: {
+                    required: t("payment.checkout.required"),
+                    validate: (x) => {
+                      try {
+                        const parsed = phoneUtil.parseAndKeepRawInput(x);
+                        return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
+                      } catch {
+                        return t("payment.checkout.invalid");
+                      }
+                    }
                   }
                 }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              AddressForm,
+              {
+                mode: checkoutSession.billing_address_collection,
+                stripe: method?.type === "stripe",
+                sx: { marginTop: "0 !important" }
               }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AddressForm,
-          {
-            mode: checkoutSession.billing_address_collection,
-            stripe: method?.type === "stripe",
-            sx: { marginTop: "0 !important" }
-          }
-        )
-      ] })
+            )
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
         LoadingButton,
         {
           variant: "contained",
@@ -417,7 +446,7 @@ export default function PaymentForm({
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
-      ),
+      ) }),
       ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(

package/es/payment/index.js

@@ -11,7 +11,7 @@ import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { usePaymentContext } from "../contexts/payment.js";
 import api from "../libs/api.js";
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../libs/util.js";
+import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
@@ -66,6 +66,25 @@ function PaymentInner({
       )
     }
   });
+  useEffect(() => {
+    if (!isMobileSafari()) {
+      return () => {
+      };
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener("focusin", focusinHandler);
+    document.body.addEventListener("focusout", focusoutHandler);
+    return () => {
+      document.body.removeEventListener("focusin", focusinHandler);
+      document.body.removeEventListener("focusout", focusoutHandler);
+    };
+  }, []);
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
@@ -221,7 +240,9 @@ export default function Payment({
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const { isMobile } = useMobile();
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
+  const isMobileSafariEnv = isMobileSafari();
   useEffect(() => {
     setTimeout(() => {
       setDelay(true);
@@ -291,7 +312,10 @@ export default function Payment({
     {
       display: "flex",
       flexDirection: "column",
-      sx: { height: mode === "standalone" ? "100vh" : "auto", overflow: "hidden" },
+      sx: {
+        height: mode === "standalone" ? "100vh" : "auto",
+        overflow: isMobileSafariEnv ? "visible" : "hidden"
+      },
       children: [
         mode === "standalone" ? /* @__PURE__ */ jsx(
           Header,
@@ -306,17 +330,58 @@ export default function Payment({
             sx: { borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)" }
           }
         ) : null,
-        /* @__PURE__ */ jsxs(Root, { mode, sx: { flex: 1 }, children: [
-          goBack && /* @__PURE__ */ jsx(
-            ArrowBackOutlined,
-            {
-              sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
-              onClick: goBack,
-              fontSize: "medium"
-            }
-          ),
-          /* @__PURE__ */ jsx(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: renderContent() })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Root,
+          {
+            mode,
+            sx: {
+              flex: 1,
+              overflow: {
+                xs: isMobileSafariEnv ? "visible" : "auto",
+                md: "hidden"
+              },
+              ...isMobile && mode === "standalone" ? {
+                ".cko-payment-submit-btn": {
+                  position: "fixed",
+                  bottom: 20,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: "#fff",
+                  padding: "10px",
+                  textAlign: "center",
+                  button: {
+                    color: "#fff",
+                    maxWidth: 542
+                  }
+                },
+                ".cko-footer": {
+                  position: "fixed",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: "#fff",
+                  marginBottom: 0
+                },
+                ".cko-payment": {
+                  paddingBottom: "100px"
+                }
+              } : {}
+            },
+            children: [
+              goBack && /* @__PURE__ */ jsx(
+                ArrowBackOutlined,
+                {
+                  sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
+                  onClick: goBack,
+                  fontSize: "medium"
+                }
+              ),
+              /* @__PURE__ */ jsx(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: renderContent() })
+            ]
+          }
+        )
       ]
     }
   );
@@ -461,7 +526,6 @@ export const Root = styled(Box)`
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    background: ${(props) => props.mode === "standalone" ? "var(--backgrounds-bg-subtle, #F9FAFB)" : "transparent"};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -470,7 +534,8 @@ export const Root = styled(Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -483,6 +548,7 @@ export const Root = styled(Box)`
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }

package/lib/libs/util.d.ts

@@ -105,3 +105,4 @@ export declare function formatQuantityInventory(price: TPrice, quantity: string
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
 export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';
+export declare function isMobileSafari(): boolean;

package/lib/libs/util.js

@@ -44,6 +44,7 @@ exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
+exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
 exports.lazyLoad = lazyLoad;
@@ -974,4 +975,11 @@ function getWordBreakStyle(value) {
     return "break-word";
   }
   return "break-all";
+}
+function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
+  const isMobile = ua.indexOf("mobile") > -1 || /iphone|ipad|ipod/.test(ua);
+  const isIOS = /iphone|ipad|ipod/.test(ua);
+  return isSafari && isMobile && isIOS;
 }

package/lib/payment/form/index.js

@@ -18,6 +18,7 @@ var _reactHookForm = require("react-hook-form");
 var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
+var _lodash = require("lodash");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
@@ -28,6 +29,7 @@ var _address = _interopRequireDefault(require("./address"));
 var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
 var _stripe = _interopRequireDefault(require("./stripe"));
+var _mobile = require("../../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const phoneUtil = _googleLibphonenumber.PhoneNumberUtil.getInstance();
 const waitForCheckoutComplete = async sessionId => {
@@ -66,6 +68,9 @@ function PaymentForm({
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const {
     session,
     connect,
@@ -76,8 +81,12 @@ function PaymentForm({
     control,
     getValues,
     setValue,
-    handleSubmit
+    handleSubmit,
+    formState: {
+      errors
+    }
   } = (0, _reactHookForm.useFormContext)();
+  const errorRef = (0, _react.useRef)(null);
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -190,6 +199,13 @@ function PaymentForm({
       });
     }
   };
+  (0, _react.useEffect)(() => {
+    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  }, [errors, isMobile]);
   const onUserLoggedIn = async () => {
     const {
       data: profile
@@ -318,6 +334,11 @@ function PaymentForm({
     });
   };
   const onAction = () => {
+    if (errorRef.current && !(0, _lodash.isEmpty)(errors) && isMobile) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -412,7 +433,9 @@ function PaymentForm({
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
+          id: "cko-payment-form",
           spacing: 0,
+          ref: !(0, _lodash.isEmpty)(errors) ? errorRef : void 0,
           sx: {
             flex: 1,
             overflow: "auto"
@@ -477,16 +500,19 @@ function PaymentForm({
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-payment-submit",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
-          variant: "contained",
-          color: "primary",
-          size: "large",
-          className: "cko-submit-button",
-          onClick: onAction,
-          fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-          loading: state.submitting || state.paying,
-          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "cko-payment-submit-btn",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+            variant: "contained",
+            color: "primary",
+            size: "large",
+            className: "cko-submit-button",
+            onClick: onAction,
+            fullWidth: true,
+            disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
+            loading: state.submitting || state.paying,
+            children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             mt: 2.5,

package/lib/payment/index.js

@@ -81,6 +81,24 @@ function PaymentInner({
       })
     }
   });
+  (0, _react.useEffect)(() => {
+    if (!(0, _util2.isMobileSafari)()) {
+      return () => {};
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener("focusin", focusinHandler);
+    document.body.addEventListener("focusout", focusoutHandler);
+    return () => {
+      document.body.removeEventListener("focusin", focusinHandler);
+      document.body.removeEventListener("focusout", focusoutHandler);
+    };
+  }, []);
   const currencyId = (0, _reactHookForm.useWatch)({
     control: methods.control,
     name: "payment_currency",
@@ -280,7 +298,11 @@ function Payment({
     setLivemode
   } = (0, _payment.usePaymentContext)();
   const [delay, setDelay] = (0, _react.useState)(false);
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
+  const isMobileSafariEnv = (0, _util2.isMobileSafari)();
   (0, _react.useEffect)(() => {
     setTimeout(() => {
       setDelay(true);
@@ -359,7 +381,7 @@ function Payment({
     flexDirection: "column",
     sx: {
       height: mode === "standalone" ? "100vh" : "auto",
-      overflow: "hidden"
+      overflow: isMobileSafariEnv ? "visible" : "hidden"
     },
     children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
       meta: void 0,
@@ -375,7 +397,39 @@ function Payment({
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
       sx: {
-        flex: 1
+        flex: 1,
+        overflow: {
+          xs: isMobileSafariEnv ? "visible" : "auto",
+          md: "hidden"
+        },
+        ...(isMobile && mode === "standalone" ? {
+          ".cko-payment-submit-btn": {
+            position: "fixed",
+            bottom: 20,
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            background: "#fff",
+            padding: "10px",
+            textAlign: "center",
+            button: {
+              color: "#fff",
+              maxWidth: 542
+            }
+          },
+          ".cko-footer": {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            background: "#fff",
+            marginBottom: 0
+          },
+          ".cko-payment": {
+            paddingBottom: "100px"
+          }
+        } : {})
       },
       children: [goBack && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
         sx: {
@@ -541,7 +595,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {
-    background: ${props => props.mode === "standalone" ? "var(--backgrounds-bg-subtle, #F9FAFB)" : "transparent"};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -550,7 +603,8 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -563,6 +617,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.29",
+  "version": "1.14.30",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.29",
+    "@blocklet/payment-types": "1.14.30",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "104f4189d9ef96c1e332ffa90824ebd3063c989d"
+  "gitHead": "f98dee7bce684f81f4e060b942efaa9ad8730b55"
 }

package/src/libs/util.ts

@@ -1042,3 +1042,11 @@ export function getWordBreakStyle(value: any): 'break-word' | 'break-all' {
   }
   return 'break-all';
 }
+
+export function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf('safari') > -1 && ua.indexOf('chrome') === -1;
+  const isMobile = ua.indexOf('mobile') > -1 || /iphone|ipad|ipod/.test(ua);
+  const isIOS = /iphone|ipad|ipod/.test(ua);
+  return isSafari && isMobile && isIOS;
+}

package/src/payment/form/index.tsx

@@ -11,16 +11,17 @@ import type {
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
-import { Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
+import { isEmpty } from 'lodash';
 import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
@@ -39,6 +40,7 @@ import AddressForm from './address';
 import CurrencySelector from './currency';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
+import { useMobile } from '../../hooks/mobile';
 
 const phoneUtil = PhoneNumberUtil.getInstance();
 
@@ -97,9 +99,17 @@ export default function PaymentForm({
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
-  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useFormContext();
+  const errorRef = useRef<HTMLDivElement | null>(null);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -236,6 +246,12 @@ export default function PaymentForm({
     }
   };
 
+  useEffect(() => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [errors, isMobile]);
+
   const onUserLoggedIn = async () => {
     const { data: profile } = await api.get('/api/customers/me?fallback=1');
     if (profile) {
@@ -345,6 +361,9 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -428,7 +447,13 @@ export default function PaymentForm({
             {/* <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography> */}
             {/* {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />} */}
           </Stack>
-          <Stack direction="column" className="cko-payment-form" spacing={0} sx={{ flex: 1, overflow: 'auto' }}>
+          <Stack
+            direction="column"
+            className="cko-payment-form"
+            id="cko-payment-form"
+            spacing={0}
+            ref={!isEmpty(errors) ? (errorRef as any) : undefined}
+            sx={{ flex: 1, overflow: 'auto' }}>
             <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
             <FormInput
               name="customer_name"
@@ -481,17 +506,20 @@ export default function PaymentForm({
       <Divider sx={{ mt: 2.5, mb: 2.5 }} />
       <Fade in>
         <Stack className="cko-payment-submit">
-          <LoadingButton
-            variant="contained"
-            color="primary"
-            size="large"
-            className="cko-submit-button"
-            onClick={onAction}
-            fullWidth
-            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
-            loading={state.submitting || state.paying}>
-            {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
-          </LoadingButton>
+          <Box className="cko-payment-submit-btn">
+            <LoadingButton
+              variant="contained"
+              color="primary"
+              size="large"
+              className="cko-submit-button"
+              onClick={onAction}
+              fullWidth
+              disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
+              loading={state.submitting || state.paying}>
+              {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
+            </LoadingButton>
+          </Box>
+
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
             <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.9rem', lineHeight: '1.1rem' }}>
               {t('payment.checkout.confirm', { payee })}

package/src/payment/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -21,7 +22,7 @@ import type { LiteralUnion } from 'type-fest';
 
 import { usePaymentContext } from '../contexts/payment';
 import api from '../libs/api';
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../libs/util';
+import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -86,6 +87,25 @@ function PaymentInner({
     },
   });
 
+  useEffect(() => {
+    if (!isMobileSafari()) {
+      return () => {};
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener('focusin', focusinHandler);
+    document.body.addEventListener('focusout', focusoutHandler);
+    return () => {
+      document.body.removeEventListener('focusin', focusinHandler);
+      document.body.removeEventListener('focusout', focusoutHandler);
+    };
+  }, []);
+
   const currencyId = useWatch({ control: methods.control, name: 'payment_currency', defaultValue: defaultCurrencyId });
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
@@ -260,7 +280,9 @@ export default function Payment({
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const { isMobile } = useMobile();
   const hideSummaryCard = mode.endsWith('-minimal') || !showCheckoutSummary;
+  const isMobileSafariEnv = isMobileSafari();
 
   useEffect(() => {
     setTimeout(() => {
@@ -342,11 +364,15 @@ export default function Payment({
       />
     );
   };
+
   return (
     <Stack
       display="flex"
       flexDirection="column"
-      sx={{ height: mode === 'standalone' ? '100vh' : 'auto', overflow: 'hidden' }}>
+      sx={{
+        height: mode === 'standalone' ? '100vh' : 'auto',
+        overflow: isMobileSafariEnv ? 'visible' : 'hidden',
+      }}>
       {mode === 'standalone' ? (
         <Header
           meta={undefined}
@@ -359,7 +385,45 @@ export default function Payment({
           sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
         />
       ) : null}
-      <Root mode={mode} sx={{ flex: 1 }}>
+      <Root
+        mode={mode}
+        sx={{
+          flex: 1,
+          overflow: {
+            xs: isMobileSafariEnv ? 'visible' : 'auto',
+            md: 'hidden',
+          },
+          ...(isMobile && mode === 'standalone'
+            ? {
+                '.cko-payment-submit-btn': {
+                  position: 'fixed',
+                  bottom: 20,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: '#fff',
+                  padding: '10px',
+                  textAlign: 'center',
+                  button: {
+                    color: '#fff',
+                    maxWidth: 542,
+                  },
+                },
+                '.cko-footer': {
+                  position: 'fixed',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: '#fff',
+                  marginBottom: 0,
+                },
+                '.cko-payment': {
+                  paddingBottom: '100px',
+                },
+              }
+            : {}),
+        }}>
         {goBack && (
           <ArrowBackOutlined
             sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
@@ -517,7 +581,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    background: ${(props) => (props.mode === 'standalone' ? 'var(--backgrounds-bg-subtle, #F9FAFB)' : 'transparent')};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -526,7 +589,8 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -539,6 +603,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }