@paykka/card-checkout-ui 0.6.0 → 0.7.0

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

@@ -1,4 +1,233 @@
-import { SecuredFieldsProvider } from "./SecuredFieldsProvider.js";
+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 "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { w, A, F, y, q, u } from "../../core.js";
+import { SessionMode } from "../../constant.js";
+import { cdnUrl, cdnOrigin, apiUrl } from "../../config.js";
+import { MessageAction } from "../../types/message.js";
+import { createIframe, postMessageToIframe } from "../../utils/iframe.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 || {});
+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}]`)) : [];
+};
+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.HOSTED) {
+        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.HOSTED) {
+    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,
+  HIDDEN_IFRAME_NAME,
+  SECURED_FILED_ATTR,
+  SECURED_IFRAME_CLASS_NAME,
   SecuredFieldsProvider
 };

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

@@ -1,11 +1,13 @@
 import { A, h, y, u, b } from "../../core.js";
 import { clamp, isExpired, safeParse } from "../../utils/index.js";
-import { EFieldType, 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 { 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";

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,8 +10,7 @@ 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";
@@ -28,9 +27,10 @@ const { bem } = useBEM("sepa");
 const fieldClassNames = bem("field");
 const Sepa = w((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
+  const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { i18n, session, sessionReady } = usePayState();
+  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 ?? {};
@@ -196,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 };
       }
@@ -205,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");
@@ -222,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);

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

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

@@ -7,8 +7,7 @@ import "../../utils/system-info/get-browser-info.js";
 import { formatAmount } from "../../utils/format.js";
 import { getWechatPayInfo, wechatPay } from "../../api/modules/wechat-pay/index.js";
 import { CoreContext } from "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import { PayKKaError } from "../../core/error.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
@@ -24,6 +23,8 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("wechat-pay");
 const WechatPay = w((props, ref) => {
+  var _a;
+  const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
   const emailFieldRef = A(null);
@@ -39,25 +40,24 @@ const WechatPay = w((props, ref) => {
       });
     },
     updateAddress: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressState.getAddressState());
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
     },
     updateEmail: () => {
-      var _a;
+      var _a2;
       setForm(Object.assign(form, { email: emailState.email }));
-      (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
+      (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
     }
   }));
   const {
     setErrorMsg,
     setSubmitButtonStatus,
     i18n,
-    session,
     submitButtonStatus,
     errorMsg,
     sessionReady
-  } = usePayState();
+  } = usePayState(session);
   const formRef = A(null);
   const [form, setForm] = h({
     email: "",
@@ -76,8 +76,8 @@ const WechatPay = w((props, ref) => {
   const [requiredBill, setRequiredBill] = h(false);
   const addressFieldRef = A(null);
   function validateForm() {
-    var _a;
-    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
+    var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
       setValidated(true);
     }).catch(() => {
       setValidated(false);
@@ -87,11 +87,11 @@ const WechatPay = w((props, ref) => {
     validateForm();
   }, [form]);
   y(() => {
-    var _a;
+    var _a2;
     if (sessionReady) {
       if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+        (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props);
       }
       form.email = (session == null ? void 0 : session.checkout.bill.email) ?? "";
       disabledEmail.current = !!(session == null ? void 0 : session.checkout.bill.email);
@@ -102,10 +102,10 @@ const WechatPay = w((props, ref) => {
     }
   }, [sessionReady]);
   const onTimeout = q((message) => {
-    var _a;
+    var _a2;
     setErrorMsg(message || i18n.get("common.payTimeout"));
     setSubmitButtonStatus("unSubmit");
-    (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+    (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
   }, [i18n, props.onTimeout]);
   const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
     (timeout) => pay(true, timeout),
@@ -115,7 +115,7 @@ const WechatPay = w((props, ref) => {
     }
   );
   async function pay(search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     try {
       const res = search ? await getWechatPayInfo(
         {
@@ -138,11 +138,11 @@ const WechatPay = w((props, ref) => {
           } : {
             email: form.email
           },
-          channelUserId: await ((_a = props.onGetOpenId) == null ? void 0 : _a.call(props))
+          channelUserId: await ((_a2 = props.onGetOpenId) == null ? void 0 : _a2.call(props))
         },
         { locale: i18n.locale, timeout }
       );
-      const { status, orderStatus, errorMessage, payInfo } = res;
+      const { status, orderStatus, errorMessage, payInfo, errorCode } = res;
       !search && ((_b = props.onSubmitResponse) == null ? void 0 : _b.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
@@ -156,7 +156,7 @@ const WechatPay = w((props, ref) => {
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_d = props.onError) == null ? void 0 : _d.call(props, "FAILURE");
+          (_d = props.onError) == null ? void 0 : _d.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true
           };
@@ -202,20 +202,21 @@ const WechatPay = w((props, ref) => {
           return { end: true };
         }
       } else {
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_j = props.onError) == null ? void 0 : _j.call(props, error);
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        setErrorMsg(message);
+        (_j = props.onError) == null ? void 0 : _j.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
     }
   }
   async function onSubmit() {
-    var _a;
+    var _a2;
     setErrorMsg("");
-    (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
-      var _a2;
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
+      var _a3;
       requiredBill && addressState.setValidateAllFields(true);
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
+      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -274,7 +275,7 @@ const WechatPay = w((props, ref) => {
             onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
           }
         ),
-        (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
+        ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
         Button()
       ] })

package/dist/es/components/index.js

@@ -6,8 +6,6 @@ import "./CardBrands/index.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import "../core/context.js";
-import "../i18n/util.js";
-import "../i18n/locales/index.js";
 import "./CardExpireDateField/index.js";
 import "./internal/Form/type.js";
 import "./internal/Form/context.js";
@@ -28,4 +26,4 @@ import "./ApplePay/index.js";
 import "./GooglePay/index.js";
 import "./Sepa/index.js";
 import "./EncryptedCard/index.js";
-import "./CombinedEncryptedField/index.js";
+import "./CombinedCardInfo/index.js";

package/dist/es/components/internal/Button/Button.js

@@ -6,8 +6,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("button");
 function Button(props) {
   const { style, className, children, icon, loading, disabled, dashed } = props;

package/dist/es/components/internal/Button/index.js

@@ -3,5 +3,3 @@ import "./button2.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../core/context.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";

package/dist/es/components/internal/CheckBox/CheckBox.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";
 import { COMMON_CLASS_NAME } from "../../../constant.js";
 import { IconChecked } from "../icons/iconChecked.js";
 const { bem } = useBEM("check-box");

package/dist/es/components/internal/CheckBox/index.js

@@ -3,5 +3,3 @@ import "./check-box.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../core/context.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";

package/dist/es/components/internal/Form/type.js

@@ -3,8 +3,6 @@ import "../../../core.js";
 import "../../../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";
 const formItemBEM = useBEM("form-item");
 const formItemLabelClassName = formItemBEM.bem("label");
 const formItemErrorMessageClassName = formItemBEM.bem("error-text");