@paykka/card-checkout-ui 0.6.0 → 0.8.0

package/dist/types/types/index.d.ts

@@ -1,30 +1,78 @@
 import type { HTMLAttributes } from 'preact/compat';
 import type { LocaleKeyType } from '../i18n';
+import type { PayKKaCheckout, PayKKaError, Session } from '../core';
 import type { FraudDetectionEnv } from './fraud-detection';
+import type { FormValidateError } from '../components/internal/Form';
 export * from './fraud-detection';
+export * from './message';
 export type CustomAttributes<T extends EventTarget, K extends keyof HTMLAttributes<T> = 'style' | 'className'> = Pick<HTMLAttributes<T>, K>;
 /** 收银台初始化参数 */
 export interface PayKKaInitConfiguration {
     sessionId: string;
+    /** 环境配置，必传！ */
+    env: PayKKaEnvType;
     /** 嵌入式收银台必传，需要商户进行配置 */
     clientKey?: string;
     /** 国际化语言 */
     locale?: LocaleKeyType;
     /** 是否隐藏支付按钮 */
     hidePaymentButton?: boolean;
-    /** 欺诈检测环境配置 */
-    fraudDetectionEnv?: FraudDetectionEnv;
+    /** 定义 3DS 所需配置 */
+    threeDSFrame?: ThreeDSFrameConfig;
     /** 收银台已经获取到可用支付方式时调用 */
     onPaymentMethodsReady?: (methods: string[]) => void;
-    /** 收银台过期时触发，可被组件参数中的 onExpired 回调覆盖 */
     /** 收银台创建时报错触发 */
-    onInitError?: (error: any) => void;
+    onInitError?: (error: PayKKaError) => void;
     /**
-     * sandbox 模式下所需参数
+     * 全局回调，可以统一处理支付状态
+     * 创建组件时传同名回调可覆盖
      */
-    /** 是否采用 sandbox 环境，用于进行测试 */
-    sandbox?: boolean;
+    /** 提交表单时触发 */
+    onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
+    /** 支付成功后触发 */
+    onSuccess?: (data: PaymentSuccessData) => void;
+    /** 支付失败时触发 */
+    onError?: (error: PayKKaError) => void;
+    /** 支付超时时触发 */
+    onTimeout?: () => void;
+    /** 收银台已过期时触发 */
+    onExpired?: () => void;
+    /**
+     * 内部参数
+     */
+    /** 环境配置，优先级大于 env 参数 */
+    _envConfig?: PayKKaEnvConfig;
+}
+/** 收银台创建组件时自动传入的内部属性 */
+export type CoreProps = {
+    session: Session;
+    /** 收银台实例 */
+    core: PayKKaCheckout;
+    /** 定义 3DS 所需配置 */
+    threeDSFrame?: ThreeDSFrameConfig;
+    /** 组件是否通过 DropIn 创建 */
+    isDropIn?: boolean;
+};
+export interface ThreeDSFrameConfig {
+    /** 3DS 页面宽度 */
+    modalWidth?: number | string;
+    /** 3DS 页面高度 */
+    modalHeight?: number | string;
 }
+export declare enum EPayKKaEnv {
+    /** 沙箱环境 */
+    SANDBOX = "sandbox",
+    /** 欧洲生产环境 */
+    EU = "eu",
+    /** 香港生产环境 */
+    HK = "hk"
+}
+export interface PayKKaEnvConfig {
+    api?: string;
+    cdn?: string;
+    fraudDetection?: FraudDetectionEnv;
+}
+export type PayKKaEnvType = `${EPayKKaEnv}`;
 export type PaymentSuccessData = {
     returnUrl?: string;
 };
@@ -36,7 +84,7 @@ export declare enum CardBrandCode {
     DISCOVER = "DISCOVER",
     DINERS_CLUB = "DINERS_CLUB"
 }
-export type CardBrand = keyof typeof CardBrandCode;
+export type CardBrand = `${CardBrandCode}`;
 export interface ElementStylesConfig {
     /** input 元素的样式 */
     input?: InputStylesConfig;
@@ -45,6 +93,9 @@ export interface ElementStylesConfig {
     /** 错误提示文案的样式 */
     errorMessage?: Partial<CSSStyleDeclaration>;
 }
+export interface FullElementStylesConfig extends ElementStylesConfig {
+    inputWrapper?: StylesConfig;
+}
 export interface StylesConfig {
     /** 默认样式 */
     base?: Partial<CSSStyleDeclaration>;

package/dist/types/types/message.d.ts

@@ -0,0 +1,170 @@
+import type { CardBrand, InputStylesConfig } from '.';
+import type { PayRes } from '../api';
+import type { EncryptCardRes } from '../api/modules/encrypted-card/type';
+import type { EFieldType, FieldIframeConfig } from '../components/SecuredFieldsProvider';
+import type { FormValidationStatus } from '../components/internal/Form';
+import type { LocaleKeyType } from '../i18n';
+export declare enum MessageAction {
+    /** 通知 iframe 初始化 input */
+    INIT = "init",
+    /** 表单 iframe DOM 已加载 */
+    ACTIVATED = "Activated",
+    /** 隐藏的 iframe 已经加载 */
+    HIDDEN_IFRAME_READY = "hiddenIframeReady",
+    /** 是否聚焦 */
+    FOCUS = "focus",
+    /** 卡 bin 信息改变 */
+    BIN_VALUE = "binValue",
+    /** 检测到卡品牌 */
+    BRAND = "brand",
+    /** 传递验证通过信息(附带值) */
+    VALID_WITH_VALUE = "validWithValue",
+    /** 通知隐藏 iframe 进行支付 */
+    PAYMENT = "payment",
+    /** 通知表单组件支付响应信息 */
+    AFTER_PAYMENT = "afterPayment",
+    /** 通知表单组件支付错误信息 */
+    PAYMENT_ERROR = "paymentError",
+    /** 通知表单组件支付超时 */
+    PAYMENT_TIMEOUT = "paymentTimeout",
+    /** 通知表单项验证信息 */
+    VALID_STATUS_CHANGED = "validStatusChanged",
+    /** 通知表单项校验 */
+    VALIDATE = "validate",
+    /** 通知表单项校验结果 */
+    VALIDATED = "validated",
+    /** 通知表单项配置 */
+    SET_CONFIG = "setConfig",
+    /**
+     * encrypted card
+     */
+    /** 通知 clientKey 已校验 */
+    AUTHORIZED = "authorized",
+    /** 通知隐藏 iframe 加密卡信息 */
+    ENCRYPT_CARD = "encryptCard",
+    /** 通知加密后的卡信息 */
+    CARD_ENCRYPTED = "cardEncrypted",
+    /** 通知卡信息加密错误 */
+    CARD_ENCRYPTION_FAILED = "cardEncryptionFailed",
+    /**
+     * 3DS
+     */
+    /** 通知组件查询 3DS 结果 */
+    CHECK_THREE_DS = "checkThreeDS",
+    /** 通知组件 3DS 结果页加载 */
+    THREE_DS_STATUS_INIT = "threeDSStatusInit",
+    /** 向 3DS 状态页传递配置 */
+    THREE_DS_STATUS_CONFIG = "threeDSStatusConfig"
+}
+export type Message<T extends MessageAction> = {
+    action: T;
+} & MessageMapping[T];
+type MessageMapping = {
+    [MessageAction.INIT]: InitMessage;
+    [MessageAction.FOCUS]: FocusMessage;
+    [MessageAction.BIN_VALUE]: BinValueMessage;
+    [MessageAction.VALID_WITH_VALUE]: ValidWithValueMessage;
+    [MessageAction.PAYMENT]: PaymentMessage;
+    [MessageAction.AFTER_PAYMENT]: AfterPaymentMessage;
+    [MessageAction.PAYMENT_ERROR]: PaymentErrorMessage;
+    [MessageAction.PAYMENT_TIMEOUT]: PaymentTimeoutMessage;
+    [MessageAction.VALID_STATUS_CHANGED]: ValidStatusChangedMessage;
+    [MessageAction.ENCRYPT_CARD]: EncryptCardMessage;
+    [MessageAction.CARD_ENCRYPTED]: CardEncryptedMessage;
+    [MessageAction.CARD_ENCRYPTION_FAILED]: CardEncryptionFailedMessage;
+    [MessageAction.AUTHORIZED]: AuthorizedMessage;
+    [MessageAction.BRAND]: BrandMessage;
+    [MessageAction.ACTIVATED]: ActivatedMessage;
+    [MessageAction.HIDDEN_IFRAME_READY]: {};
+    [MessageAction.VALIDATE]: {};
+    [MessageAction.VALIDATED]: ValidatedMessage;
+    [MessageAction.SET_CONFIG]: SetConfigMessage;
+    [MessageAction.CHECK_THREE_DS]: CheckThreeDSMessage;
+    [MessageAction.THREE_DS_STATUS_INIT]: {};
+    [MessageAction.THREE_DS_STATUS_CONFIG]: ThreeDSStatusConfigMessage;
+};
+export interface InitMessage {
+    config?: FieldIframeConfig;
+    /** 是否隐藏，如不隐藏则为表单iframe */
+    hidden: boolean;
+    apiUrl?: string;
+    cdnUrl?: string;
+}
+export interface FocusMessage {
+    focus: boolean;
+    fieldType: EFieldType;
+}
+export interface InvalidMessage {
+    errorTip: string;
+    fieldType: EFieldType;
+}
+export interface ValidMessage {
+    fieldType: EFieldType;
+}
+export interface BinValueMessage {
+    binValue: string;
+    fieldType: EFieldType;
+    brand?: CardBrand;
+}
+export interface ValidWithValueMessage {
+    value: string;
+    fieldType: EFieldType;
+}
+export interface PaymentMessage {
+    formData: any;
+    locale: string;
+}
+export interface AfterPaymentMessage {
+    response: PayRes;
+}
+export interface PaymentErrorMessage {
+    error: {
+        message: string;
+        code: string;
+    };
+}
+export interface ValidStatusChangedMessage {
+    status: FormValidationStatus;
+    errorTip?: string;
+    fieldType: EFieldType;
+}
+export interface PaymentTimeoutMessage {
+    message?: string;
+}
+export interface CardEncryptedMessage {
+    encryptedInfo: EncryptCardRes;
+}
+export interface CardEncryptionFailedMessage {
+    error: {
+        message: string;
+        code: string;
+    };
+}
+export interface AuthorizedMessage {
+    success: boolean;
+}
+export interface BrandMessage {
+    brand?: CardBrand;
+    fieldType: EFieldType;
+}
+export interface EncryptCardMessage {
+    merchantId: string;
+    clientKey: string;
+}
+export interface ActivatedMessage {
+    fieldType: EFieldType;
+}
+export interface ValidatedMessage {
+    status: FormValidationStatus;
+    fieldType: EFieldType;
+}
+export interface SetConfigMessage {
+    style?: InputStylesConfig;
+}
+export interface CheckThreeDSMessage {
+    status: string;
+}
+export interface ThreeDSStatusConfigMessage {
+    locale?: LocaleKeyType;
+}
+export {};

package/dist/types/utils/card-brand/brands.d.ts

@@ -9,13 +9,6 @@ export interface CardBrandConfig {
     order: number;
 }
 export declare const cardBrands: CardBrandConfig[];
-export declare const cardBrandIconMap: {
-    VISA: typeof IconVisa;
-    MASTER_CARD: typeof IconMasterCard;
-    JCB: typeof IconJcb;
-    AMEX: typeof IconAmex;
-    DISCOVER: typeof IconDiscover;
-    DINERS_CLUB: typeof IconDinnersClub;
-};
+export declare const getCardBrandIconMap: (code: CardBrandCode) => typeof IconVisa | typeof IconMasterCard | typeof IconJcb | typeof IconAmex | typeof IconDiscover | typeof IconDinnersClub;
 export type CardBrands = (typeof cardBrands)[number]['code'];
 export declare const cardBrandsLengthList: number[];

package/dist/types/utils/card-brand/index.d.ts

@@ -1,5 +1,5 @@
-import { cardBrands, cardBrandsLengthList, cardBrandCodes, cardBrandIconMap, type CardBrandConfig } from './brands';
-export { cardBrands, cardBrandsLengthList, cardBrandCodes, cardBrandIconMap };
+import { cardBrands, cardBrandsLengthList, cardBrandCodes, type CardBrandConfig } from './brands';
+export { cardBrands, cardBrandsLengthList, cardBrandCodes };
 export declare function getSupportedCardBrands(supportedCardBrands?: string[]): CardBrandConfig[];
 export declare function findCardBrand(number: string, brands?: CardBrandConfig[]): CardBrandConfig | undefined;
 export declare function findCardBrandInfo(number: string, brands?: CardBrandConfig[]): {

package/dist/types/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './format';
 export * from './is';
 export * from './obj';
 export * from './style';
+export * from './iframe';
 export declare function getIf<T>(value: T, condition: boolean): T | undefined;
 /**
  * 将一个数值限制在指定的范围内

package/dist/types/utils/style.d.ts

@@ -1,3 +1,4 @@
+import { type ElementStylesConfig, type FullElementStylesConfig } from '../types';
 /**
  * 将对象转换为 CSS 样式字符串
  * @param style 样式对象
@@ -15,3 +16,14 @@ export declare const generateClassNameMap: (selector?: string) => {
 export declare const loadStyle: (styleStr: string, extraOptions?: Partial<HTMLScriptElement>) => void;
 /** 创建 placeholder 样式 */
 export declare const createPlaceholderStyle: (selector: string, style?: Recordable) => string;
+/** 将可以直接应用到 iframe 中的 input 样式剥离出来 */
+export declare const separateInputStyle: (styles: ElementStylesConfig) => FullElementStylesConfig;
+/**
+ * 生成组件样式字符串
+ * @param style 样式对象
+ * @param selector 选择器，可以是父元素也可以是当前元素
+ */
+export declare const genComponentStyle: (list?: Array<{
+    selector: string;
+    style?: Recordable;
+}>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paykka/card-checkout-ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/paykka-card-checkout-ui.umd.js",
   "module": "dist/es/index.js",
@@ -23,7 +23,7 @@
     "build:inner": "tsx ./build/runInner.ts",
     "build:outer": "tsx ./build/runOuter.ts",
     "build:type": "tsc -p ./tsconfig.build.json",
-    "copy-dist-to-cdn": "tsx ./copyDist2CDN.ts",
+    "copy-dist-to-cdn": "tsx ./build/copyDist2CDN.ts",
     "changeset": "changeset",
     "changeset:pre": "changeset pre enter beta",
     "changeset:pre-exit": "changeset pre exit",

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

@@ -1,75 +0,0 @@
-import { w, A, F, h, u, b } 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/SecuredFieldsProvider.js";
-import { getSupportedCardBrands, finCardBrandInfoByCode, findCardBrandInfo } 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";
-const CombinedEncryptedField = w((props, ref) => {
-  const { supportedCardBrands = [], className } = props;
-  const inputRef = A(null);
-  const formItemRef = A(null);
-  F(ref, () => ({
-    input: inputRef.current,
-    focus: () => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    },
-    blur: () => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.blur();
-    },
-    resetValidation: (status, errorTip) => {
-      var _a;
-      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
-    },
-    binValueChanged: (binValue2) => {
-      setBinValue(binValue2);
-    },
-    brandChanged: (brand) => {
-      if (brand) {
-        const brandInfo = finCardBrandInfoByCode(brand);
-        setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
-      } else {
-        setBrandIcon(void 0);
-      }
-    },
-    getCardBrand: () => findCardBrandInfo(trimAll(binValue), brands) || {}
-  }));
-  const [binValue, setBinValue] = h("");
-  const brands = getSupportedCardBrands(supportedCardBrands);
-  const [brandIcon, setBrandIcon] = h(void 0);
-  const LeftIcon = () => {
-    const Icon = brandIcon ?? IconCardNo;
-    return /* @__PURE__ */ u(Icon, { size: 32 });
-  };
-  return /* @__PURE__ */ u(
-    FormItem,
-    {
-      showLabel: false,
-      ref: formItemRef,
-      className,
-      children: /* @__PURE__ */ u(
-        Input,
-        {
-          ref: inputRef,
-          leftIcon: LeftIcon(),
-          rightIcon: /* @__PURE__ */ u(b, {}),
-          children: /* @__PURE__ */ u("div", { style: "width:100%;height:100%;display:flex", children: [
-            /* @__PURE__ */ u("div", { style: "flex:1", "data-sf": EFieldType.CARD_NUMBER }),
-            /* @__PURE__ */ u("div", { style: "width:100px", "data-sf": EFieldType.EXPIRE_DATE }),
-            /* @__PURE__ */ u("div", { style: "width:60px", "data-sf": EFieldType.CVV })
-          ] })
-        }
-      )
-    }
-  );
-});
-export {
-  CombinedEncryptedField
-};

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

@@ -1,268 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { w, A, F, y, q, u } from "../../core.js";
-import { SessionMode } from "../../constant.js";
-import { cdnUrl, cdnOrigin, apiUrl } from "../../config.js";
-import { safeParse } from "../../utils/index.js";
-var EFieldType = /* @__PURE__ */ ((EFieldType2) => {
-  EFieldType2["CARD_NUMBER"] = "CARD_NUMBER";
-  EFieldType2["CVV"] = "CVV";
-  EFieldType2["EXPIRE_DATE"] = "EXPIRE_DATE";
-  return EFieldType2;
-})(EFieldType || {});
-var MessageAction = /* @__PURE__ */ ((MessageAction2) => {
-  MessageAction2["INIT"] = "init";
-  MessageAction2["ACTIVATED"] = "Activated";
-  MessageAction2["HIDDEN_IFRAME_READY"] = "hiddenIframeReady";
-  MessageAction2["FOCUS"] = "focus";
-  MessageAction2["BIN_VALUE"] = "binValue";
-  MessageAction2["BRAND"] = "brand";
-  MessageAction2["VALID_WITH_VALUE"] = "validWithValue";
-  MessageAction2["PAYMENT"] = "payment";
-  MessageAction2["AFTER_PAYMENT"] = "afterPayment";
-  MessageAction2["PAYMENT_ERROR"] = "paymentError";
-  MessageAction2["PAYMENT_TIMEOUT"] = "paymentTimeout";
-  MessageAction2["VALID_STATUS_CHANGED"] = "validStatusChanged";
-  MessageAction2["VALIDATE"] = "validate";
-  MessageAction2["VALIDATED"] = "validated";
-  MessageAction2["SET_CONFIG"] = "setConfig";
-  MessageAction2["AUTHORIZED"] = "authorized";
-  MessageAction2["ENCRYPT_CARD"] = "encryptCard";
-  MessageAction2["CARD_ENCRYPTED"] = "cardEncrypted";
-  MessageAction2["CARD_ENCRYPTION_FAILED"] = "cardEncryptionFailed";
-  return MessageAction2;
-})(MessageAction || {});
-const SECURED_FILED_ATTR = "data-sf";
-const SECURED_IFRAME_CLASS_NAME = "secured-iframe";
-const HIDDEN_IFRAME_NAME = "hidden-pay-iframe";
-const getFieldElements = (rootNode) => {
-  return rootNode ? Array.prototype.slice.call(rootNode.querySelectorAll(`[${SECURED_FILED_ATTR}]`)) : [];
-};
-const createIframe = (src) => {
-  const iframeEl = document.createElement("iframe");
-  iframeEl.setAttribute("src", src);
-  iframeEl.classList.add(SECURED_IFRAME_CLASS_NAME);
-  iframeEl.setAttribute("allowtransparency", "true");
-  iframeEl.setAttribute("referrerpolicy", "origin");
-  Object.defineProperty(iframeEl, "src", { configurable: false, writable: false });
-  const noIframeElContent = document.createTextNode("<p>Your browser does not support iframes.</p>");
-  iframeEl.appendChild(noIframeElContent);
-  return iframeEl;
-};
-const postMessageToIframe = (data, iframe, targetOrigin = "*") => {
-  if (!iframe) {
-    return;
-  }
-  const dataStr = JSON.stringify(data);
-  iframe.postMessage(dataStr, { targetOrigin });
-};
-class SecuredField {
-  constructor(config) {
-    __publicField(this, "iframe");
-    __publicField(this, "iframeWindow");
-    __publicField(this, "hiddenIframe");
-    __publicField(this, "config");
-    this.config = config;
-    this.init();
-  }
-  /** 初始化表单区域iframe */
-  init() {
-    const { iframeSrc, iframeClassName, fieldNode } = this.config;
-    const iframeEl = createIframe(iframeSrc);
-    iframeEl.width = "100%";
-    iframeEl.height = "100%";
-    iframeEl.style.border = "none";
-    fieldNode.appendChild(iframeEl);
-    const iframe = fieldNode.querySelector(`.${iframeClassName}`);
-    if (!iframe) {
-      return;
-    }
-    this.iframe = iframe;
-    iframe.addEventListener("load", () => this.onFieldIframeLoad());
-  }
-  /** 表单区域iframe加载回调 */
-  onFieldIframeLoad() {
-    this.iframeWindow = this.iframe.contentWindow;
-    const { fieldType, placeholder, style, hiddenIframeName, supportedCardBrands } = this.config;
-    const data = {
-      action: MessageAction.INIT,
-      config: {
-        fieldType,
-        placeholder,
-        style,
-        hiddenIframeName,
-        supportedCardBrands
-      },
-      hidden: false,
-      cdnUrl
-    };
-    postMessageToIframe(data, this.iframeWindow, cdnOrigin);
-  }
-}
-const SecuredFieldsProvider = w((props, ref) => {
-  const { sessionMode, i18n, targetElement } = props;
-  const rootNodeRef = A(null);
-  const hiddenIframe = A(null);
-  const payment = (formData) => {
-    const data = {
-      action: MessageAction.PAYMENT,
-      formData,
-      locale: props.i18n.locale
-    };
-    postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);
-  };
-  F(ref, () => ({
-    payment,
-    reload: () => {
-      if (sessionMode !== SessionMode.EMBEDDED) {
-        return;
-      }
-      window.removeEventListener("message", onReceiveMessage);
-      if (hiddenIframe.current) {
-        document.body.removeChild(hiddenIframe.current);
-      }
-      init();
-    },
-    encryptCard: (encryptedInfo) => {
-      const data = {
-        action: MessageAction.ENCRYPT_CARD,
-        ...encryptedInfo
-      };
-      postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);
-    },
-    validate: () => {
-      Object.values(securedFieldMap.current).forEach((field) => {
-        const data = {
-          action: MessageAction.VALIDATE
-        };
-        postMessageToIframe(data, field.iframe.contentWindow, cdnOrigin);
-      });
-    },
-    setConfig: (config) => {
-      props.style = config.style;
-    }
-  }));
-  if (!frames && sessionMode !== SessionMode.EMBEDDED) {
-    return props.children;
-  }
-  let fieldNodes = [];
-  const securedFieldMap = A({});
-  const securedFieldPlaceholderMap = {
-    [EFieldType.CARD_NUMBER]: i18n.get("card.cardNumber.placeholder"),
-    [EFieldType.CVV]: i18n.get("card.cardSecurityCode.placeholder"),
-    [EFieldType.EXPIRE_DATE]: i18n.get("card.cardExpireDate.placeholder")
-  };
-  y(() => {
-    init();
-  }, []);
-  const init = async () => {
-    fieldNodes = getFieldElements(targetElement || rootNodeRef.current);
-    if (!fieldNodes.length) {
-      return;
-    }
-    await initHiddenIframe();
-    initAllFieldIframe();
-    window.addEventListener("message", onReceiveMessage);
-  };
-  const initHiddenIframe = async () => {
-    const iframeEl = createIframe(`${cdnUrl}/secured-iframe.html`);
-    iframeEl.name = `${HIDDEN_IFRAME_NAME}-${Date.now()}`;
-    iframeEl.width = "0";
-    iframeEl.height = "0";
-    iframeEl.style.border = "none";
-    hiddenIframe.current = iframeEl;
-    const data = {
-      action: MessageAction.INIT,
-      hidden: true,
-      apiUrl,
-      cdnUrl
-    };
-    iframeEl.addEventListener("load", () => {
-      postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);
-    });
-    window.document.body.appendChild(iframeEl);
-  };
-  const initAllFieldIframe = () => {
-    fieldNodes.forEach((fieldNode) => {
-      const fieldType = fieldNode.getAttribute(SECURED_FILED_ATTR);
-      securedFieldMap.current[fieldType] = new SecuredField({
-        fieldNode,
-        hiddenIframe: hiddenIframe.current,
-        hiddenIframeName: hiddenIframe.current.name,
-        rootNode: rootNodeRef.current,
-        iframeSrc: `${cdnUrl}/secured-iframe.html`,
-        iframeClassName: SECURED_IFRAME_CLASS_NAME,
-        fieldType,
-        placeholder: securedFieldPlaceholderMap[fieldType],
-        style: props.style,
-        supportedCardBrands: props.supportedCardBrands,
-        onFocus: props.onFocus,
-        onBinValue: props.onBinValue,
-        onAfterPayment: props.onAfterPayment,
-        onPaymentError: props.onPaymentError,
-        onPaymentTimeout: props.onPaymentTimeout,
-        onValidStatusChanged: props.onValidStatusChanged
-      });
-    });
-  };
-  const onReceiveMessage = q((event) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-    const { data, origin } = event;
-    if (origin !== cdnOrigin) {
-      return;
-    }
-    const feedbackData = safeParse(data);
-    if (!Reflect.has(feedbackData, "action")) {
-      return;
-    }
-    switch (feedbackData.action) {
-      case MessageAction.FOCUS:
-        (_a = props.onFocus) == null ? void 0 : _a.call(props, feedbackData);
-        break;
-      case MessageAction.BIN_VALUE:
-        (_b = props.onBinValue) == null ? void 0 : _b.call(props, feedbackData);
-        break;
-      case MessageAction.BRAND:
-        (_c = props.onBrand) == null ? void 0 : _c.call(props, feedbackData);
-        break;
-      case MessageAction.AFTER_PAYMENT:
-        (_d = props.onAfterPayment) == null ? void 0 : _d.call(props, feedbackData);
-        break;
-      case MessageAction.PAYMENT_ERROR:
-        (_e = props.onPaymentError) == null ? void 0 : _e.call(props, feedbackData);
-        break;
-      case MessageAction.PAYMENT_TIMEOUT:
-        (_f = props.onPaymentTimeout) == null ? void 0 : _f.call(props, feedbackData);
-        break;
-      case MessageAction.VALID_STATUS_CHANGED:
-        (_g = props.onValidStatusChanged) == null ? void 0 : _g.call(props, feedbackData);
-        break;
-      case MessageAction.AUTHORIZED:
-        (_h = props.onAuthorized) == null ? void 0 : _h.call(props, feedbackData);
-        break;
-      case MessageAction.ACTIVATED:
-        (_i = props.onActivated) == null ? void 0 : _i.call(props, feedbackData);
-        break;
-      case MessageAction.CARD_ENCRYPTED:
-        (_j = props.onCardEncrypted) == null ? void 0 : _j.call(props, feedbackData);
-        break;
-      case MessageAction.CARD_ENCRYPTION_FAILED:
-        (_k = props.onCardEncryptionFailed) == null ? void 0 : _k.call(props, feedbackData);
-        break;
-      case MessageAction.VALIDATED:
-        (_l = props.onValidated) == null ? void 0 : _l.call(props, feedbackData);
-        break;
-    }
-  }, []);
-  return /* @__PURE__ */ u("div", { ref: rootNodeRef, children: !targetElement && props.children });
-});
-export {
-  EFieldType,
-  MessageAction,
-  SecuredFieldsProvider,
-  postMessageToIframe
-};