@paykka/card-checkout-ui 0.6.0 → 0.7.0

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

package/dist/types/components/CombinedEncryptedField/CombinedEncryptedField.d.ts

@@ -1,4 +0,0 @@
-import type { CombinedEncryptedFieldProps, CombinedEncryptedFieldRef } from './type';
-export declare const CombinedEncryptedField: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<CombinedEncryptedFieldProps> & {
-    ref?: import("preact").Ref<CombinedEncryptedFieldRef> | undefined;
-}>;

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

@@ -1,2 +0,0 @@
-export * from './CombinedEncryptedField';
-export * from './type';