@paykka/card-checkout-ui 0.13.16 → 0.14.0

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

@@ -5,9 +5,9 @@ import "../../utils/system-info/get-browser-info.js";
 import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { GooglePayEventType } from "../../types/event.js";
 import { deepMerge } from "../../utils/object.js";
-import { formatPaymentResult } from "../../utils/payment.js";
+import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
-import { SessionMode, PaymentMethod } from "../../constant.js";
+import { PaymentMethod, SessionMode } from "../../constant.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
@@ -18,12 +18,13 @@ 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(core, checkout, googlePayConfig, pay, onClick, onCanUse) {
+const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse, onCancel) => {
   const {
     transAmount,
     theme: { merchantName }
   } = checkout;
-  const { googlePay: googlePay2 } = (checkout == null ? void 0 : checkout.channelParams) ?? {};
+  const { googlePay: googlePay2 } = (checkout == null ? void 0 : checkout.channelParams) || {};
+  let paymentsClient;
   const baseRequest = {
     apiVersion: 2,
     apiVersionMinor: 0
@@ -36,8 +37,8 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
       gatewayMerchantId: googlePay2 == null ? void 0 : googlePay2.merchantGatewayId
     }
   };
-  const allowedCardNetworks = (googlePay2 == null ? void 0 : googlePay2.allowedCardNetworks) ?? [];
-  const allowedCardAuthMethods = (googlePay2 == null ? void 0 : googlePay2.allowedAuthMethods) ?? [];
+  const allowedCardNetworks = (googlePay2 == null ? void 0 : googlePay2.allowedCardNetworks) || [];
+  const allowedCardAuthMethods = (googlePay2 == null ? void 0 : googlePay2.allowedAuthMethods) || [];
   const baseCardPaymentMethod = {
     type: "CARD",
     parameters: {
@@ -50,16 +51,16 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
       }
     }
   };
-  function getGoogleIsReadyToPayRequest() {
+  const getGoogleIsReadyToPayRequest = () => {
     return Object.assign({}, baseRequest, {
       allowedPaymentMethods: [baseCardPaymentMethod]
     });
-  }
+  };
   const cardPaymentMethod = Object.assign(
     { tokenizationSpecification },
     baseCardPaymentMethod
   );
-  function getGoogleTransactionInfo() {
+  const getGoogleTransactionInfo = () => {
     return {
       countryCode: googlePay2 == null ? void 0 : googlePay2.countryCode,
       currencyCode: transAmount.currency,
@@ -67,39 +68,33 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
       totalPrice: String(transAmount.amount),
       totalPriceLabel: "Total"
     };
-  }
-  let paymentsClient;
-  function getGooglePaymentDataRequest() {
-    const paymentDataRequest = Object.assign(
-      {},
-      baseRequest
-    );
-    paymentDataRequest.emailRequired = true;
-    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
-    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
-    paymentDataRequest.merchantInfo = {
-      merchantId: googlePay2 == null ? void 0 : googlePay2.googlePayMerchantId,
-      merchantName
+  };
+  const getGooglePaymentDataRequest = () => {
+    return {
+      ...baseRequest,
+      emailRequired: true,
+      allowedPaymentMethods: [cardPaymentMethod],
+      transactionInfo: getGoogleTransactionInfo(),
+      merchantInfo: {
+        merchantId: googlePay2 == null ? void 0 : googlePay2.googlePayMerchantId,
+        merchantName
+      },
+      callbackIntents: ["PAYMENT_AUTHORIZATION"]
     };
-    paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
-    return paymentDataRequest;
-  }
-  function getGooglePaymentsClient() {
+  };
+  const getGooglePaymentsClient = () => {
     if (!paymentsClient) {
       paymentsClient = new google.payments.api.PaymentsClient({
         environment: googlePay2 == null ? void 0 : googlePay2.environment,
-        paymentDataCallbacks: {
-          onPaymentAuthorized
-        }
+        paymentDataCallbacks: { onPaymentAuthorized }
       });
     }
     return paymentsClient;
-  }
-  function onPaymentAuthorized(paymentData) {
-    return new Promise(function(resolve) {
+  };
+  const onPaymentAuthorized = (paymentData) => {
+    return new Promise((resolve) => {
       var _a, _b, _c, _d;
       (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_AUTHORIZED);
-      console.log("google pay token", paymentData.paymentMethodData.tokenizationData.token);
       console.log("google pay billingAddress", (_c = paymentData.paymentMethodData.info) == null ? void 0 : _c.billingAddress);
       const {
         name,
@@ -111,8 +106,7 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
         locality,
         postalCode,
         phoneNumber
-      } = ((_d = paymentData.paymentMethodData.info) == null ? void 0 : _d.billingAddress) ?? {};
-      console.warn("GooglePay Res", paymentData.paymentMethodData);
+      } = ((_d = paymentData.paymentMethodData.info) == null ? void 0 : _d.billingAddress) || {};
       pay(paymentData.paymentMethodData.tokenizationData.token, {
         email: paymentData.email,
         name,
@@ -128,23 +122,29 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
         resolve(payRes == null ? void 0 : payRes.res);
       });
     });
-  }
-  function onGooglePayLoaded(container) {
+  };
+  const onGooglePayLoaded = async (container) => {
+    var _a, _b, _c;
     const paymentsClient2 = getGooglePaymentsClient();
-    paymentsClient2.isReadyToPay(getGoogleIsReadyToPayRequest()).then(function(response) {
-      var _a, _b;
-      if (response.result) {
+    try {
+      const res = await paymentsClient2.isReadyToPay(getGoogleIsReadyToPayRequest());
+      if (res.result) {
         addGooglePayButton(container);
         onCanUse == null ? void 0 : onCanUse(true);
       } else {
         onCanUse == null ? void 0 : onCanUse(false);
         (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_CAN_NOT_USE);
       }
-    }).catch(function(err) {
+    } catch (err) {
       console.error(err);
-    });
-  }
-  function addGooglePayButton(container) {
+      (_c = core.logger) == null ? void 0 : _c.reportErrorEvent(new PayKKaError(
+        "ERROR",
+        `google pay: ${(err == null ? void 0 : err.statusMessage) || "unknown error"}`,
+        { code: err == null ? void 0 : err.statusCode }
+      ));
+    }
+  };
+  const addGooglePayButton = (container) => {
     const paymentsClient2 = getGooglePaymentsClient();
     const button = paymentsClient2.createButton({
       ...googlePayConfig == null ? void 0 : googlePayConfig.button,
@@ -152,26 +152,34 @@ function createGooglePay(core, checkout, googlePayConfig, pay, onClick, onCanUse
       allowedPaymentMethods: [baseCardPaymentMethod]
     });
     container == null ? void 0 : container.appendChild(button);
-  }
-  function onGooglePaymentButtonClicked() {
-    var _a, _b;
-    (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_BUTTON_CLICKED);
+  };
+  const onGooglePaymentButtonClicked = async () => {
+    var _a, _b, _c;
     onClick == null ? void 0 : onClick();
     const paymentDataRequest = getGooglePaymentDataRequest();
     paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
     const paymentsClient2 = getGooglePaymentsClient();
-    console.log("paymentDataRequest", paymentDataRequest);
-    paymentsClient2.loadPaymentData(paymentDataRequest).catch((err) => {
-      var _a2, _b2;
+    console.log("google pay 支付请求数据", paymentDataRequest);
+    try {
+      await paymentsClient2.loadPaymentData(paymentDataRequest);
+    } catch (err) {
+      core.payment.resetCurrPaymentMethod();
       if ((err == null ? void 0 : err.statusCode) === "CANCELED") {
-        (_b2 = (_a2 = core.config).onEvent) == null ? void 0 : _b2.call(_a2, GooglePayEventType.GOOGLE_PAY_CANCELLED);
+        (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_CANCELLED);
+        onCancel == null ? void 0 : onCancel();
+      } else {
+        (_c = core.logger) == null ? void 0 : _c.reportErrorEvent(new PayKKaError(
+          "ERROR",
+          `google pay: ${(err == null ? void 0 : err.statusMessage) || "unknown error"}`,
+          { code: err == null ? void 0 : err.statusCode }
+        ));
       }
-    });
-  }
+    }
+  };
   return {
     onGooglePayLoaded
   };
-}
+};
 const loadGooglePayJS = (onload, onerror) => {
   var _a;
   if ((_a = window.google) == null ? void 0 : _a.payments) {
@@ -187,6 +195,7 @@ const loadGooglePayJS = (onload, onerror) => {
     }
   });
 };
+const CURR_PAYMENT_METHOD = PaymentMethod.GOOGLE_PAY;
 const { bem } = useBEM("google-pay");
 const DEFAULT_GOOGLE_PAY_CONFIG = {
   button: {
@@ -204,26 +213,33 @@ const GooglePay = w((props, ref) => {
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionReady, i18n, fraudDetection } = usePayState(session, props.core);
+  const { sessionReady, i18n, fraudDetection, disabled } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showGooglePay, setShowGooglePay] = h(false);
   const [showThreeDSModal, setShowThreeDSModal] = h(false);
   const [threeDSInfo, setThreeDSInfo] = h();
   const [hosted, setHosted] = h(true);
+  const getPaymentMethodContext = () => {
+    return {
+      paymentMethod: CURR_PAYMENT_METHOD
+    };
+  };
   const onTimeout = q(
     (message) => {
-      var _a2;
+      var _a2, _b;
+      (_a2 = core.payment) == null ? void 0 : _a2.resetCurrPaymentMethod();
       setErrorMsg(message || i18n.get("common.payTimeout"));
-      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry");
+      (_b = props.onTimeout) == null ? void 0 : _b.call(props, "retry", getPaymentMethodContext());
     },
     [i18n, props.onTimeout]
   );
   const processOnSuccess = (res) => {
     var _a2, _b;
-    (_b = props.onSuccess) == null ? void 0 : _b.call(props, formatPaymentResult({
+    const paymentInfo = formatPaymentResult({
       ...res,
       returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
-    }));
+    });
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, paymentInfo, getPaymentMethodContext());
   };
   y(() => {
     var _a2, _b;
@@ -238,7 +254,7 @@ const GooglePay = w((props, ref) => {
       );
       return;
     }
-    if (!supportMethods.includes(PaymentMethod.GOOGLE_PAY)) {
+    if (!supportMethods.includes(CURR_PAYMENT_METHOD)) {
       return;
     }
     loadGooglePayJS(
@@ -292,7 +308,7 @@ const GooglePay = w((props, ref) => {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
       payment: {
-        paymentMethod: PaymentMethod.GOOGLE_PAY,
+        paymentMethod: CURR_PAYMENT_METHOD,
         tokenData: token ?? ""
       },
       bill: {
@@ -313,53 +329,64 @@ const GooglePay = w((props, ref) => {
     };
   };
   async function pay(token, billAddress, search = false, timeout) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
     setErrorMsg("");
     if (!search) {
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props);
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, void 0, getPaymentMethodContext());
     }
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
-        const extraParams = (_c = (_b = core.config)._getExtraParams) == null ? void 0 : _c.call(_b, "query", PaymentMethod.GOOGLE_PAY);
+        const extraParams = (_c = (_b = core.config)._getExtraParams) == null ? void 0 : _c.call(_b, "query", CURR_PAYMENT_METHOD);
         res = await getGooglePayInfo(
           {
             sessionId: session.sessionId,
             clientKey: session.clientKey,
-            paymentMethod: PaymentMethod.GOOGLE_PAY
+            paymentMethod: CURR_PAYMENT_METHOD
           },
           extraParams,
           requestOptions
         );
       } else {
-        const extraParams = (_e = (_d = core.config)._getExtraParams) == null ? void 0 : _e.call(_d, "payment", PaymentMethod.GOOGLE_PAY);
+        const extraParams = (_e = (_d = core.config)._getExtraParams) == null ? void 0 : _e.call(_d, "payment", CURR_PAYMENT_METHOD);
         res = await googlePay(
           await getPaymentParams(token, billAddress),
           extraParams,
           requestOptions
         );
       }
-      const { status, orderStatus, errorMessage, payInfo = {}, errorCode, sessionId } = res;
+      const { errorMessage, payInfo = {}, errorCode, sessionId } = res;
       const { threeDSUrl } = payInfo;
       sessionId && (session.sessionId = sessionId);
-      if (status === "PROCESSING") {
-        if (orderStatus === "SUCCESS") {
-          processOnSuccess(res);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "PROCESSING") {
+      !search && ((_f = props.onSubmitResponse) == null ? void 0 : _f.call(props, res, getPaymentMethodContext()));
+      let result = {
+        end: true,
+        res: { transactionState: "SUCCESS" }
+      };
+      await processPaymentStatus(res, {
+        onProcessing: async () => {
           const res2 = await startReFetchPayInfo();
-          return (res2 == null ? void 0 : res2.end) === true ? {
-            end: true,
-            res: res2.res
-          } : await startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
+          if ((res2 == null ? void 0 : res2.end) === true) {
+            result = res2.res;
+          } else {
+            result = await startReFetchPayInfo();
+          }
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+        },
+        onFailure: () => {
+          var _a3, _b2;
           errorMessage && setErrorMsg(errorMessage);
-          (_f = props.onError) == null ? void 0 : _f.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-          return {
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
+          (_b2 = props.onError) == null ? void 0 : _b2.call(
+            props,
+            new PayKKaError("API_ERROR", errorMessage, { code: errorCode }),
+            getPaymentMethodContext()
+          );
+          result = {
             end: true,
             res: {
               transactionState: "ERROR",
@@ -370,48 +397,31 @@ const GooglePay = w((props, ref) => {
               }
             }
           };
-        } else if (orderStatus === "AUTHORIZED") {
-          (_g = props.onAuthorized) == null ? void 0 : _g.call(props);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "IN_THREED") {
+        },
+        onAuthorized: () => {
+          var _a3;
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onInThreeDS: () => {
           threeDSUrl && processThreeDS(threeDSUrl, false);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+        },
+        onInPreviousThreeDS: () => {
           threeDSUrl && processThreeDS(threeDSUrl, true);
-          return {
-            end: true,
-            res: { transactionState: "SUCCESS" }
-          };
-        } else if (!orderStatus) {
-          return {
+        },
+        onExpired: () => {
+          var _a3;
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          var _a3;
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
+          result = {
             end: true,
-            res: { transactionState: "SUCCESS" }
+            res: { transactionState: "ERROR" }
           };
         }
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        return {
-          end: true,
-          res: { transactionState: "SUCCESS" }
-        };
-      } else if (status === "EXPIRED") {
-        (_h = props.onExpired) == null ? void 0 : _h.call(props);
-        return {
-          end: true,
-          res: { transactionState: "SUCCESS" }
-        };
-      }
-      processOnSuccess(res);
-      return {
-        end: false,
-        res: { transactionState: "SUCCESS" }
-      };
+      });
+      return result;
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -431,9 +441,14 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else {
+        (_g = core.payment) == null ? void 0 : _g.resetCurrPaymentMethod();
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_i = props.onError) == null ? void 0 : _i.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        (_h = props.onError) == null ? void 0 : _h.call(
+          props,
+          new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
+          getPaymentMethodContext()
+        );
         return {
           end: true,
           res: {
@@ -456,11 +471,11 @@ const GooglePay = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false) {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d;
     if (!session)
       return { end: true };
     try {
-      const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.GOOGLE_PAY);
+      const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", CURR_PAYMENT_METHOD);
       const res = await getGooglePayInfo(
         {
           sessionId: session.sessionId,
@@ -471,35 +486,48 @@ const GooglePay = w((props, ref) => {
           locale: i18n.locale
         }
       );
-      const { status, orderStatus, errorMessage } = res;
-      if (status === "PROCESSING") {
-        if (orderStatus === "PROCESSING") {
+      const { errorMessage } = res;
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
           startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
+          stopReFetchCardPay3DSInfo();
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+          stopReFetchCardPay3DSInfo();
+        },
+        onFailure: () => {
+          var _a3;
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
           errorMessage && setErrorMsg(errorMessage);
-        } else if (orderStatus === "AUTHORIZED") {
-          (_c = props.onAuthorized) == null ? void 0 : _c.call(props);
-        } else if (orderStatus === "IN_THREED") {
+          stopReFetchCardPay3DSInfo();
+        },
+        onAuthorized: () => {
+          var _a3;
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+          stopReFetchCardPay3DSInfo();
+        },
+        onInThreeDS: () => {
           !search && startReFetchCardPay3DSInfo();
-          return { end: false };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+          end = false;
+        },
+        onInPreviousThreeDS: () => {
           setErrorMsg(i18n.get("common.pay3DSIncomplete"));
-        } else if (!orderStatus) {
+          stopReFetchCardPay3DSInfo();
+        },
+        onExpired: () => {
+          var _a3;
+          stopReFetchCardPay3DSInfo();
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          var _a3;
+          stopReFetchCardPay3DSInfo();
+          (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
         }
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        (_d = props.onExpired) == null ? void 0 : _d.call(props);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      }
-      processOnSuccess(res);
-      stopReFetchCardPay3DSInfo();
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -511,7 +539,13 @@ 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, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        (_c = props.onError) == null ? void 0 : _c.call(
+          props,
+          new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
+          getPaymentMethodContext()
+        );
+        (_d = core.payment) == null ? void 0 : _d.resetCurrPaymentMethod();
+        stopReFetchCardPay3DSInfo();
         return { end: true };
       }
     }
@@ -524,14 +558,19 @@ const GooglePay = w((props, ref) => {
         session == null ? void 0 : session.checkout,
         googlePayConfig,
         pay,
-        props.onBtnClick,
-        props.onCanUse
+        () => {
+          var _a2, _b, _c;
+          (_b = (_a2 = core.config).onEvent) == null ? void 0 : _b.call(_a2, GooglePayEventType.GOOGLE_PAY_BUTTON_CLICKED);
+          (_c = props.onBtnClick) == null ? void 0 : _c.call(props);
+        },
+        props.onCanUse,
+        props.onCancel
       );
       onGooglePayLoaded(containRef.current);
     }
   }, [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", { style: "width: 100%; height: 44px", className: bem("button", { disabled }), children: /* @__PURE__ */ u("div", { id: "container", style: "width:100%; height: 44px", ref: containRef }) });
   };
   return /* @__PURE__ */ u("div", { children: sessionReady && showGooglePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),

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

@@ -41,7 +41,14 @@ const GuideCard = (props) => {
     [PaymentCategory.PIX]: redirectGuideCard,
     [PaymentCategory.PIC_PAY]: redirectGuideCard,
     [PaymentCategory.OPAY_WALLET]: redirectGuideCard,
-    [PaymentCategory.PAGA_WALLET]: redirectGuideCard
+    [PaymentCategory.PAGA_WALLET]: redirectGuideCard,
+    [PaymentCategory.BANCONTACT]: redirectGuideCard,
+    [PaymentCategory.IDEAL]: redirectGuideCard,
+    [PaymentCategory.BLIK]: redirectGuideCard,
+    [PaymentCategory.OVO]: redirectGuideCard,
+    [PaymentCategory.SKRILL]: redirectGuideCard,
+    [PaymentCategory.TRUSTLY]: redirectGuideCard,
+    [PaymentCategory.P24]: redirectGuideCard
   };
   return /* @__PURE__ */ u(b, { children: guideCardInfoMap[type] && /* @__PURE__ */ u("div", { className: bem(), children: /* @__PURE__ */ u("div", { className: bem("content"), children: [
     /* @__PURE__ */ u("div", { className: bem("icon"), children: (_a = guideCardInfoMap[type]) == null ? void 0 : _a.icon }),

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

@@ -0,0 +1,58 @@
+import { h, y, u } from "../../core.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../utils/format.js";
+import "../../core/context.js";
+import "../../out/worldpay-jsc-origin.js";
+import { Button } from "../internal/Button/Button.js";
+import { IconSafe } from "../internal/icons/IconSafe.js";
+import { LoadingCheck } from "../internal/LoadingCheck/LoadingCheck.js";
+const { bem } = useBEM("payment-button");
+const PaymentButton = (props) => {
+  const {
+    verified = false,
+    status = "unSubmit"
+  } = props;
+  const { i18n } = useI18n();
+  const [text, setText] = h("");
+  const Icon = () => {
+    return status === "unSubmit" ? /* @__PURE__ */ u(IconSafe, { size: 20, disabled: !verified }) : /* @__PURE__ */ u(
+      LoadingCheck,
+      {
+        size: 20,
+        checked: status === "success",
+        onCheckShow: () => setText(i18n.get("common.paySuccess"))
+      }
+    );
+  };
+  y(() => {
+    if (status === "success")
+      return;
+    if (status === "loading") {
+      setText(i18n.get("common.payProcessing"));
+    } else {
+      if (props.children) {
+        setText("");
+      } else {
+        setText(i18n.get("common.pay"));
+      }
+    }
+  }, [status, props.children]);
+  return /* @__PURE__ */ u(
+    Button,
+    {
+      className: normalizedClass(bem({ success: status === "success" }), props.className),
+      style: props.style,
+      icon: Icon(),
+      loading: status === "loading",
+      disabled: (props.disabled || status === "success") && status !== "loading",
+      onClick: props.onClick,
+      children: /* @__PURE__ */ u("span", { className: bem("text", { "not-verified": !verified }), children: text || props.children })
+    }
+  );
+};
+export {
+  PaymentButton
+};

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

@@ -6,12 +6,12 @@ import "../../out/worldpay-jsc-origin.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
 const { bem } = useBEM("recurring-tip");
-function RecurringTip() {
+function RecurringTip(isCard = true) {
   return /* @__PURE__ */ u(CoreContext.Consumer, { children: (value) => {
-    var _a;
+    var _a, _b;
     return /* @__PURE__ */ u("div", { className: bem(), children: [
       /* @__PURE__ */ u("div", { className: bem("icon"), children: IconInfo({ size: 16 }) }),
-      /* @__PURE__ */ u("div", { className: bem("text"), children: (_a = value == null ? void 0 : value.i18n) == null ? void 0 : _a.get("common.recurringTip") })
+      /* @__PURE__ */ u("div", { className: bem("text"), children: isCard ? (_a = value == null ? void 0 : value.i18n) == null ? void 0 : _a.get("common.recurringTip") : (_b = value == null ? void 0 : value.i18n) == null ? void 0 : _b.get("common.recurringTip2") })
     ] });
   } });
 }