@paykka/card-checkout-ui 0.5.17 → 0.7.0

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

@@ -1,14 +1,16 @@
 import { A, h, y, u, b } from "../../core.js";
 import { clamp, isExpired, safeParse } from "../../utils/index.js";
-import { FieldType, MessageAction, postMessageToIframe } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { getSupportedCardBrands, getSupportedCardBrandsLengths, findCardBrand } from "../../utils/card-brand/index.js";
 import { limitedToNumber, trimAll } from "../../utils/format.js";
 import { isUndefined, isNil } from "../../utils/is.js";
-import "../../utils/card-brand/brands.js";
-import "../../utils/system-info/get-browser-info.js";
 import { cdnOrigin, setApiUrl, setCDNUrl } from "../../config.js";
+import { MessageAction } from "../../types/message.js";
+import { generateClassNameMap, style2String, createPlaceholderStyle, loadStyle } from "../../utils/style.js";
+import { postMessageToIframe } from "../../utils/iframe.js";
 import { isTimeoutError } from "../../api/http.js";
 import { cardPay } from "../../api/modules/card/index.js";
+import { encryptCard } from "../../api/modules/encrypted-card/index.js";
 const useSecuredInput = () => {
   let fieldType;
   let supportedCardBrands;
@@ -16,6 +18,7 @@ const useSecuredInput = () => {
   const [cardBin, setCardBin] = h("");
   let brands;
   let brandLengths;
+  const [brand, setBrand] = h(void 0);
   const initSecuredInput = (options) => {
     fieldType = options.fieldType;
     supportedCardBrands = options.supportedCardBrands;
@@ -29,25 +32,28 @@ const useSecuredInput = () => {
       }
     };
     switch (fieldType) {
-      case FieldType.CVV: {
+      case EFieldType.CVV: {
         config = {
           maxLength: 4,
+          inputMode: "numeric",
           onInput: onInputCVV,
           validator: cvvValidator
         };
         break;
       }
-      case FieldType.CARD_NUMBER: {
+      case EFieldType.CARD_NUMBER: {
         config = {
           maxLength: 23,
+          inputMode: "numeric",
           onInput: onInputCardNumber,
           validator: cardNumberValidator
         };
         break;
       }
-      case FieldType.EXPIRE_DATE: {
+      case EFieldType.EXPIRE_DATE: {
         config = {
           maxLength: 5,
+          inputMode: "numeric",
           onInput: onInputExpireDate,
           validator: expireDateValidator
         };
@@ -62,6 +68,7 @@ const useSecuredInput = () => {
     value.current = currentTarget.value = val;
   };
   const onInputCardNumber = (event) => {
+    var _a;
     const { inputType } = event;
     const currentTarget = event.currentTarget;
     const selectionStart = currentTarget.selectionStart;
@@ -73,7 +80,9 @@ const useSecuredInput = () => {
     }
     value.current = currentTarget.value = val;
     currentTarget.setSelectionRange(pos, pos);
-    setCardBin(trimAll(currentTarget.value).substring(0, 6));
+    const newBin = trimAll(currentTarget.value).substring(0, 6);
+    setCardBin(newBin.length < 6 ? "" : newBin);
+    setBrand((_a = getCurrCardBrand(trimAll(currentTarget.value))) == null ? void 0 : _a.code);
   };
   const onInputExpireDate = (event) => {
     const { inputType } = event;
@@ -145,7 +154,7 @@ const useSecuredInput = () => {
     if (!brandLengths.includes(realValue.length)) {
       throw new Error("card.cardNumber.incomplete");
     }
-    const cardBrand = findCardBrand(realValue, brands);
+    const cardBrand = getCurrCardBrand(realValue);
     if (!cardBrand) {
       throw new Error("card.cardNumber.invalid");
     }
@@ -159,18 +168,35 @@ const useSecuredInput = () => {
       throw new Error("card.cardExpireDate.expired");
     }
   };
+  const getCurrCardBrand = (realValue) => {
+    return findCardBrand(realValue, brands);
+  };
+  const validate = () => {
+    if (fieldType === EFieldType.CARD_NUMBER) {
+      return cardNumberValidator();
+    } else if (fieldType === EFieldType.CVV) {
+      return cvvValidator();
+    } else if (fieldType === EFieldType.EXPIRE_DATE) {
+      return expireDateValidator();
+    }
+  };
   return {
     value,
     cardBin,
     initSecuredInput,
-    getConfigByFieldType
+    getConfigByFieldType,
+    getCurrCardBrand,
+    brand,
+    validate
   };
 };
+const inputClassNameMap = generateClassNameMap("input");
 const FieldIframe = (props) => {
   const hiddenIframe = window.parent.frames[props.hiddenIframeName];
   const inputRef = A(null);
-  const { initSecuredInput, getConfigByFieldType, cardBin, value } = useSecuredInput();
+  const { initSecuredInput, getConfigByFieldType, getCurrCardBrand, cardBin, value, brand } = useSecuredInput();
   const [hasInit, setHasInit] = h(false);
+  const inputId = "securedInput";
   const initInput = () => {
     initSecuredInput({
       fieldType: props.fieldType,
@@ -179,47 +205,128 @@ const FieldIframe = (props) => {
         postMessageToIframe(message, window.parent);
       }
     });
+    processInputStyleConfig(props.style);
+  };
+  const processInputStyleConfig = (style = {}) => {
+    const { base, hover, focus, valid, invalid, placeholder } = style;
+    const baseStyleStr = `input { ${style2String(base)} }`;
+    const hoverStyleStr = `input.${inputClassNameMap.hover} { ${style2String(hover)} }`;
+    const focusStyleStr = `input.${inputClassNameMap.focus} { ${style2String(focus)} }`;
+    const validStyleStr = `input.${inputClassNameMap.valid} { ${style2String(valid)} }`;
+    const invalidStyleStr = `input.${inputClassNameMap.invalid} { ${style2String(invalid)} }`;
+    const placeholderStyleStr = createPlaceholderStyle("input", placeholder == null ? void 0 : placeholder.base);
+    const placeholderFocusStyleStr = createPlaceholderStyle(
+      `input.${inputClassNameMap.focus}`,
+      placeholder == null ? void 0 : placeholder.focus
+    );
+    const styleStr = `
+      ${baseStyleStr}
+      ${hoverStyleStr}
+      ${focusStyleStr}
+      ${validStyleStr}
+      ${invalidStyleStr}
+      ${placeholderStyleStr}
+      ${placeholderFocusStyleStr}
+    `;
+    const styleId = "securedInputStyle";
+    if (!document.querySelector(`style#${styleId}`)) {
+      loadStyle(styleStr, { id: styleId });
+    }
   };
   y(() => {
+    initInput();
     const inputConfig = getConfigByFieldType();
     const inputEl = inputRef.current;
     inputEl.oninput = inputConfig.onInput;
     inputEl.maxLength = inputConfig.maxLength;
-    inputEl.onfocus = () => sendFocusMessage(true);
+    inputEl.inputMode = inputConfig.inputMode;
+    inputEl.onfocus = () => {
+      var _a;
+      (_a = inputEl == null ? void 0 : inputEl.classList) == null ? void 0 : _a.add(inputClassNameMap.focus);
+      sendFocusMessage(true);
+    };
     inputEl.onblur = () => {
-      sendFocusMessage(false);
+      var _a;
       try {
+        (_a = inputEl == null ? void 0 : inputEl.classList) == null ? void 0 : _a.remove(inputClassNameMap.focus);
         if (isNil(value.current) || value.current === "") {
-          sendValidStatusChanged("unValidate");
+          processValidStatusChanged("unValidate");
+          sendFocusMessage(false);
           return;
         }
         inputConfig.validator();
-        sendValidStatusChanged("success");
+        processValidStatusChanged("success");
       } catch (error) {
-        sendValidStatusChanged("error", error);
+        processValidStatusChanged("error", error);
       }
+      sendFocusMessage(false);
+    };
+    inputEl.onmouseenter = (e) => {
+      var _a;
+      const inputEl2 = e.target;
+      (_a = inputEl2 == null ? void 0 : inputEl2.classList) == null ? void 0 : _a.add(inputClassNameMap.hover);
+    };
+    inputEl.onmouseleave = (e) => {
+      var _a;
+      const inputEl2 = e.target;
+      (_a = inputEl2 == null ? void 0 : inputEl2.classList) == null ? void 0 : _a.remove(inputClassNameMap.hover);
     };
     setHasInit(true);
+    sendActivatedMessage();
+    window.addEventListener("message", onReceiveMessage);
   }, []);
-  initInput();
+  const onReceiveMessage = (event) => {
+    const { data } = event;
+    const parsedData = safeParse(data);
+    if (!Reflect.has(parsedData, "action")) {
+      return;
+    }
+    if (parsedData.action === MessageAction.VALIDATE) {
+      try {
+        const inputConfig = getConfigByFieldType();
+        inputConfig.validator();
+        processValidStatusChanged("success");
+        sendValidateMessage("success");
+      } catch (error) {
+        processValidStatusChanged("error", error);
+        sendValidateMessage("error");
+      }
+    }
+  };
   y(() => {
     if (!hasInit) {
       return;
     }
     sendBinValueMessage(cardBin);
   }, [cardBin]);
+  y(() => {
+    if (!hasInit) {
+      return;
+    }
+    sendBrandMessage(brand);
+  }, [brand]);
   y(() => {
     if (!hasInit) {
       return;
     }
     if (!value) {
-      sendValidStatusChanged("unValidate");
+      processValidStatusChanged("unValidate");
     }
   }, [value]);
   const sendBinValueMessage = (binValue) => {
+    var _a;
     const data = {
       action: MessageAction.BIN_VALUE,
       binValue,
+      fieldType: props.fieldType,
+      brand: (_a = getCurrCardBrand(binValue)) == null ? void 0 : _a.code
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendBrandMessage = (brand2) => {
+    const data = {
+      action: MessageAction.BRAND,
+      brand: brand2,
       fieldType: props.fieldType
     };
     postMessageToIframe(data, window.parent);
@@ -232,6 +339,19 @@ const FieldIframe = (props) => {
     };
     postMessageToIframe(data, window.parent);
   };
+  const processValidStatusChanged = (status, err) => {
+    const inputEl = inputRef.current;
+    if (status === "unValidate") {
+      inputEl.classList.remove(inputClassNameMap.valid, inputClassNameMap.invalid);
+    } else if (status === "success") {
+      inputEl.classList.add(inputClassNameMap.valid);
+      inputEl.classList.remove(inputClassNameMap.invalid);
+    } else {
+      inputEl.classList.add(inputClassNameMap.invalid);
+      inputEl.classList.remove(inputClassNameMap.valid);
+    }
+    sendValidStatusChanged(status, err);
+  };
   const sendValidStatusChanged = (status, err) => {
     const validData = {
       action: MessageAction.VALID_STATUS_CHANGED,
@@ -243,6 +363,9 @@ const FieldIframe = (props) => {
     if (status !== "success") {
       return;
     }
+    sendValidWithValueMessage();
+  };
+  const sendValidWithValueMessage = () => {
     const validWithValueData = {
       action: MessageAction.VALID_WITH_VALUE,
       value: value.current,
@@ -250,12 +373,27 @@ const FieldIframe = (props) => {
     };
     postMessageToIframe(validWithValueData, hiddenIframe, cdnOrigin);
   };
+  const sendActivatedMessage = () => {
+    const data = {
+      action: MessageAction.ACTIVATED,
+      fieldType: props.fieldType
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendValidateMessage = (status) => {
+    const data = {
+      action: MessageAction.VALIDATED,
+      fieldType: props.fieldType,
+      status
+    };
+    postMessageToIframe(data, window.parent);
+  };
   return /* @__PURE__ */ u(
     "input",
     {
+      id: inputId,
       ref: inputRef,
       placeholder: props.placeholder,
-      style: props.style,
       autocomplete: "off",
       disabled: !hasInit
     }
@@ -268,7 +406,7 @@ const HiddenIframe = () => {
     cardNo: "",
     cvv: ""
   };
-  const onReceiveMessage = (event) => {
+  const onReceiveMessage = async (event) => {
     const { data } = event;
     const parsedData = safeParse(data);
     if (!Reflect.has(parsedData, "action")) {
@@ -277,15 +415,15 @@ const HiddenIframe = () => {
     if (parsedData.action === MessageAction.VALID_WITH_VALUE) {
       const feedbackData = parsedData;
       switch (feedbackData.fieldType) {
-        case FieldType.CVV: {
+        case EFieldType.CVV: {
           formData.cvv = feedbackData.value;
           break;
         }
-        case FieldType.CARD_NUMBER: {
+        case EFieldType.CARD_NUMBER: {
           formData.cardNo = trimAll(feedbackData.value);
           break;
         }
-        case FieldType.EXPIRE_DATE: {
+        case EFieldType.EXPIRE_DATE: {
           const [expMonth, expYear] = feedbackData.value.split("/");
           formData.expMonth = expMonth;
           formData.expYear = `20${expYear}`;
@@ -295,6 +433,15 @@ const HiddenIframe = () => {
     } else if (parsedData.action === MessageAction.PAYMENT) {
       const feedbackData = parsedData;
       pay(feedbackData.formData, feedbackData.locale);
+    } else if (parsedData.action === MessageAction.ENCRYPT_CARD) {
+      const feedbackData = parsedData;
+      try {
+        const res = await encryptCard({ ...feedbackData, ...formData });
+        sendCardEncryptedMessage(res);
+      } catch (error) {
+        console.log("error", error);
+        sendCardEncryptionFailedMessage(error);
+      }
     }
   };
   window.addEventListener("message", onReceiveMessage);
@@ -339,6 +486,29 @@ const HiddenIframe = () => {
     };
     postMessageToIframe(data, window.parent);
   };
+  const sendHiddenIframeReadyMessage = () => {
+    const data = {
+      action: MessageAction.HIDDEN_IFRAME_READY
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendCardEncryptedMessage = (encryptedInfo) => {
+    const data = {
+      action: MessageAction.CARD_ENCRYPTED,
+      encryptedInfo
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendCardEncryptionFailedMessage = (error) => {
+    const data = {
+      action: MessageAction.CARD_ENCRYPTION_FAILED,
+      error
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  y(() => {
+    sendHiddenIframeReadyMessage();
+  }, []);
   return /* @__PURE__ */ u(b, {});
 };
 const SecuredIframe = () => {

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

@@ -2,7 +2,7 @@ import { w, A, h, F, y, q, u } from "../../core.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { CoreContext } from "../../core/context.js";
-import { isEmptyObject, isUndefined } from "../../utils/is.js";
+import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { cssVarPrefix, normalizedClass, formatAmount, trimAll } from "../../utils/format.js";
@@ -10,13 +10,13 @@ import { isTimeoutError } from "../../api/http.js";
 import { COMMON_CLASS_NAME } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getSepaPayInfo, sepaPay } from "../../api/modules/sepa/index.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 { AddressField } from "../AddressField/index.js";
 import { EmailField, createEmailCore } from "../EmailField/EmailField.js";
 import { SubmitButton } from "../SubmitButton/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 import { Form } from "../internal/Form/Form.js";
@@ -27,10 +27,10 @@ const { bem } = useBEM("sepa");
 const fieldClassNames = bem("field");
 const Sepa = w((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
-  const { sessionId, clientKey } = props;
+  const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { i18n, session, sessionReady } = usePayState(props);
+  const { i18n, sessionReady } = usePayState(session);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const formRef = A(null);
@@ -76,25 +76,18 @@ const Sepa = w((props, ref) => {
     }
   }));
   y(() => {
-    if (session) {
-      session.ready().then(() => {
-        var _a2;
-        if (isEmptyObject(session.checkout)) {
-          (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
-          return;
-        }
-        setIsCheckoutEnabled(true);
-        const { bill, status } = session.checkout;
-        form.email = bill.email ?? "";
-        disabledEmail.current = !!bill.email;
-        setRequiredBill(bill.billingAddressCollection === "REQUIRED");
-        if (status === "SUCCESS") {
-          setSubmitButtonStatus("success");
-          processOnSuccess();
-        }
-      });
-    }
-  }, [session]);
+    session.ready().then(() => {
+      setIsCheckoutEnabled(true);
+      const { bill, status } = session.checkout;
+      form.email = bill.email ?? "";
+      disabledEmail.current = !!bill.email;
+      setRequiredBill(bill.billingAddressCollection === "REQUIRED");
+      if (status === "SUCCESS") {
+        setSubmitButtonStatus("success");
+        processOnSuccess();
+      }
+    });
+  }, []);
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
@@ -160,8 +153,8 @@ const Sepa = w((props, ref) => {
   });
   const getPaymentParams = async () => {
     return {
-      sessionId,
-      clientKey,
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
       payment: {
         holderName: form.holderName,
         iban: trimAll(form.iban)
@@ -182,7 +175,10 @@ const Sepa = w((props, ref) => {
     try {
       const paymentParams = await getPaymentParams();
       const options = { locale: i18n.locale, timeout };
-      const res = search ? await getSepaPayInfo({ sessionId, clientKey }, options) : await sepaPay(paymentParams, options);
+      const res = search ? await getSepaPayInfo(
+        { sessionId: session.sessionId, clientKey: session.clientKey },
+        options
+      ) : await sepaPay(paymentParams, options);
       return processAfterPayment(res, search);
     } catch (error) {
       if (isTimeoutError(error)) {
@@ -193,8 +189,9 @@ const Sepa = w((props, ref) => {
           return { end: true };
         }
       } else {
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        setErrorMsg(message);
+        (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
@@ -202,7 +199,7 @@ const Sepa = w((props, ref) => {
   }
   const processAfterPayment = (res, search = false) => {
     var _a2, _b2, _c2;
-    const { status, orderStatus, errorMessage } = res;
+    const { status, orderStatus, errorMessage, errorCode } = res;
     if (status === "PROCESSING") {
       if (!orderStatus) {
         setSubmitButtonStatus("unSubmit");
@@ -219,7 +216,7 @@ const Sepa = w((props, ref) => {
       } else if (orderStatus === "FAILURE") {
         setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
-        (_a2 = props.onError) == null ? void 0 : _a2.call(props, "FAILURE");
+        (_a2 = props.onError) == null ? void 0 : _a2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
       } else if (orderStatus === "AUTHORIZED") {
         setSubmitButtonStatus("unSubmit");
         (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props);
@@ -250,7 +247,14 @@ const Sepa = w((props, ref) => {
         session
       },
       children: sessionReady && isCheckoutEnabled && 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("div", { className: fieldClassNames, children: /* @__PURE__ */ u(EmailField, { ref: emailFieldRef, value: form.email, disabled: !!disabledEmail.current }) }),
+        /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+          EmailField,
+          {
+            ref: emailFieldRef,
+            value: form.email,
+            disabled: !!disabledEmail.current
+          }
+        ) }),
         /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u("div", { className: bem("iban-wrapper"), children: /* @__PURE__ */ u(IBANField, {}) }) }),
         /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(AccountNameField, {}) }),
         requiredBill && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(

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

@@ -4,8 +4,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";
 import enGB from "../../i18n/locales/en-GB.js";
 import { Button } from "../internal/Button/Button.js";
 import { IconSafe } from "../internal/icons/IconSafe.js";

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

@@ -0,0 +1,94 @@
+import { h, A, T, y, u } from "../../core.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import "../../core/context.js";
+import { Modal } from "../internal/Modal/Modal.js";
+import "../internal/Button/button2.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import { MessageAction } from "../../types/message.js";
+import { cdnOrigin } from "../../config.js";
+import { safeParse } from "../../utils/index.js";
+import { useBreakpoints } from "../../hooks/useBreakpoints.js";
+import { Icon3DSInfo } from "../internal/icons/Icon3DSInfo.js";
+import { Button } from "../internal/Button/Button.js";
+const { bem } = useBEM("three-ds-auth");
+const ThreeDSAuth = (props) => {
+  const { show = false, onClose, url, incomplete = true, width, height = "72vh", theme } = props;
+  const breakpoints = useBreakpoints();
+  const [continueThreeDs, setContinueThreeDs] = h(false);
+  const messageHandler = A();
+  const iframeRef = A(null);
+  const { i18n } = useI18n();
+  const handleLastThreeDs = () => {
+    setContinueThreeDs(true);
+  };
+  const onChange = (status) => {
+    !status && (onClose == null ? void 0 : onClose());
+  };
+  const modalWidth = T(() => {
+    if (!show) {
+      return "0";
+    }
+    return width || (breakpoints.smaller("sm") ? "90vw" : "600px");
+  }, [show, width, breakpoints.matches]);
+  y(() => {
+    if (show) {
+      if (messageHandler.current) {
+        window.removeEventListener("message", messageHandler.current);
+      }
+      messageHandler.current = (event) => {
+        const { data, origin } = event;
+        if (origin !== cdnOrigin) {
+          return;
+        }
+        const feedbackData = safeParse(data);
+        switch (feedbackData.action) {
+          case MessageAction.CHECK_THREE_DS: {
+            onChange(false);
+            break;
+          }
+        }
+      };
+      window.addEventListener("message", messageHandler.current);
+    } else {
+      messageHandler.current && window.removeEventListener("message", messageHandler.current);
+    }
+  }, [show]);
+  return /* @__PURE__ */ u(
+    Modal,
+    {
+      show,
+      onChange,
+      width: modalWidth,
+      height,
+      style: {
+        maxWidth: "100vw",
+        maxHeight: "100vh",
+        minHeight: "500px",
+        minWidth: "350px"
+      },
+      children: /* @__PURE__ */ u("div", { className: bem("content"), children: !incomplete || continueThreeDs ? /* @__PURE__ */ u("iframe", { ref: iframeRef, width: "100%", height: "100%", frameBorder: 0, src: url }) : /* @__PURE__ */ u("div", { className: bem("last-three-ds"), children: [
+        /* @__PURE__ */ u(Icon3DSInfo, { size: 60 }),
+        /* @__PURE__ */ u("div", { className: bem("last-three-ds-title"), children: [
+          /* @__PURE__ */ u("div", { children: i18n.get("threeDS.paymentIncomplete") }),
+          /* @__PURE__ */ u("div", { children: i18n.get("threeDS.completeFirst") })
+        ] }),
+        /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u(
+          Button,
+          {
+            style: {
+              backgroundColor: theme == null ? void 0 : theme.payButtonBackgroundColor,
+              color: theme == null ? void 0 : theme.payButtonTextColor
+            },
+            onClick: handleLastThreeDs,
+            children: i18n.get("common.confirm")
+          }
+        ) })
+      ] }) })
+    }
+  );
+};
+export {
+  ThreeDSAuth
+};