@paykka/card-checkout-ui 0.6.0 → 0.8.0

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

@@ -3,8 +3,6 @@ import { COMMON_CLASS_NAME } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { clamp } from "../../utils/index.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import { getSupportedCardBrands, getCardBrandInfo } from "../../utils/card-brand/index.js";
 import { normalizedClass } from "../../utils/format.js";
 const { bem } = useBEM("card-brands");

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

@@ -1,16 +1,13 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } from "../../utils/index.js";
 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 { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {

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

@@ -2,9 +2,6 @@ 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 "../../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";
@@ -12,7 +9,7 @@ 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 { className, style, disabled } = props;
   const { i18n } = useI18n();
   const rule = {
     trigger: ["blur", "submit"],
@@ -40,7 +37,8 @@ function CardHolderNameField(props) {
         {
           maxLength: 100,
           placeholder: i18n.get("card.cardHolderName.placeholder"),
-          onInput
+          onInput,
+          disabled
         }
       )
     }

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

@@ -1,9 +1,6 @@
 import { A, h, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 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";

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

@@ -5,8 +5,6 @@ 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 "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
   const { value, className, style } = props;

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

@@ -1,9 +1,6 @@
 import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 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";
@@ -11,7 +8,7 @@ import "../internal/Form/Form.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
-import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.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) => {

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

@@ -3,17 +3,14 @@ import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 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 "../../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 { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
 const CardSecurityCodeField = w((props, ref) => {
   const { className, style, security, showLabel } = props;
   const inputRef = A(null);

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

@@ -1,11 +1,8 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.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";

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

@@ -0,0 +1,99 @@
+import { w, A, F, h, u } from "../../core.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 { EFieldType } from "../SecuredFieldsProvider/index.js";
+import { finCardBrandInfoByCode, findCardBrandInfo, getSupportedCardBrands } from "../../utils/card-brand/index.js";
+import "../../utils/system-info/get-browser-info.js";
+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";
+const { bem } = useBEM("combined-card-info");
+const CombinedCardInfo = w(
+  (props, ref) => {
+    const { supportedCardBrands = [], className, showLabel = false, security } = props;
+    const inputRef = A(null);
+    const formItemRef = A(null);
+    const { i18n } = useI18n();
+    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: (binValue2) => {
+        setBinValue(binValue2);
+      },
+      brandChanged: (brand) => {
+        if (brand) {
+          const brandInfo = finCardBrandInfoByCode(brand);
+          setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+        } else {
+          setBrandIcon(void 0);
+        }
+      },
+      getCardBrand: () => {
+        return findCardBrandInfo(trimAll(binValue), getSupportedCardBrands(supportedCardBrands)) || {};
+      }
+    }));
+    const rule = {
+      trigger: ["submit"],
+      validator() {
+        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;
+          }
+        }
+        return true;
+      }
+    };
+    const [binValue, setBinValue] = h("");
+    const [brandIcon, setBrandIcon] = h(void 0);
+    const LeftIcon = () => {
+      const Icon = brandIcon ?? IconCardNo;
+      return /* @__PURE__ */ u(Icon, { size: 32 });
+    };
+    return /* @__PURE__ */ u(
+      FormItem,
+      {
+        showLabel,
+        ref: formItemRef,
+        label: i18n.get("card.info.label"),
+        className,
+        path: "cardInfo",
+        rule,
+        children: /* @__PURE__ */ u(
+          Input,
+          {
+            ref: inputRef,
+            leftIcon: LeftIcon(),
+            rightIcon: /* @__PURE__ */ u("div", { className: bem("blank-icon") }),
+            children: /* @__PURE__ */ u("div", { className: bem(), children: [
+              /* @__PURE__ */ u("div", { className: bem("card-number"), "data-sf": EFieldType.CARD_NUMBER }),
+              /* @__PURE__ */ u("div", { className: bem("expire-date"), "data-sf": EFieldType.EXPIRE_DATE }),
+              /* @__PURE__ */ u("div", { className: bem("cvv"), "data-sf": EFieldType.CVV })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  CombinedCardInfo
+};

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

@@ -0,0 +1,210 @@
+import { u, w, h, A, F, y, b } from "../../core.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { CoreContext } from "../../core/context.js";
+import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode } from "../../constant.js";
+import { Card } from "../Card/index.js";
+import { ApplePay } from "../ApplePay/index.js";
+import { GooglePay } from "../GooglePay/index.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { intersection } from "../../utils/index.js";
+import { PayKKaError } from "../../core/error.js";
+import { usePayState } from "../../hooks/usePayState.js";
+import { IconCard } from "../internal/icons/IconCard.js";
+const dropInSupportedPaymentMethods = [
+  ...CardPaymentMethods,
+  PaymentMethod.GOOGLE_PAY,
+  PaymentMethod.APPLE_PAY
+];
+const PaymentComponentMap = {
+  [PaymentCategory.CARD]: Card,
+  [PaymentCategory.APPLE_PAY]: ApplePay,
+  [PaymentCategory.GOOGLE_PAY]: GooglePay
+  // [PaymentCategory.WECHAT_PAY]: WechatPay,
+  // [PaymentCategory.ALI_PAY]: AliPay,
+  // [PaymentCategory.SEPA_DEBIT]: Sepa
+};
+const { bem: bem$1 } = useBEM("payment-tabs");
+const PaymentTabs = (props) => {
+  const { value, tabs, themeColor = "#4F43DF" } = props;
+  const handleClickTab = (tab) => {
+    var _a;
+    if (tab.type === value) {
+      return;
+    }
+    (_a = props.onChange) == null ? void 0 : _a.call(props, tab.type);
+  };
+  return /* @__PURE__ */ u("div", { className: bem$1(), children: tabs.map((tab) => /* @__PURE__ */ u(
+    "div",
+    {
+      className: bem$1("tab"),
+      style: tab.type === value ? { borderColor: themeColor } : "",
+      onClick: () => handleClickTab(tab),
+      children: [
+        tab.icon,
+        /* @__PURE__ */ u(
+          "div",
+          {
+            className: bem$1("name"),
+            style: tab.type === value ? { color: themeColor } : "",
+            children: tab.name
+          }
+        )
+      ]
+    }
+  )) });
+};
+const { bem } = useBEM("drop-in");
+const DropIn = w((props, ref) => {
+  const { paymentMethods: paymentMethodsConfig, layout = "tabs", session } = props;
+  const { i18n, sessionReady } = usePayState(session);
+  const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
+  const [activePaymentCategory, setActivePaymentCategory] = h(
+    null
+  );
+  const [headerPaymentCategories, setHeaderPaymentCategories] = h(
+    []
+  );
+  const [paymentCategories, setPaymentCategories] = h([]);
+  const componentMountRefMap = A({});
+  const componentInstMap = A({});
+  F(ref, () => ({
+    payment: () => {
+      var _a, _b;
+      if (activePaymentCategory) {
+        const instRef = (_a = componentInstMap.current[activePaymentCategory]) == null ? void 0 : _a.ref;
+        (_b = instRef == null ? void 0 : instRef.payment) == null ? void 0 : _b.call(instRef);
+      }
+    }
+  }));
+  y(() => {
+    if (!activePaymentCategory) {
+      return;
+    }
+    if (componentInstMap.current[activePaymentCategory]) {
+      return;
+    }
+    renderComponent(activePaymentCategory);
+  }, [activePaymentCategory]);
+  y(() => {
+    if (headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) {
+      renderComponent(PaymentCategory.APPLE_PAY);
+      renderComponent(PaymentCategory.GOOGLE_PAY);
+    }
+  }, [headerPaymentCategories]);
+  const createComponent = (category) => {
+    const { onError, onSuccess, onTimeout, onExpired, onSubmit } = props;
+    return props.core.create(PaymentComponentMap[category], {
+      onError,
+      onSuccess,
+      onTimeout,
+      onExpired,
+      onSubmit,
+      ...paymentMethodsConfig == null ? void 0 : paymentMethodsConfig[category],
+      isDropIn: true
+    });
+  };
+  const renderComponent = (category) => {
+    const inst = createComponent(category);
+    const container = componentMountRefMap.current[category];
+    if (container) {
+      inst.mount(container);
+      componentInstMap.current[category] = inst;
+    }
+  };
+  const initPaymentCategories = (enablePaymentMethods) => {
+    const paymentCategoryOptions2 = [];
+    const paymentCategories2 = [];
+    const headerPaymentCategories2 = [];
+    if (enablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
+      if (layout === "tabs") {
+        headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
+      } else {
+        paymentCategories2.push(PaymentCategory.APPLE_PAY);
+      }
+    }
+    if (enablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
+      if (layout === "tabs") {
+        headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
+      } else {
+        paymentCategories2.push(PaymentCategory.APPLE_PAY);
+      }
+    }
+    const isCardEnable = !!intersection(enablePaymentMethods, CardPaymentMethods).length;
+    if (isCardEnable) {
+      paymentCategories2.push(PaymentCategory.CARD);
+      paymentCategoryOptions2.push({
+        type: PaymentCategory.CARD,
+        name: i18n.get("dropIn.card.label"),
+        icon: /* @__PURE__ */ u(IconCard, { size: 16 })
+      });
+    }
+    if (paymentCategoryOptions2.length) {
+      setPaymentCategoryOptions(paymentCategoryOptions2);
+      setActivePaymentCategory(paymentCategoryOptions2[0].type);
+    }
+    setHeaderPaymentCategories(headerPaymentCategories2);
+    setPaymentCategories(paymentCategories2);
+  };
+  const handlePaymentCategoryChange = (newPaymentCategory) => {
+    setActivePaymentCategory(newPaymentCategory);
+  };
+  y(() => {
+    var _a, _b, _c;
+    if (!sessionReady || !i18n.ready.value) {
+      return;
+    }
+    if (((_a = session.checkout) == null ? void 0 : _a.sessionMode) === SessionMode.COMPONENT) {
+      (_c = (_b = props.core.config).onInitError) == null ? void 0 : _c.call(
+        _b,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
+      return;
+    }
+    const { paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const enablePaymentMethods = intersection(
+      paymentMethod,
+      dropInSupportedPaymentMethods
+    );
+    if (!enablePaymentMethods.length) {
+      return;
+    }
+    initPaymentCategories(enablePaymentMethods);
+  }, [sessionReady, i18n.ready.value]);
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: i18n.ready.value && /* @__PURE__ */ u("div", { className: bem(), children: layout === "accordion" ? /* @__PURE__ */ u(b, {}) : /* @__PURE__ */ u(b, { children: [
+    headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
+      "div",
+      {
+        className: bem("header-payment"),
+        ref: (el) => componentMountRefMap.current[category] = el
+      }
+    )),
+    !!paymentCategoryOptions.length && activePaymentCategory && /* @__PURE__ */ u(b, { children: [
+      !!(headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) && /* @__PURE__ */ u("div", { className: bem("other"), children: [
+        /* @__PURE__ */ u("div", { className: bem("other-line") }),
+        /* @__PURE__ */ u("div", { className: bem("other-text"), children: i18n.get("dropIn.otherPaymentMethod") }),
+        /* @__PURE__ */ u("div", { className: bem("other-line") })
+      ] }),
+      /* @__PURE__ */ u("div", { className: bem("tabs-wrapper"), children: /* @__PURE__ */ u(
+        PaymentTabs,
+        {
+          value: activePaymentCategory,
+          tabs: paymentCategoryOptions,
+          onChange: (item) => handlePaymentCategoryChange(item)
+        }
+      ) }),
+      paymentCategories == null ? void 0 : paymentCategories.map((category) => /* @__PURE__ */ u(
+        "div",
+        {
+          style: { display: category === activePaymentCategory ? "block" : "none" },
+          ref: (el) => componentMountRefMap.current[category] = el
+        }
+      ))
+    ] })
+  ] }) }) });
+});
+export {
+  DropIn,
+  PaymentComponentMap,
+  dropInSupportedPaymentMethods
+};

package/dist/es/components/EmailField/EmailField.js

@@ -9,9 +9,6 @@ import { isValuable } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 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";

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

@@ -6,21 +6,21 @@ import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
 import { w, F, h, A, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { intersection } from "../../utils/index.js";
-import { defaultInputStyleConfig, inputStyleAttrs } from "../../types/index.js";
-import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
 import { CardNumberField } from "../CardNumberField/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
 import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
 import { verifyClientKey } from "../../api/modules/encrypted-card/index.js";
-import { formItemErrorMessageClassName, formItemLabelClassName } from "../internal/Form/type.js";
+import { formItemLabelClassName, formItemErrorMessageClassName } from "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
-import { CombinedEncryptedField } from "../CombinedEncryptedField/index.js";
+import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
 import "../internal/Input/Input.js";
 import { inputWrapperClassName } from "../internal/Input/type.js";
-import { style2String, loadStyle } from "../../utils/style.js";
+import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
 import { createPromise } from "../../utils/create-promise.js";
 const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
 const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
@@ -90,78 +90,38 @@ const EncryptedCard = w((props, ref) => {
     if (!styles) {
       return;
     }
-    const { input, label, errorMessage } = styles;
-    let inputWrapper = {};
-    if (input) {
-      inputWrapper = JSON.parse(JSON.stringify(input));
-      Reflect.deleteProperty(inputWrapper, "placeholder");
-      const inputStyle2 = {
-        placeholder: input == null ? void 0 : input.placeholder
-      };
-      const statusList = Object.keys(inputWrapper);
-      statusList.forEach((key) => {
-        if (key === "placeholder") {
-          return;
-        }
-        const style = inputWrapper[key];
-        if (!style) {
-          return;
-        }
-        inputStyleAttrs.forEach((attr) => {
-          if (!inputStyle2[key]) {
-            inputStyle2[key] = {};
-          }
-          if (style[attr]) {
-            inputStyle2[key][attr] = style[attr];
-            Reflect.deleteProperty(style, attr);
-          }
-        });
-      });
-      setInputStyle(inputStyle2);
-    }
+    const { input, label, errorMessage, inputWrapper } = separateInputStyle(styles);
+    input && setInputStyle(input);
     if (!document.querySelector(`style#${encryptedCardStyleId}`)) {
-      const style = [];
       const parentId = ENCRYPTED_CARD_WRAPPER_ID;
-      const inputWrapperStyle = `#${parentId} .${inputWrapperClassName} { ${style2String(
-        inputWrapper.base
-      )} }`;
-      const inputWrapperFocusStyle = `#${parentId} .${inputWrapperClassName}--focus { ${style2String(
-        inputWrapper.focus
-      )} }`;
-      const inputWrapperValidStyle = `#${parentId} .${inputWrapperClassName}--success { ${style2String(
-        inputWrapper.valid
-      )} }`;
-      const inputWrapperInvalidStyle = `#${parentId} .${inputWrapperClassName}--error { ${style2String(
-        inputWrapper.invalid
-      )} }`;
-      const labelClassName = formItemLabelClassName;
-      const labelStyle = `#${parentId} .${labelClassName} { ${style2String(label == null ? void 0 : label.base)} }`;
-      const labelFocusStyle = `#${parentId} .${labelClassName}--focus { ${style2String(
-        label == null ? void 0 : label.focus
-      )} }`;
-      const labelValidStyle = `#${parentId} .${labelClassName}--success { ${style2String(
-        label == null ? void 0 : label.valid
-      )} }`;
-      const labelInvalidStyle = `#${parentId} .${labelClassName}--error { ${style2String(
-        label == null ? void 0 : label.invalid
-      )} }`;
-      const errorMessageStyle = `#${parentId} .${formItemErrorMessageClassName} { ${style2String(
-        errorMessage
-      )} }`;
-      style.push(
-        ...[
-          inputWrapperStyle,
-          inputWrapperFocusStyle,
-          inputWrapperValidStyle,
-          inputWrapperInvalidStyle,
-          labelStyle,
-          labelFocusStyle,
-          labelValidStyle,
-          labelInvalidStyle,
-          errorMessageStyle
-        ]
+      const inputWrapperPrefix = `#${parentId} .${inputWrapperClassName}`;
+      const labelPrefix = `#${parentId} .${formItemLabelClassName}`;
+      const errorMessagePrefix = `#${parentId} .${formItemErrorMessageClassName}`;
+      const inputWrapperStyle = genComponentStyle(
+        Object.entries(inputWrapper || {}).map(([type, style2]) => {
+          return {
+            selector: type === "base" ? inputWrapperPrefix : `${inputWrapperPrefix}--${type}`,
+            style: style2
+          };
+        })
       );
-      loadStyle(style.join("\n"));
+      const labelStyle = genComponentStyle(
+        Object.entries(label || {}).map(([type, style2]) => {
+          return {
+            selector: type === "base" ? labelPrefix : `${labelPrefix}--${type}`,
+            style: style2
+          };
+        })
+      );
+      const errorMessageStyle = genComponentStyle([
+        {
+          selector: errorMessagePrefix,
+          style: errorMessage
+        }
+      ]);
+      const style = `${inputWrapperStyle}${labelStyle}${errorMessageStyle}`;
+      console.log(style);
+      loadStyle(style, { id: encryptedCardStyleId });
     }
   };
   const classNameMap = {
@@ -266,7 +226,7 @@ const EncryptedCard = w((props, ref) => {
   const embedEncryptedCard = () => {
     if (single) {
       const cardWrapper = wrapperDomMap.current[EEncryptedCardType.CARD];
-      const combinedEncryptedField = create(CombinedEncryptedField, {
+      const combinedEncryptedField = create(CombinedCardInfo, {
         supportedCardBrands: supportedBrands,
         security: true,
         className: combinedEncryptedFieldClassName