@paykka/card-checkout-ui 0.7.0 → 0.8.0

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

@@ -32,6 +32,15 @@ function formatPaymentMethodInfo(paymentMethods = []) {
     channelParams
   };
 }
+function formatAmountBreakdown(info = {}) {
+  return {
+    goodsTax: info.goods_tax,
+    shippingAmount: info.shipping_amount,
+    shippingTax: info.shipping_tax,
+    discount: info.discount,
+    other: info.other
+  };
+}
 function checkoutMap(res = {}) {
   var _a, _b, _c;
   const { theme, bill, payment_methods, field } = res;
@@ -47,6 +56,7 @@ function checkoutMap(res = {}) {
     sessionMode,
     merchantName: (_a = res.theme) == null ? void 0 : _a.merchant_name,
     returnUrl: res.return_url,
+    cancelUrl: res.cancel_url,
     locale: res.locale,
     paymentType: res.payment_type,
     goods: res.goods ? res.goods : [],
@@ -86,6 +96,7 @@ function checkoutMap(res = {}) {
         required: !!(field == null ? void 0 : field.bill_address_required)
       }
     },
+    amountBreakdown: formatAmountBreakdown(res.amount_breakdown),
     ...paymentMethodsInfo
   };
 }

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

@@ -4,8 +4,8 @@ import { getAliPayInfo, aliPay } from "../../api/modules/ali-pay/index.js";
 import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { formatAmount } from "../../utils/format.js";
-import { PaymentType } from "../../constant.js";
+import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
+import { COMMON_CLASS_NAME, PaymentType } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
 import { createAddressCore } from "../../core/Address.js";
@@ -23,6 +23,7 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("ali-pay");
 const AliPay = w((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
@@ -56,19 +57,19 @@ const AliPay = w((props, ref) => {
       startReFetchPayInfo({ timeout });
     },
     updateAddress: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressState.getAddressState());
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
     },
     updateEmail: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { email: emailState.email }));
-      (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
+      (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
     }
   }));
   function validateForm() {
-    var _a;
-    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
+    var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
       setValidated(true);
     }).catch(() => {
       setValidated(false);
@@ -78,11 +79,11 @@ const AliPay = w((props, ref) => {
     validateForm();
   }, [form]);
   y(() => {
-    var _a;
+    var _a2;
     if (sessionReady) {
       if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+        (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props);
       }
       form.email = (session == null ? void 0 : session.checkout.bill.email) ?? "";
       disabledEmail.current = !!(session == null ? void 0 : session.checkout.bill.email);
@@ -93,10 +94,10 @@ const AliPay = w((props, ref) => {
     }
   }, [sessionReady]);
   const onTimeout = q((message) => {
-    var _a;
+    var _a2;
     setErrorMsg(message || i18n.get("common.payTimeout"));
     setSubmitButtonStatus("unSubmit");
-    (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+    (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
   }, [i18n, props.onTimeout]);
   const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
     (timeout) => pay(true, timeout),
@@ -105,7 +106,7 @@ const AliPay = w((props, ref) => {
     }
   );
   async function pay(search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     try {
       const res = search ? await getAliPayInfo(
         {
@@ -132,20 +133,20 @@ const AliPay = w((props, ref) => {
         { locale: i18n.locale, timeout }
       );
       const { status, orderStatus, errorMessage, errorCode } = res;
-      !search && ((_a = props.onSubmitResponse) == null ? void 0 : _a.call(props, res));
+      !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
         } else if (orderStatus === "SUCCESS") {
           setSubmitButtonStatus("success");
-          (_b = props.onSuccess) == null ? void 0 : _b.call(props);
+          (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props);
           return {
             end: true
           };
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_c = props.onError) == null ? void 0 : _c.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          (_c2 = props.onError) == null ? void 0 : _c2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true
           };
@@ -156,26 +157,26 @@ const AliPay = w((props, ref) => {
           };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_d = props.onTimeout) == null ? void 0 : _d.call(props, "channel");
+          (_d2 = props.onTimeout) == null ? void 0 : _d2.call(props, "channel");
           return {
             end: true
           };
         }
       } else if (status === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_e = props.onSuccess) == null ? void 0 : _e.call(props);
+        (_e2 = props.onSuccess) == null ? void 0 : _e2.call(props);
         return {
           end: true
         };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_f = props.onExpired) == null ? void 0 : _f.call(props);
+        (_f2 = props.onExpired) == null ? void 0 : _f2.call(props);
         return {
           end: true
         };
       }
       setSubmitButtonStatus("unSubmit");
-      (_g = props.onSuccess) == null ? void 0 : _g.call(props);
+      (_g2 = props.onSuccess) == null ? void 0 : _g2.call(props);
       return {
         end: true
       };
@@ -190,19 +191,19 @@ const AliPay = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_h = props.onError) == null ? void 0 : _h.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        (_h2 = props.onError) == null ? void 0 : _h2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
     }
   }
   async function onSubmit() {
-    var _a;
+    var _a2;
     setErrorMsg("");
-    (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
-      var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
+      var _a3;
       requiredBill && addressState.setValidateAllFields(true);
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
+      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -215,9 +216,10 @@ const AliPay = w((props, ref) => {
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -235,6 +237,13 @@ const AliPay = w((props, ref) => {
     formRef.current = dom;
     dom && validateForm();
   };
+  const formStyle = {
+    [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
+    [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
+    [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
+    [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
+    [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
+  };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
     {
@@ -242,7 +251,7 @@ const AliPay = w((props, ref) => {
         i18n,
         session
       },
-      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: [
+      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
         /* @__PURE__ */ u(
           EmailField,
           {
@@ -257,13 +266,14 @@ const AliPay = w((props, ref) => {
           {
             ref: addressFieldRef,
             value: form.address,
+            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
             onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
           }
         ),
         (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
         Button()
-      ] })
+      ] }) })
     }
   );
 });

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

@@ -1,6 +1,6 @@
 import { w, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentMethod } from "../../constant.js";
+import { SessionMode, PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getApplePayInfo, applePay, getMerchantSession } from "../../api/modules/apple-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
@@ -43,7 +43,7 @@ async function applePayEnv(id) {
 }
 const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
-  const { session } = props;
+  const { session, isDropIn } = props;
   let applePaySession;
   const { i18n, sessionReady, fraudDetection } = usePayState(session);
   const [errorMsg, setErrorMsg] = h("");
@@ -52,19 +52,26 @@ const ApplePay = w((props) => {
     returnUrl: session == null ? void 0 : session.checkout.returnUrl
   });
   y(() => {
-    var _a;
+    var _a, _b, _c;
     if (!sessionReady) {
       return;
     }
-    const { status, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b = (_a = props.core.config).onInitError) == null ? void 0 : _b.call(
+        _a,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
+      return;
+    }
     if (!paymentMethod.includes(PaymentMethod.APPLE_PAY)) {
       return;
     }
     loadApplePayJS(
       async () => {
-        var _a2, _b, _c, _d;
+        var _a2, _b2, _c2, _d;
         const envSupported = await applePayEnv(
-          (_c = (_b = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.channelParams) == null ? void 0 : _b.applePay) == null ? void 0 : _c.merchantIdentifier
+          (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.channelParams) == null ? void 0 : _b2.applePay) == null ? void 0 : _c2.merchantIdentifier
         );
         if (!envSupported) {
           return;
@@ -79,7 +86,7 @@ const ApplePay = w((props) => {
       }
     );
     if (status === "SUCCESS") {
-      (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
+      (_c = props.onSuccess) == null ? void 0 : _c.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const onTimeout = q(

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

@@ -1,6 +1,6 @@
 import { w, A, h, F, y, q, T, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentType, SessionMode, COMMON_CLASS_NAME, CardPaymentMethods, PaymentMethod } from "../../constant.js";
+import { PaymentType, SessionMode, CardPaymentMethods, COMMON_CLASS_NAME, PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getCardPayInfo, cardPay } from "../../api/modules/card/index.js";
 import { CoreContext } from "../../core/context.js";
@@ -32,11 +32,11 @@ import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/inde
 import { SubmitButton } from "../SubmitButton/index.js";
 import { ThreeDSAuth } from "../ThreeDS/index.js";
 import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
-import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
 import { cardBrandCodes } from "../../utils/card-brand/brands.js";
 import { findCardBrand } from "../../utils/card-brand/index.js";
 import { separateInputStyle } from "../../utils/style.js";
 import { createPromise } from "../../utils/create-promise.js";
+import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
@@ -51,7 +51,8 @@ const Card = w((props, ref) => {
     showAddress = false,
     threeDSFrame,
     styles,
-    enable3DSModal = true
+    enable3DSModal = true,
+    isDropIn
   } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
@@ -139,10 +140,18 @@ const Card = w((props, ref) => {
     input && setInputStyle(input);
   };
   y(() => {
+    var _a2, _b2;
     if (!sessionReady) {
       return;
     }
     const { status, paymentMethod = [], bill = {}, sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b2 = (_a2 = props.core.config).onInitError) == null ? void 0 : _b2.call(
+        _a2,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
+      return;
+    }
     if (!intersection(paymentMethod, CardPaymentMethods).length) {
       return;
     }
@@ -150,12 +159,7 @@ const Card = w((props, ref) => {
     initElementStyles();
     setSecurity(sessionMode !== SessionMode.HOSTED);
     form.email = bill.email ?? "";
-    setSupportedCardBrands(
-      cardBrandCodes.filter((code) => {
-        var _a2;
-        return (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentMethod.includes(code);
-      })
-    );
+    setSupportedCardBrands(intersection(cardBrandCodes, paymentMethod || []));
     setIsCheckoutEnabled(true);
     if (status === "SUCCESS") {
       setSubmitButtonStatus("success");
@@ -384,9 +388,10 @@ const Card = w((props, ref) => {
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -400,7 +405,7 @@ const Card = w((props, ref) => {
       }
     );
   };
-  const cardStyle = {
+  const formStyle = {
     [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
     [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
     [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
@@ -704,7 +709,7 @@ const Card = w((props, ref) => {
   }, [splitCardInfo, security]);
   const cardForm = () => {
     var _a2;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: cardStyle, children: [
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
       Email(),
       CardInfo(),
       (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: fieldStatus == null ? void 0 : fieldStatus.holderName.disabled }) }),
@@ -717,36 +722,34 @@ const Card = w((props, ref) => {
   };
   const fastPaymentCardForm = () => {
     var _a2, _b2, _c2, _d2;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: [
-      /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: cardStyle, children: [
-        Email(),
-        /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
-          /* @__PURE__ */ u(
-            CardSelector,
-            {
-              value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
-              cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
-              onClickEdit: onEditOtherCard,
-              onClickChange: onClickChangeCard,
-              onCardChange,
-              style: { flex: 2, marginRight: "12px" }
-            }
-          ),
-          /* @__PURE__ */ u(
-            CardSecurityCodeField,
-            {
-              className: fieldClassNames,
-              style: { flex: 1, marginLeft: "12px" },
-              security,
-              ref: cardSecurityCodeFieldRef
-            }
-          )
-        ] })
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+      Email(),
+      /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
+        /* @__PURE__ */ u(
+          CardSelector,
+          {
+            value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
+            cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
+            onClickEdit: onEditOtherCard,
+            onClickChange: onClickChangeCard,
+            onCardChange,
+            style: { flex: 2, marginRight: "12px" }
+          }
+        ),
+        /* @__PURE__ */ u(
+          CardSecurityCodeField,
+          {
+            className: fieldClassNames,
+            style: { flex: 1, marginLeft: "12px" },
+            security,
+            ref: cardSecurityCodeFieldRef
+          }
+        )
       ] }),
       tokenAddressFilled && Address(),
       ErrorMessage(),
       !hidePaymentButton && Button()
-    ] });
+    ] }) });
   };
   return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     /* @__PURE__ */ u(

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
+};