@paykka/card-checkout-ui 0.13.17 → 0.15.1

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

@@ -3,7 +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 "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.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,8 +1,8 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -14,7 +14,7 @@ import { formatExpireDateOnInsert, formatExpireDateOnPaste } from "../../utils/e
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -120,6 +120,7 @@ const CardExpireDateField = w((props, ref) => {
           ref: inputRef,
           maxLength: 5,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardExpireDate.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.EXPIRE_DATE })

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

@@ -2,8 +2,8 @@ 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 "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.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,8 +1,8 @@
 import { A, h, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.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,10 +5,10 @@ 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 "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
-  const { value, className, style } = props;
+  const { value, className, style, disabled } = props;
   return /* @__PURE__ */ u(
     "div",
     {
@@ -18,7 +18,7 @@ const CardNo = (props) => {
         Array.from({ length: 4 }, (_, i) => i).map(() => {
           return /* @__PURE__ */ u("span", { className: bem("dot") });
         }),
-        /* @__PURE__ */ u("span", { className: bem("card-no"), children: value })
+        /* @__PURE__ */ u("span", { className: bem("card-no"), disabled, children: value })
       ]
     }
   );

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

@@ -1,8 +1,8 @@
 import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -15,7 +15,7 @@ import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfo
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w(
   (props, ref) => {
-    const { supportedCardBrands = [], className, security, showLabel, onBinValue } = props;
+    const { supportedCardBrands = [], className, security, showLabel, onBinValue, disabled } = props;
     const inputRef = A(null);
     const formItemRef = A(null);
     F(ref, () => ({
@@ -132,6 +132,7 @@ const CardNumberField = w(
             ref: inputRef,
             maxLength: 23,
             value,
+            disabled,
             onInput,
             rightIcon: RightIcon(),
             placeholder: i18n.get("card.cardNumber.placeholder"),

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

@@ -5,8 +5,8 @@ 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 "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -14,7 +14,7 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 const CardSecurityCodeField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -75,6 +75,7 @@ const CardSecurityCodeField = w((props, ref) => {
           ref: inputRef,
           maxLength: 4,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardSecurityCode.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CVV })

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

@@ -1,22 +1,22 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Select } from "../internal/Select/Select.js";
-import { Button } from "../internal/Button/Button.js";
+import { Button } from "../internal/Button/Button2.js";
 import { CardNo } from "../CardNo/index.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { IconSwitch } from "../internal/icons/IconSwitch.js";
 import { IconAdd } from "../internal/icons/IconAdd.js";
 const CardSelector = (props) => {
-  const { cardList = [], onCardChange, onClickEdit, className, style, onClickChange, value } = props;
+  const { cardList = [], onCardChange, onClickEdit, className, style, onClickChange, value, disabled } = props;
   const { i18n } = useI18n();
   const { bem } = useBEM("card-selector");
   const selectRef = A(null);
@@ -55,7 +55,7 @@ const CardSelector = (props) => {
     ] });
   };
   const getChangeIcon = () => {
-    return /* @__PURE__ */ u("div", { className: bem("change"), onClick: onClickChange, children: [
+    return /* @__PURE__ */ u("div", { className: bem("change", { disabled }), onClick: onClickChange, children: [
       /* @__PURE__ */ u(IconSwitch, {}),
       /* @__PURE__ */ u("span", { style: { marginLeft: "4px" }, children: i18n.get("card.cardSelector.change") })
     ] });
@@ -91,6 +91,7 @@ const CardSelector = (props) => {
         {
           value: currToken,
           ref: selectRef,
+          disabled,
           options: formatCardOptions(),
           renderLabel,
           onSelect: onSelectCard,

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

@@ -12,8 +12,8 @@ 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 "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 const { bem } = useBEM("combined-card-info");
 const CombinedCardInfo = w(
   (props, ref) => {

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

@@ -1,19 +1,15 @@
-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 "../../out/worldpay-jsc-origin.js";
-import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, PaymentMethod2CategoryMap } from "../../constant.js";
+import { w, h, A, F, y, u, b } from "../../core.js";
+import { CardPaymentMethods, PaymentMethod, PaymentCategory, PaymentMethod2CategoryMap, SessionMode } from "../../constant.js";
 import { Card } from "../Card/index.js";
 import { ApplePay } from "../ApplePay/index.js";
 import { GooglePay } from "../GooglePay/index.js";
-import { Boost } from "../Boost/index.js";
-import { NinePay } from "../NinePay/index.js";
-import { LinePay } from "../LinePay/index.js";
-import { TNGWallet } from "../TNGWallet/index.js";
-import { MayBankQRPay } from "../MayBankQRPay/index.js";
-import { ShopeePay } from "../ShopeePay/index.js";
-import { GrabPay } from "../GrabPay/index.js";
+import { Boost } from "../wallets/Boost/Boost.js";
+import { NinePay } from "../wallets/NinePay/NinePay.js";
+import { LinePay } from "../wallets/LinePay/LinePay.js";
+import { TNGWallet } from "../wallets/TNGWallet/TNGWallet.js";
+import { MayBankQRPay } from "../wallets/MayBankQRPay/MayBankQRPay.js";
+import { ShopeePay } from "../wallets/ShopeePay/ShopeePay.js";
+import { GrabPay } from "../wallets/GrabPay/GrabPay.js";
 import { GCash } from "../wallets/GCash/GCash.js";
 import { Paymaya } from "../wallets/Paymaya/Paymaya.js";
 import { Zalopay } from "../wallets/Zalopay/Zalopay.js";
@@ -29,9 +25,14 @@ import { IDeal } from "../wallets/IDeal/IDeal.js";
 import { Skrill } from "../wallets/Skrill/Skrill.js";
 import { P24 } from "../wallets/P24/P24.js";
 import { Trustly } from "../wallets/Trustly/Trustly.js";
+import { AliPay } from "../wallets/AliPay/AliPay.js";
+import { WechatPay } from "../wallets/WechatPay/WechatPay.js";
 import { useBEM } from "../../hooks/useBEM.js";
-import { intersection } from "../../utils/index.js";
+import { CoreContext } from "../../core/context.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
 import { PayKKaError } from "../../core/error.js";
+import "../../out/fraud-detection.js";
 import { createCheckoutChild } from "../../core/create-child.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { Accordion } from "../internal/Accordion/Accordion.js";
@@ -59,11 +60,15 @@ import { IconOvo } from "../internal/icons/IconOvo.js";
 import { IconSkrill } from "../internal/icons/IconSkrill.js";
 import { IconBancontact } from "../internal/icons/IconBancontact.js";
 import { IconIdeal } from "../internal/icons/IconIdeal.js";
-import { removeElementFromArray } from "../../utils/array.js";
+import { IconWechatPayGlobal } from "../internal/icons/IconWechatPayGlobal.js";
+import { IconAlipayPlus } from "../internal/icons/IconAlipayPlus.js";
+import { intersection } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
   PaymentMethod.GOOGLE_PAY,
   PaymentMethod.APPLE_PAY,
+  PaymentMethod.ALI_PAY,
+  PaymentMethod.WECHAT_PAY,
   PaymentMethod.BOOST,
   PaymentMethod.GRAB_PAY,
   PaymentMethod.LINE_PAY,
@@ -112,41 +117,11 @@ const PaymentComponentMap = {
   [PaymentCategory.OVO]: OVO,
   [PaymentCategory.SKRILL]: Skrill,
   [PaymentCategory.TRUSTLY]: Trustly,
-  [PaymentCategory.P24]: P24
-  // [PaymentCategory.WECHAT_PAY]: WechatPay,
-  // [PaymentCategory.ALI_PAY]: AliPay,
+  [PaymentCategory.P24]: P24,
+  [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 paymentCategoryOptionMap = {
   [PaymentCategory.CARD]: {
     icon: IconCard2,
@@ -239,45 +214,114 @@ const paymentCategoryOptionMap = {
   [PaymentCategory.P24]: {
     icon: IconP24,
     nameKey: "dropIn.p24.label"
+  },
+  [PaymentCategory.ALI_PAY]: {
+    icon: IconAlipayPlus,
+    nameKey: "dropIn.aliPay.label"
+  },
+  [PaymentCategory.WECHAT_PAY]: {
+    icon: IconWechatPayGlobal,
+    nameKey: "dropIn.wechatPay.label"
+  }
+};
+const HEADER_CATEGORIES = [
+  PaymentCategory.APPLE_PAY,
+  PaymentCategory.GOOGLE_PAY
+];
+const toDropInCategories = (methods) => {
+  const categories = [];
+  const added = /* @__PURE__ */ new Set();
+  const add = (category) => {
+    if (added.has(category))
+      return;
+    added.add(category);
+    categories.push(category);
+  };
+  const cpy = [...methods];
+  if (intersection(cpy, CardPaymentMethods).length) {
+    add(PaymentCategory.CARD);
+    CardPaymentMethods.forEach((m) => {
+      const i = cpy.indexOf(m);
+      if (i > -1)
+        cpy.splice(i, 1);
+    });
   }
+  cpy.forEach((method) => {
+    const category = PaymentMethod2CategoryMap[method];
+    category && add(category);
+  });
+  return categories;
+};
+const sortByOrder = (items, order = []) => {
+  const orderIndex = new Map(order.map((item, index) => [item, index]));
+  return [...items].sort((a, b2) => {
+    const ai = orderIndex.get(a);
+    const bi = orderIndex.get(b2);
+    if (ai !== void 0 && bi !== void 0)
+      return ai - bi;
+    if (ai !== void 0)
+      return -1;
+    if (bi !== void 0)
+      return 1;
+    return items.indexOf(a) - items.indexOf(b2);
+  });
+};
+const resolveDropInDisplayCategories = (options) => {
+  const { supportMethods, layout } = options;
+  const enabledMethods = intersection(supportMethods, dropInSupportedPaymentMethods);
+  const defaultCategories = toDropInCategories(enabledMethods);
+  const hidden = new Set((layout == null ? void 0 : layout.hidden) ?? []);
+  const visible = defaultCategories.filter((c) => !hidden.has(c));
+  return sortByOrder(visible, layout == null ? void 0 : layout.order);
+};
+const splitHeaderAndMain = (categories) => {
+  const header = [];
+  const main = [];
+  categories.forEach((category) => {
+    if (HEADER_CATEGORIES.includes(category)) {
+      header.push(category);
+    } else {
+      main.push(category);
+    }
+  });
+  return { header, main };
 };
 const { bem } = useBEM("drop-in");
 const DropIn = w((props, ref) => {
+  var _a;
   const {
     paymentMethods: paymentMethodsConfig,
-    layout = "accordion",
+    // layout = 'accordion',
     session,
     core,
-    enableAccordionTransition = true
+    enableAccordionTransition = true,
+    paymentMethodLayout
   } = props;
   const { i18n, sessionReady } = usePayState(session, props.core);
   const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
   const [activePaymentCategory, setActivePaymentCategory] = h();
   const [enablePaymentMethod, setEnablePaymentMethod] = h();
-  const [headerPaymentCategories, setHeaderPaymentCategories] = h(
-    []
-  );
+  const [headerPaymentCategories, setHeaderPaymentCategories] = h([]);
   const [paymentCategories, setPaymentCategories] = h([]);
   const componentMountRefMap = A({});
   const componentInstMap = A({});
   F(ref, () => ({
     payment: () => {
-      var _a, _b;
+      var _a2, _b;
       if (activePaymentCategory) {
-        const instRef = (_a = componentInstMap.current[activePaymentCategory]) == null ? void 0 : _a.ref;
+        const instRef = (_a2 = componentInstMap.current[activePaymentCategory]) == null ? void 0 : _a2.ref;
         (_b = instRef == null ? void 0 : instRef.payment) == null ? void 0 : _b.call(instRef);
       }
     }
   }));
   y(() => {
-    var _a, _b;
-    if (!activePaymentCategory) {
+    var _a2, _b;
+    if (!activePaymentCategory)
       return;
-    }
     const currCompInst = componentInstMap.current[activePaymentCategory];
     if (currCompInst) {
       const ref2 = currCompInst.ref;
-      (_a = ref2.updateAddress) == null ? void 0 : _a.call(ref2);
+      (_a2 = ref2.updateAddress) == null ? void 0 : _a2.call(ref2);
       (_b = ref2.updateEmail) == null ? void 0 : _b.call(ref2);
     }
   }, [activePaymentCategory]);
@@ -289,13 +333,12 @@ const DropIn = w((props, ref) => {
     }
   }, [paymentCategories]);
   y(() => {
-    if (headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) {
-      renderComponent(PaymentCategory.APPLE_PAY);
-      renderComponent(PaymentCategory.GOOGLE_PAY);
-    }
+    headerPaymentCategories == null ? void 0 : headerPaymentCategories.forEach((category) => {
+      renderComponent(category);
+    });
   }, [headerPaymentCategories]);
   const createComponent = (category) => {
-    const { onError, onSuccess, onTimeout, onExpired, onSubmit, onAuthorized } = props;
+    const { onError, onSuccess, onTimeout, onExpired, onSubmit, onAuthorized, onSubmitResponse } = props;
     return createCheckoutChild(
       props.core,
       PaymentComponentMap[category],
@@ -305,7 +348,8 @@ const DropIn = w((props, ref) => {
         onTimeout,
         onExpired,
         onSubmit,
-        onAuthorized
+        onAuthorized,
+        onSubmitResponse
       },
       {
         ...paymentMethodsConfig == null ? void 0 : paymentMethodsConfig[category],
@@ -321,63 +365,32 @@ const DropIn = w((props, ref) => {
       componentInstMap.current[category] = inst;
     }
   };
-  const initPaymentCategories = (enablePaymentMethods) => {
-    const cpyEnablePaymentMethods = [...enablePaymentMethods];
-    const paymentCategoryOptions2 = [];
-    const paymentCategories2 = [];
-    const headerPaymentCategories2 = [];
-    if (cpyEnablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
-      headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
-      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.APPLE_PAY);
-    }
-    if (cpyEnablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
-      headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
-      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.GOOGLE_PAY);
-    }
-    const isCardEnable = !!intersection(cpyEnablePaymentMethods, CardPaymentMethods).length;
-    if (isCardEnable) {
-      paymentCategories2.push(PaymentCategory.CARD);
-      paymentCategoryOptions2.push({
-        type: PaymentCategory.CARD,
-        icon: () => {
-          const Icon = paymentCategoryOptionMap[PaymentCategory.CARD].icon;
-          return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
-        },
-        name: i18n.get(paymentCategoryOptionMap[PaymentCategory.CARD].nameKey)
-      });
-    }
-    cpyEnablePaymentMethods.forEach((method) => {
-      if (cpyEnablePaymentMethods.includes(method)) {
-        const type = PaymentMethod2CategoryMap[method];
-        if (type) {
-          paymentCategories2.push(type);
-          paymentCategoryOptions2.push({
-            type,
-            icon: () => {
-              const Icon = paymentCategoryOptionMap[type].icon;
-              return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
-            },
-            name: i18n.get(paymentCategoryOptionMap[type].nameKey)
-          });
-        }
-      }
-    });
-    if (paymentCategoryOptions2.length) {
-      setPaymentCategoryOptions(paymentCategoryOptions2);
+  const initPaymentCategories = (displayCategories) => {
+    const { header, main } = splitHeaderAndMain(displayCategories);
+    const paymentCategoryOptions2 = main.map((category) => ({
+      type: category,
+      icon: () => {
+        const Icon = paymentCategoryOptionMap[category].icon;
+        const iconHeight = 24;
+        return Icon ? /* @__PURE__ */ u(Icon, { size: category === PaymentCategory.ALI_PAY ? 20 : iconHeight }) : null;
+      },
+      name: i18n.get(paymentCategoryOptionMap[category].nameKey)
+    }));
+    if (paymentCategoryOptions2.length === 1) {
       setActivePaymentCategory(paymentCategoryOptions2[0].type);
     }
-    setHeaderPaymentCategories(headerPaymentCategories2);
-    setPaymentCategories(paymentCategories2);
+    setPaymentCategoryOptions(paymentCategoryOptions2);
+    setHeaderPaymentCategories(header);
+    setPaymentCategories(main);
   };
   const handlePaymentCategoryChange = (newPaymentCategory) => {
     setActivePaymentCategory(newPaymentCategory);
   };
   y(() => {
-    var _a, _b, _c;
-    if (!sessionReady || !i18n.ready.value) {
+    var _a2, _b, _c, _d;
+    if (!sessionReady || !i18n.ready.value)
       return;
-    }
-    if (((_a = session.checkout) == null ? void 0 : _a.sessionMode) === SessionMode.COMPONENT) {
+    if (((_a2 = session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.COMPONENT) {
       (_c = (_b = props.core.config).onInitError) == null ? void 0 : _c.call(
         _b,
         new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
@@ -385,29 +398,29 @@ const DropIn = w((props, ref) => {
       return;
     }
     const { supportMethods = [] } = (session == null ? void 0 : session.checkout) || {};
-    const enablePaymentMethods = intersection(
+    const displayCategories = resolveDropInDisplayCategories({
       supportMethods,
-      dropInSupportedPaymentMethods
-    );
-    if (!enablePaymentMethods.length) {
+      layout: paymentMethodLayout
+    });
+    if (!displayCategories.length)
       return;
-    }
-    initPaymentCategories(enablePaymentMethods);
-    if (core.processingPaymentMethod) {
-      const category = PaymentMethod2CategoryMap[core.processingPaymentMethod];
+    initPaymentCategories(displayCategories);
+    const currPaymentMethod = (_d = core.payment) == null ? void 0 : _d.currPaymentMethod.value;
+    if (currPaymentMethod) {
+      const category = PaymentMethod2CategoryMap[currPaymentMethod];
       category && setActivePaymentCategory(category);
-      core.enablePaymentMethod.value = core.processingPaymentMethod;
     }
   }, [sessionReady, i18n.ready.value]);
   y(() => {
-    if (core.enablePaymentMethod.value) {
+    var _a2, _b;
+    if ((_a2 = core.payment) == null ? void 0 : _a2.currPaymentMethod.value) {
       setEnablePaymentMethod(
-        PaymentMethod2CategoryMap[core.enablePaymentMethod.value]
+        PaymentMethod2CategoryMap[(_b = core.payment) == null ? void 0 : _b.currPaymentMethod.value]
       );
     } else {
       setEnablePaymentMethod(void 0);
     }
-  }, [core.enablePaymentMethod.value]);
+  }, [(_a = core.payment) == null ? void 0 : _a.currPaymentMethod.value]);
   const HeaderField = () => {
     return /* @__PURE__ */ u(b, { children: headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
       "div",
@@ -428,7 +441,7 @@ const DropIn = w((props, ref) => {
     HeaderField(),
     !!paymentCategoryOptions.length && /* @__PURE__ */ u(b, { children: [
       OtherLine(),
-      layout === "accordion" ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
+      /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
         Accordion,
         {
           value: activePaymentCategory,
@@ -451,23 +464,7 @@ const DropIn = w((props, ref) => {
             }
           ))
         }
-      ) }) }) : /* @__PURE__ */ u(b, { children: [
-        /* @__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
-          }
-        ))
-      ] })
+      ) })
     ] })
   ] }) });
 });

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

@@ -10,8 +10,8 @@ import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { EMAIL_REG } from "../../utils/reg-exp.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.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

@@ -4,13 +4,15 @@ import { create } from "../../core/create.js";
 import { w, F, h, A, y, u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
-import "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import { intersection } from "../../utils/index.js";
-import { defaultInputStyleConfig } from "../../types/index.js";
 import { createPromise } from "../../utils/create-promise.js";
+import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
+import { intersection } from "../../utils/array.js";
+import { genShortId } from "../../utils/string.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { CardNumberField } from "../CardNumberField/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
 import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
@@ -22,8 +24,6 @@ import "../internal/Form/Form.js";
 import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
 import "../internal/Input/Input.js";
 import { inputWrapperClassName } from "../internal/Input/type.js";
-import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
-import { genShortId } from "../../utils/string.js";
 const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
 const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
 var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {