@paykka/card-checkout-ui 0.13.17 → 0.15.1

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

@@ -1,18 +1,19 @@
 import { w, A, h, F, y, q, T, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { intersection } from "../../utils/index.js";
-import { defaultInputStyleConfig } from "../../types/index.js";
 import { getCardPayInfo, cardPay } from "../../api/modules/card/index.js";
+import { safeParse, safeStringify } from "../../utils/index.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
+import { PaymentMethod, PaymentType, SessionMode, COMMON_CLASS_NAME, CardPaymentMethods } from "../../constant.js";
+import { buildPaymentParams } from "../../api/utils/index.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
-import { PaymentMethod, PaymentType, SessionMode, CardPaymentMethods, COMMON_CLASS_NAME } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 import { createPromise } from "../../utils/create-promise.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 { CardBrands } from "../CardBrands/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
 import { CardHolderNameField } from "../CardHolderNameField/index.js";
@@ -29,17 +30,22 @@ import { IconSwitch } from "../internal/icons/IconSwitch.js";
 import { Info } from "../internal/Info/Info.js";
 import { RecurringTip } from "../RecurringTip/index.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
-import { SubmitButton } from "../SubmitButton/index.js";
+import "../SubmitButton/index.js";
+import "../internal/Button/button.js";
+import "../internal/LoadingCheck/loading-check.js";
 import { ThreeDSAuth } from "../ThreeDS/index.js";
 import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
+import { PaymentButton } from "../PaymentButton/index.js";
+import { intersection } from "../../utils/array.js";
+import { separateInputStyle } from "../../utils/style.js";
 import { cardBrandCodes } from "../../utils/card-brand/brands.js";
 import { findCardBrand } from "../../utils/card-brand/index.js";
-import { separateInputStyle } from "../../utils/style.js";
-import { formatPaymentResult } from "../../utils/payment.js";
-import { normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
-const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
+import { createUrlWithParams } from "../../utils/location.js";
+import { formatPaymentResult, processPaymentStatus } from "../../utils/payment.js";
+import { normalizedClass, trimAll, limitedToNumber } from "../../utils/format.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
+const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
 const Card = w((props, ref) => {
   var _a, _b;
   const {
@@ -56,10 +62,9 @@ const Card = w((props, ref) => {
     core,
     hidePaymentButton = false
   } = props;
-  console.log(props);
   const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
-  const { i18n, fraudDetection, sessionReady } = usePayState(session, core);
+  const { i18n, fraudDetection, sessionReady, disabled } = usePayState(session, core);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const combinedCardInfoRef = A(null);
@@ -71,15 +76,7 @@ const Card = w((props, ref) => {
     securityCode: "",
     holderName: "",
     cardInfo: "",
-    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 [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
@@ -96,25 +93,27 @@ const Card = w((props, ref) => {
   const [inputStyle, setInputStyle] = h({});
   const [splitCardInfo] = h(cardInfoLayout === "split");
   const currentBin = A("");
+  const [hiddenIframeName, setHiddenIframeName] = h("");
   F(ref, () => ({
     checkThreeDS,
     updateAddress: () => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
-      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
-      setForm(newForm);
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
-      validateForm();
+      const address = addressCore.getAddressState();
+      form.address = address;
+      setForm(form);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(address);
+      validateFormSilently();
     },
     updateEmail: () => {
       var _a2;
       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);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
-      validateForm();
+      validateFormSilently();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -122,8 +121,14 @@ const Card = w((props, ref) => {
   }));
   const initFieldStatus = () => {
     const { field, sessionMode } = session.checkout;
-    const { email, address, holderName } = field;
-    if (sessionMode === SessionMode.COMPONENT) {
+    const cpyField = safeParse(safeStringify(field));
+    const { email, address, holderName } = cpyField;
+    const { forceCustomFields = false } = core.config._checkoutConfig || {};
+    if (forceCustomFields) {
+      email.show = showEmail;
+      address.show = showAddress;
+      holderName.show = showHolderName;
+    } else if (sessionMode === SessionMode.COMPONENT) {
       if (email.disabled) {
         email.show = showEmail;
       }
@@ -135,12 +140,11 @@ const Card = w((props, ref) => {
         holderName.disabled = true;
       }
     }
-    setFieldStatus({ ...field });
+    setFieldStatus({ ...cpyField });
   };
   const initElementStyles = () => {
-    if (!styles) {
+    if (!styles)
       return;
-    }
     const { input } = separateInputStyle(styles);
     input && setInputStyle(input);
   };
@@ -151,9 +155,8 @@ const Card = w((props, ref) => {
   };
   y(() => {
     var _a2, _b2;
-    if (!sessionReady) {
+    if (!sessionReady)
       return;
-    }
     const { status, supportMethods = [], bill = {}, sessionMode, country } = (session == null ? void 0 : session.checkout) || {};
     if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
       (_b2 = (_a2 = props.core.config).onInitError) == null ? void 0 : _b2.call(
@@ -162,9 +165,8 @@ const Card = w((props, ref) => {
       );
       return;
     }
-    if (!intersection(supportMethods, CardPaymentMethods).length) {
+    if (!intersection(supportMethods, CardPaymentMethods).length)
       return;
-    }
     initFieldStatus();
     initElementStyles();
     setSecurity(sessionMode !== SessionMode.HOSTED);
@@ -183,7 +185,7 @@ const Card = w((props, ref) => {
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
       (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry", getPaymentMethodContext());
-      core.resetEnablePaymentMethod();
+      core.payment.resetCurrPaymentMethod();
     },
     [i18n, props.onTimeout]
   );
@@ -199,18 +201,19 @@ const Card = w((props, ref) => {
   const processOnError = (error) => {
     var _a2;
     (_a2 = props.onError) == null ? void 0 : _a2.call(props, error, getPaymentMethodContext());
-    core.resetEnablePaymentMethod();
+    core.payment.resetCurrPaymentMethod();
   };
-  const { start: startReFetchPayInfo } = useRetry((timeout) => pay(true, timeout), {
-    onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
-  });
+  const { start: startReFetchPayInfo } = useRetry(
+    (timeout) => pay(true, timeout),
+    {
+      onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
+    }
+  );
   const validatePromise = A(createPromise());
   const onValidated = (data) => {
     fieldValidStatusMap.current[data.fieldType].status = data.status;
     const results = Object.values(fieldValidStatusMap.current);
-    if (results.includes(null)) {
-      return;
-    } else {
+    if (!results.includes(null)) {
       const validateResult = results.every((result) => result.status === "success");
       if (validateResult) {
         validatePromise.current.resolve(true);
@@ -219,6 +222,9 @@ const Card = w((props, ref) => {
       }
     }
   };
+  const onHiddenIframeReady = (data) => {
+    setHiddenIframeName(data.name);
+  };
   const validateCombineCardInfo = async () => {
     var _a2;
     validatePromise.current = createPromise();
@@ -242,7 +248,9 @@ const Card = w((props, ref) => {
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
       (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
-      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors, getPaymentMethodContext());
+      const submitResult = await ((_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors, getPaymentMethodContext()));
+      if (submitResult === false)
+        return;
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -253,7 +261,7 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2, _b2, _c;
+    var _a2;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
@@ -269,10 +277,6 @@ const Card = w((props, ref) => {
         paymentMethod = cardBrand.code;
       }
     }
-    let cardBin;
-    if (security) {
-      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c = combinedCardInfoRef.current) == null ? void 0 : _c.binValue();
-    }
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -303,14 +307,17 @@ const Card = w((props, ref) => {
       },
       browser: await getBrowserParams({
         fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId({
-          bin: cardBin || currentBin.current || ""
+          bin: limitedToNumber(form.number).slice(0, 9),
+          // 快捷支付场景没有 bin，不需要传 hiddenIframeName
+          hiddenIframeName: isFastPayment ? "" : hiddenIframeName
         }))
       })
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b2, _c, _d, _e, _f;
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
@@ -326,8 +333,12 @@ const Card = w((props, ref) => {
       } else {
         const paymentParams = await getPaymentParams();
         const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
+        if ((_e = core.config._checkoutConfig) == null ? void 0 : _e.dynamicSessionId) {
+          await core.updateSessionId(buildPaymentParams(paymentParams, extraParams));
+          session.sessionId && (paymentParams.sessionId = session.sessionId);
+        }
         if (security) {
-          (_e = SFPRef.current) == null ? void 0 : _e.payment(paymentParams, extraParams);
+          (_f = SFPRef.current) == null ? void 0 : _f.payment(paymentParams, extraParams);
           return { end: true };
         } else {
           res = await cardPay(paymentParams, extraParams, requestOptions);
@@ -351,17 +362,18 @@ const Card = w((props, ref) => {
   }
   const processThreeDS = (threeDSUrl, incomplete) => {
     var _a2;
+    const finalUrl = createUrlWithParams(threeDSUrl, { locale: i18n.locale });
     if (enable3DSModal) {
       console.log("3ds open");
       setShowThreeDSModal(true);
       setThreeDSInfo({
-        url: threeDSUrl,
+        url: finalUrl,
         incomplete,
         width: threeDSFrame == null ? void 0 : threeDSFrame.modalWidth,
         height: threeDSFrame == null ? void 0 : threeDSFrame.modalHeight
       });
     } else {
-      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, threeDSUrl, incomplete);
+      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, finalUrl, incomplete);
     }
   };
   const handleCloseThreeDSModal = () => {
@@ -370,43 +382,58 @@ const Card = w((props, ref) => {
     setThreeDSInfo(void 0);
     checkThreeDS();
   };
-  const processAfterPayment = (res, search = false) => {
-    var _a2, _b2, _c;
-    const { status, orderStatus, errorMessage, errorCode, payInfo = {}, sessionId } = res;
+  const processAfterPayment = async (res, search = false) => {
+    var _a2;
+    const { errorMessage, errorCode, payInfo = {}, sessionId } = res;
     const { threeDSUrl } = payInfo;
     sessionId && (session.sessionId = sessionId);
-    !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, getPaymentMethodContext()));
-    if (status === "PROCESSING") {
-      if (!orderStatus) {
+    if (!search) {
+      (_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, getPaymentMethodContext());
+    }
+    let end = true;
+    await processPaymentStatus(res, {
+      onProcessing: () => {
+        !search && startReFetchPayInfo();
+        end = false;
+      },
+      onAuthorized: () => {
+        var _a3;
         setSubmitButtonStatus("unSubmit");
-      } else if (orderStatus === "SUCCESS") {
+        (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+      },
+      onInThreeDS: () => {
+        if (threeDSUrl) {
+          processThreeDS(threeDSUrl, false);
+        } else {
+          end = false;
+        }
+      },
+      onInPreviousThreeDS: () => {
+        if (threeDSUrl) {
+          processThreeDS(threeDSUrl, true);
+        } else {
+          end = false;
+        }
+      },
+      onSuccess: () => {
         processOnSuccess(res);
-      } else if (orderStatus === "PROCESSING") {
-        !search && startReFetchPayInfo();
-        return { end: false };
-      } else if (orderStatus === "FAILURE") {
+      },
+      onExpired: () => {
+        var _a3;
+        setSubmitButtonStatus("unSubmit");
+        (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+      },
+      onFailure: () => {
         errorMessage && setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
         processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-      } else if (orderStatus === "AUTHORIZED") {
+      },
+      onDefault: () => {
+        core.payment.resetCurrPaymentMethod();
         setSubmitButtonStatus("unSubmit");
-        (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props, getPaymentMethodContext());
-      } else if (orderStatus === "IN_THREED") {
-        threeDSUrl && processThreeDS(threeDSUrl, false);
-      } else if (orderStatus === "IN_PREVIOUS_THREED") {
-        threeDSUrl && processThreeDS(threeDSUrl, true);
       }
-      return { end: true };
-    } else if (status === "SUCCESS") {
-      processOnSuccess(res);
-      return { end: true };
-    } else if (status === "EXPIRED") {
-      setSubmitButtonStatus("unSubmit");
-      (_c = props.onExpired) == null ? void 0 : _c.call(props, getPaymentMethodContext());
-      return { end: true };
-    }
-    setSubmitButtonStatus("unSubmit");
-    return { end: true };
+    });
+    return { end };
   };
   const processPaymentError = (error) => {
     const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
@@ -414,32 +441,22 @@ const Card = w((props, ref) => {
     setSubmitButtonStatus("unSubmit");
     processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
   };
-  const validateForm = () => {
+  const validateFormSilently = () => {
     var _a2;
-    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
-      setValidated(true);
-    }).catch(() => {
-      setValidated(false);
-    });
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
   };
   y(() => {
-    validateForm();
+    validateFormSilently();
   }, [form]);
   const Button = () => {
-    var _a2;
-    const transAmount = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.transAmount;
-    const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
-    const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
     return /* @__PURE__ */ u(
-      SubmitButton,
+      PaymentButton,
       {
         className: bem("button"),
         status: submitButtonStatus,
-        text,
-        loadingText: i18n.get("common.payProcessing"),
-        successText: i18n.get("common.paySuccess"),
-        onClick: onSubmit,
-        verified: validated
+        disabled,
+        verified: validated,
+        onClick: onSubmit
       }
     );
   };
@@ -451,7 +468,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2;
     if (!session)
       return { end: true };
     try {
@@ -467,42 +484,48 @@ const Card = w((props, ref) => {
           timeout
         }
       );
-      const { status, orderStatus, errorMessage, errorCode } = res;
-      if (status === "PROCESSING") {
-        if (orderStatus === "PROCESSING") {
+      const { errorMessage, errorCode } = res;
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
           startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
-          errorMessage && setErrorMsg(errorMessage);
-          setSubmitButtonStatus("unSubmit");
-          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-        } else if (orderStatus === "AUTHORIZED") {
+        },
+        onAuthorized: () => {
+          var _a3;
           setSubmitButtonStatus("unSubmit");
-          (_c = props.onAuthorized) == null ? void 0 : _c.call(props, getPaymentMethodContext());
-        } else if (orderStatus === "IN_THREED") {
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onInThreeDS: () => {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
-          return { end: false };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+          end = false;
+        },
+        onInPreviousThreeDS: () => {
+          setSubmitButtonStatus("unSubmit");
           setErrorMsg(i18n.get("common.pay3DSIncomplete"));
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+          stopReFetchCardPay3DSInfo();
+        },
+        onExpired: () => {
+          var _a3;
           setSubmitButtonStatus("unSubmit");
-        } else if (!orderStatus) {
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+          stopReFetchCardPay3DSInfo();
+        },
+        onFailure: () => {
+          errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
+          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+        },
+        onDefault: () => {
+          core.payment.resetCurrPaymentMethod();
+          setSubmitButtonStatus("unSubmit");
+          stopReFetchCardPay3DSInfo();
         }
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        setSubmitButtonStatus("unSubmit");
-        (_d = props.onExpired) == null ? void 0 : _d.call(props, getPaymentMethodContext());
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      }
-      setSubmitButtonStatus("unSubmit");
-      stopReFetchCardPay3DSInfo();
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -520,17 +543,15 @@ const Card = w((props, ref) => {
   }
   const isFastPayment = T(() => {
     var _a2;
-    if (!(session == null ? void 0 : session.checkout)) {
+    if (!(session == null ? void 0 : session.checkout))
       return;
-    }
     const isPurchase = (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE;
     const hasCardTokens = !!((_a2 = session == null ? void 0 : session.checkout.tokens) == null ? void 0 : _a2.length);
     return isPurchase && hasCardTokens;
   }, [session == null ? void 0 : session.checkout]);
   const isShowStoreCheckBox = T(() => {
-    if (!(session == null ? void 0 : session.checkout)) {
+    if (!(session == null ? void 0 : session.checkout))
       return;
-    }
     return (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE && (session == null ? void 0 : session.checkout.storePaymentMethod);
   }, [session == null ? void 0 : session.checkout]);
   const StoreCheckBox = () => {
@@ -541,6 +562,7 @@ const Card = w((props, ref) => {
       CheckBox,
       {
         label: i18n.get("card.storeInfo"),
+        disabled,
         checked: storePaymentMethod,
         onChange: onCheck
       }
@@ -555,7 +577,7 @@ const Card = w((props, ref) => {
       (_a3 = formRef.current) == null ? void 0 : _a3.resetValidation();
       setIsEditOtherCard(false);
     };
-    return isPurchase && hasCardTokens && /* @__PURE__ */ u("div", { className: bem("change-box"), onClick, children: [
+    return isPurchase && hasCardTokens && /* @__PURE__ */ u("div", { className: bem("change-box", { disabled }), onClick, children: [
       /* @__PURE__ */ u(IconSwitch, {}),
       /* @__PURE__ */ u("span", { style: { marginLeft: "2px" }, children: i18n.get("card.cardSelector.change") })
     ] });
@@ -568,9 +590,8 @@ const Card = w((props, ref) => {
   const onClickChangeCard = () => {
     var _a2;
     const tokens = ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) || [];
-    if (tokens.length > 1) {
+    if (tokens.length > 1)
       return;
-    }
     onEditOtherCard();
   };
   const onCardChange = (option) => {
@@ -579,7 +600,7 @@ const Card = w((props, ref) => {
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
-    dom && validateForm();
+    dom && validateFormSilently();
   };
   const cardNumberFieldRef = A(null);
   const cardExpireDateFieldRef = A(null);
@@ -640,7 +661,7 @@ const Card = w((props, ref) => {
       (_d = fieldRef.current) == null ? void 0 : _d.resetValidation(data.status, error);
     }
     setTimeout(() => {
-      validateForm();
+      validateFormSilently();
     }, 100);
   };
   const onBrand = (data) => {
@@ -672,16 +693,20 @@ const Card = 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 CardHolderName = () => {
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: (fieldStatus == null ? void 0 : fieldStatus.holderName.disabled) || disabled }) }) });
+  };
   const Address = () => {
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(
       AddressField,
       {
         ref: addressFieldRef,
         value: form.address,
+        disabled,
         onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });
@@ -689,9 +714,20 @@ const Card = w((props, ref) => {
   const ErrorMessage = () => {
     return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
   };
-  const CardInfo = q(() => {
+  const CardCombineInfo = () => {
+    return /* @__PURE__ */ u("div", { className: bem("card-info"), children: /* @__PURE__ */ u(
+      CombinedCardInfo,
+      {
+        ref: combinedCardInfoRef,
+        supportedCardBrands,
+        showLabel: true,
+        security
+      }
+    ) });
+  };
+  const CardSplitInfo = () => {
     var _a2, _b2, _c, _d;
-    return splitCardInfo ? /* @__PURE__ */ u(b, { children: [
+    return /* @__PURE__ */ u(b, { children: [
       /* @__PURE__ */ u("div", { className: fieldClassNames, children: [
         /* @__PURE__ */ u("div", { className: bem("card-number-wrapper"), children: [
           /* @__PURE__ */ u(
@@ -700,6 +736,7 @@ const Card = w((props, ref) => {
               supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.supportMethods) == null ? void 0 : _b2.filter(Boolean),
               security,
               ref: cardNumberFieldRef,
+              disabled,
               onBinValue: onBinValueChanged
             }
           ),
@@ -719,6 +756,7 @@ const Card = w((props, ref) => {
           {
             security,
             className: fieldClassNames,
+            disabled,
             ref: cardExpireDateFieldRef
           }
         ),
@@ -727,26 +765,19 @@ const Card = w((props, ref) => {
           {
             security,
             className: fieldClassNames,
+            disabled,
             ref: cardSecurityCodeFieldRef
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ u("div", { className: bem("card-info"), children: /* @__PURE__ */ u(
-      CombinedCardInfo,
-      {
-        ref: combinedCardInfoRef,
-        supportedCardBrands,
-        showLabel: true,
-        security
-      }
-    ) });
-  }, [splitCardInfo, security]);
-  const cardForm = () => {
+    ] });
+  };
+  const PaymentForm = () => {
     var _a2;
     return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
-      CardInfo(),
-      (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: fieldStatus == null ? void 0 : fieldStatus.holderName.disabled }) }),
+      splitCardInfo ? CardSplitInfo() : CardCombineInfo(),
+      CardHolderName(),
       Address(),
       ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.RECURRING && RecurringTip(),
       /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
@@ -756,7 +787,7 @@ const Card = w((props, ref) => {
       ] })
     ] }) });
   };
-  const fastPaymentCardForm = () => {
+  const FastPaymentForm = () => {
     var _a2, _b2, _c, _d;
     return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
@@ -766,6 +797,7 @@ const Card = w((props, ref) => {
           {
             value: (_c = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c.token,
             cardList: (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.tokens,
+            disabled,
             onClickEdit: onEditOtherCard,
             onClickChange: onClickChangeCard,
             onCardChange,
@@ -778,6 +810,7 @@ const Card = w((props, ref) => {
           {
             className: bem("card-security-code", fieldClassNames),
             style: { flex: 1 },
+            disabled,
             security,
             ref: cardSecurityCodeFieldRef
           }
@@ -796,6 +829,7 @@ const Card = w((props, ref) => {
       {
         ref: SFPRef,
         i18n,
+        disabled,
         checkoutId: core.id,
         sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
         supportedCardBrands,
@@ -809,11 +843,12 @@ const Card = w((props, ref) => {
         onPaymentTimeout: ({ message }) => onTimeout(i18n.get(message)),
         onValidStatusChanged: onFieldValidStatusChanged,
         onValidated,
+        onHiddenIframeReady: (data) => onHiddenIframeReady(data),
         onEvent: (type, data) => {
           var _a2, _b2;
           return (_b2 = (_a2 = core.config).onEvent) == null ? void 0 : _b2.call(_a2, type, data);
         },
-        children: showFastPaymentForm ? fastPaymentCardForm() : cardForm()
+        children: showFastPaymentForm ? FastPaymentForm() : PaymentForm()
       }
     ),
     /* @__PURE__ */ u(