@paykka/card-checkout-ui 0.13.16 → 0.14.0

package/dist/es/components/AddressField/index.js

@@ -15,8 +15,7 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 import { Select } from "../internal/Select/Select.js";
-const { bem } = useBEM("address-field");
-const defaultAddress = {
+const DEFAULT_ADDRESS = {
   country: void 0,
   province: void 0,
   city: void 0,
@@ -25,23 +24,39 @@ const defaultAddress = {
   address1: void 0,
   address2: void 0
 };
+const filterAllowedCountryOptions = (options, allowed) => {
+  if (!(allowed == null ? void 0 : allowed.length)) {
+    return options;
+  }
+  const set = new Set(allowed);
+  return options.filter((o) => set.has(String(o.value)));
+};
+const pickDefaultCountryCode = (preferred, allowed) => {
+  if (!(allowed == null ? void 0 : allowed.length)) {
+    return preferred ?? "";
+  }
+  if (preferred && allowed.includes(preferred)) {
+    return preferred;
+  }
+  return "";
+};
+const { bem } = useBEM("address-field");
 const AddressField = w((props, ref) => {
-  const { onAddressChange } = props;
-  const { i18n } = useI18n();
+  var _a;
   const context = x(CoreContext);
   if (!(context == null ? void 0 : context.core)) {
     throw new Error("CoreContext is not found");
   }
+  const { onChange, allowedCountries, mode, disabled = false } = props;
+  const { i18n } = useI18n();
   const addressCore = context.core.getAddressCore();
-  const [addressState, setAddressState] = h({
-    ...addressCore.getAddressState()
-  });
+  const addressMode = mode || ((_a = context.core.config._checkoutConfig) == null ? void 0 : _a.addressMode) || "address";
+  const addressLabelKey = addressMode === "address" ? "address.label" : "address.country";
+  const [addressState, setAddressState] = h({ ...addressCore.getAddressState() });
   const [countryOptions, setCountryOptions] = h(addressCore.getCountryOption() ?? []);
   const [provinceOptions, setProvinceOptions] = h(addressCore.getProvinceOption() ?? []);
   const [cityOptions, setCityOptions] = h([]);
-  const [addressFormat, setAddressFormat] = h(
-    addressCore.getAddressFormat()
-  );
+  const [addressFormat, setAddressFormat] = h(addressCore.getAddressFormat());
   const countryFormItemRef = A(null);
   const provinceFormItemRef = A(null);
   const cityFormItemRef = A(null);
@@ -49,50 +64,41 @@ const AddressField = w((props, ref) => {
   const postCodeFormItemRef = A(null);
   const address1FormItemRef = A(null);
   const address2FormItemRef = A(null);
+  const visibleCountryOptions = T(
+    () => filterAllowedCountryOptions(countryOptions, allowedCountries),
+    [countryOptions, allowedCountries]
+  );
   T(() => {
-    if (i18n.ready.value) {
-      addressCore.setI18n({ i18n });
-      addressCore.requestCountryOption();
-      addressCore.countryOptionReady().then(() => {
-        getDefaultCountry();
-        setCountryOptions(addressCore.getCountryOption());
-      });
+    if (!i18n.ready.value) {
+      return;
     }
+    addressCore.setLocale(i18n.locale);
+    addressCore.requestCountryOption();
+    addressCore.countryOptionReady().then(() => {
+      setCountryOptions(addressCore.getCountryOption());
+      setDefaultCountry();
+    });
   }, [i18n.ready.value]);
-  const setAddressStateMap = {
-    [EAddressType.ADDRESS_1]: (value) => {
-      setAddressState(Object.assign(addressState, { address1: value }));
-    },
-    [EAddressType.ADDRESS_2]: (value) => {
-      setAddressState(Object.assign(addressState, { address2: value }));
-    },
-    [EAddressType.CITY]: (value) => {
-      setAddressState(Object.assign(addressState, { city: value }));
-    },
-    [EAddressType.AREA]: (value) => {
-      setAddressState(Object.assign(addressState, { area: value }));
-    },
-    [EAddressType.POST_CODE]: (value) => {
-      setAddressState(Object.assign(addressState, { postCode: value }));
-    },
-    [EAddressType.PROVINCE]: (value) => {
-      setAddressState(Object.assign(addressState, { province: value }));
-    },
-    COUNTRY: (value) => {
-      setAddressState(Object.assign(addressState, { country: value }));
-    }
+  const setAddressStateByKey = (key, value) => {
+    const keyMap = {
+      [EAddressType.ADDRESS_1]: "address1",
+      [EAddressType.ADDRESS_2]: "address2",
+      [EAddressType.CITY]: "city",
+      [EAddressType.AREA]: "area",
+      [EAddressType.POST_CODE]: "postCode",
+      [EAddressType.PROVINCE]: "province",
+      COUNTRY: "country"
+    };
+    setAddressState(Object.assign(addressState, { [keyMap[key]]: value }));
   };
-  function setAddressStateByKey(key, value) {
-    setAddressStateMap[key](value);
-  }
-  function handleStateChange(key, value) {
+  const handleStateChange = (key, value) => {
     setAddressStateByKey(key, value);
     addressCore.setAddressStateByKey(key, value);
-  }
-  function handleAddressFormatChange(value) {
+  };
+  const handleAddressFormatChange = (value) => {
     setAddressFormat(value);
     addressCore.setAddressFormat(value);
-  }
+  };
   F(ref, () => ({
     update: (value) => {
       setAddressState(value);
@@ -102,27 +108,22 @@ const AddressField = w((props, ref) => {
       setCityOptions(addressCore.getCityOptions() ?? []);
     }
   }));
-  function resetField(fields) {
+  const resetField = (fields) => {
     fields.map((f) => {
       setAddressStateByKey(f, "");
       addressCore.setAddressStateByKey(f, "");
     });
-  }
-  async function getDefaultCountry() {
+  };
+  async function setDefaultCountry() {
     const language = navigator.language;
     const areaCode = language.split("-");
     const countryCode = addressState.country || ((areaCode == null ? void 0 : areaCode[1]) ?? "US");
+    if ((allowedCountries == null ? void 0 : allowedCountries.length) && !(allowedCountries == null ? void 0 : allowedCountries.includes(countryCode))) {
+      return;
+    }
     onSelectCountry(countryCode || "");
-    onAddressChange({ ...addressState });
+    onChange({ ...addressState });
   }
-  const AddressFormatMap = {
-    [EAddressType.ADDRESS_1]: Address1Item,
-    [EAddressType.ADDRESS_2]: Address2Item,
-    [EAddressType.CITY]: CityItem,
-    [EAddressType.AREA]: AreaItem,
-    [EAddressType.POST_CODE]: PostCodeItem,
-    [EAddressType.PROVINCE]: ProvinceItem
-  };
   function createRule() {
     return {
       trigger: ["blur", "submit"],
@@ -135,17 +136,8 @@ const AddressField = w((props, ref) => {
     };
   }
   async function onSelectCountry(value) {
-    var _a, _b;
     handleAddressFormatChange([]);
     handleStateChange("COUNTRY", value);
-    const addressMode = (_b = (_a = context == null ? void 0 : context.core) == null ? void 0 : _a.config._checkoutConfig) == null ? void 0 : _b.addressMode;
-    if (addressMode === "country") {
-      onAddressChange({
-        ...defaultAddress,
-        country: value
-      });
-      return;
-    }
     const format = await mergedGetAddressFormat(value, { locale: i18n.locale });
     const addressType = [];
     const addressArr = format.map(({ addressItem, required, description }) => {
@@ -168,8 +160,8 @@ const AddressField = w((props, ref) => {
     ]);
     setCityOptions([]);
     addressCore.setCityOptions([]);
-    onAddressChange({
-      ...defaultAddress,
+    onChange({
+      ...DEFAULT_ADDRESS,
       country: value
     });
   }
@@ -189,12 +181,12 @@ const AddressField = w((props, ref) => {
     });
   }
   async function onSelectProvince(value) {
-    var _a;
+    var _a2;
     handleStateChange(EAddressType.PROVINCE, value);
     getCityData(value);
     resetField([EAddressType.CITY]);
-    (_a = cityFormItemRef.current) == null ? void 0 : _a.validateChange("");
-    onAddressChange({
+    (_a2 = cityFormItemRef.current) == null ? void 0 : _a2.validateChange("");
+    onChange({
       ...addressState,
       province: value,
       city: ""
@@ -210,19 +202,17 @@ const AddressField = w((props, ref) => {
   }
   function onSelectCity(value) {
     handleStateChange(EAddressType.CITY, value);
-    onAddressChange({
+    onChange({
       ...addressState,
       city: value
     });
   }
   function CountryItem() {
-    var _a, _b;
-    const addressMode = (_b = (_a = context == null ? void 0 : context.core) == null ? void 0 : _a.config._checkoutConfig) == null ? void 0 : _b.addressMode;
     return /* @__PURE__ */ u(
       FormItem,
       {
         ref: countryFormItemRef,
-        label: i18n.get("address.label"),
+        label: i18n.get(addressLabelKey),
         path: "address.country",
         rule: createRule(),
         showErrorMessage: false,
@@ -230,11 +220,12 @@ const AddressField = w((props, ref) => {
           Select,
           {
             value: addressState.country,
+            disabled,
             filterable: true,
-            options: countryOptions,
+            options: visibleCountryOptions,
             onSelect: (value) => onSelectCountry(value),
             placeholder: i18n.get("address.country"),
-            inputClassName: bem("first-item", { "no-bottom-radius": addressMode === "address" }),
+            inputClassName: bem("first-item", { "no-bottom-radius": addressMode === "address" && (addressFormat == null ? void 0 : addressFormat.length) }),
             noDataTip: i18n.get("common.noData")
           }
         )
@@ -253,6 +244,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.address1,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.ADDRESS_1, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -273,6 +265,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.address2,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.ADDRESS_2, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -294,6 +287,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.postCode,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.POST_CODE, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -315,6 +309,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.area,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.AREA, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -332,10 +327,11 @@ const AddressField = w((props, ref) => {
         path: "address.city",
         rule: createRule(),
         showErrorMessage: false,
-        children: isArray(cityOptions) && cityOptions.length > 0 ? /* @__PURE__ */ u(
+        children: isArray(cityOptions) && cityOptions.length ? /* @__PURE__ */ u(
           Select,
           {
             value: addressState.city,
+            disabled,
             filterable: true,
             options: cityOptions,
             onSelect: (value) => onSelectCity(value),
@@ -347,6 +343,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.city,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.CITY, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -364,10 +361,11 @@ const AddressField = w((props, ref) => {
         path: "address.province",
         rule: createRule(),
         showErrorMessage: false,
-        children: isArray(provinceOptions) && provinceOptions.length > 0 ? /* @__PURE__ */ u(
+        children: isArray(provinceOptions) && provinceOptions.length ? /* @__PURE__ */ u(
           Select,
           {
             value: addressState.province,
+            disabled,
             filterable: true,
             options: provinceOptions,
             onSelect: (value) => onSelectProvince(value),
@@ -379,6 +377,7 @@ const AddressField = w((props, ref) => {
           Input,
           {
             value: addressState.province,
+            disabled,
             onInput: (event) => handleStateChange(EAddressType.PROVINCE, event.currentTarget.value),
             placeholder: description,
             inputClassName: className
@@ -388,7 +387,15 @@ const AddressField = w((props, ref) => {
       "address.province"
     );
   }
-  function computedStyle(index) {
+  const AddressFormatMap = {
+    [EAddressType.ADDRESS_1]: Address1Item,
+    [EAddressType.ADDRESS_2]: Address2Item,
+    [EAddressType.CITY]: CityItem,
+    [EAddressType.AREA]: AreaItem,
+    [EAddressType.POST_CODE]: PostCodeItem,
+    [EAddressType.PROVINCE]: ProvinceItem
+  };
+  const computedStyle = (index) => {
     const len = addressFormat == null ? void 0 : addressFormat.length;
     if (isNil(len) || len === 1)
       return "";
@@ -396,17 +403,20 @@ const AddressField = w((props, ref) => {
       return bem("last-item");
     }
     return bem("mid-item");
-  }
+  };
   return /* @__PURE__ */ u("div", { style: "width: 100%", children: [
     CountryItem(),
-    addressFormat == null ? void 0 : addressFormat.map(
+    addressMode === "address" && (addressFormat == null ? void 0 : addressFormat.map(
       (item, index) => AddressFormatMap[item.addressItem]({
         description: item.description,
         className: computedStyle(index)
       })
-    )
+    ))
   ] });
 });
 export {
-  AddressField
+  AddressField,
+  DEFAULT_ADDRESS,
+  filterAllowedCountryOptions,
+  pickDefaultCountryCode
 };

package/dist/es/components/AliPay/index.js

@@ -4,16 +4,16 @@ import { getAliPayInfo, aliPay } from "../../api/modules/ali-pay/index.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { normalizedClass, formatAmount } from "../../utils/format.js";
-import { formatPaymentResult } from "../../utils/payment.js";
+import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
-import { COMMON_CLASS_NAME, PaymentType, PaymentMethod, SessionMode } from "../../constant.js";
+import { PaymentMethod, COMMON_CLASS_NAME, PaymentType, SessionMode } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
 import "../../out/worldpay-jsc-origin.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
-import { AddressField } from "../AddressField/index.js";
+import { DEFAULT_ADDRESS, AddressField } from "../AddressField/index.js";
 import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
@@ -22,32 +22,30 @@ import { Form } from "../internal/Form/Form.js";
 import { Info } from "../internal/Info/Info.js";
 import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
+const CURR_PAYMENT_METHOD = PaymentMethod.ALI_PAY;
 const { bem } = useBEM("ali-pay");
 const fieldClassNames = bem("field");
 const AliPay = w((props, ref) => {
-  const { session, core, showEmail = false, showAddress = false } = props;
+  const { session, core, showEmail = false, showAddress = false, autoQuery = true } = props;
   const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
-  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady, disabled } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
     email: "",
-    address: {
-      country: void 0,
-      province: void 0,
-      city: void 0,
-      area: void 0,
-      postCode: void 0,
-      address1: void 0,
-      address2: void 0
-    }
+    address: { ...DEFAULT_ADDRESS }
   });
   const [validated, setValidated] = h(false);
   const [fieldStatus, setFieldStatus] = h();
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
+  const getPaymentMethodContext = () => {
+    return {
+      paymentMethod: CURR_PAYMENT_METHOD
+    };
+  };
   F(ref, () => ({
     stopRetry: () => {
       stopReFetchPayInfo();
@@ -61,29 +59,26 @@ const AliPay = w((props, ref) => {
       var _a;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
-      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
-      setForm(newForm);
-      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressCore.getAddressState());
-      validateForm();
+      const address = addressCore.getAddressState();
+      form.address = address;
+      setForm(form);
+      (_a = addressFieldRef.current) == null ? void 0 : _a.update(address);
+      validateFormSilently();
     },
     updateEmail: () => {
       var _a;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
-      const newForm = Object.assign(form, { email: emailState.email });
-      setForm(newForm);
+      form.email = emailState.email;
+      setForm(form);
       (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
-      validateForm();
+      validateFormSilently();
     }
   }));
-  function validateForm() {
+  const validateFormSilently = () => {
     var _a;
-    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
-      setValidated(true);
-    }).catch(() => {
-      setValidated(false);
-    });
-  }
+    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
+  };
   const initFieldStatus = () => {
     const { field, sessionMode } = session.checkout;
     const { email, address } = field;
@@ -98,20 +93,19 @@ const AliPay = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   y(() => {
-    validateForm();
+    validateFormSilently();
   }, [form]);
   const processOnSuccess = (res) => {
     var _a, _b;
     setSubmitButtonStatus("success");
-    (_b = props.onSuccess) == null ? void 0 : _b.call(
-      props,
-      formatPaymentResult({
-        ...res,
-        returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
-      })
-    );
+    const result = formatPaymentResult({
+      ...res,
+      returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
+    });
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, result, getPaymentMethodContext());
   };
   y(() => {
+    var _a;
     if (!sessionReady) {
       return;
     }
@@ -124,13 +118,18 @@ const AliPay = w((props, ref) => {
     country && addressCore.setCountry(country);
     form.email = bill.email ?? "";
     form.address.country = country;
+    if (autoQuery && ((_a = core.payment) == null ? void 0 : _a.currPaymentMethod.value) === CURR_PAYMENT_METHOD) {
+      setSubmitButtonStatus("loading");
+      startReFetchPayInfo();
+    }
   }, [sessionReady]);
   const onTimeout = q(
     (message) => {
       var _a;
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
-      (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+      core.payment.resetCurrPaymentMethod();
+      (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry", getPaymentMethodContext());
     },
     [i18n, props.onTimeout]
   );
@@ -157,7 +156,7 @@ const AliPay = w((props, ref) => {
         email: form.email
       },
       payment: {
-        paymentMethod: PaymentMethod.ALI_PAY
+        paymentMethod: CURR_PAYMENT_METHOD
       },
       browser: await getBrowserParams({
         fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
@@ -165,58 +164,66 @@ const AliPay = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f;
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
-        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.ALI_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", CURR_PAYMENT_METHOD);
         res = await getAliPayInfo(
           {
             sessionId: session.sessionId,
             clientKey: session.clientKey,
-            paymentMethod: PaymentMethod.ALI_PAY
+            paymentMethod: CURR_PAYMENT_METHOD
           },
           extraParams,
           requestOptions
         );
       } else {
-        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.ALI_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
         res = await aliPay(await getPaymentParams(), extraParams, requestOptions);
       }
-      const { status, orderStatus, errorMessage, errorCode, sessionId } = res;
+      const { errorMessage, errorCode, sessionId } = res;
       sessionId && (session.sessionId = sessionId);
-      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
-      if (status === "PROCESSING") {
-        if (!orderStatus) {
-          setSubmitButtonStatus("unSubmit");
-          return { end: true };
-        } else if (orderStatus === "SUCCESS") {
+      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res, getPaymentMethodContext()));
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
+          !search && startReFetchPayInfo();
+          end = false;
+        },
+        onSuccess: () => {
           processOnSuccess(res);
-          return { end: true };
-        } else if (orderStatus === "FAILURE") {
+        },
+        onFailure: () => {
+          var _a2;
           errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_f = props.onError) == null ? void 0 : _f.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-          return { end: true };
-        } else if (orderStatus === "PROCESSING") {
-          !search && startReFetchPayInfo();
-          return { end: false };
-        } else if (orderStatus === "CANCELED") {
+          core.payment.resetCurrPaymentMethod();
+          (_a2 = props.onError) == null ? void 0 : _a2.call(
+            props,
+            new PayKKaError("API_ERROR", errorMessage, { code: errorCode }),
+            getPaymentMethodContext()
+          );
+        },
+        onCanceled: () => {
+          var _a2;
           setSubmitButtonStatus("unSubmit");
-          (_g = props.onTimeout) == null ? void 0 : _g.call(props, "channel");
-          return { end: true };
+          (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "channel", getPaymentMethodContext());
+          core.payment.resetCurrPaymentMethod();
+        },
+        onExpired: () => {
+          var _a2;
+          setSubmitButtonStatus("unSubmit");
+          (_a2 = props.onExpired) == null ? void 0 : _a2.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          setSubmitButtonStatus("unSubmit");
+          core.payment.resetCurrPaymentMethod();
         }
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        setSubmitButtonStatus("unSubmit");
-        (_h = props.onExpired) == null ? void 0 : _h.call(props);
-        return { end: true };
-      }
-      setSubmitButtonStatus("unSubmit");
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -228,7 +235,12 @@ const AliPay = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         message && setErrorMsg(message);
-        (_i = props.onError) == null ? void 0 : _i.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        core.payment.resetCurrPaymentMethod();
+        (_f = props.onError) == null ? void 0 : _f.call(
+          props,
+          new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
+          getPaymentMethodContext()
+        );
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
@@ -240,7 +252,7 @@ const AliPay = w((props, ref) => {
     (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
       var _a2;
       (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors, getPaymentMethodContext());
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -261,6 +273,7 @@ const AliPay = w((props, ref) => {
       {
         className: bem("button"),
         status: submitButtonStatus,
+        disabled,
         text,
         loadingText: i18n.get("common.payProcessing"),
         successText: i18n.get("common.paySuccess"),
@@ -271,7 +284,7 @@ const AliPay = w((props, ref) => {
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
-    dom && validateForm();
+    dom && validateFormSilently();
   };
   const Email = () => {
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
@@ -279,19 +292,18 @@ const AliPay = w((props, ref) => {
       {
         ref: emailFieldRef,
         value: form.email,
-        disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
+        disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
       }
     ) }) });
   };
   const Address = () => {
-    var _a, _b;
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
       AddressField,
       {
         ref: addressFieldRef,
         value: form.address,
-        country: ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.country) || ((_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.bill.country),
-        onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
+        disabled,
+        onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });
   };