@paykka/card-checkout-ui 0.13.17 → 0.15.1

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

@@ -4,25 +4,24 @@ import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { GooglePayEventType } from "../../types/event.js";
-import { deepMerge } from "../../utils/object.js";
-import { formatPaymentResult } from "../../utils/payment.js";
-import { getBrowserParams } from "../../api/modules/get-browser-params.js";
+import { createUrlWithParams } from "../../utils/location.js";
 import { PaymentMethod, SessionMode } from "../../constant.js";
+import { deepMerge } from "../../utils/object.js";
+import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
+import { buildPaymentParams } from "../../api/utils/index.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
+import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.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";
-const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse) => {
-  const {
-    transAmount,
-    theme: { merchantName }
-  } = checkout;
+const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse, onCancel) => {
+  const { theme: { merchantName } } = checkout;
   const { googlePay: googlePay2 } = (checkout == null ? void 0 : checkout.channelParams) || {};
   let paymentsClient;
   const baseRequest = {
@@ -61,11 +60,12 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
     baseCardPaymentMethod
   );
   const getGoogleTransactionInfo = () => {
+    var _a, _b, _c, _d;
     return {
       countryCode: googlePay2 == null ? void 0 : googlePay2.countryCode,
-      currencyCode: transAmount.currency,
+      currencyCode: ((_b = (_a = core.payment) == null ? void 0 : _a.amount.value) == null ? void 0 : _b.currency) || "",
       totalPriceStatus: "FINAL",
-      totalPrice: String(transAmount.amount),
+      totalPrice: String(((_d = (_c = core.payment) == null ? void 0 : _c.amount.value) == null ? void 0 : _d.amount) || 0),
       totalPriceLabel: "Total"
     };
   };
@@ -136,6 +136,7 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
         (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_CAN_NOT_USE);
       }
     } catch (err) {
+      onCanUse == null ? void 0 : onCanUse(false);
       console.error(err);
       (_c = core.logger) == null ? void 0 : _c.reportErrorEvent(new PayKKaError(
         "ERROR",
@@ -155,7 +156,9 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
   };
   const onGooglePaymentButtonClicked = async () => {
     var _a, _b, _c;
-    onClick == null ? void 0 : onClick();
+    const clickResult = await (onClick == null ? void 0 : onClick());
+    if (clickResult === false)
+      return;
     const paymentDataRequest = getGooglePaymentDataRequest();
     paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
     const paymentsClient2 = getGooglePaymentsClient();
@@ -163,8 +166,10 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
     try {
       await paymentsClient2.loadPaymentData(paymentDataRequest);
     } catch (err) {
+      core.payment.resetCurrPaymentMethod();
       if ((err == null ? void 0 : err.statusCode) === "CANCELED") {
         (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_CANCELLED);
+        onCancel == null ? void 0 : onCancel();
       } else {
         (_c = core.logger) == null ? void 0 : _c.reportErrorEvent(new PayKKaError(
           "ERROR",
@@ -206,17 +211,16 @@ const DEFAULT_GOOGLE_PAY_CONFIG = {
 };
 const GooglePay = w((props, ref) => {
   var _a;
-  const { session, threeDSFrame, isDropIn, core } = props;
+  const { session, threeDSFrame, isDropIn, core, enable3DSModal = true } = props;
   const googlePayConfig = deepMerge(DEFAULT_GOOGLE_PAY_CONFIG, props.config || {});
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionReady, i18n, fraudDetection } = usePayState(session, props.core);
+  const { sessionReady, i18n, fraudDetection, disabled } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showGooglePay, setShowGooglePay] = h(false);
   const [showThreeDSModal, setShowThreeDSModal] = h(false);
   const [threeDSInfo, setThreeDSInfo] = h();
-  const [hosted, setHosted] = h(true);
   const getPaymentMethodContext = () => {
     return {
       paymentMethod: CURR_PAYMENT_METHOD
@@ -224,9 +228,10 @@ const GooglePay = w((props, ref) => {
   };
   const onTimeout = q(
     (message) => {
-      var _a2;
+      var _a2, _b;
+      (_a2 = core.payment) == null ? void 0 : _a2.resetCurrPaymentMethod();
       setErrorMsg(message || i18n.get("common.payTimeout"));
-      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry", getPaymentMethodContext());
+      (_b = props.onTimeout) == null ? void 0 : _b.call(props, "retry", getPaymentMethodContext());
     },
     [i18n, props.onTimeout]
   );
@@ -267,23 +272,23 @@ const GooglePay = w((props, ref) => {
         (_c = props.onLoad) == null ? void 0 : _c.call(props, false);
       }
     );
-    setHosted(sessionMode === SessionMode.HOSTED);
     if (status === "SUCCESS") {
       processOnSuccess(session == null ? void 0 : session.checkout);
     }
   }, [sessionReady]);
   const processThreeDS = (threeDSUrl, incomplete) => {
     var _a2;
-    if (hosted) {
-      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, threeDSUrl, incomplete);
-    } else {
+    const finalUrl = createUrlWithParams(threeDSUrl, { locale: i18n.locale });
+    if (enable3DSModal) {
       setShowThreeDSModal(true);
       setThreeDSInfo({
-        url: threeDSUrl,
+        url: finalUrl,
         incomplete,
         width: threeDSFrame == null ? void 0 : threeDSFrame.modalWidth,
         height: threeDSFrame == null ? void 0 : threeDSFrame.modalHeight
       });
+    } else {
+      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, finalUrl, incomplete);
     }
   };
   const handleCloseThreeDSModal = () => {
@@ -311,7 +316,7 @@ const GooglePay = w((props, ref) => {
       bill: {
         firstName: billAddress == null ? void 0 : billAddress.name,
         addressLine1: billAddress == null ? void 0 : billAddress.address1,
-        addressLine2: (billAddress == null ? void 0 : billAddress.address2) ?? "" + (billAddress == null ? void 0 : billAddress.address3) ?? "",
+        addressLine2: ((billAddress == null ? void 0 : billAddress.address2) ?? "") + ((billAddress == null ? void 0 : billAddress.address3) ?? ""),
         country: billAddress == null ? void 0 : billAddress.countryCode,
         state: billAddress == null ? void 0 : billAddress.administrativeArea,
         city: billAddress == null ? void 0 : billAddress.locality,
@@ -326,12 +331,13 @@ const GooglePay = w((props, ref) => {
     };
   };
   async function pay(token, billAddress, search = false, timeout) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     setErrorMsg("");
     if (!search) {
       (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, void 0, getPaymentMethodContext());
     }
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
@@ -346,38 +352,44 @@ const GooglePay = w((props, ref) => {
           requestOptions
         );
       } else {
+        const paymentParams = await getPaymentParams(token, billAddress);
         const extraParams = (_e = (_d = core.config)._getExtraParams) == null ? void 0 : _e.call(_d, "payment", CURR_PAYMENT_METHOD);
-        res = await googlePay(
-          await getPaymentParams(token, billAddress),
-          extraParams,
-          requestOptions
-        );
+        if ((_f = core.config._checkoutConfig) == null ? void 0 : _f.dynamicSessionId) {
+          await core.updateSessionId(buildPaymentParams(paymentParams, extraParams));
+          session.sessionId && (paymentParams.sessionId = session.sessionId);
+        }
+        res = await googlePay(paymentParams, extraParams, requestOptions);
       }
-      const { status, orderStatus, errorMessage, payInfo = {}, errorCode, sessionId } = res;
+      const { errorMessage, payInfo = {}, errorCode, sessionId } = res;
       const { threeDSUrl } = payInfo;
       sessionId && (session.sessionId = sessionId);
-      !search && ((_f = props.onSubmitResponse) == null ? void 0 : _f.call(props, res, getPaymentMethodContext()));
-      if (status === "PROCESSING") {
-        if (orderStatus === "SUCCESS") {
-          processOnSuccess(res);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "PROCESSING") {
+      !search && ((_g = props.onSubmitResponse) == null ? void 0 : _g.call(props, res, getPaymentMethodContext()));
+      let result = {
+        end: true,
+        res: { transactionState: "SUCCESS" }
+      };
+      await processPaymentStatus(res, {
+        onProcessing: async () => {
           const res2 = await startReFetchPayInfo();
-          return (res2 == null ? void 0 : res2.end) === true ? {
-            end: true,
-            res: res2.res
-          } : await startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
+          if ((res2 == null ? void 0 : res2.end) === true) {
+            result = res2.res;
+          } else {
+            result = await startReFetchPayInfo();
+          }
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+        },
+        onFailure: () => {
+          var _a3, _b2;
           errorMessage && setErrorMsg(errorMessage);
-          (_g = props.onError) == null ? void 0 : _g.call(
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
+          (_b2 = props.onError) == null ? void 0 : _b2.call(
             props,
             new PayKKaError("API_ERROR", errorMessage, { code: errorCode }),
             getPaymentMethodContext()
           );
-          return {
+          result = {
             end: true,
             res: {
               transactionState: "ERROR",
@@ -388,48 +400,31 @@ const GooglePay = w((props, ref) => {
               }
             }
           };
-        } else if (orderStatus === "AUTHORIZED") {
-          (_h = props.onAuthorized) == null ? void 0 : _h.call(props, getPaymentMethodContext());
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "IN_THREED") {
+        },
+        onAuthorized: () => {
+          var _a3;
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onInThreeDS: () => {
           threeDSUrl && processThreeDS(threeDSUrl, false);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+        },
+        onInPreviousThreeDS: () => {
           threeDSUrl && processThreeDS(threeDSUrl, true);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (!orderStatus) {
-          return {
+        },
+        onExpired: () => {
+          var _a3;
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          var _a3;
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
+          result = {
             end: true,
-            res: { transactionState: "SUCCESS" }
+            res: { transactionState: "ERROR" }
           };
         }
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        return {
-          end: true,
-          res: { transactionState: "SUCCESS" }
-        };
-      } else if (status === "EXPIRED") {
-        (_i = props.onExpired) == null ? void 0 : _i.call(props, getPaymentMethodContext());
-        return {
-          end: true,
-          res: { transactionState: "SUCCESS" }
-        };
-      }
-      processOnSuccess(res);
-      return {
-        end: false,
-        res: { transactionState: "SUCCESS" }
-      };
+      });
+      return result;
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -449,9 +444,10 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else {
+        (_h = core.payment) == null ? void 0 : _h.resetCurrPaymentMethod();
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_j = props.onError) == null ? void 0 : _j.call(
+        (_i = props.onError) == null ? void 0 : _i.call(
           props,
           new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
           getPaymentMethodContext()
@@ -478,7 +474,7 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false) {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d;
     if (!session)
       return { end: true };
     try {
@@ -493,35 +489,48 @@ const GooglePay = w((props, ref) => {
           locale: i18n.locale
         }
       );
-      const { status, orderStatus, errorMessage } = res;
-      if (status === "PROCESSING") {
-        if (orderStatus === "PROCESSING") {
+      const { errorMessage } = res;
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
           startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
+          stopReFetchCardPay3DSInfo();
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+          stopReFetchCardPay3DSInfo();
+        },
+        onFailure: () => {
+          var _a3;
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
           errorMessage && setErrorMsg(errorMessage);
-        } else if (orderStatus === "AUTHORIZED") {
-          (_c = props.onAuthorized) == null ? void 0 : _c.call(props, getPaymentMethodContext());
-        } else if (orderStatus === "IN_THREED") {
+          stopReFetchCardPay3DSInfo();
+        },
+        onAuthorized: () => {
+          var _a3;
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+          stopReFetchCardPay3DSInfo();
+        },
+        onInThreeDS: () => {
           !search && startReFetchCardPay3DSInfo();
-          return { end: false };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+          end = false;
+        },
+        onInPreviousThreeDS: () => {
           setErrorMsg(i18n.get("common.pay3DSIncomplete"));
-        } else if (!orderStatus) {
+          stopReFetchCardPay3DSInfo();
+        },
+        onExpired: () => {
+          var _a3;
+          stopReFetchCardPay3DSInfo();
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          var _a3;
+          stopReFetchCardPay3DSInfo();
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
         }
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        (_d = props.onExpired) == null ? void 0 : _d.call(props, getPaymentMethodContext());
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      }
-      processOnSuccess(res);
-      stopReFetchCardPay3DSInfo();
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -533,11 +542,13 @@ 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(
+        (_c = props.onError) == null ? void 0 : _c.call(
           props,
           new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
           getPaymentMethodContext()
         );
+        (_d = core.payment) == null ? void 0 : _d.resetCurrPaymentMethod();
+        stopReFetchCardPay3DSInfo();
         return { end: true };
       }
     }
@@ -550,18 +561,19 @@ const GooglePay = w((props, ref) => {
         session == null ? void 0 : session.checkout,
         googlePayConfig,
         pay,
-        () => {
+        async () => {
           var _a2, _b, _c;
           (_b = (_a2 = core.config).onEvent) == null ? void 0 : _b.call(_a2, GooglePayEventType.GOOGLE_PAY_BUTTON_CLICKED);
-          (_c = props.onBtnClick) == null ? void 0 : _c.call(props);
+          return (_c = props.onBtnClick) == null ? void 0 : _c.call(props);
         },
-        props.onCanUse
+        props.onCanUse,
+        props.onCancel
       );
       onGooglePayLoaded(containRef.current);
     }
   }, [sessionReady, containRef, i18n.ready.value, showGooglePay]);
   const Button = () => {
-    return /* @__PURE__ */ u("div", { style: "width: 100%; height: 44px", children: /* @__PURE__ */ u("div", { id: "container", style: "width:100%; height: 44px", ref: containRef }) });
+    return /* @__PURE__ */ u("div", { style: "width: 100%; height: 44px", className: bem("button", { disabled }), children: /* @__PURE__ */ u("div", { id: "container", style: "width:100%; height: 44px", ref: containRef }) });
   };
   return /* @__PURE__ */ u("div", { children: sessionReady && showGooglePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),

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

@@ -2,11 +2,11 @@ import { u, b } from "../../core.js";
 import { PaymentCategory } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { isMobile } from "../../utils/system-info/get-system-info.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import { IconRedirect } from "../internal/icons/IconRedirect.js";
 import { IconScan } from "../internal/icons/IconScan.js";
 const { bem } = useBEM("guide-card");
@@ -26,7 +26,7 @@ const GuideCard = (props) => {
   };
   const guideCardInfoMap = {
     [PaymentCategory.ALI_PAY]: redirectGuideCard,
-    [PaymentCategory.WECHAT_PAY]: redirectGuideCard,
+    [PaymentCategory.WECHAT_PAY]: getQRCodeGuideCard(i18n.get("common.wechatPayGlobal")),
     [PaymentCategory.BOOST]: redirectGuideCard,
     [PaymentCategory.GRAB_PAY]: redirectGuideCard,
     [PaymentCategory.LINE_PAY]: redirectGuideCard,

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

@@ -1,22 +1,37 @@
-import { h, y, u } from "../../core.js";
+import { h, x, T, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { normalizedClass } from "../../utils/format.js";
-import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
-import { Button } from "../internal/Button/Button.js";
+import { formatAmount, normalizedClass } from "../../utils/format.js";
+import { CoreContext } from "../../core/context.js";
+import { Button } from "../internal/Button/Button2.js";
 import { IconSafe } from "../internal/icons/IconSafe.js";
 import { LoadingCheck } from "../internal/LoadingCheck/LoadingCheck.js";
 const { bem } = useBEM("payment-button");
 const PaymentButton = (props) => {
+  var _a;
   const {
     verified = false,
     status = "unSubmit"
   } = props;
   const { i18n } = useI18n();
   const [text, setText] = h("");
+  const coreContext = x(CoreContext);
+  const core = coreContext == null ? void 0 : coreContext.core;
+  const payAmountText = T(() => {
+    var _a2, _b, _c, _d, _e;
+    const amount = (_a2 = core == null ? void 0 : core.payment) == null ? void 0 : _a2.amount.value;
+    const amountNumber = props.amount ?? ((_c = (_b = core == null ? void 0 : core.payment) == null ? void 0 : _b.amount.value) == null ? void 0 : _c.amount);
+    const transAmount = {
+      ...(_e = (_d = core == null ? void 0 : core.session) == null ? void 0 : _d.checkout) == null ? void 0 : _e.transAmount,
+      ...amount,
+      amount: amountNumber
+    };
+    const amountText = amountNumber ? formatAmount(transAmount).jointSymbol() : "";
+    return i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
+  }, [props.amount, (_a = core == null ? void 0 : core.payment) == null ? void 0 : _a.amount.value]);
   const Icon = () => {
     return status === "unSubmit" ? /* @__PURE__ */ u(IconSafe, { size: 20, disabled: !verified }) : /* @__PURE__ */ u(
       LoadingCheck,
@@ -36,10 +51,10 @@ const PaymentButton = (props) => {
       if (props.children) {
         setText("");
       } else {
-        setText(i18n.get("common.pay"));
+        setText(payAmountText);
       }
     }
-  }, [status, props.children]);
+  }, [status, props.children, payAmountText]);
   return /* @__PURE__ */ u(
     Button,
     {
@@ -47,7 +62,7 @@ const PaymentButton = (props) => {
       style: props.style,
       icon: Icon(),
       loading: status === "loading",
-      disabled: props.disabled || status === "success",
+      disabled: (props.disabled || status === "success") && status !== "loading",
       onClick: props.onClick,
       children: /* @__PURE__ */ u("span", { className: bem("text", { "not-verified": !verified }), children: text || props.children })
     }

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

@@ -2,7 +2,7 @@ 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 "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
 const { bem } = useBEM("recurring-tip");

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

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { w, A, F, y, q, u } from "../../core.js";
+import { w, A, y, F, q, u } from "../../core.js";
 import { SessionMode } from "../../constant.js";
 import { cdnUrl, cdnOrigin, apiUrl, apiPrefix } from "../../config.js";
 import { MessageAction } from "../../types/message.js";
@@ -84,7 +84,7 @@ class SecuredField {
   }
 }
 const SecuredFieldsProvider = w((props, ref) => {
-  const { sessionMode, i18n, targetElement, checkoutId, onEvent, core } = props;
+  const { sessionMode, i18n, targetElement, checkoutId, onEvent, core, disabled = false } = props;
   const rootNodeRef = A(null);
   const hiddenIframe = A(null);
   const payment = (formData, extraParams) => {
@@ -97,6 +97,23 @@ const SecuredFieldsProvider = w((props, ref) => {
     };
     postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);
   };
+  const sendSetConfigMessage = (iframeWindow) => {
+    console.log("disabled", disabled, iframeWindow);
+    const data = {
+      action: MessageAction.SET_CONFIG,
+      checkoutId,
+      disabled
+    };
+    postMessageToIframe(data, iframeWindow, cdnOrigin);
+  };
+  y(() => {
+    Object.values(securedFieldMap.current).forEach((field) => {
+      var _a;
+      if ((_a = field == null ? void 0 : field.iframe) == null ? void 0 : _a.contentWindow) {
+        sendSetConfigMessage(field.iframe.contentWindow);
+      }
+    });
+  }, [disabled]);
   F(ref, () => ({
     payment,
     reload: () => {
@@ -154,7 +171,8 @@ const SecuredFieldsProvider = w((props, ref) => {
   };
   const initHiddenIframe = async () => {
     const iframeEl = createIframe(`${cdnUrl}/secured-iframe.html`);
-    iframeEl.name = `${HIDDEN_IFRAME_NAME}-${checkoutId}-${Date.now()}`;
+    const hiddenIframeName = `${HIDDEN_IFRAME_NAME}-${checkoutId}-${Date.now()}`;
+    iframeEl.name = hiddenIframeName;
     iframeEl.width = "0";
     iframeEl.height = "0";
     iframeEl.style.border = "none";
@@ -211,7 +229,7 @@ const SecuredFieldsProvider = w((props, ref) => {
     return isFieldIframe || isHiddenIframe;
   };
   const onReceiveMessage = q((event) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
     const { data, origin, source } = event;
     if (origin !== cdnOrigin) {
       return;
@@ -277,20 +295,24 @@ const SecuredFieldsProvider = w((props, ref) => {
         break;
       case MessageAction.ACTIVATED:
         (_l = props.onActivated) == null ? void 0 : _l.call(props, feedbackData);
+        sendSetConfigMessage(source);
+        break;
+      case MessageAction.HIDDEN_IFRAME_READY:
+        (_m = props.onHiddenIframeReady) == null ? void 0 : _m.call(props, feedbackData);
         break;
       case MessageAction.CARD_ENCRYPTED:
-        (_m = props.onCardEncrypted) == null ? void 0 : _m.call(props, feedbackData);
+        (_n = props.onCardEncrypted) == null ? void 0 : _n.call(props, feedbackData);
         break;
       case MessageAction.CARD_ENCRYPTION_FAILED:
-        (_n = props.onCardEncryptionFailed) == null ? void 0 : _n.call(props, feedbackData);
+        (_o = props.onCardEncryptionFailed) == null ? void 0 : _o.call(props, feedbackData);
         break;
       case MessageAction.VALIDATED:
-        (_o = props.onValidated) == null ? void 0 : _o.call(props, feedbackData);
+        (_p = props.onValidated) == null ? void 0 : _p.call(props, feedbackData);
         break;
       case MessageAction.IFRAME_ERROR: {
         const data2 = feedbackData;
-        (_r = core == null ? void 0 : core.logger) == null ? void 0 : _r.reportErrorEvent(
-          new PayKKaError(EPayKKaError.ERROR, (_p = data2.error) == null ? void 0 : _p.message, { cause: (_q = data2.error) == null ? void 0 : _q.stack })
+        (_s = core == null ? void 0 : core.logger) == null ? void 0 : _s.reportErrorEvent(
+          new PayKKaError(EPayKKaError.ERROR, (_q = data2.error) == null ? void 0 : _q.message, { cause: (_r = data2.error) == null ? void 0 : _r.stack })
         );
         break;
       }