@paykka/card-checkout-ui 0.8.0 → 0.11.2

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

@@ -1,13 +1,14 @@
 import { w, A, h, F, y, q, T, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
 import { PaymentType, SessionMode, CardPaymentMethods, COMMON_CLASS_NAME, PaymentMethod } from "../../constant.js";
+import { intersection } from "../../utils/index.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 { WorldpayDDC } from "../../out/worldpay-ddc.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
@@ -37,7 +38,6 @@ 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) => {
@@ -52,11 +52,12 @@ const Card = w((props, ref) => {
     threeDSFrame,
     styles,
     enable3DSModal = true,
-    isDropIn
+    isDropIn,
+    core
   } = props;
-  let addressState = createAddressCore();
-  let emailState = createEmailCore();
-  const { i18n, fraudDetection, sessionReady } = usePayState(session);
+  const addressState = createAddressCore();
+  const emailState = createEmailCore();
+  const { i18n, fraudDetection, sessionReady } = usePayState(session, core);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const combinedCardInfoRef = A(null);
@@ -103,8 +104,12 @@ const Card = w((props, ref) => {
     },
     updateEmail: () => {
       var _a2;
+      if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
+        return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -117,18 +122,19 @@ const Card = w((props, ref) => {
     };
   };
   const initFieldStatus = () => {
-    const field = session.checkout.field;
+    const { field, sessionMode } = session.checkout;
     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;
+    if (sessionMode === SessionMode.COMPONENT) {
+      if (email.disabled) {
+        email.show = showEmail;
+      }
+      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 });
   };
@@ -148,7 +154,7 @@ const Card = w((props, ref) => {
     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")
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
     }
@@ -172,6 +178,7 @@ const Card = w((props, ref) => {
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
       (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
+      core.resetEnablePaymentMethod();
     },
     [i18n, props.onTimeout]
   );
@@ -179,6 +186,11 @@ const Card = w((props, ref) => {
     var _a2;
     (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
   };
+  const processOnError = (error) => {
+    var _a2;
+    (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
+    core.resetEnablePaymentMethod();
+  };
   const { start: startReFetchPayInfo } = useRetry((timeout) => pay(true, timeout), {
     onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
   });
@@ -231,7 +243,7 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2;
+    var _a2, _b2, _c2;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
@@ -247,6 +259,10 @@ const Card = w((props, ref) => {
         paymentMethod = cardBrand.code;
       }
     }
+    let cardBin;
+    if (security) {
+      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c2 = combinedCardInfoRef.current) == null ? void 0 : _c2.binValue();
+    }
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -272,23 +288,35 @@ const Card = w((props, ref) => {
         email: form.email
       },
       browser: await getBrowserParams({
-        fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId({
+          bin: cardNo || cardBin || ""
+        }))
       })
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2;
     try {
       const paymentParams = await getPaymentParams();
+      const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(
+        _a2,
+        "payment",
+        paymentParams.payment.paymentMethod
+      );
       if (!search && security) {
-        (_a2 = SFPRef.current) == null ? void 0 : _a2.payment(paymentParams);
+        (_c2 = SFPRef.current) == null ? void 0 : _c2.payment(paymentParams, extraParams);
         return { end: true };
       }
       const options = { locale: i18n.locale, timeout };
-      const res = search ? await getCardPayInfo(
-        { sessionId: session.sessionId, clientKey: session.clientKey },
-        options
-      ) : await cardPay(paymentParams, options);
+      let res = {};
+      if (search) {
+        res = await getCardPayInfo(
+          { sessionId: session.sessionId, clientKey: session.clientKey },
+          options
+        );
+      } else {
+        res = await cardPay(paymentParams, extraParams, options);
+      }
       return processAfterPayment(res, search);
     } catch (error) {
       if (isTimeoutError(error)) {
@@ -301,7 +329,7 @@ const Card = w((props, ref) => {
       } else {
         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 }));
+        (_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 };
@@ -330,7 +358,7 @@ const Card = w((props, ref) => {
     checkThreeDS();
   };
   const processAfterPayment = (res, search = false) => {
-    var _a2, _b2, _c2;
+    var _a2, _b2;
     const { status, orderStatus, errorMessage, errorCode, threeDSUrl } = res;
     if (status === "PROCESSING") {
       if (!orderStatus) {
@@ -344,10 +372,10 @@ const Card = w((props, ref) => {
       } else if (orderStatus === "FAILURE") {
         setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
-        (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+        processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
       } else if (orderStatus === "AUTHORIZED") {
         setSubmitButtonStatus("unSubmit");
-        (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props);
+        (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
       } else if (orderStatus === "IN_THREED") {
         processThreeDS(threeDSUrl, false);
       } else if (orderStatus === "IN_PREVIOUS_THREED") {
@@ -360,19 +388,17 @@ const Card = w((props, ref) => {
       return { end: true };
     } else if (status === "EXPIRED") {
       setSubmitButtonStatus("unSubmit");
-      (_c2 = props.onExpired) == null ? void 0 : _c2.call(props);
+      (_b2 = props.onExpired) == null ? void 0 : _b2.call(props);
       return { end: true };
     }
     setSubmitButtonStatus("unSubmit");
-    processOnSuccess();
     return { end: true };
   };
   const processPaymentError = (error) => {
-    var _a2;
     const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
     setErrorMsg(message);
     setSubmitButtonStatus("unSubmit");
-    (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+    processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
   };
   const validateForm = () => {
     var _a2;
@@ -386,12 +412,10 @@ const Card = w((props, ref) => {
     validateForm();
   }, [form]);
   const Button = () => {
-    const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
-    let { symbol = "", amount = "", digits } = transAmount ?? {};
-    let amountStr = "";
-    if (amount && !isUndefined(digits))
-      amountStr = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
+    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,
       {
@@ -420,7 +444,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c2;
     if (!session)
       return { end: true };
     try {
@@ -441,10 +465,10 @@ const Card = w((props, ref) => {
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
         } else if (orderStatus === "AUTHORIZED") {
           setSubmitButtonStatus("unSubmit");
-          (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props);
+          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
         } else if (orderStatus === "IN_THREED") {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
@@ -464,7 +488,7 @@ const Card = w((props, ref) => {
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_c2 = props.onExpired) == null ? void 0 : _c2.call(props);
+        (_b2 = props.onExpired) == null ? void 0 : _b2.call(props);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
@@ -483,7 +507,7 @@ const Card = w((props, ref) => {
       } else {
         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 }));
+        (_c2 = props.onError) == null ? void 0 : _c2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
@@ -622,8 +646,15 @@ const Card = w((props, ref) => {
   };
   const onBinValueChanged = (data) => {
     var _a2;
-    const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
-    (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
+    let binValue = "";
+    if (typeof data === "string") {
+      binValue = data;
+    } else {
+      const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
+      (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
+      binValue = data.binValue;
+    }
+    binValue && new WorldpayDDC().getFraudDetectionId(binValue);
   };
   const onAfterPayment = (data) => {
     processAfterPayment(data.response);
@@ -666,7 +697,8 @@ const Card = w((props, ref) => {
             {
               supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentMethod) == null ? void 0 : _b2.filter(Boolean),
               security,
-              ref: cardNumberFieldRef
+              ref: cardNumberFieldRef,
+              onBinValue: onBinValueChanged
             }
           ),
           changeBox()

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

@@ -3,6 +3,7 @@ import { COMMON_CLASS_NAME } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { clamp } from "../../utils/index.js";
+import "../../api/http.js";
 import { getSupportedCardBrands, getCardBrandInfo } from "../../utils/card-brand/index.js";
 import { normalizedClass } from "../../utils/format.js";
 const { bem } = useBEM("card-brands");
@@ -33,8 +34,8 @@ function CardBrands(props) {
     };
   }, []);
   return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem(), className), style, children: [
-    brands.slice(0, max - 1).map((brand) => /* @__PURE__ */ u(brand.icon, { size: 32 }, brand.code)),
-    !!lastBrand && /* @__PURE__ */ u(lastBrand.icon, { size: 32 }, lastBrand.code),
+    brands.slice(0, max - 1).map((brand) => brand.icon && /* @__PURE__ */ u(brand.icon, { size: 32 }, brand.code)),
+    !!(lastBrand == null ? void 0 : lastBrand.icon) && /* @__PURE__ */ u(lastBrand.icon, { size: 32 }, lastBrand.code),
     left > 0 && /* @__PURE__ */ u("div", { className: bem("more"), children: [
       "+",
       left

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

@@ -1,6 +1,7 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -2,6 +2,7 @@ import { u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -1,6 +1,7 @@
 import { A, h, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -5,6 +5,7 @@ import "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../utils/format.js";
+import "../../api/http.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
   const { value, className, style } = props;

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

@@ -1,6 +1,7 @@
 import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -11,118 +12,135 @@ import "../internal/Input/type.js";
 import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfoByCode, findCardBrandInfo } from "../../utils/card-brand/index.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
-const CardNumberField = w((props, ref) => {
-  const { supportedCardBrands = [], className, security, showLabel } = props;
-  const inputRef = A(null);
-  const formItemRef = A(null);
-  F(ref, () => ({
-    input: inputRef.current,
-    focus: () => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    },
-    blur: () => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.blur();
-    },
-    resetValidation: (status, errorTip) => {
-      var _a;
-      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
-    },
-    binValueChanged: (binValue) => {
-      setValue(binValue);
-    },
-    brandChanged: (brand) => {
-      if (brand) {
-        const brandInfo = finCardBrandInfoByCode(brand);
-        setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
-      } else {
-        setBrandIcon(void 0);
-      }
-    },
-    getCardBrand: () => findCardBrandInfo(trimAll(value), brands) || {}
-  }));
-  const { i18n } = useI18n();
-  const [value, setValue] = h("");
-  const [validationStatus, setValidationStatus] = h("");
-  const brands = getSupportedCardBrands(supportedCardBrands);
-  const brandLengths = getSupportedCardBrandsLengths(brands);
-  const [brandIcon, setBrandIcon] = h(void 0);
-  y(() => {
-    setBrandIcon(value ? () => {
-      var _a;
-      return (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
-    } : void 0);
-  }, [value]);
-  const rule = {
-    trigger: ["blur", "submit"],
-    validator(value2) {
-      if (security) {
-        const result = formItemRef.current.getValidateResult();
-        if (result.status === "error") {
-          throw new Error(result.errors[0].message);
-        } else if (result.status === "success") {
-          return true;
+const CardNumberField = w(
+  (props, ref) => {
+    const { supportedCardBrands = [], className, security, showLabel, onBinValue } = props;
+    const inputRef = A(null);
+    const formItemRef = A(null);
+    F(ref, () => ({
+      input: inputRef.current,
+      focus: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      },
+      resetValidation: (status, errorTip) => {
+        var _a;
+        (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
+      },
+      binValueChanged: (binValue) => {
+        setValue(binValue);
+      },
+      binValue: () => {
+        return value;
+      },
+      brandChanged: (brand2) => {
+        if (brand2) {
+          const brandInfo = finCardBrandInfoByCode(brand2);
+          setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+          setBrand(brandInfo == null ? void 0 : brandInfo.code);
+        } else {
+          setBrandIcon(void 0);
+          setBrand(void 0);
         }
+      },
+      getCardBrand: () => {
+        return findCardBrandInfo(trimAll(value), brands) || { code: brand };
       }
-      value2 = trimAll(value2 ?? "");
-      if (!brandLengths.includes(value2.length)) {
-        throw new Error(i18n.get("card.cardNumber.incomplete"));
+    }));
+    const { i18n } = useI18n();
+    const [value, setValue] = h("");
+    const [validationStatus, setValidationStatus] = h("");
+    const brands = getSupportedCardBrands(supportedCardBrands);
+    const brandLengths = getSupportedCardBrandsLengths(brands);
+    const [brandIcon, setBrandIcon] = h(void 0);
+    const [brand, setBrand] = h(void 0);
+    const [cardBin, setCardBin] = h("");
+    y(() => {
+      const trimValue = trimAll(value);
+      setBrandIcon(value ? () => {
+        var _a;
+        return (_a = findCardBrandInfo(trimValue, brands)) == null ? void 0 : _a.icon;
+      } : void 0);
+      const newBin = trimValue.substring(0, 6);
+      setCardBin(newBin.length < 6 ? "" : newBin);
+    }, [value]);
+    y(() => {
+      onBinValue == null ? void 0 : onBinValue(cardBin);
+    }, [cardBin]);
+    const rule = {
+      trigger: ["blur", "submit"],
+      validator(value2) {
+        if (security) {
+          const result = formItemRef.current.getValidateResult();
+          if (result.status === "error") {
+            throw new Error(result.errors[0].message);
+          } else if (result.status === "success") {
+            return true;
+          }
+        }
+        value2 = trimAll(value2 ?? "");
+        if (!brandLengths.includes(value2.length)) {
+          throw new Error(i18n.get("card.cardNumber.incomplete"));
+        }
+        const cardBrand = findCardBrandInfo(value2, brands);
+        if (!cardBrand) {
+          throw new Error(i18n.get("card.cardNumber.invalid"));
+        }
+        return true;
       }
-      const cardBrand = findCardBrandInfo(value2, brands);
-      if (!cardBrand) {
-        throw new Error(i18n.get("card.cardNumber.invalid"));
+    };
+    function onInput(event) {
+      var _a;
+      const { currentTarget, inputType } = event;
+      const selectionStart = currentTarget.selectionStart;
+      let val = limitedToNumber(currentTarget.value);
+      val = val.replace(/(\d{4})(?=\d)/g, "$1 ");
+      let pos = selectionStart;
+      if (pos % 5 === 0) {
+        pos = clamp(selectionStart + (inputType === "insertText" ? 1 : -1), 0);
       }
-      return true;
-    }
-  };
-  function onInput(event) {
-    var _a;
-    const { currentTarget, inputType } = event;
-    const selectionStart = currentTarget.selectionStart;
-    let val = limitedToNumber(currentTarget.value);
-    val = val.replace(/(\d{4})(?=\d)/g, "$1 ");
-    let pos = selectionStart;
-    if (pos % 5 === 0) {
-      pos = clamp(selectionStart + (inputType === "insertText" ? 1 : -1), 0);
+      setValue(currentTarget.value = val);
+      currentTarget.setSelectionRange(pos, pos);
+      (_a = props.onInput) == null ? void 0 : _a.call(props, event);
     }
-    setValue(currentTarget.value = val);
-    currentTarget.setSelectionRange(pos, pos);
-    (_a = props.onInput) == null ? void 0 : _a.call(props, event);
+    const RightIcon = () => {
+      if (validationStatus !== "error") {
+        const Icon = brandIcon ?? IconCardNo;
+        return /* @__PURE__ */ u(Icon, { size: 32 });
+      }
+    };
+    return /* @__PURE__ */ u(
+      FormItem,
+      {
+        label: i18n.get("card.cardNumber.label"),
+        showLabel,
+        path: "number",
+        ref: formItemRef,
+        rule,
+        onValidationStatusChange: setValidationStatus,
+        className,
+        children: /* @__PURE__ */ u(
+          Input,
+          {
+            type: "text",
+            inputmode: "numeric",
+            ref: inputRef,
+            maxLength: 23,
+            value,
+            onInput,
+            rightIcon: RightIcon(),
+            placeholder: i18n.get("card.cardNumber.placeholder"),
+            children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CARD_NUMBER })
+          }
+        )
+      }
+    );
   }
-  const RightIcon = () => {
-    if (validationStatus !== "error") {
-      const Icon = brandIcon ?? IconCardNo;
-      return /* @__PURE__ */ u(Icon, { size: 32 });
-    }
-  };
-  return /* @__PURE__ */ u(
-    FormItem,
-    {
-      label: i18n.get("card.cardNumber.label"),
-      showLabel,
-      path: "number",
-      ref: formItemRef,
-      rule,
-      onValidationStatusChange: setValidationStatus,
-      className,
-      children: /* @__PURE__ */ u(
-        Input,
-        {
-          type: "text",
-          inputmode: "numeric",
-          ref: inputRef,
-          maxLength: 23,
-          value,
-          onInput,
-          rightIcon: RightIcon(),
-          placeholder: i18n.get("card.cardNumber.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CARD_NUMBER })
-        }
-      )
-    }
-  );
-});
+);
 export {
   CardNumberField
 };

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

@@ -5,6 +5,7 @@ import "../../utils/system-info/get-browser-info.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -1,6 +1,7 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../internal/Form/type.js";

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

@@ -12,6 +12,7 @@ import { trimAll } from "../../utils/format.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 const { bem } = useBEM("combined-card-info");
 const CombinedCardInfo = w(
   (props, ref) => {
@@ -36,6 +37,9 @@ const CombinedCardInfo = w(
       binValueChanged: (binValue2) => {
         setBinValue(binValue2);
       },
+      binValue: () => {
+        return binValue;
+      },
       brandChanged: (brand) => {
         if (brand) {
           const brandInfo = finCardBrandInfoByCode(brand);