@paykka/card-checkout-ui 0.13.16 → 0.14.0

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

@@ -4,7 +4,7 @@ import { intersection } from "../../utils/index.js";
 import { defaultInputStyleConfig } from "../../types/index.js";
 import { getCardPayInfo, cardPay } from "../../api/modules/card/index.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
-import { PaymentType, SessionMode, CardPaymentMethods, PaymentMethod, COMMON_CLASS_NAME } from "../../constant.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";
@@ -12,7 +12,7 @@ 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";
@@ -35,10 +35,11 @@ import { CombinedCardInfo } from "../CombinedCardInfo/index.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";
+import { normalizedClass, trimAll, limitedToNumber, formatAmount } from "../../utils/format.js";
+import { formatPaymentResult, processPaymentStatus } from "../../utils/payment.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
+const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
 const Card = w((props, ref) => {
   var _a, _b;
   const {
@@ -57,7 +58,7 @@ const Card = w((props, ref) => {
   } = 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);
@@ -69,15 +70,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");
@@ -94,25 +87,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();
@@ -136,17 +131,20 @@ const Card = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   const initElementStyles = () => {
-    if (!styles) {
+    if (!styles)
       return;
-    }
     const { input } = separateInputStyle(styles);
     input && setInputStyle(input);
   };
+  const getPaymentMethodContext = () => {
+    return {
+      paymentMethod: CURR_PAYMENT_METHOD
+    };
+  };
   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(
@@ -155,9 +153,8 @@ const Card = w((props, ref) => {
       );
       return;
     }
-    if (!intersection(supportMethods, CardPaymentMethods).length) {
+    if (!intersection(supportMethods, CardPaymentMethods).length)
       return;
-    }
     initFieldStatus();
     initElementStyles();
     setSecurity(sessionMode !== SessionMode.HOSTED);
@@ -175,34 +172,36 @@ const Card = w((props, ref) => {
       var _a2;
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
-      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
-      core.resetEnablePaymentMethod();
+      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry", getPaymentMethodContext());
+      core.payment.resetCurrPaymentMethod();
     },
     [i18n, props.onTimeout]
   );
   const processOnSuccess = (res) => {
     var _a2, _b2;
     setSubmitButtonStatus("success");
-    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, formatPaymentResult({
+    const paymentInfo = formatPaymentResult({
       ...res,
       returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
-    }));
+    });
+    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, paymentInfo, getPaymentMethodContext());
   };
   const processOnError = (error) => {
     var _a2;
-    (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
-    core.resetEnablePaymentMethod();
+    (_a2 = props.onError) == null ? void 0 : _a2.call(props, error, getPaymentMethodContext());
+    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);
@@ -211,6 +210,9 @@ const Card = w((props, ref) => {
       }
     }
   };
+  const onHiddenIframeReady = (data) => {
+    setHiddenIframeName(data.name);
+  };
   const validateCombineCardInfo = async () => {
     var _a2;
     validatePromise.current = createPromise();
@@ -234,7 +236,7 @@ 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);
+      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors, getPaymentMethodContext());
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -245,14 +247,14 @@ 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("/");
     const isFastPaymentForm = isFastPayment && !isEditOtherCard;
     let paymentMethod = null;
     if (isFastPayment) {
-      paymentMethod = PaymentMethod.BANKCARD;
+      paymentMethod = CURR_PAYMENT_METHOD;
     } else {
       if (security) {
         const fieldRef = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
@@ -261,10 +263,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,
@@ -295,7 +293,9 @@ 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
         }))
       })
     };
@@ -303,10 +303,11 @@ const Card = w((props, ref) => {
   async function pay(search = false, timeout) {
     var _a2, _b2, _c, _d, _e;
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
-        const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", PaymentMethod.BANKCARD);
+        const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", CURR_PAYMENT_METHOD);
         res = await getCardPayInfo(
           {
             sessionId: session.sessionId,
@@ -317,7 +318,7 @@ const Card = w((props, ref) => {
         );
       } else {
         const paymentParams = await getPaymentParams();
-        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.BANKCARD);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
         if (security) {
           (_e = SFPRef.current) == null ? void 0 : _e.payment(paymentParams, extraParams);
           return { end: true };
@@ -362,42 +363,62 @@ const Card = w((props, ref) => {
     setThreeDSInfo(void 0);
     checkThreeDS();
   };
-  const processAfterPayment = (res, search = false) => {
-    var _a2, _b2;
-    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);
-    if (status === "PROCESSING") {
-      if (!orderStatus) {
+    if (!search) {
+      (_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, {
+        ...getPaymentMethodContext(),
+        orderId: res.orderId,
+        sessionId: session.sessionId
+      });
+    }
+    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");
-        (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
-      } 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");
-      (_b2 = props.onExpired) == null ? void 0 : _b2.call(props);
-      return { end: true };
-    }
-    setSubmitButtonStatus("unSubmit");
-    return { end: true };
+    });
+    return { end };
   };
   const processPaymentError = (error) => {
     const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
@@ -405,16 +426,12 @@ 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;
@@ -426,6 +443,7 @@ const Card = w((props, ref) => {
       {
         className: bem("button"),
         status: submitButtonStatus,
+        disabled,
         text,
         loadingText: i18n.get("common.payProcessing"),
         successText: i18n.get("common.paySuccess"),
@@ -442,11 +460,11 @@ 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 {
-      const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", PaymentMethod.BANKCARD);
+      const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", CURR_PAYMENT_METHOD);
       const res = await getCardPayInfo(
         {
           sessionId: session.sessionId,
@@ -458,42 +476,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);
-        } 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);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      }
-      setSubmitButtonStatus("unSubmit");
-      stopReFetchCardPay3DSInfo();
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -511,17 +535,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 = () => {
@@ -532,6 +554,7 @@ const Card = w((props, ref) => {
       CheckBox,
       {
         label: i18n.get("card.storeInfo"),
+        disabled,
         checked: storePaymentMethod,
         onChange: onCheck
       }
@@ -546,7 +569,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") })
     ] });
@@ -559,9 +582,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) => {
@@ -570,7 +592,7 @@ const Card = w((props, ref) => {
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
-    dom && validateForm();
+    dom && validateFormSilently();
   };
   const cardNumberFieldRef = A(null);
   const cardExpireDateFieldRef = A(null);
@@ -631,7 +653,7 @@ const Card = w((props, ref) => {
       (_d = fieldRef.current) == null ? void 0 : _d.resetValidation(data.status, error);
     }
     setTimeout(() => {
-      validateForm();
+      validateFormSilently();
     }, 100);
   };
   const onBrand = (data) => {
@@ -663,28 +685,41 @@ 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 = () => {
-    var _a2, _b2;
     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,
-        country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.bill.country),
-        onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
+        disabled,
+        onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });
   };
   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(
@@ -693,6 +728,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
             }
           ),
@@ -712,6 +748,7 @@ const Card = w((props, ref) => {
           {
             security,
             className: fieldClassNames,
+            disabled,
             ref: cardExpireDateFieldRef
           }
         ),
@@ -720,26 +757,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: [
@@ -749,7 +779,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(),
@@ -759,6 +789,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,
@@ -771,6 +802,7 @@ const Card = w((props, ref) => {
           {
             className: bem("card-security-code", fieldClassNames),
             style: { flex: 1 },
+            disabled,
             security,
             ref: cardSecurityCodeFieldRef
           }
@@ -789,10 +821,12 @@ const Card = w((props, ref) => {
       {
         ref: SFPRef,
         i18n,
+        disabled,
         checkoutId: core.id,
         sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
         supportedCardBrands,
         style: inputStyle || defaultInputStyleConfig,
+        core,
         onFocus: onFieldsFocus,
         onBinValue: onBinValueChanged,
         onBrand,
@@ -801,7 +835,12 @@ const Card = w((props, ref) => {
         onPaymentTimeout: ({ message }) => onTimeout(i18n.get(message)),
         onValidStatusChanged: onFieldValidStatusChanged,
         onValidated,
-        children: showFastPaymentForm ? fastPaymentCardForm() : cardForm()
+        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 ? FastPaymentForm() : PaymentForm()
       }
     ),
     /* @__PURE__ */ u(