@paykka/card-checkout-ui 0.5.17 → 0.6.0

package/dist/es/api/modules/checkout/map.js

@@ -73,5 +73,6 @@ function checkoutMap(res = {}) {
   };
 }
 export {
-  checkoutMap
+  checkoutMap,
+  formatPaymentMethodInfo
 };

package/dist/es/api/modules/encrypted-card/index.js

@@ -0,0 +1,54 @@
+import { intersection } from "../../../utils/index.js";
+import { http } from "../../http.js";
+import { formatPaymentMethodInfo } from "../checkout/map.js";
+import { cardBrandCodes } from "../../../utils/card-brand/brands.js";
+const verifyClientKey = async (clientKey, merchantId, options) => {
+  return http.post(
+    "/frames/info",
+    {
+      merchant_id: merchantId,
+      client_key: clientKey
+    },
+    options
+  ).then((res) => {
+    var _a;
+    const { paymentMethod } = formatPaymentMethodInfo(((_a = res.support_methods) == null ? void 0 : _a.payment_methods) || []);
+    const brands = intersection(cardBrandCodes, paymentMethod);
+    return {
+      brands
+    };
+  }).catch(() => {
+    return null;
+  });
+};
+const encryptCard = async (card, options) => {
+  return http.post(
+    "/frames/card/encrypt",
+    {
+      type: "BANKCARD",
+      merchant_id: card.merchantId,
+      client_key: card.clientKey,
+      card_no: card.cardNo,
+      cvv: card.cvv,
+      exp_year: card.expYear,
+      exp_month: card.expMonth
+    },
+    options
+  ).then((res) => {
+    return {
+      encryptedCardNumber: res.encrypted_card_no,
+      encryptedCVV: res.encrypted_cvv,
+      encryptedExpireYear: res.encrypted_exp_year,
+      encryptedExpireMonth: res.encrypted_exp_month,
+      cardInfo: {
+        bin: res.card_info.bin,
+        brand: res.card_info.card_brand,
+        last4: res.card_info.last4
+      }
+    };
+  });
+};
+export {
+  encryptCard,
+  verifyClientKey
+};

package/dist/es/api/modules/get-browser-params.js

@@ -2,7 +2,7 @@ import "../../utils/card-brand/brands.js";
 import { getBrowser } from "../../utils/system-info/index.js";
 import { isUaWebview } from "../../utils/system-info/is-ua-webview.js";
 async function getBrowserParams(params = {}) {
-  const { radarId } = params;
+  const { fraudDetectionId } = params;
   const browser = await getBrowser();
   let terminalType = "WEB";
   const userAgent = window.navigator.userAgent.toLowerCase();
@@ -30,7 +30,7 @@ async function getBrowserParams(params = {}) {
     device_os: browser.osName,
     device_finger_print_id: browser.deviceFingerprintId,
     terminal_type: terminalType,
-    paykka_radar_id: radarId
+    fraud_detection_id: fraudDetectionId
   };
 }
 export {

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

@@ -5,10 +5,12 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 function AccountNameField(props) {
   const { className, style } = props;
   const { i18n } = useI18n();

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

@@ -10,10 +10,12 @@ import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 import { Select } from "../internal/Select/Select.js";
 const { bem } = useBEM("address-field");
 const defaultAddress = {

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

@@ -7,14 +7,15 @@ import "../../utils/system-info/get-browser-info.js";
 import { formatAmount } from "../../utils/format.js";
 import { PaymentType } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
-import { createAddressCore } from "../../core/Address.js";
-import { useBEM } from "../../hooks/useBEM.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import { createAddressCore } from "../../core/Address.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 { EmailField, createEmailCore } from "../EmailField/EmailField.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 import { Form } from "../internal/Form/Form.js";
@@ -23,10 +24,9 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("ali-pay");
 const AliPay = w((props, ref) => {
-  const { sessionId, clientKey } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { setErrorMsg, i18n, session, errorMsg, sessionReady } = usePayState(props);
+  const { setErrorMsg, i18n, session, errorMsg, sessionReady } = usePayState();
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -109,14 +109,14 @@ const AliPay = w((props, ref) => {
     try {
       const res = search ? await getAliPayInfo(
         {
-          sessionId,
-          clientKey
+          sessionId: session.sessionId,
+          clientKey: session.clientKey
         },
         { locale: i18n.locale, timeout }
       ) : await aliPay(
         {
-          sessionId,
-          clientKey,
+          sessionId: session.sessionId,
+          clientKey: session.clientKey,
           bill: requiredBill ? {
             email: form.email,
             ...form.address,

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

@@ -1,5 +1,6 @@
 import { w, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
+import { PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getApplePayInfo, applePay, getMerchantSession } from "../../api/modules/apple-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
@@ -12,18 +13,74 @@ import "../../i18n/locales/index.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
 import { Info } from "../internal/Info/Info.js";
+import { loadScript } from "../../utils/load.js";
+const loadApplePayJS = (onload, onerror) => {
+  loadScript({
+    src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js",
+    onload,
+    onerror,
+    extraOptions: {
+      async: true,
+      crossOrigin: ""
+    }
+  });
+};
+async function applePayEnv(id) {
+  var _a, _b;
+  if (!id || !ApplePaySession)
+    return false;
+  if (!((_a = ApplePaySession.canMakePayments) == null ? void 0 : _a.call(ApplePaySession))) {
+    return;
+  }
+  const capabilities = await ((_b = ApplePaySession.applePayCapabilities) == null ? void 0 : _b.call(ApplePaySession, id));
+  if ([
+    "paymentCredentialsAvailable",
+    "paymentCredentialStatusUnknown",
+    "paymentCredentialsUnavailable"
+  ].includes(capabilities.paymentCredentialStatus)) {
+    return true;
+  }
+  return false;
+}
 const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
-  const { sessionId, clientKey } = props;
   let applePaySession;
-  const { i18n, session, sessionReady, payKKaRadar } = usePayState(props);
+  const { i18n, session, sessionReady, fraudDetection } = usePayState();
   const [errorMsg, setErrorMsg] = h("");
+  const [showApplePay, setShowApplePay] = h(false);
+  const getPaymentSuccessData = () => ({
+    returnUrl: session == null ? void 0 : session.checkout.returnUrl
+  });
   y(() => {
     var _a;
-    if (sessionReady) {
-      if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
-        (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+    if (!sessionReady) {
+      return;
+    }
+    const { status, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    if (!paymentMethod.includes(PaymentMethod.APPLE_PAY)) {
+      return;
+    }
+    loadApplePayJS(
+      async () => {
+        var _a2, _b, _c, _d, _e;
+        const envSupported = await applePayEnv(
+          (_c = (_b = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.channelParams) == null ? void 0 : _b.applePay) == null ? void 0 : _c.merchantIdentifier
+        );
+        if (!envSupported) {
+          return;
+        }
+        setShowApplePay(true);
+        (_d = props.onLoad) == null ? void 0 : _d.call(props, true);
+        console.log((_e = ApplePaySession.canMakePayments) == null ? void 0 : _e.call(ApplePaySession));
+      },
+      () => {
+        var _a2;
+        setShowApplePay(false);
+        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, false);
       }
+    );
+    if (status === "SUCCESS") {
+      (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const onTimeout = q(
@@ -48,8 +105,8 @@ const ApplePay = w((props) => {
     try {
       const res = await (search ? getApplePayInfo(
         {
-          sessionId,
-          clientKey
+          sessionId: session.sessionId,
+          clientKey: session.clientKey
         },
         { locale: i18n.locale, timeout }
       ) : async function() {
@@ -57,8 +114,8 @@ const ApplePay = w((props) => {
         const phone = parseE164(billingContact == null ? void 0 : billingContact.phoneNumber);
         return applePay(
           {
-            sessionId,
-            clientKey,
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
             token: JSON.stringify({
               token
             }),
@@ -76,7 +133,7 @@ const ApplePay = w((props) => {
               country: billingContact == null ? void 0 : billingContact.countryCode
             },
             browser: await getBrowserParams({
-              radarId: payKKaRadar == null ? void 0 : payKKaRadar.radarId
+              fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
             })
           },
           { locale: i18n.locale }
@@ -88,7 +145,7 @@ const ApplePay = w((props) => {
           applePaySession.completePayment({
             status: 0
           });
-          (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+          (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
           return {
             end: true
           };
@@ -125,7 +182,7 @@ const ApplePay = w((props) => {
           };
         }
       } else if (status === "SUCCESS") {
-        (_d = props.onSuccess) == null ? void 0 : _d.call(props);
+        (_d = props.onSuccess) == null ? void 0 : _d.call(props, getPaymentSuccessData());
         applePaySession.completePayment({
           status: 0
         });
@@ -139,7 +196,7 @@ const ApplePay = w((props) => {
           end: true
         };
       }
-      (_f = props.onSuccess) == null ? void 0 : _f.call(props);
+      (_f = props.onSuccess) == null ? void 0 : _f.call(props, getPaymentSuccessData());
       return {
         end: true
       };
@@ -232,7 +289,7 @@ const ApplePay = w((props) => {
       }
     ) });
   };
-  return /* @__PURE__ */ u("div", { children: i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+  return /* @__PURE__ */ u("div", { children: sessionReady && showApplePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
     Button()
   ] }) });

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

@@ -1,13 +1,11 @@
 import { w, A, h, F, y, q, T, u } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentType, SessionMode, COMMON_CLASS_NAME, PaymentMethod } from "../../constant.js";
+import { PaymentType, SessionMode, COMMON_CLASS_NAME, CardPaymentMethods, 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 { isEmptyObject, isUndefined } from "../../utils/is.js";
-import { findCardBrand } from "../../utils/card-brand/index.js";
-import "../../utils/system-info/get-browser-info.js";
-import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
+import { intersection } from "../../utils/index.js";
+import { hidePaymentButton } from "../../config.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../i18n/util.js";
@@ -23,23 +21,28 @@ import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
 import { CardSelector } from "../CardSelector/index.js";
 import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
 import { CheckBox } from "../internal/CheckBox/CheckBox.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 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 { FieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/SecuredFieldsProvider.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 { cardBrandCodes } from "../../utils/card-brand/brands.js";
+import { findCardBrand } from "../../utils/card-brand/index.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
 const Card = w((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
-  const { sessionId, clientKey, showCardBrands = true } = props;
+  const { showCardBrands = true } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { i18n, session, sessionReady, payKKaRadar } = usePayState(props);
+  const { i18n, session, sessionReady, fraudDetection } = usePayState();
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const formRef = A(null);
@@ -81,31 +84,40 @@ const Card = w((props, ref) => {
       var _a2;
       setForm(Object.assign(form, { email: emailState.email }));
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+    },
+    payment: () => {
+      !hidePaymentButton && onSubmit();
     }
   }));
+  const getPaymentSuccessData = () => ({
+    returnUrl: session == null ? void 0 : session.checkout.returnUrl
+  });
   y(() => {
-    if (session) {
-      session.ready().then(() => {
-        var _a2;
-        if (isEmptyObject(session.checkout)) {
-          (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
-          return;
-        }
-        setIsCheckoutEnabled(true);
-        const { bill, status } = session.checkout;
-        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))
-        );
-        if (status === "SUCCESS") {
-          setSubmitButtonStatus("success");
-          processOnSuccess();
-        }
-      });
+    var _a2;
+    if (!sessionReady) {
+      return;
+    }
+    const { status, paymentMethod = [], bill = {} } = (session == null ? void 0 : session.checkout) || {};
+    console.log(intersection(paymentMethod, CardPaymentMethods));
+    if (!intersection(paymentMethod, CardPaymentMethods).length) {
+      return;
     }
-  }, [session]);
+    if (isEmptyObject(session == null ? void 0 : session.checkout)) {
+      (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
+      return;
+    }
+    setIsCheckoutEnabled(true);
+    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))
+    );
+    if (status === "SUCCESS") {
+      setSubmitButtonStatus("success");
+      processOnSuccess();
+    }
+  }, [sessionReady]);
   const onTimeout = q(
     (message) => {
       var _a2;
@@ -116,8 +128,8 @@ const Card = w((props, ref) => {
     [i18n, props.onTimeout]
   );
   const processOnSuccess = () => {
-    var _a2, _b2;
-    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl);
+    var _a2;
+    (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
   };
   const { start: startReFetchPayInfo } = useRetry((timeout) => pay(true, timeout), {
     onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
@@ -146,8 +158,8 @@ const Card = w((props, ref) => {
     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;
     return {
-      sessionId,
-      clientKey,
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
       payment: {
         paymentMethod,
         cvv: form.securityCode,
@@ -170,7 +182,7 @@ const Card = w((props, ref) => {
         email: form.email
       },
       browser: await getBrowserParams({
-        radarId: payKKaRadar == null ? void 0 : payKKaRadar.radarId
+        fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
       })
     };
   };
@@ -183,7 +195,10 @@ const Card = w((props, ref) => {
         return { end: true };
       }
       const options = { locale: i18n.locale, timeout };
-      const res = search ? await getCardPayInfo({ sessionId, clientKey }, options) : await cardPay(paymentParams, options);
+      const res = search ? await getCardPayInfo(
+        { sessionId: session.sessionId, clientKey: session.clientKey },
+        options
+      ) : await cardPay(paymentParams, options);
       return processAfterPayment(res, search);
     } catch (error) {
       if (isTimeoutError(error)) {
@@ -432,9 +447,9 @@ const Card = w((props, ref) => {
     (_a2 = SFPRef.current) == null ? void 0 : _a2.reload();
   }, [showFastPaymentForm]);
   const fieldRefMap = {
-    [FieldType.CARD_NUMBER]: cardNumberFieldRef,
-    [FieldType.CVV]: cardSecurityCodeFieldRef,
-    [FieldType.EXPIRE_DATE]: cardExpireDateFieldRef
+    [EFieldType.CARD_NUMBER]: cardNumberFieldRef,
+    [EFieldType.CVV]: cardSecurityCodeFieldRef,
+    [EFieldType.EXPIRE_DATE]: cardExpireDateFieldRef
   };
   const onFieldsFocus = (data) => {
     var _a2, _b2;
@@ -518,7 +533,7 @@ const Card = w((props, ref) => {
       (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
       isShowStoreCheckBox && storeCheckBox(),
       !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }),
-      Button()
+      !hidePaymentButton && Button()
     ] }) });
   };
   const fastPaymentCardForm = () => {
@@ -558,7 +573,7 @@ const Card = w((props, ref) => {
         }
       ) }),
       !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }),
-      Button()
+      !hidePaymentButton && Button()
     ] });
   };
   return /* @__PURE__ */ u(
@@ -575,6 +590,7 @@ const Card = w((props, ref) => {
           i18n,
           sessionMode: session.checkout.sessionMode,
           supportedCardBrands,
+          style: defaultInputStyleConfig,
           onFocus: onFieldsFocus,
           onBinValue: onBinValueChanged,
           onAfterPayment,

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

@@ -4,15 +4,17 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {
-  const { className, style, security } = props;
+  const { className, style, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -117,6 +119,7 @@ const CardExpireDateField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardExpireDate.label"),
+      showLabel,
       path: "expireDate",
       ref: formItemRef,
       rule,
@@ -132,7 +135,7 @@ const CardExpireDateField = w((props, ref) => {
           value,
           onInput,
           placeholder: i18n.get("card.cardExpireDate.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.EXPIRE_DATE })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.EXPIRE_DATE })
         }
       )
     }

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

@@ -5,10 +5,12 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 function CardHolderNameField(props) {
   const { className, style } = props;
   const { i18n } = useI18n();

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

@@ -4,10 +4,12 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 import { validateIBAN } from "../../utils/iban.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 function IBANField(props) {