@paykka/card-checkout-ui 0.5.17 → 0.6.0

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

@@ -0,0 +1,448 @@
+import { setApiUrl, setCDNUrl } from "../../config.js";
+import { CoreContext } from "../../core/context.js";
+import { create } from "../../core/create.js";
+import "../../utils/card-brand/brands.js";
+import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
+import { w, F, h, A, y, u } from "../../core.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import { intersection } from "../../utils/index.js";
+import { defaultInputStyleConfig, inputStyleAttrs } from "../../types/index.js";
+import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { CardNumberField } from "../CardNumberField/index.js";
+import { CardExpireDateField } from "../CardExpireDateField/index.js";
+import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
+import { verifyClientKey } from "../../api/modules/encrypted-card/index.js";
+import { formItemErrorMessageClassName, formItemLabelClassName } from "../internal/Form/type.js";
+import "../internal/Form/context.js";
+import "../internal/Form/FormItem.js";
+import "../internal/Form/Form.js";
+import { CombinedEncryptedField } from "../CombinedEncryptedField/index.js";
+import "../internal/Input/Input.js";
+import { inputWrapperClassName } from "../internal/Input/type.js";
+import { style2String, loadStyle } from "../../utils/style.js";
+import { createPromise } from "../../utils/create-promise.js";
+const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
+const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
+var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {
+  EEncryptedCardType2["CARD"] = "card";
+  EEncryptedCardType2["CARD_NUMBER"] = "cardNumber";
+  EEncryptedCardType2["CVV"] = "securityCode";
+  EEncryptedCardType2["EXPIRE_DATE"] = "expiryDate";
+  return EEncryptedCardType2;
+})(EEncryptedCardType || {});
+const { bem } = useBEM("encrypted");
+const cvvClassName = bem("cvv");
+const cardNumberClassName = bem("card-number");
+const expireDateClassName = bem("expire-date");
+const combinedEncryptedFieldClassName = bem("combined-encrypted-field");
+const encryptedCardStyleId = "encryptedCardStyle";
+const EncryptedCard = w((props, ref) => {
+  const { brands, locale, clientKey, merchantId, sandbox, styles, showLabel = true } = props;
+  F(ref, () => ({
+    encrypt: () => {
+      var _a;
+      validatePromise.current = createPromise();
+      Object.keys(fieldValidStatusMap.current).forEach((key) => {
+        fieldValidStatusMap.current[key] = null;
+      });
+      (_a = SFPRef.current) == null ? void 0 : _a.validate();
+      validatePromise.current.then(() => {
+        var _a2;
+        console.log("校验通过");
+        (_a2 = SFPRef.current) == null ? void 0 : _a2.encryptCard({
+          merchantId,
+          clientKey
+        });
+      }).catch(() => {
+        console.log("校验失败");
+      });
+    }
+  }));
+  const { i18n } = useI18n(locale || getBrowserInfo().language);
+  const [single, setSingle] = h(false);
+  const [showEncryptedCard, setShowEncryptedCard] = h(false);
+  const [isReady, setIsReady] = h(false);
+  const [supportedBrands, setSupportedBrands] = h([]);
+  const [targetElement, setTargetElement] = h(null);
+  const [inputStyle, setInputStyle] = h({});
+  const wrapperDomMap = A({
+    [EEncryptedCardType.CARD]: null,
+    [EEncryptedCardType.CARD_NUMBER]: null,
+    [EEncryptedCardType.CVV]: null,
+    [EEncryptedCardType.EXPIRE_DATE]: null
+  });
+  const SFPRef = A(null);
+  const combinedEncryptedFieldComp = A(null);
+  const cardNumberFieldComp = A(null);
+  const cardExpireDateFieldComp = A(null);
+  const cardSecurityCodeFieldComp = A(null);
+  const combinedEncryptedFieldRef = A(null);
+  const cardNumberFieldRef = A(null);
+  const cardExpireDateFieldRef = A(null);
+  const cardSecurityCodeFieldRef = A(null);
+  const fieldRefMap = {
+    [EFieldType.CARD_NUMBER]: cardNumberFieldRef,
+    [EFieldType.CVV]: cardSecurityCodeFieldRef,
+    [EFieldType.EXPIRE_DATE]: cardExpireDateFieldRef
+  };
+  const processStyles = () => {
+    if (!styles) {
+      return;
+    }
+    const { input, label, errorMessage } = styles;
+    let inputWrapper = {};
+    if (input) {
+      inputWrapper = JSON.parse(JSON.stringify(input));
+      Reflect.deleteProperty(inputWrapper, "placeholder");
+      const inputStyle2 = {
+        placeholder: input == null ? void 0 : input.placeholder
+      };
+      const statusList = Object.keys(inputWrapper);
+      statusList.forEach((key) => {
+        if (key === "placeholder") {
+          return;
+        }
+        const style = inputWrapper[key];
+        if (!style) {
+          return;
+        }
+        inputStyleAttrs.forEach((attr) => {
+          if (!inputStyle2[key]) {
+            inputStyle2[key] = {};
+          }
+          if (style[attr]) {
+            inputStyle2[key][attr] = style[attr];
+            Reflect.deleteProperty(style, attr);
+          }
+        });
+      });
+      setInputStyle(inputStyle2);
+    }
+    if (!document.querySelector(`style#${encryptedCardStyleId}`)) {
+      const style = [];
+      const parentId = ENCRYPTED_CARD_WRAPPER_ID;
+      const inputWrapperStyle = `#${parentId} .${inputWrapperClassName} { ${style2String(
+        inputWrapper.base
+      )} }`;
+      const inputWrapperFocusStyle = `#${parentId} .${inputWrapperClassName}--focus { ${style2String(
+        inputWrapper.focus
+      )} }`;
+      const inputWrapperValidStyle = `#${parentId} .${inputWrapperClassName}--success { ${style2String(
+        inputWrapper.valid
+      )} }`;
+      const inputWrapperInvalidStyle = `#${parentId} .${inputWrapperClassName}--error { ${style2String(
+        inputWrapper.invalid
+      )} }`;
+      const labelClassName = formItemLabelClassName;
+      const labelStyle = `#${parentId} .${labelClassName} { ${style2String(label == null ? void 0 : label.base)} }`;
+      const labelFocusStyle = `#${parentId} .${labelClassName}--focus { ${style2String(
+        label == null ? void 0 : label.focus
+      )} }`;
+      const labelValidStyle = `#${parentId} .${labelClassName}--success { ${style2String(
+        label == null ? void 0 : label.valid
+      )} }`;
+      const labelInvalidStyle = `#${parentId} .${labelClassName}--error { ${style2String(
+        label == null ? void 0 : label.invalid
+      )} }`;
+      const errorMessageStyle = `#${parentId} .${formItemErrorMessageClassName} { ${style2String(
+        errorMessage
+      )} }`;
+      style.push(
+        ...[
+          inputWrapperStyle,
+          inputWrapperFocusStyle,
+          inputWrapperValidStyle,
+          inputWrapperInvalidStyle,
+          labelStyle,
+          labelFocusStyle,
+          labelValidStyle,
+          labelInvalidStyle,
+          errorMessageStyle
+        ]
+      );
+      loadStyle(style.join("\n"));
+    }
+  };
+  const classNameMap = {
+    [EFieldType.CARD_NUMBER]: cardNumberClassName,
+    [EFieldType.CVV]: cvvClassName,
+    [EFieldType.EXPIRE_DATE]: expireDateClassName
+  };
+  const updateFieldStyles = (fieldType, type) => {
+    var _a, _b;
+    const className = single ? combinedEncryptedFieldClassName : classNameMap[fieldType];
+    const parent = document.querySelector(`#${ENCRYPTED_CARD_WRAPPER_ID}`);
+    if (!parent) {
+      return;
+    }
+    const inputWrapper = (_a = parent.querySelector(`.${className}`)) == null ? void 0 : _a.querySelector(`.${inputWrapperClassName}`);
+    const label = (_b = parent.querySelector(`.${className}`)) == null ? void 0 : _b.querySelector(`.${formItemLabelClassName}`);
+    if (type === "focus") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--focus`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--focus`);
+    } else if (type === "blur") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--focus`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--focus`);
+    } else if (type === "valid") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--success`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--success`);
+    } else if (type === "invalid") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--error`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--error`);
+    } else {
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--success`);
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--error`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--success`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--error`);
+    }
+  };
+  y(() => {
+    initEncryptedCard();
+  }, []);
+  const authorize = async () => {
+    if (!clientKey) {
+      throw new Error("clientKey is required");
+    }
+    return verifyClientKey(clientKey, merchantId);
+  };
+  const getBrands = (realBrands) => {
+    if (!(brands == null ? void 0 : brands.length)) {
+      return realBrands;
+    }
+    const bothBrands = intersection(brands, realBrands || []);
+    if (!bothBrands.length) {
+      throw new Error("No available card brands");
+    }
+    return bothBrands;
+  };
+  const initEncryptedCard = async () => {
+    var _a, _b;
+    if (sandbox) {
+      setApiUrl("https://checkout-sandbox.aq.paykka.com");
+      setCDNUrl("https://checkout-sandbox.aq.paykka.com/cp");
+    }
+    let authRes = await authorize();
+    if (authRes) {
+      const supportedBrands2 = getBrands(authRes.brands);
+      setSupportedBrands(supportedBrands2);
+      (_a = props.onReady) == null ? void 0 : _a.call(props, true, { brands: supportedBrands2 });
+    } else {
+      (_b = props.onReady) == null ? void 0 : _b.call(props, false);
+      return;
+    }
+    const encryptedCardWrapper = document.getElementById(ENCRYPTED_CARD_WRAPPER_ID);
+    setTargetElement(encryptedCardWrapper);
+    if (!encryptedCardWrapper) {
+      return;
+    }
+    const getEncryptedCardItems = (attr) => {
+      return encryptedCardWrapper.querySelector(
+        `[${ENCRYPTED_CARD_ITEM_ATTR}="${attr}"]`
+      );
+    };
+    const cardElement = getEncryptedCardItems(EEncryptedCardType.CARD);
+    if (cardElement) {
+      setSingle(true);
+      setShowEncryptedCard(true);
+      wrapperDomMap.current[EEncryptedCardType.CARD] = cardElement;
+    } else {
+      const cardNumberElement = getEncryptedCardItems(EEncryptedCardType.CARD_NUMBER);
+      const cvvElement = getEncryptedCardItems(EEncryptedCardType.CVV);
+      const expireDateElement = getEncryptedCardItems(EEncryptedCardType.EXPIRE_DATE);
+      if (cardNumberElement && cvvElement && expireDateElement) {
+        setSingle(false);
+        setShowEncryptedCard(true);
+        wrapperDomMap.current[EEncryptedCardType.CARD_NUMBER] = cardNumberElement;
+        wrapperDomMap.current[EEncryptedCardType.CVV] = cvvElement;
+        wrapperDomMap.current[EEncryptedCardType.EXPIRE_DATE] = expireDateElement;
+      }
+    }
+    processStyles();
+  };
+  y(() => {
+    showEncryptedCard && embedEncryptedCard();
+  }, [showEncryptedCard]);
+  const embedEncryptedCard = () => {
+    if (single) {
+      const cardWrapper = wrapperDomMap.current[EEncryptedCardType.CARD];
+      const combinedEncryptedField = create(CombinedEncryptedField, {
+        supportedCardBrands: supportedBrands,
+        security: true,
+        className: combinedEncryptedFieldClassName
+      });
+      combinedEncryptedFieldComp.current = combinedEncryptedField;
+      combinedEncryptedFieldRef.current = combinedEncryptedField.ref;
+      combinedEncryptedField.mount(cardWrapper);
+    } else {
+      const cardNumberWrapper = wrapperDomMap.current[EEncryptedCardType.CARD_NUMBER];
+      const cardNumberField = create(CardNumberField, {
+        supportedCardBrands: supportedBrands,
+        security: true,
+        showLabel,
+        className: cardNumberClassName
+      });
+      cardNumberFieldComp.current = cardNumberField;
+      cardNumberFieldRef.current = cardNumberField.ref;
+      cardNumberField.mount(cardNumberWrapper);
+      const cvvWrapper = wrapperDomMap.current[EEncryptedCardType.CVV];
+      const cvvField = create(CardSecurityCodeField, {
+        security: true,
+        showLabel,
+        className: cvvClassName
+      });
+      cardSecurityCodeFieldComp.current = cvvField;
+      cardSecurityCodeFieldRef.current = cvvField.ref;
+      cvvField.mount(cvvWrapper);
+      const expireDateWrapper = wrapperDomMap.current[EEncryptedCardType.EXPIRE_DATE];
+      const expireDateField = create(CardExpireDateField, {
+        security: true,
+        showLabel,
+        className: expireDateClassName
+      });
+      cardExpireDateFieldComp.current = expireDateField;
+      cardExpireDateFieldRef.current = expireDateField.ref;
+      expireDateField.mount(expireDateWrapper);
+    }
+    setIsReady(true);
+  };
+  const onFieldsFocus = (data) => {
+    var _a, _b, _c, _d;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    if (data.focus) {
+      (_a = fieldRef.current) == null ? void 0 : _a.focus();
+      (_b = props.onFocus) == null ? void 0 : _b.call(props, data.fieldType);
+      updateFieldStyles(data.fieldType, "focus");
+    } else {
+      (_c = fieldRef.current) == null ? void 0 : _c.blur();
+      (_d = props.onBlur) == null ? void 0 : _d.call(props, data.fieldType);
+      updateFieldStyles(data.fieldType, "blur");
+    }
+  };
+  const onBinValueChanged = (data) => {
+    var _a, _b;
+    const field = single ? combinedEncryptedFieldRef : cardNumberFieldRef;
+    (_a = field.current) == null ? void 0 : _a.binValueChanged(data.binValue);
+    (_b = props.onBinChanged) == null ? void 0 : _b.call(props, {
+      binValue: data.binValue,
+      brand: data.brand
+    });
+  };
+  const onAuthorized = (data) => {
+    var _a;
+    (_a = props.onReady) == null ? void 0 : _a.call(props, data.success);
+  };
+  const validatePromise = A(createPromise());
+  const validateOrder = [EFieldType.CARD_NUMBER, EFieldType.EXPIRE_DATE, EFieldType.CVV];
+  const fieldValidStatusMap = A({
+    [EFieldType.CARD_NUMBER]: null,
+    [EFieldType.EXPIRE_DATE]: null,
+    [EFieldType.CVV]: null
+  });
+  const onValidated = (data) => {
+    fieldValidStatusMap.current[data.fieldType].status = data.status;
+    const results = Object.values(fieldValidStatusMap.current);
+    if (results.includes(null)) {
+      return;
+    } else {
+      const validateResult = results.every((result) => result.status === "success");
+      if (validateResult) {
+        validatePromise.current.resolve(true);
+      } else {
+        validatePromise.current.reject(false);
+      }
+    }
+  };
+  const onFieldValidStatusChanged = (data) => {
+    var _a, _b, _c, _d, _e;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    const error = data.errorTip && i18n.get(data.errorTip);
+    (_a = props.onValidationChanged) == null ? void 0 : _a.call(props, {
+      fieldType: data.fieldType,
+      status: data.status
+    });
+    fieldValidStatusMap.current[data.fieldType] = {
+      status: data.status,
+      errorTip: error
+    };
+    if (single) {
+      for (const key of validateOrder) {
+        const currResult = fieldValidStatusMap.current[key];
+        if ((currResult == null ? void 0 : currResult.status) === "error") {
+          (_b = fieldRef.current) == null ? void 0 : _b.resetValidation(currResult.status, currResult.errorTip);
+          return;
+        }
+      }
+      const isSuccess = Object.values(fieldValidStatusMap.current).every(
+        (result) => (result == null ? void 0 : result.status) === "success"
+      );
+      if (isSuccess) {
+        (_c = fieldRef.current) == null ? void 0 : _c.resetValidation("success");
+      } else {
+        (_d = fieldRef.current) == null ? void 0 : _d.resetValidation("unValidate");
+      }
+    } else {
+      (_e = fieldRef.current) == null ? void 0 : _e.resetValidation(data.status, error);
+      const type = data.status === "success" ? "valid" : data.status === "error" ? "invalid" : "base";
+      updateFieldStyles(data.fieldType, type);
+    }
+  };
+  const onFrameActivated = (data) => {
+    var _a;
+    (_a = props.onActivated) == null ? void 0 : _a.call(props, data.fieldType);
+  };
+  const onCardEncrypted = (data) => {
+    var _a;
+    (_a = props.onCardEncrypted) == null ? void 0 : _a.call(props, data.encryptedInfo);
+  };
+  const onCardEncryptionFailed = () => {
+    var _a;
+    (_a = props.onCardEncryptionFailed) == null ? void 0 : _a.call(props);
+  };
+  const onBrand = (data) => {
+    var _a, _b;
+    const field = single ? combinedEncryptedFieldRef : cardNumberFieldRef;
+    (_a = field.current) == null ? void 0 : _a.brandChanged(data.brand);
+    (_b = props.onBrand) == null ? void 0 : _b.call(props, data.brand);
+  };
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: isReady && i18n.ready.value && /* @__PURE__ */ u(
+    SecuredFieldsProvider,
+    {
+      ref: SFPRef,
+      targetElement,
+      i18n,
+      style: inputStyle || defaultInputStyleConfig,
+      supportedCardBrands: supportedBrands,
+      onFocus: onFieldsFocus,
+      onBinValue: onBinValueChanged,
+      onBrand,
+      onAuthorized,
+      onValidStatusChanged: onFieldValidStatusChanged,
+      onActivated: onFrameActivated,
+      onCardEncrypted,
+      onCardEncryptionFailed,
+      onValidated
+    }
+  ) });
+});
+class PayKKaEncryptedCard {
+  constructor() {
+  }
+  static init(props) {
+    const container = document.querySelector("body");
+    const encryptedCard = create(EncryptedCard, props);
+    encryptedCard.mount(container);
+    return encryptedCard.ref;
+  }
+  static setEnv(env) {
+    setApiUrl(env.apiUrl);
+    setCDNUrl(env.cdnUrl);
+  }
+}
+export {
+  EEncryptedCardType,
+  ENCRYPTED_CARD_ITEM_ATTR,
+  ENCRYPTED_CARD_WRAPPER_ID,
+  EncryptedCard,
+  PayKKaEncryptedCard
+};

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 } 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";
@@ -12,6 +13,7 @@ import "../../i18n/locales/index.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";
 function createGooglePay(checkout, pay, onClick, onCanUse) {
   const {
     transAmount,
@@ -157,14 +159,28 @@ 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) => {
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionId, clientKey } = props;
-  const { sessionReady, session, i18n, payKKaRadar } = usePayState(props);
+  const { sessionReady, session, i18n, fraudDetection } = usePayState();
   const [errorMsg, setErrorMsg] = h("");
+  const [showGooglePay, setShowGooglePay] = h(false);
   const onTimeout = q(
     (message) => {
       var _a;
@@ -173,12 +189,32 @@ const GooglePay = w((props, ref) => {
     },
     [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);
+    if (!sessionReady) {
+      return;
+    }
+    const { status, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    if (!paymentMethod.includes(PaymentMethod.GOOGLE_PAY)) {
+      return;
+    }
+    loadGooglePayJS(
+      () => {
+        var _a2;
+        setShowGooglePay(true);
+        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, true);
+      },
+      () => {
+        var _a2;
+        setShowGooglePay(false);
+        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, false);
       }
+    );
+    if (status === "SUCCESS") {
+      (_a = props.onSuccess) == null ? void 0 : _a.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const { start: startReFetchPayInfo } = useRetry(
@@ -192,20 +228,22 @@ const GooglePay = w((props, ref) => {
   async function pay(token, billAddress, search = false, timeout) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     setErrorMsg("");
-    (_a = props.onSubmit) == null ? void 0 : _a.call(props);
+    if (!search) {
+      (_a = props.onSubmit) == null ? void 0 : _a.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,7 +258,7 @@ 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 }
@@ -229,7 +267,7 @@ const GooglePay = w((props, ref) => {
       const { status, orderStatus, errorMessage, threeDSUrl } = 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" }
@@ -279,7 +317,7 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else if (status === "SUCCESS") {
-        (_g = props.onSuccess) == null ? void 0 : _g.call(props);
+        (_g = props.onSuccess) == null ? void 0 : _g.call(props, getPaymentSuccessData());
         return {
           end: true,
           res: { transactionState: "SUCCESS" }
@@ -291,7 +329,7 @@ const GooglePay = w((props, ref) => {
           res: { transactionState: "SUCCESS" }
         };
       }
-      (_i = props.onSuccess) == null ? void 0 : _i.call(props);
+      (_i = props.onSuccess) == null ? void 0 : _i.call(props, getPaymentSuccessData());
       return {
         end: false,
         res: { transactionState: "SUCCESS" }
@@ -371,7 +409,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 +417,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) {
@@ -400,7 +438,7 @@ const GooglePay = w((props, ref) => {
   }
   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,11 +447,11 @@ 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()
   ] }) });