@paykka/card-checkout-ui 0.6.0 → 0.8.0

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

@@ -1,15 +1,15 @@
-import { w, A, h, F, y, q, T, u } from "../../core.js";
+import { w, A, h, F, y, q, T, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentType, SessionMode, COMMON_CLASS_NAME, CardPaymentMethods, PaymentMethod } from "../../constant.js";
+import { PaymentType, SessionMode, CardPaymentMethods, COMMON_CLASS_NAME, PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getCardPayInfo, cardPay } from "../../api/modules/card/index.js";
 import { CoreContext } from "../../core/context.js";
 import { intersection } from "../../utils/index.js";
+import { PayKKaError } from "../../core/error.js";
 import { hidePaymentButton } from "../../config.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
 import { AddressField } from "../AddressField/index.js";
@@ -28,23 +28,38 @@ import { Form } from "../internal/Form/Form.js";
 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/SecuredFieldsProvider.js";
+import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
-import { defaultInputStyleConfig } from "../../types/index.js";
-import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
-import { isEmptyObject, isUndefined } from "../../utils/is.js";
+import { ThreeDSAuth } from "../ThreeDS/index.js";
+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 { createPromise } from "../../utils/create-promise.js";
+import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
+import { isUndefined } from "../../utils/is.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
 const Card = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f;
-  const { showCardBrands = true } = props;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const {
+    showCardBrands = true,
+    session,
+    cardInfoLayout = "split",
+    showHolderName = true,
+    showEmail = false,
+    showAddress = false,
+    threeDSFrame,
+    styles,
+    enable3DSModal = true,
+    isDropIn
+  } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { i18n, session, sessionReady, fraudDetection } = usePayState();
+  const { i18n, fraudDetection, sessionReady } = usePayState(session);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
+  const combinedCardInfoRef = A(null);
   const formRef = A(null);
   const [form, setForm] = h({
     email: "",
@@ -52,6 +67,7 @@ const Card = w((props, ref) => {
     expireDate: "",
     securityCode: "",
     holderName: "",
+    cardInfo: "",
     address: {
       country: "",
       province: "",
@@ -65,17 +81,22 @@ const Card = w((props, ref) => {
   const [validated, setValidated] = h(false);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const [errorMsg, setErrorMsg] = h("");
-  const disabledEmail = A(false);
-  const [requiredBill, setRequiredBill] = h(false);
   const [storePaymentMethod, setStorePaymentMethod] = h(false);
   const [isEditOtherCard, setIsEditOtherCard] = h(false);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
   const [supportedCardBrands, setSupportedCardBrands] = h([]);
+  const [showThreeDSModal, setShowThreeDSModal] = h(false);
+  const [threeDSInfo, setThreeDSInfo] = h();
+  const [fieldStatus, setFieldStatus] = h();
+  const [security, setSecurity] = h(false);
+  const [tokenAddressFilled, setTokenAddressFilled] = h(true);
+  const [inputStyle, setInputStyle] = h({});
+  const [splitCardInfo] = h(cardInfoLayout === "split");
   F(ref, () => ({
     checkThreeDS,
     updateAddress: () => {
       var _a2;
-      if (!requiredBill)
+      if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
       setForm(Object.assign(form, { address: addressState.getAddressState() }));
       (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
@@ -86,33 +107,60 @@ const Card = w((props, ref) => {
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
     },
     payment: () => {
-      !hidePaymentButton && onSubmit();
+      hidePaymentButton && onSubmit();
     }
   }));
-  const getPaymentSuccessData = () => ({
-    returnUrl: session == null ? void 0 : session.checkout.returnUrl
-  });
-  y(() => {
+  const getPaymentSuccessData = () => {
     var _a2;
+    return {
+      returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
+    };
+  };
+  const initFieldStatus = () => {
+    const field = session.checkout.field;
+    const { email, address, holderName } = field;
+    if (showEmail && !(email == null ? void 0 : email.show)) {
+      email.show = true;
+      email.disabled = true;
+    }
+    if (showAddress && !(address == null ? void 0 : address.show)) {
+      address.show = true;
+    }
+    if (showHolderName && !(holderName == null ? void 0 : holderName.show)) {
+      holderName.show = true;
+      holderName.disabled = true;
+    }
+    setFieldStatus({ ...field });
+  };
+  const initElementStyles = () => {
+    if (!styles) {
+      return;
+    }
+    const { input } = separateInputStyle(styles);
+    input && setInputStyle(input);
+  };
+  y(() => {
+    var _a2, _b2;
     if (!sessionReady) {
       return;
     }
-    const { status, paymentMethod = [], bill = {} } = (session == null ? void 0 : session.checkout) || {};
-    console.log(intersection(paymentMethod, CardPaymentMethods));
-    if (!intersection(paymentMethod, CardPaymentMethods).length) {
+    const { status, paymentMethod = [], bill = {}, sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b2 = (_a2 = props.core.config).onInitError) == null ? void 0 : _b2.call(
+        _a2,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
       return;
     }
-    if (isEmptyObject(session == null ? void 0 : session.checkout)) {
-      (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
+    if (!intersection(paymentMethod, CardPaymentMethods).length) {
       return;
     }
-    setIsCheckoutEnabled(true);
+    initFieldStatus();
+    initElementStyles();
+    setSecurity(sessionMode !== SessionMode.HOSTED);
     form.email = bill.email ?? "";
-    disabledEmail.current = !!bill.email;
-    setRequiredBill(bill.billingAddressCollection === "REQUIRED");
-    setSupportedCardBrands(
-      cardBrandCodes.filter((code) => session == null ? void 0 : session.checkout.paymentMethod.includes(code))
-    );
+    setSupportedCardBrands(intersection(cardBrandCodes, paymentMethod || []));
+    setIsCheckoutEnabled(true);
     if (status === "SUCCESS") {
       setSubmitButtonStatus("success");
       processOnSuccess();
@@ -134,12 +182,44 @@ const Card = w((props, ref) => {
   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 {
+      const validateResult = results.every((result) => result.status === "success");
+      if (validateResult) {
+        validatePromise.current.resolve(true);
+      } else {
+        validatePromise.current.reject(false);
+      }
+    }
+  };
+  const validateCombineCardInfo = async () => {
+    var _a2;
+    validatePromise.current = createPromise();
+    Object.keys(fieldValidStatusMap.current).forEach((key) => {
+      fieldValidStatusMap.current[key] = null;
+    });
+    (_a2 = SFPRef.current) == null ? void 0 : _a2.validate();
+    try {
+      await validatePromise.current;
+      console.log("校验通过");
+    } catch (error) {
+      console.log("校验失败");
+    }
+  };
   async function onSubmit() {
     var _a2;
     setErrorMsg("");
+    if (!splitCardInfo && security) {
+      await validateCombineCardInfo();
+    }
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
-      requiredBill && addressState.setValidateAllFields(true);
+      (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressState.setValidateAllFields(true);
       (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
@@ -151,12 +231,22 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2, _b2;
+    var _a2;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
     const isFastPaymentForm = isFastPayment && !isEditOtherCard;
-    const paymentMethod = isFastPayment ? PaymentMethod.BANKCARD : ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.EMBEDDED ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.getCardBrand().code : cardBrand.code;
+    let paymentMethod = null;
+    if (isFastPayment) {
+      paymentMethod = PaymentMethod.BANKCARD;
+    } else {
+      if (security) {
+        const fieldRef = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
+        paymentMethod = (_a2 = fieldRef.current) == null ? void 0 : _a2.getCardBrand().code;
+      } else {
+        paymentMethod = cardBrand.code;
+      }
+    }
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -173,7 +263,7 @@ const Card = w((props, ref) => {
           ...isShowStoreCheckBox ? { storePaymentMethod } : null
         }
       },
-      bill: requiredBill ? {
+      bill: (fieldStatus == null ? void 0 : fieldStatus.address.show) ? {
         email: form.email,
         ...form.address,
         province: addressState.getLabel(form.address.province, addressState.getProvinceOption()) ?? form.address.province,
@@ -187,11 +277,11 @@ const Card = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c2;
+    var _a2, _b2;
     try {
       const paymentParams = await getPaymentParams();
-      if (!search && ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.EMBEDDED) {
-        (_b2 = SFPRef.current) == null ? void 0 : _b2.payment(paymentParams);
+      if (!search && security) {
+        (_a2 = SFPRef.current) == null ? void 0 : _a2.payment(paymentParams);
         return { end: true };
       }
       const options = { locale: i18n.locale, timeout };
@@ -209,17 +299,39 @@ const Card = w((props, ref) => {
           return { end: true };
         }
       } else {
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_c2 = props.onError) == null ? void 0 : _c2.call(props, error);
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        setErrorMsg(message);
+        (_b2 = props.onError) == null ? void 0 : _b2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
     }
   }
+  const processThreeDS = (threeDSUrl, incomplete) => {
+    var _a2;
+    if (enable3DSModal) {
+      console.log("3ds open");
+      setShowThreeDSModal(true);
+      setThreeDSInfo({
+        url: threeDSUrl,
+        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);
+    }
+  };
+  const handleCloseThreeDSModal = () => {
+    console.log("3ds close");
+    setShowThreeDSModal(false);
+    setThreeDSInfo(void 0);
+    checkThreeDS();
+  };
   const processAfterPayment = (res, search = false) => {
-    var _a2, _b2, _c2, _d2, _e2;
-    const { status, orderStatus, errorMessage, threeDSUrl } = res;
+    var _a2, _b2, _c2;
+    const { status, orderStatus, errorMessage, errorCode, threeDSUrl } = res;
     if (status === "PROCESSING") {
       if (!orderStatus) {
         setSubmitButtonStatus("unSubmit");
@@ -232,14 +344,14 @@ const Card = w((props, ref) => {
       } else if (orderStatus === "FAILURE") {
         setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
-        (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
+        (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
       } else if (orderStatus === "AUTHORIZED") {
         setSubmitButtonStatus("unSubmit");
         (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props);
       } else if (orderStatus === "IN_THREED") {
-        (_c2 = props.onThreeDS) == null ? void 0 : _c2.call(props, threeDSUrl, false);
+        processThreeDS(threeDSUrl, false);
       } else if (orderStatus === "IN_PREVIOUS_THREED") {
-        (_d2 = props.onThreeDS) == null ? void 0 : _d2.call(props, threeDSUrl, true);
+        processThreeDS(threeDSUrl, true);
       }
       return { end: true };
     } else if (status === "SUCCESS") {
@@ -248,7 +360,7 @@ const Card = w((props, ref) => {
       return { end: true };
     } else if (status === "EXPIRED") {
       setSubmitButtonStatus("unSubmit");
-      (_e2 = props.onExpired) == null ? void 0 : _e2.call(props);
+      (_c2 = props.onExpired) == null ? void 0 : _c2.call(props);
       return { end: true };
     }
     setSubmitButtonStatus("unSubmit");
@@ -257,27 +369,29 @@ const Card = w((props, ref) => {
   };
   const processPaymentError = (error) => {
     var _a2;
-    setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
+    const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+    setErrorMsg(message);
     setSubmitButtonStatus("unSubmit");
-    (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
+    (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
   };
-  function validateForm() {
+  const validateForm = () => {
     var _a2;
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
       setValidated(true);
     }).catch(() => {
       setValidated(false);
     });
-  }
+  };
   y(() => {
     validateForm();
   }, [form]);
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -291,7 +405,7 @@ const Card = w((props, ref) => {
       }
     );
   };
-  const cardStyle = {
+  const formStyle = {
     [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
     [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
     [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
@@ -306,7 +420,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c2, _d2;
     if (!session)
       return { end: true };
     try {
@@ -320,16 +434,17 @@ const Card = w((props, ref) => {
           timeout
         }
       );
-      const { status, orderStatus, errorMessage } = res;
+      const { status, orderStatus, errorMessage, errorCode } = res;
       if (status === "PROCESSING") {
         if (orderStatus === "PROCESSING") {
           startReFetchPayInfo();
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
+          (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
         } else if (orderStatus === "AUTHORIZED") {
           setSubmitButtonStatus("unSubmit");
-          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
+          (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props);
         } else if (orderStatus === "IN_THREED") {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
@@ -349,7 +464,7 @@ const Card = w((props, ref) => {
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_b2 = props.onExpired) == null ? void 0 : _b2.call(props);
+        (_c2 = props.onExpired) == null ? void 0 : _c2.call(props);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
@@ -366,8 +481,9 @@ const Card = w((props, ref) => {
           return { end: true };
         }
       } else {
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_c2 = props.onError) == null ? void 0 : _c2.call(props, error);
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        setErrorMsg(message);
+        (_d2 = props.onError) == null ? void 0 : _d2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
@@ -376,31 +492,36 @@ const Card = w((props, ref) => {
   }
   const isFastPayment = T(() => {
     var _a2;
+    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)) {
+      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 = () => {
     const onCheck = (checked) => {
       setStorePaymentMethod(checked);
     };
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ u("div", { className: bem("store-checkbox"), children: /* @__PURE__ */ u(
       CheckBox,
       {
         label: i18n.get("card.storeInfo"),
         checked: storePaymentMethod,
-        onChange: onCheck,
-        style: { marginTop: "40px" }
+        onChange: onCheck
       }
-    );
+    ) });
   };
   const changeBox = () => {
-    var _a2, _b2;
-    const isPurchase = (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE;
-    const hasCardTokens = !!((_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2.length);
+    var _a2, _b2, _c2;
+    const isPurchase = ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.PURCHASE;
+    const hasCardTokens = !!((_c2 = (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.tokens) == null ? void 0 : _c2.length);
     const onClick = () => {
       var _a3;
       (_a3 = formRef.current) == null ? void 0 : _a3.resetValidation();
@@ -415,7 +536,6 @@ const Card = w((props, ref) => {
     var _a2;
     (_a2 = formRef.current) == null ? void 0 : _a2.resetValidation();
     setIsEditOtherCard(true);
-    setRequiredBill((session == null ? void 0 : session.checkout.bill.billingAddressCollection) === "REQUIRED");
   };
   const onClickChangeCard = () => {
     var _a2;
@@ -426,10 +546,8 @@ const Card = w((props, ref) => {
     onEditOtherCard();
   };
   const onCardChange = (option) => {
+    setTokenAddressFilled(false);
     setForm(Object.assign(form, { token: option == null ? void 0 : option.token }));
-    setRequiredBill(
-      (session == null ? void 0 : session.checkout.bill.billingAddressCollection) === "REQUIRED" && !(option == null ? void 0 : option.billingAddressFilled)
-    );
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
@@ -453,25 +571,59 @@ const Card = w((props, ref) => {
   };
   const onFieldsFocus = (data) => {
     var _a2, _b2;
-    const fieldRef = fieldRefMap[data.fieldType];
+    const fieldRef = splitCardInfo ? fieldRefMap[data.fieldType] : combinedCardInfoRef;
     if (data.focus) {
       (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
     } else {
       (_b2 = fieldRef.current) == null ? void 0 : _b2.blur();
     }
   };
+  const validateOrder = [EFieldType.CARD_NUMBER, EFieldType.EXPIRE_DATE, EFieldType.CVV];
+  const fieldValidStatusMap = A({
+    [EFieldType.CARD_NUMBER]: null,
+    [EFieldType.EXPIRE_DATE]: null,
+    [EFieldType.CVV]: null
+  });
   const onFieldValidStatusChanged = (data) => {
-    var _a2;
-    const fieldRef = fieldRefMap[data.fieldType];
+    var _a2, _b2, _c2, _d2;
+    const fieldRef = splitCardInfo ? fieldRefMap[data.fieldType] : combinedCardInfoRef;
     const error = data.errorTip && i18n.get(data.errorTip);
-    (_a2 = fieldRef.current) == null ? void 0 : _a2.resetValidation(data.status, error);
+    if (!splitCardInfo) {
+      fieldValidStatusMap.current[data.fieldType] = {
+        status: data.status,
+        errorTip: error
+      };
+      for (const key of validateOrder) {
+        const currResult = fieldValidStatusMap.current[key];
+        if ((currResult == null ? void 0 : currResult.status) === "error") {
+          (_a2 = fieldRef.current) == null ? void 0 : _a2.resetValidation(currResult.status, currResult.errorTip);
+          return;
+        }
+      }
+      const isSuccess = Object.values(fieldValidStatusMap.current).every(
+        (result) => (result == null ? void 0 : result.status) === "success"
+      );
+      if (isSuccess) {
+        (_b2 = fieldRef.current) == null ? void 0 : _b2.resetValidation("success");
+      } else {
+        (_c2 = fieldRef.current) == null ? void 0 : _c2.resetValidation("unValidate");
+      }
+    } else {
+      (_d2 = fieldRef.current) == null ? void 0 : _d2.resetValidation(data.status, error);
+    }
     setTimeout(() => {
       validateForm();
     }, 100);
   };
+  const onBrand = (data) => {
+    var _a2;
+    const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
+    (_a2 = field.current) == null ? void 0 : _a2.brandChanged(data.brand);
+  };
   const onBinValueChanged = (data) => {
     var _a2;
-    (_a2 = cardNumberFieldRef.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
+    const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
+    (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
   };
   const onAfterPayment = (data) => {
     processAfterPayment(data.response);
@@ -479,17 +631,41 @@ const Card = w((props, ref) => {
   const onPaymentError = (data) => {
     processPaymentError(data.error);
   };
-  const cardForm = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: cardStyle, children: [
-      /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(EmailField, { ref: emailFieldRef, value: form.email, disabled: !!disabledEmail.current }) }),
+  const Email = () => {
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+      EmailField,
+      {
+        ref: emailFieldRef,
+        value: form.email,
+        disabled: fieldStatus == null ? void 0 : fieldStatus.email.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 }))
+      }
+    ) }) });
+  };
+  const ErrorMessage = () => {
+    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
+  };
+  const CardInfo = q(() => {
+    var _a2, _b2, _c2, _d2;
+    return splitCardInfo ? /* @__PURE__ */ u(b, { children: [
       /* @__PURE__ */ u("div", { className: fieldClassNames, children: [
         /* @__PURE__ */ u("div", { className: bem("card-number-wrapper"), children: [
           /* @__PURE__ */ u(
             CardNumberField,
             {
               supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentMethod) == null ? void 0 : _b2.filter(Boolean),
-              security: ((_c2 = session == null ? void 0 : session.checkout) == null ? void 0 : _c2.sessionMode) === SessionMode.EMBEDDED,
+              security,
               ref: cardNumberFieldRef
             }
           ),
@@ -499,7 +675,7 @@ const Card = w((props, ref) => {
           CardBrands,
           {
             className: bem("card-brands"),
-            supportedCardBrands: (_e2 = (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.paymentMethod) == null ? void 0 : _e2.filter(Boolean)
+            supportedCardBrands: (_d2 = (_c2 = session == null ? void 0 : session.checkout) == null ? void 0 : _c2.paymentMethod) == null ? void 0 : _d2.filter(Boolean)
           }
         )
       ] }),
@@ -507,7 +683,7 @@ const Card = w((props, ref) => {
         /* @__PURE__ */ u(
           CardExpireDateField,
           {
-            security: ((_f2 = session == null ? void 0 : session.checkout) == null ? void 0 : _f2.sessionMode) === SessionMode.EMBEDDED,
+            security,
             className: fieldClassNames,
             ref: cardExpireDateFieldRef
           }
@@ -515,93 +691,96 @@ const Card = w((props, ref) => {
         /* @__PURE__ */ u(
           CardSecurityCodeField,
           {
-            security: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.sessionMode) === SessionMode.EMBEDDED,
+            security,
             className: fieldClassNames,
             ref: cardSecurityCodeFieldRef
           }
         )
-      ] }),
-      /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, {}) }),
-      requiredBill && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(
-        AddressField,
-        {
-          ref: addressFieldRef,
-          value: form.address,
-          onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
-        }
-      ) }),
-      (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
+      ] })
+    ] }) : /* @__PURE__ */ u("div", { className: bem("card-info"), children: /* @__PURE__ */ u(
+      CombinedCardInfo,
+      {
+        ref: combinedCardInfoRef,
+        supportedCardBrands,
+        showLabel: true,
+        security
+      }
+    ) });
+  }, [splitCardInfo, security]);
+  const cardForm = () => {
+    var _a2;
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, 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 }) }),
+      Address(),
+      ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.RECURRING && RecurringTip(),
       isShowStoreCheckBox && storeCheckBox(),
-      !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }),
+      ErrorMessage(),
       !hidePaymentButton && Button()
     ] }) });
   };
   const fastPaymentCardForm = () => {
-    var _a2, _b2, _c2, _d2, _e2;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: [
-      /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: cardStyle, children: [
-        /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(EmailField, { ref: emailFieldRef, value: form.email, disabled: !!disabledEmail.current }) }),
-        /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
-          /* @__PURE__ */ u(
-            CardSelector,
-            {
-              value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
-              cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
-              onClickEdit: onEditOtherCard,
-              onClickChange: onClickChangeCard,
-              onCardChange,
-              style: { flex: 2, marginRight: "12px" }
-            }
-          ),
-          /* @__PURE__ */ u(
-            CardSecurityCodeField,
-            {
-              className: fieldClassNames,
-              style: { flex: 1, marginLeft: "12px" },
-              security: ((_e2 = session == null ? void 0 : session.checkout) == null ? void 0 : _e2.sessionMode) === SessionMode.EMBEDDED,
-              ref: cardSecurityCodeFieldRef
-            }
-          )
-        ] })
+    var _a2, _b2, _c2, _d2;
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+      Email(),
+      /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
+        /* @__PURE__ */ u(
+          CardSelector,
+          {
+            value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
+            cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
+            onClickEdit: onEditOtherCard,
+            onClickChange: onClickChangeCard,
+            onCardChange,
+            style: { flex: 2, marginRight: "12px" }
+          }
+        ),
+        /* @__PURE__ */ u(
+          CardSecurityCodeField,
+          {
+            className: fieldClassNames,
+            style: { flex: 1, marginLeft: "12px" },
+            security,
+            ref: cardSecurityCodeFieldRef
+          }
+        )
       ] }),
-      requiredBill && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(
-        AddressField,
-        {
-          ref: addressFieldRef,
-          value: form.address,
-          onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
-        }
-      ) }),
-      !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }),
+      tokenAddressFilled && Address(),
+      ErrorMessage(),
       !hidePaymentButton && Button()
-    ] });
+    ] }) });
   };
-  return /* @__PURE__ */ u(
-    CoreContext.Provider,
-    {
-      value: {
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+    /* @__PURE__ */ u(
+      SecuredFieldsProvider,
+      {
+        ref: SFPRef,
         i18n,
-        session
-      },
-      children: sessionReady && isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(
-        SecuredFieldsProvider,
-        {
-          ref: SFPRef,
-          i18n,
-          sessionMode: session.checkout.sessionMode,
-          supportedCardBrands,
-          style: defaultInputStyleConfig,
-          onFocus: onFieldsFocus,
-          onBinValue: onBinValueChanged,
-          onAfterPayment,
-          onPaymentError,
-          onPaymentTimeout: ({ message }) => onTimeout(i18n.get(message)),
-          onValidStatusChanged: onFieldValidStatusChanged,
-          children: showFastPaymentForm ? fastPaymentCardForm() : cardForm()
-        }
-      )
-    }
-  );
+        sessionMode: (_g = session.checkout) == null ? void 0 : _g.sessionMode,
+        supportedCardBrands,
+        style: inputStyle || defaultInputStyleConfig,
+        onFocus: onFieldsFocus,
+        onBinValue: onBinValueChanged,
+        onBrand,
+        onAfterPayment,
+        onPaymentError,
+        onPaymentTimeout: ({ message }) => onTimeout(i18n.get(message)),
+        onValidStatusChanged: onFieldValidStatusChanged,
+        onValidated,
+        children: showFastPaymentForm ? fastPaymentCardForm() : cardForm()
+      }
+    ),
+    /* @__PURE__ */ u(
+      ThreeDSAuth,
+      {
+        show: showThreeDSModal,
+        theme: (_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.theme,
+        onClose: handleCloseThreeDSModal,
+        ...threeDSInfo
+      }
+    )
+  ] }) });
 });
 export {
   Card