@paykka/card-checkout-ui 0.5.17 → 0.7.0

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

@@ -1,5 +1,6 @@
 import { w, F, h, q, y, A, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
+import { PaymentMethod, SessionMode } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
@@ -7,11 +8,12 @@ import "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { extractAreaCodeAndPhoneNumber } from "../../utils/format.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 { Info } from "../internal/Info/Info.js";
+import { loadScript } from "../../utils/load.js";
+import { ThreeDSAuth } from "../ThreeDS/index.js";
 function createGooglePay(checkout, pay, onClick, onCanUse) {
   const {
     transAmount,
@@ -157,30 +159,89 @@ function createGooglePay(checkout, pay, onClick, onCanUse) {
     onGooglePayLoaded
   };
 }
+const loadGooglePayJS = (onload, onerror) => {
+  var _a;
+  if ((_a = window.google) == null ? void 0 : _a.payments) {
+    return;
+  }
+  loadScript({
+    src: "https://pay.google.com/gp/p/js/pay.js",
+    onload,
+    onerror,
+    extraOptions: {
+      async: true
+    }
+  });
+};
 const { bem } = useBEM("google-pay");
 const GooglePay = w((props, ref) => {
+  var _a;
+  const { session, threeDSFrame } = props;
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionId, clientKey } = props;
-  const { sessionReady, session, i18n, payKKaRadar } = usePayState(props);
+  const { sessionReady, i18n, fraudDetection } = usePayState(session);
   const [errorMsg, setErrorMsg] = h("");
+  const [showGooglePay, setShowGooglePay] = h(false);
+  const [showThreeDSModal, setShowThreeDSModal] = h(false);
+  const [threeDSInfo, setThreeDSInfo] = h();
+  const [hosted, setHosted] = h(true);
   const onTimeout = q(
     (message) => {
-      var _a;
+      var _a2;
       setErrorMsg(message || i18n.get("common.payTimeout"));
-      (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
+      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
     },
     [i18n, props.onTimeout]
   );
+  const getPaymentSuccessData = () => ({
+    returnUrl: session == null ? void 0 : session.checkout.returnUrl
+  });
   y(() => {
-    var _a;
-    if (sessionReady) {
-      if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
-        (_a = props.onSuccess) == null ? void 0 : _a.call(props);
+    var _a2;
+    if (!sessionReady) {
+      return;
+    }
+    const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (!paymentMethod.includes(PaymentMethod.GOOGLE_PAY)) {
+      return;
+    }
+    loadGooglePayJS(
+      () => {
+        var _a3;
+        setShowGooglePay(true);
+        (_a3 = props.onLoad) == null ? void 0 : _a3.call(props, true);
+      },
+      () => {
+        var _a3;
+        setShowGooglePay(false);
+        (_a3 = props.onLoad) == null ? void 0 : _a3.call(props, false);
       }
+    );
+    setHosted(sessionMode === SessionMode.HOSTED);
+    if (status === "SUCCESS") {
+      (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
+  const processThreeDS = (threeDSUrl, incomplete) => {
+    var _a2;
+    if (hosted) {
+      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, threeDSUrl, incomplete);
+    } else {
+      setShowThreeDSModal(true);
+      setThreeDSInfo({
+        url: threeDSUrl,
+        incomplete,
+        width: threeDSFrame == null ? void 0 : threeDSFrame.modalWidth,
+        height: threeDSFrame == null ? void 0 : threeDSFrame.modalHeight
+      });
+    }
+  };
+  const handleCloseThreeDSModal = () => {
+    setShowThreeDSModal(false);
+    setThreeDSInfo(void 0);
+    checkThreeDS();
+  };
   const { start: startReFetchPayInfo } = useRetry(
     async (timeout) => {
       return await pay(void 0, void 0, true, timeout);
@@ -190,22 +251,24 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function pay(token, billAddress, search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
     setErrorMsg("");
-    (_a = props.onSubmit) == null ? void 0 : _a.call(props);
+    if (!search) {
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props);
+    }
     try {
       const res = await (search ? getGooglePayInfo(
         {
-          sessionId,
-          clientKey
+          sessionId: session.sessionId,
+          clientKey: session.clientKey
         },
         { locale: i18n.locale, timeout }
       ) : async function() {
         const phone = extractAreaCodeAndPhoneNumber(billAddress == null ? void 0 : billAddress.phoneNumber);
         return googlePay(
           {
-            sessionId,
-            clientKey,
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
             token: token ?? "",
             bill: {
               firstName: billAddress == null ? void 0 : billAddress.name,
@@ -220,16 +283,16 @@ const GooglePay = w((props, ref) => {
               areaCode: phone == null ? void 0 : phone.areaCode
             },
             browser: await getBrowserParams({
-              radarId: payKKaRadar == null ? void 0 : payKKaRadar.radarId
+              fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
             })
           },
           { locale: i18n.locale }
         );
       }());
-      const { status, orderStatus, errorMessage, threeDSUrl } = res;
+      const { status, orderStatus, errorMessage, threeDSUrl, errorCode } = res;
       if (status === "PROCESSING") {
         if (orderStatus === "SUCCESS") {
-          (_b = props.onSuccess) == null ? void 0 : _b.call(props);
+          (_b = props.onSuccess) == null ? void 0 : _b.call(props, getPaymentSuccessData());
           return {
             end: true,
             res: { transactionState: "SUCCESS" }
@@ -242,7 +305,7 @@ const GooglePay = w((props, ref) => {
           } : await startReFetchPayInfo();
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
-          (_c = props.onError) == null ? void 0 : _c.call(props, "FAILURE");
+          (_c = props.onError) == null ? void 0 : _c.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true,
             res: {
@@ -261,13 +324,13 @@ const GooglePay = w((props, ref) => {
             res: { transactionState: "SUCCESS" }
           };
         } else if (orderStatus === "IN_THREED") {
-          (_e = props.onThreeDS) == null ? void 0 : _e.call(props, threeDSUrl, false);
+          processThreeDS(threeDSUrl, false);
           return {
             end: true,
             res: { transactionState: "SUCCESS" }
           };
         } else if (orderStatus === "IN_PREVIOUS_THREED") {
-          (_f = props.onThreeDS) == null ? void 0 : _f.call(props, threeDSUrl, true);
+          processThreeDS(threeDSUrl, true);
           return {
             end: true,
             res: { transactionState: "SUCCESS" }
@@ -279,19 +342,19 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else if (status === "SUCCESS") {
-        (_g = props.onSuccess) == null ? void 0 : _g.call(props);
+        (_e = props.onSuccess) == null ? void 0 : _e.call(props, getPaymentSuccessData());
         return {
           end: true,
           res: { transactionState: "SUCCESS" }
         };
       } else if (status === "EXPIRED") {
-        (_h = props.onExpired) == null ? void 0 : _h.call(props);
+        (_f = props.onExpired) == null ? void 0 : _f.call(props);
         return {
           end: true,
           res: { transactionState: "SUCCESS" }
         };
       }
-      (_i = props.onSuccess) == null ? void 0 : _i.call(props);
+      (_g = props.onSuccess) == null ? void 0 : _g.call(props, getPaymentSuccessData());
       return {
         end: false,
         res: { transactionState: "SUCCESS" }
@@ -316,8 +379,8 @@ const GooglePay = w((props, ref) => {
         }
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(error.i18nKey ? i18n.get(error.i18nKey) : error.message);
-        (_j = props.onError) == null ? void 0 : _j.call(props, error);
+        setErrorMsg(message);
+        (_h = props.onError) == null ? void 0 : _h.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         return {
           end: true,
           res: {
@@ -340,7 +403,7 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false) {
-    var _a, _b, _c, _d, _e;
+    var _a2, _b, _c, _d, _e;
     if (!session)
       return { end: true };
     try {
@@ -360,7 +423,7 @@ const GooglePay = w((props, ref) => {
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
         } else if (orderStatus === "AUTHORIZED") {
-          (_a = props.onAuthorized) == null ? void 0 : _a.call(props);
+          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
         } else if (orderStatus === "IN_THREED") {
           !search && startReFetchCardPay3DSInfo();
           return { end: false };
@@ -371,7 +434,7 @@ const GooglePay = w((props, ref) => {
         stopReFetchCardPay3DSInfo();
         return { end: true };
       } else if (status === "SUCCESS") {
-        (_b = props.onSuccess) == null ? void 0 : _b.call(props);
+        (_b = props.onSuccess) == null ? void 0 : _b.call(props, getPaymentSuccessData());
         stopReFetchCardPay3DSInfo();
         return { end: true };
       } else if (status === "EXPIRED") {
@@ -379,7 +442,7 @@ const GooglePay = w((props, ref) => {
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
-      (_d = props.onSuccess) == null ? void 0 : _d.call(props);
+      (_d = props.onSuccess) == null ? void 0 : _d.call(props, getPaymentSuccessData());
       stopReFetchCardPay3DSInfo();
       return { end: true };
     } catch (error) {
@@ -393,14 +456,14 @@ 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(props, error);
+        (_e = props.onError) == null ? void 0 : _e.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         return { end: true };
       }
     }
   }
   const containRef = A(null);
   y(() => {
-    if (containRef && (session == null ? void 0 : session.checkout)) {
+    if (containRef && (session == null ? void 0 : session.checkout) && showGooglePay) {
       const { onGooglePayLoaded } = createGooglePay(
         session == null ? void 0 : session.checkout,
         pay,
@@ -409,13 +472,22 @@ const GooglePay = w((props, ref) => {
       );
       onGooglePayLoaded(containRef.current);
     }
-  }, [sessionReady, containRef, i18n.ready.value]);
+  }, [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", { children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+  return /* @__PURE__ */ u("div", { children: sessionReady && showGooglePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
-    Button()
+    Button(),
+    /* @__PURE__ */ u(
+      ThreeDSAuth,
+      {
+        show: showThreeDSModal,
+        theme: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.theme,
+        ...threeDSInfo,
+        onClose: handleCloseThreeDSModal
+      }
+    )
   ] }) });
 });
 export {

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

@@ -2,8 +2,6 @@ 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 "../../i18n/util.js";
-import "../../i18n/locales/index.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

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