@paykka/card-checkout-ui 0.6.0 → 0.7.0

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

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

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

@@ -1,16 +1,13 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
-import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {

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

@@ -2,9 +2,6 @@ import { u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -12,7 +9,7 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 function CardHolderNameField(props) {
-  const { className, style } = props;
+  const { className, style, disabled } = props;
   const { i18n } = useI18n();
   const rule = {
     trigger: ["blur", "submit"],
@@ -40,7 +37,8 @@ function CardHolderNameField(props) {
         {
           maxLength: 100,
           placeholder: i18n.get("card.cardHolderName.placeholder"),
-          onInput
+          onInput,
+          disabled
         }
       )
     }

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

@@ -1,9 +1,6 @@
 import { A, h, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -5,8 +5,6 @@ import "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../utils/format.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
   const { value, className, style } = props;

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

@@ -1,9 +1,6 @@
 import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -11,7 +8,7 @@ import "../internal/Form/Form.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
-import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfoByCode, findCardBrandInfo } from "../../utils/card-brand/index.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w((props, ref) => {

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

@@ -3,17 +3,14 @@ import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { limitedToNumber } from "../../utils/format.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
-import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
 const CardSecurityCodeField = w((props, ref) => {
   const { className, style, security, showLabel } = props;
   const inputRef = A(null);

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

@@ -1,11 +1,8 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -0,0 +1,99 @@
+import { w, A, F, h, u } from "../../core.js";
+import "../internal/Form/type.js";
+import "../internal/Form/context.js";
+import { FormItem } from "../internal/Form/FormItem.js";
+import "../internal/Form/Form.js";
+import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
+import { finCardBrandInfoByCode, findCardBrandInfo, getSupportedCardBrands } from "../../utils/card-brand/index.js";
+import "../../utils/system-info/get-browser-info.js";
+import { trimAll } from "../../utils/format.js";
+import { IconCardNo } from "../internal/icons/IconCardNo.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+const { bem } = useBEM("combined-card-info");
+const CombinedCardInfo = w(
+  (props, ref) => {
+    const { supportedCardBrands = [], className, showLabel = false, security } = props;
+    const inputRef = A(null);
+    const formItemRef = A(null);
+    const { i18n } = useI18n();
+    F(ref, () => ({
+      input: inputRef.current,
+      focus: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      },
+      resetValidation: (status, errorTip) => {
+        var _a;
+        (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
+      },
+      binValueChanged: (binValue2) => {
+        setBinValue(binValue2);
+      },
+      brandChanged: (brand) => {
+        if (brand) {
+          const brandInfo = finCardBrandInfoByCode(brand);
+          setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+        } else {
+          setBrandIcon(void 0);
+        }
+      },
+      getCardBrand: () => {
+        return findCardBrandInfo(trimAll(binValue), getSupportedCardBrands(supportedCardBrands)) || {};
+      }
+    }));
+    const rule = {
+      trigger: ["submit"],
+      validator() {
+        if (security) {
+          const result = formItemRef.current.getValidateResult();
+          if (result.status === "error") {
+            throw new Error(result.errors[0].message);
+          } else if (result.status === "success") {
+            return true;
+          }
+        }
+        return true;
+      }
+    };
+    const [binValue, setBinValue] = h("");
+    const [brandIcon, setBrandIcon] = h(void 0);
+    const LeftIcon = () => {
+      const Icon = brandIcon ?? IconCardNo;
+      return /* @__PURE__ */ u(Icon, { size: 32 });
+    };
+    return /* @__PURE__ */ u(
+      FormItem,
+      {
+        showLabel,
+        ref: formItemRef,
+        label: i18n.get("card.info.label"),
+        className,
+        path: "cardInfo",
+        rule,
+        children: /* @__PURE__ */ u(
+          Input,
+          {
+            ref: inputRef,
+            leftIcon: LeftIcon(),
+            rightIcon: /* @__PURE__ */ u("div", { className: bem("blank-icon") }),
+            children: /* @__PURE__ */ u("div", { className: bem(), children: [
+              /* @__PURE__ */ u("div", { className: bem("card-number"), "data-sf": EFieldType.CARD_NUMBER }),
+              /* @__PURE__ */ u("div", { className: bem("expire-date"), "data-sf": EFieldType.EXPIRE_DATE }),
+              /* @__PURE__ */ u("div", { className: bem("cvv"), "data-sf": EFieldType.CVV })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  CombinedCardInfo
+};

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

@@ -9,9 +9,6 @@ import { isValuable } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

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

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

@@ -1,6 +1,6 @@
 import { w, F, h, q, y, A, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentMethod } from "../../constant.js";
+import { PaymentMethod, SessionMode } from "../../constant.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";
@@ -8,12 +8,12 @@ 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 "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import { PayKKaError } from "../../core/error.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
 import { Info } from "../internal/Info/Info.js";
 import { loadScript } from "../../utils/load.js";
+import { ThreeDSAuth } from "../ThreeDS/index.js";
 function createGooglePay(checkout, pay, onClick, onCanUse) {
   const {
     transAmount,
@@ -175,17 +175,22 @@ const loadGooglePayJS = (onload, onerror) => {
 };
 const { bem } = useBEM("google-pay");
 const GooglePay = w((props, ref) => {
+  var _a;
+  const { session, threeDSFrame } = props;
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionReady, session, i18n, fraudDetection } = usePayState();
+  const { sessionReady, i18n, fraudDetection } = usePayState(session);
   const [errorMsg, setErrorMsg] = h("");
   const [showGooglePay, setShowGooglePay] = h(false);
+  const [showThreeDSModal, setShowThreeDSModal] = h(false);
+  const [threeDSInfo, setThreeDSInfo] = h();
+  const [hosted, setHosted] = h(true);
   const onTimeout = q(
     (message) => {
-      var _a;
+      var _a2;
       setErrorMsg(message || i18n.get("common.payTimeout"));
-      (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
     },
     [i18n, props.onTimeout]
   );
@@ -193,30 +198,50 @@ const GooglePay = w((props, ref) => {
     returnUrl: session == null ? void 0 : session.checkout.returnUrl
   });
   y(() => {
-    var _a;
+    var _a2;
     if (!sessionReady) {
       return;
     }
-    const { status, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
     if (!paymentMethod.includes(PaymentMethod.GOOGLE_PAY)) {
       return;
     }
     loadGooglePayJS(
       () => {
-        var _a2;
+        var _a3;
         setShowGooglePay(true);
-        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, true);
+        (_a3 = props.onLoad) == null ? void 0 : _a3.call(props, true);
       },
       () => {
-        var _a2;
+        var _a3;
         setShowGooglePay(false);
-        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, false);
+        (_a3 = props.onLoad) == null ? void 0 : _a3.call(props, false);
       }
     );
+    setHosted(sessionMode === SessionMode.HOSTED);
     if (status === "SUCCESS") {
-      (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
+      (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
+  const processThreeDS = (threeDSUrl, incomplete) => {
+    var _a2;
+    if (hosted) {
+      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, threeDSUrl, incomplete);
+    } else {
+      setShowThreeDSModal(true);
+      setThreeDSInfo({
+        url: threeDSUrl,
+        incomplete,
+        width: threeDSFrame == null ? void 0 : threeDSFrame.modalWidth,
+        height: threeDSFrame == null ? void 0 : threeDSFrame.modalHeight
+      });
+    }
+  };
+  const handleCloseThreeDSModal = () => {
+    setShowThreeDSModal(false);
+    setThreeDSInfo(void 0);
+    checkThreeDS();
+  };
   const { start: startReFetchPayInfo } = useRetry(
     async (timeout) => {
       return await pay(void 0, void 0, true, timeout);
@@ -226,10 +251,10 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function pay(token, billAddress, search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
     setErrorMsg("");
     if (!search) {
-      (_a = props.onSubmit) == null ? void 0 : _a.call(props);
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props);
     }
     try {
       const res = await (search ? getGooglePayInfo(
@@ -264,7 +289,7 @@ const GooglePay = w((props, ref) => {
           { locale: i18n.locale }
         );
       }());
-      const { status, orderStatus, errorMessage, threeDSUrl } = res;
+      const { status, orderStatus, errorMessage, threeDSUrl, errorCode } = res;
       if (status === "PROCESSING") {
         if (orderStatus === "SUCCESS") {
           (_b = props.onSuccess) == null ? void 0 : _b.call(props, getPaymentSuccessData());
@@ -280,7 +305,7 @@ const GooglePay = w((props, ref) => {
           } : await startReFetchPayInfo();
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
-          (_c = props.onError) == null ? void 0 : _c.call(props, "FAILURE");
+          (_c = props.onError) == null ? void 0 : _c.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true,
             res: {
@@ -299,13 +324,13 @@ const GooglePay = w((props, ref) => {
             res: { transactionState: "SUCCESS" }
           };
         } else if (orderStatus === "IN_THREED") {
-          (_e = props.onThreeDS) == null ? void 0 : _e.call(props, threeDSUrl, false);
+          processThreeDS(threeDSUrl, false);
           return {
             end: true,
             res: { transactionState: "SUCCESS" }
           };
         } else if (orderStatus === "IN_PREVIOUS_THREED") {
-          (_f = props.onThreeDS) == null ? void 0 : _f.call(props, threeDSUrl, true);
+          processThreeDS(threeDSUrl, true);
           return {
             end: true,
             res: { transactionState: "SUCCESS" }
@@ -317,19 +342,19 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else if (status === "SUCCESS") {
-        (_g = props.onSuccess) == null ? void 0 : _g.call(props, getPaymentSuccessData());
+        (_e = props.onSuccess) == null ? void 0 : _e.call(props, getPaymentSuccessData());
         return {
           end: true,
           res: { transactionState: "SUCCESS" }
         };
       } else if (status === "EXPIRED") {
-        (_h = props.onExpired) == null ? void 0 : _h.call(props);
+        (_f = props.onExpired) == null ? void 0 : _f.call(props);
         return {
           end: true,
           res: { transactionState: "SUCCESS" }
         };
       }
-      (_i = props.onSuccess) == null ? void 0 : _i.call(props, getPaymentSuccessData());
+      (_g = props.onSuccess) == null ? void 0 : _g.call(props, getPaymentSuccessData());
       return {
         end: false,
         res: { transactionState: "SUCCESS" }
@@ -354,8 +379,8 @@ const GooglePay = w((props, ref) => {
         }
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_j = props.onError) == null ? void 0 : _j.call(props, error);
+        setErrorMsg(message);
+        (_h = props.onError) == null ? void 0 : _h.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         return {
           end: true,
           res: {
@@ -378,7 +403,7 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false) {
-    var _a, _b, _c, _d, _e;
+    var _a2, _b, _c, _d, _e;
     if (!session)
       return { end: true };
     try {
@@ -398,7 +423,7 @@ const GooglePay = w((props, ref) => {
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
         } else if (orderStatus === "AUTHORIZED") {
-          (_a = props.onAuthorized) == null ? void 0 : _a.call(props);
+          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
         } else if (orderStatus === "IN_THREED") {
           !search && startReFetchCardPay3DSInfo();
           return { end: false };
@@ -431,7 +456,7 @@ const GooglePay = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_e = props.onError) == null ? void 0 : _e.call(props, error);
+        (_e = props.onError) == null ? void 0 : _e.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         return { end: true };
       }
     }
@@ -453,7 +478,16 @@ const GooglePay = w((props, ref) => {
   };
   return /* @__PURE__ */ u("div", { children: sessionReady && showGooglePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
-    Button()
+    Button(),
+    /* @__PURE__ */ u(
+      ThreeDSAuth,
+      {
+        show: showThreeDSModal,
+        theme: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.theme,
+        ...threeDSInfo,
+        onClose: handleCloseThreeDSModal
+      }
+    )
   ] }) });
 });
 export {

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

@@ -2,8 +2,6 @@ import { u } from "../../core.js";
 import { CoreContext } from "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
 const { bem } = useBEM("recurring-tip");