@paykka/card-checkout-ui 0.8.0 → 0.9.2

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

@@ -2,24 +2,63 @@ 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 { 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 { IconCard } from "../internal/icons/IconCard.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.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.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
@@ -54,14 +93,61 @@ const PaymentTabs = (props) => {
     }
   )) });
 };
+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 = "tabs", session } = props;
+  const {
+    paymentMethods: paymentMethodsConfig,
+    layout = "accordion",
+    session,
+    core,
+    enableAccordionTransition = true
+  } = props;
   const { i18n, sessionReady } = usePayState(session);
   const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
-  const [activePaymentCategory, setActivePaymentCategory] = h(
-    null
-  );
+  const [activePaymentCategory, setActivePaymentCategory] = h();
+  const [enablePaymentMethod, setEnablePaymentMethod] = h();
   const [headerPaymentCategories, setHeaderPaymentCategories] = h(
     []
   );
@@ -78,14 +164,24 @@ const DropIn = w((props, ref) => {
     }
   }));
   y(() => {
+    var _a, _b;
     if (!activePaymentCategory) {
       return;
     }
-    if (componentInstMap.current[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);
     }
-    renderComponent(activePaymentCategory);
   }, [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);
@@ -113,32 +209,46 @@ const DropIn = w((props, ref) => {
     }
   };
   const initPaymentCategories = (enablePaymentMethods) => {
+    const cpyEnablePaymentMethods = [...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 (cpyEnablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
+      headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
+      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.APPLE_PAY);
     }
-    if (enablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
-      if (layout === "tabs") {
-        headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
-      } else {
-        paymentCategories2.push(PaymentCategory.APPLE_PAY);
-      }
+    if (cpyEnablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
+      headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
+      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.GOOGLE_PAY);
     }
-    const isCardEnable = !!intersection(enablePaymentMethods, CardPaymentMethods).length;
+    const isCardEnable = !!intersection(cpyEnablePaymentMethods, 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 })
+        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);
@@ -157,7 +267,7 @@ const DropIn = w((props, ref) => {
     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")
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
     }
@@ -170,38 +280,83 @@ const DropIn = w((props, ref) => {
       return;
     }
     initPaymentCategories(enablePaymentMethods);
+    if (core.processingPaymentMethod) {
+      const category = PaymentMethod2CategoryMap[core.processingPaymentMethod];
+      category && setActivePaymentCategory(category);
+      core.enablePaymentMethod.value = core.processingPaymentMethod;
+    }
   }, [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(
+  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
       }
-    )),
-    !!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,
+    )) });
+  };
+  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,
-          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
+          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,

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 { 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";
@@ -206,7 +206,7 @@ const GooglePay = w((props, ref) => {
     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 mode when creating the checkout")
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
     }
@@ -293,6 +293,7 @@ const GooglePay = w((props, ref) => {
               fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
             })
           },
+          props.core,
           { locale: i18n.locale }
         );
       }());