@paykka/card-checkout-ui 0.7.0 → 0.9.2

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

@@ -33,8 +33,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/CardNumberField/index.js

@@ -11,118 +11,125 @@ 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 } = 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: (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);
+    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;
+          }
+        }
+        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/DropIn/index.js

@@ -0,0 +1,365 @@
+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, PaymentMethod2CategoryMap } 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 { GCash } from "../wallets/GCash/GCash.js";
+import { Paymaya } from "../wallets/Paymaya/Paymaya.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 { Accordion } from "../internal/Accordion/Accordion.js";
+import { AccordionItem } from "../AccordionItem/AccordionItem.js";
+import { IconLinePay } from "../internal/icons/IconLinePay.js";
+import { IconBoost } from "../internal/icons/IconBoost.js";
+import { IconGrabPay } from "../internal/icons/IconGrabPay.js";
+import { IconNinePay } from "../internal/icons/IconNinePay.js";
+import { IconMayBankQRPay } from "../internal/icons/IconMayBankQRPay.js";
+import { IconShopeePay } from "../internal/icons/IconShopeePay.js";
+import { IconTNGWallet } from "../internal/icons/IconTNGWallet.js";
+import { IconCard2 } from "../internal/icons/IconCard2.js";
+import { IconGCash } from "../internal/icons/IconGCash.js";
+import { IconPaymaya } from "../internal/icons/IconPaymaya.js";
+import { removeElementFromArray } from "../../utils/array.js";
+const dropInSupportedPaymentMethods = [
+  ...CardPaymentMethods,
+  PaymentMethod.GOOGLE_PAY,
+  PaymentMethod.APPLE_PAY,
+  PaymentMethod.BOOST,
+  PaymentMethod.GRAB_PAY,
+  PaymentMethod.LINE_PAY,
+  PaymentMethod.NINE_PAY,
+  PaymentMethod.SHOPEE_PAY,
+  PaymentMethod.TNG_WALLET,
+  PaymentMethod.MAY_BANK_QR_PAY,
+  PaymentMethod.GCASH,
+  PaymentMethod.PAYMAYA
+];
+const PaymentComponentMap = {
+  [PaymentCategory.CARD]: Card,
+  [PaymentCategory.APPLE_PAY]: ApplePay,
+  [PaymentCategory.GOOGLE_PAY]: GooglePay,
+  [PaymentCategory.BOOST]: Boost,
+  [PaymentCategory.NINE_PAY]: NinePay,
+  [PaymentCategory.LINE_PAY]: LinePay,
+  [PaymentCategory.TNG_WALLET]: TNGWallet,
+  [PaymentCategory.MAY_BANK_QR_PAY]: MayBankQRPay,
+  [PaymentCategory.SHOPEE_PAY]: ShopeePay,
+  [PaymentCategory.GRAB_PAY]: GrabPay,
+  [PaymentCategory.GCASH]: GCash,
+  [PaymentCategory.PAYMAYA]: Paymaya
+  // [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,
+    nameKey: "dropIn.card.label"
+  },
+  [PaymentCategory.LINE_PAY]: {
+    icon: IconLinePay,
+    nameKey: "dropIn.linePay.label"
+  },
+  [PaymentCategory.BOOST]: {
+    icon: IconBoost,
+    nameKey: "dropIn.boost.label"
+  },
+  [PaymentCategory.GRAB_PAY]: {
+    icon: IconGrabPay,
+    nameKey: "dropIn.grabPay.label"
+  },
+  [PaymentCategory.NINE_PAY]: {
+    icon: IconNinePay,
+    nameKey: "dropIn.ninePay.label"
+  },
+  [PaymentCategory.MAY_BANK_QR_PAY]: {
+    icon: IconMayBankQRPay,
+    nameKey: "dropIn.mayBankQRPay.label"
+  },
+  [PaymentCategory.SHOPEE_PAY]: {
+    icon: IconShopeePay,
+    nameKey: "dropIn.shopeePay.label"
+  },
+  [PaymentCategory.TNG_WALLET]: {
+    icon: IconTNGWallet,
+    nameKey: "dropIn.TNGWallet.label"
+  },
+  [PaymentCategory.GCASH]: {
+    icon: IconGCash,
+    nameKey: "dropIn.gcash.label"
+  },
+  [PaymentCategory.PAYMAYA]: {
+    icon: IconPaymaya,
+    nameKey: "dropIn.paymaya.label"
+  }
+};
+const { bem } = useBEM("drop-in");
+const DropIn = w((props, ref) => {
+  const {
+    paymentMethods: paymentMethodsConfig,
+    layout = "accordion",
+    session,
+    core,
+    enableAccordionTransition = true
+  } = props;
+  const { i18n, sessionReady } = usePayState(session);
+  const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
+  const [activePaymentCategory, setActivePaymentCategory] = h();
+  const [enablePaymentMethod, setEnablePaymentMethod] = h();
+  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(() => {
+    var _a, _b;
+    if (!activePaymentCategory) {
+      return;
+    }
+    const currCompInst = componentInstMap.current[activePaymentCategory];
+    if (currCompInst) {
+      const ref2 = currCompInst.ref;
+      (_a = ref2.updateAddress) == null ? void 0 : _a.call(ref2);
+      (_b = ref2.updateEmail) == null ? void 0 : _b.call(ref2);
+    }
+  }, [activePaymentCategory]);
+  y(() => {
+    if (paymentCategories == null ? void 0 : paymentCategories.length) {
+      paymentCategories.forEach((category) => {
+        renderComponent(category);
+      });
+    }
+  }, [paymentCategories]);
+  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 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);
+      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 session when creating the checkout")
+      );
+      return;
+    }
+    const { paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const enablePaymentMethods = intersection(
+      paymentMethod,
+      dropInSupportedPaymentMethods
+    );
+    if (!enablePaymentMethods.length) {
+      return;
+    }
+    initPaymentCategories(enablePaymentMethods);
+    if (core.processingPaymentMethod) {
+      const category = PaymentMethod2CategoryMap[core.processingPaymentMethod];
+      category && setActivePaymentCategory(category);
+      core.enablePaymentMethod.value = core.processingPaymentMethod;
+    }
+  }, [sessionReady, i18n.ready.value]);
+  y(() => {
+    if (core.enablePaymentMethod.value) {
+      setEnablePaymentMethod(
+        PaymentMethod2CategoryMap[core.enablePaymentMethod.value]
+      );
+    } else {
+      setEnablePaymentMethod(void 0);
+    }
+  }, [core.enablePaymentMethod.value]);
+  const HeaderField = () => {
+    return /* @__PURE__ */ u(b, { children: headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
+      "div",
+      {
+        className: bem("header-payment"),
+        ref: (el) => componentMountRefMap.current[category] = el
+      }
+    )) });
+  };
+  const OtherLine = () => {
+    return /* @__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") })
+    ] }) });
+  };
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: i18n.ready.value && /* @__PURE__ */ u("div", { className: bem(), children: [
+    HeaderField(),
+    !!paymentCategoryOptions.length && /* @__PURE__ */ u(b, { children: [
+      OtherLine(),
+      layout === "accordion" ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
+        Accordion,
+        {
+          value: activePaymentCategory,
+          enableTransition: enableAccordionTransition,
+          onChange: (item) => handlePaymentCategoryChange(item),
+          children: paymentCategoryOptions.map((item) => /* @__PURE__ */ u(
+            AccordionItem,
+            {
+              title: item.name,
+              value: item.type,
+              header: /* @__PURE__ */ u("div", { className: bem("accordion-icon"), children: item.icon() }),
+              disabled: !!enablePaymentMethod && enablePaymentMethod !== item.type,
+              children: /* @__PURE__ */ u(
+                "div",
+                {
+                  style: "padding: 0 2px",
+                  ref: (el) => componentMountRefMap.current[item.type] = el
+                }
+              )
+            }
+          ))
+        }
+      ) }) }) : /* @__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
+          }
+        ))
+      ] })
+    ] })
+  ] }) });
+});
+export {
+  DropIn,
+  PaymentComponentMap,
+  dropInSupportedPaymentMethods
+};

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

@@ -1,13 +1,13 @@
 import { w, F, h, q, y, A, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentMethod, SessionMode } from "../../constant.js";
+import { SessionMode, PaymentMethod } from "../../constant.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
-import "../../utils/card-brand/brands.js";
-import "../../utils/system-info/get-browser-info.js";
-import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { PayKKaError } from "../../core/error.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
@@ -176,7 +176,7 @@ const loadGooglePayJS = (onload, onerror) => {
 const { bem } = useBEM("google-pay");
 const GooglePay = w((props, ref) => {
   var _a;
-  const { session, threeDSFrame } = props;
+  const { session, threeDSFrame, isDropIn } = props;
   F(ref, () => ({
     checkThreeDS
   }));
@@ -198,11 +198,18 @@ const GooglePay = w((props, ref) => {
     returnUrl: session == null ? void 0 : session.checkout.returnUrl
   });
   y(() => {
-    var _a2;
+    var _a2, _b, _c;
     if (!sessionReady) {
       return;
     }
     const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b = (_a2 = props.core.config).onInitError) == null ? void 0 : _b.call(
+        _a2,
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
+      );
+      return;
+    }
     if (!paymentMethod.includes(PaymentMethod.GOOGLE_PAY)) {
       return;
     }
@@ -220,7 +227,7 @@ const GooglePay = w((props, ref) => {
     );
     setHosted(sessionMode === SessionMode.HOSTED);
     if (status === "SUCCESS") {
-      (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
+      (_c = props.onSuccess) == null ? void 0 : _c.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const processThreeDS = (threeDSUrl, incomplete) => {
@@ -286,6 +293,7 @@ const GooglePay = w((props, ref) => {
               fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
             })
           },
+          props.core,
           { locale: i18n.locale }
         );
       }());