@paykka/card-checkout-ui 0.14.0 → 0.15.1

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

@@ -1,9 +1,5 @@
-import { u, w, h, A, F, y, b } from "../../core.js";
-import "../../utils/card-brand/brands.js";
-import "../../utils/system-info/get-browser-info.js";
-import { CoreContext } from "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
-import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, PaymentMethod2CategoryMap } from "../../constant.js";
+import { w, h, A, F, y, u, b } from "../../core.js";
+import { CardPaymentMethods, PaymentMethod, PaymentCategory, PaymentMethod2CategoryMap, SessionMode } from "../../constant.js";
 import { Card } from "../Card/index.js";
 import { ApplePay } from "../ApplePay/index.js";
 import { GooglePay } from "../GooglePay/index.js";
@@ -29,9 +25,14 @@ import { IDeal } from "../wallets/IDeal/IDeal.js";
 import { Skrill } from "../wallets/Skrill/Skrill.js";
 import { P24 } from "../wallets/P24/P24.js";
 import { Trustly } from "../wallets/Trustly/Trustly.js";
+import { AliPay } from "../wallets/AliPay/AliPay.js";
+import { WechatPay } from "../wallets/WechatPay/WechatPay.js";
 import { useBEM } from "../../hooks/useBEM.js";
-import { intersection } from "../../utils/index.js";
+import { CoreContext } from "../../core/context.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
 import { PayKKaError } from "../../core/error.js";
+import "../../out/fraud-detection.js";
 import { createCheckoutChild } from "../../core/create-child.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { Accordion } from "../internal/Accordion/Accordion.js";
@@ -59,11 +60,15 @@ import { IconOvo } from "../internal/icons/IconOvo.js";
 import { IconSkrill } from "../internal/icons/IconSkrill.js";
 import { IconBancontact } from "../internal/icons/IconBancontact.js";
 import { IconIdeal } from "../internal/icons/IconIdeal.js";
-import { removeElementFromArray } from "../../utils/array.js";
+import { IconWechatPayGlobal } from "../internal/icons/IconWechatPayGlobal.js";
+import { IconAlipayPlus } from "../internal/icons/IconAlipayPlus.js";
+import { intersection } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
   PaymentMethod.GOOGLE_PAY,
   PaymentMethod.APPLE_PAY,
+  PaymentMethod.ALI_PAY,
+  PaymentMethod.WECHAT_PAY,
   PaymentMethod.BOOST,
   PaymentMethod.GRAB_PAY,
   PaymentMethod.LINE_PAY,
@@ -112,41 +117,11 @@ const PaymentComponentMap = {
   [PaymentCategory.OVO]: OVO,
   [PaymentCategory.SKRILL]: Skrill,
   [PaymentCategory.TRUSTLY]: Trustly,
-  [PaymentCategory.P24]: P24
-  // [PaymentCategory.WECHAT_PAY]: WechatPay,
-  // [PaymentCategory.ALI_PAY]: AliPay,
+  [PaymentCategory.P24]: P24,
+  [PaymentCategory.WECHAT_PAY]: WechatPay,
+  [PaymentCategory.ALI_PAY]: AliPay
   // [PaymentCategory.SEPA_DEBIT]: Sepa
 };
-const { bem: bem$1 } = useBEM("payment-tabs");
-const PaymentTabs = (props) => {
-  const { value, tabs, themeColor = "#4F43DF" } = props;
-  const handleClickTab = (tab) => {
-    var _a;
-    if (tab.type === value) {
-      return;
-    }
-    (_a = props.onChange) == null ? void 0 : _a.call(props, tab.type);
-  };
-  return /* @__PURE__ */ u("div", { className: bem$1(), children: tabs.map((tab) => /* @__PURE__ */ u(
-    "div",
-    {
-      className: bem$1("tab"),
-      style: tab.type === value ? { borderColor: themeColor } : "",
-      onClick: () => handleClickTab(tab),
-      children: [
-        tab.icon,
-        /* @__PURE__ */ u(
-          "div",
-          {
-            className: bem$1("name"),
-            style: tab.type === value ? { color: themeColor } : "",
-            children: tab.name
-          }
-        )
-      ]
-    }
-  )) });
-};
 const paymentCategoryOptionMap = {
   [PaymentCategory.CARD]: {
     icon: IconCard2,
@@ -239,25 +214,94 @@ const paymentCategoryOptionMap = {
   [PaymentCategory.P24]: {
     icon: IconP24,
     nameKey: "dropIn.p24.label"
+  },
+  [PaymentCategory.ALI_PAY]: {
+    icon: IconAlipayPlus,
+    nameKey: "dropIn.aliPay.label"
+  },
+  [PaymentCategory.WECHAT_PAY]: {
+    icon: IconWechatPayGlobal,
+    nameKey: "dropIn.wechatPay.label"
+  }
+};
+const HEADER_CATEGORIES = [
+  PaymentCategory.APPLE_PAY,
+  PaymentCategory.GOOGLE_PAY
+];
+const toDropInCategories = (methods) => {
+  const categories = [];
+  const added = /* @__PURE__ */ new Set();
+  const add = (category) => {
+    if (added.has(category))
+      return;
+    added.add(category);
+    categories.push(category);
+  };
+  const cpy = [...methods];
+  if (intersection(cpy, CardPaymentMethods).length) {
+    add(PaymentCategory.CARD);
+    CardPaymentMethods.forEach((m) => {
+      const i = cpy.indexOf(m);
+      if (i > -1)
+        cpy.splice(i, 1);
+    });
   }
+  cpy.forEach((method) => {
+    const category = PaymentMethod2CategoryMap[method];
+    category && add(category);
+  });
+  return categories;
+};
+const sortByOrder = (items, order = []) => {
+  const orderIndex = new Map(order.map((item, index) => [item, index]));
+  return [...items].sort((a, b2) => {
+    const ai = orderIndex.get(a);
+    const bi = orderIndex.get(b2);
+    if (ai !== void 0 && bi !== void 0)
+      return ai - bi;
+    if (ai !== void 0)
+      return -1;
+    if (bi !== void 0)
+      return 1;
+    return items.indexOf(a) - items.indexOf(b2);
+  });
+};
+const resolveDropInDisplayCategories = (options) => {
+  const { supportMethods, layout } = options;
+  const enabledMethods = intersection(supportMethods, dropInSupportedPaymentMethods);
+  const defaultCategories = toDropInCategories(enabledMethods);
+  const hidden = new Set((layout == null ? void 0 : layout.hidden) ?? []);
+  const visible = defaultCategories.filter((c) => !hidden.has(c));
+  return sortByOrder(visible, layout == null ? void 0 : layout.order);
+};
+const splitHeaderAndMain = (categories) => {
+  const header = [];
+  const main = [];
+  categories.forEach((category) => {
+    if (HEADER_CATEGORIES.includes(category)) {
+      header.push(category);
+    } else {
+      main.push(category);
+    }
+  });
+  return { header, main };
 };
 const { bem } = useBEM("drop-in");
 const DropIn = w((props, ref) => {
   var _a;
   const {
     paymentMethods: paymentMethodsConfig,
-    layout = "accordion",
+    // layout = 'accordion',
     session,
     core,
-    enableAccordionTransition = true
+    enableAccordionTransition = true,
+    paymentMethodLayout
   } = props;
   const { i18n, sessionReady } = usePayState(session, props.core);
   const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
   const [activePaymentCategory, setActivePaymentCategory] = h();
   const [enablePaymentMethod, setEnablePaymentMethod] = h();
-  const [headerPaymentCategories, setHeaderPaymentCategories] = h(
-    []
-  );
+  const [headerPaymentCategories, setHeaderPaymentCategories] = h([]);
   const [paymentCategories, setPaymentCategories] = h([]);
   const componentMountRefMap = A({});
   const componentInstMap = A({});
@@ -272,9 +316,8 @@ const DropIn = w((props, ref) => {
   }));
   y(() => {
     var _a2, _b;
-    if (!activePaymentCategory) {
+    if (!activePaymentCategory)
       return;
-    }
     const currCompInst = componentInstMap.current[activePaymentCategory];
     if (currCompInst) {
       const ref2 = currCompInst.ref;
@@ -290,10 +333,9 @@ const DropIn = w((props, ref) => {
     }
   }, [paymentCategories]);
   y(() => {
-    if (headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) {
-      renderComponent(PaymentCategory.APPLE_PAY);
-      renderComponent(PaymentCategory.GOOGLE_PAY);
-    }
+    headerPaymentCategories == null ? void 0 : headerPaymentCategories.forEach((category) => {
+      renderComponent(category);
+    });
   }, [headerPaymentCategories]);
   const createComponent = (category) => {
     const { onError, onSuccess, onTimeout, onExpired, onSubmit, onAuthorized, onSubmitResponse } = props;
@@ -323,62 +365,31 @@ const DropIn = w((props, ref) => {
       componentInstMap.current[category] = inst;
     }
   };
-  const initPaymentCategories = (enablePaymentMethods) => {
-    const cpyEnablePaymentMethods = [...enablePaymentMethods];
-    const paymentCategoryOptions2 = [];
-    const paymentCategories2 = [];
-    const headerPaymentCategories2 = [];
-    if (cpyEnablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
-      headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
-      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.APPLE_PAY);
-    }
-    if (cpyEnablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
-      headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
-      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.GOOGLE_PAY);
-    }
-    const isCardEnable = !!intersection(cpyEnablePaymentMethods, CardPaymentMethods).length;
-    if (isCardEnable) {
-      paymentCategories2.push(PaymentCategory.CARD);
-      paymentCategoryOptions2.push({
-        type: PaymentCategory.CARD,
-        icon: () => {
-          const Icon = paymentCategoryOptionMap[PaymentCategory.CARD].icon;
-          return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
-        },
-        name: i18n.get(paymentCategoryOptionMap[PaymentCategory.CARD].nameKey)
-      });
-    }
-    cpyEnablePaymentMethods.forEach((method) => {
-      if (cpyEnablePaymentMethods.includes(method)) {
-        const type = PaymentMethod2CategoryMap[method];
-        if (type) {
-          paymentCategories2.push(type);
-          paymentCategoryOptions2.push({
-            type,
-            icon: () => {
-              const Icon = paymentCategoryOptionMap[type].icon;
-              return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
-            },
-            name: i18n.get(paymentCategoryOptionMap[type].nameKey)
-          });
-        }
-      }
-    });
-    if (paymentCategoryOptions2.length) {
-      setPaymentCategoryOptions(paymentCategoryOptions2);
+  const initPaymentCategories = (displayCategories) => {
+    const { header, main } = splitHeaderAndMain(displayCategories);
+    const paymentCategoryOptions2 = main.map((category) => ({
+      type: category,
+      icon: () => {
+        const Icon = paymentCategoryOptionMap[category].icon;
+        const iconHeight = 24;
+        return Icon ? /* @__PURE__ */ u(Icon, { size: category === PaymentCategory.ALI_PAY ? 20 : iconHeight }) : null;
+      },
+      name: i18n.get(paymentCategoryOptionMap[category].nameKey)
+    }));
+    if (paymentCategoryOptions2.length === 1) {
       setActivePaymentCategory(paymentCategoryOptions2[0].type);
     }
-    setHeaderPaymentCategories(headerPaymentCategories2);
-    setPaymentCategories(paymentCategories2);
+    setPaymentCategoryOptions(paymentCategoryOptions2);
+    setHeaderPaymentCategories(header);
+    setPaymentCategories(main);
   };
   const handlePaymentCategoryChange = (newPaymentCategory) => {
     setActivePaymentCategory(newPaymentCategory);
   };
   y(() => {
     var _a2, _b, _c, _d;
-    if (!sessionReady || !i18n.ready.value) {
+    if (!sessionReady || !i18n.ready.value)
       return;
-    }
     if (((_a2 = session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.COMPONENT) {
       (_c = (_b = props.core.config).onInitError) == null ? void 0 : _c.call(
         _b,
@@ -387,14 +398,13 @@ const DropIn = w((props, ref) => {
       return;
     }
     const { supportMethods = [] } = (session == null ? void 0 : session.checkout) || {};
-    const enablePaymentMethods = intersection(
+    const displayCategories = resolveDropInDisplayCategories({
       supportMethods,
-      dropInSupportedPaymentMethods
-    );
-    if (!enablePaymentMethods.length) {
+      layout: paymentMethodLayout
+    });
+    if (!displayCategories.length)
       return;
-    }
-    initPaymentCategories(enablePaymentMethods);
+    initPaymentCategories(displayCategories);
     const currPaymentMethod = (_d = core.payment) == null ? void 0 : _d.currPaymentMethod.value;
     if (currPaymentMethod) {
       const category = PaymentMethod2CategoryMap[currPaymentMethod];
@@ -431,7 +441,7 @@ const DropIn = w((props, ref) => {
     HeaderField(),
     !!paymentCategoryOptions.length && /* @__PURE__ */ u(b, { children: [
       OtherLine(),
-      layout === "accordion" ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
+      /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
         Accordion,
         {
           value: activePaymentCategory,
@@ -454,23 +464,7 @@ const DropIn = w((props, ref) => {
             }
           ))
         }
-      ) }) }) : /* @__PURE__ */ u(b, { children: [
-        /* @__PURE__ */ u("div", { className: bem("tabs-wrapper"), children: /* @__PURE__ */ u(
-          PaymentTabs,
-          {
-            value: activePaymentCategory,
-            tabs: paymentCategoryOptions,
-            onChange: (item) => handlePaymentCategoryChange(item)
-          }
-        ) }),
-        paymentCategories == null ? void 0 : paymentCategories.map((category) => /* @__PURE__ */ u(
-          "div",
-          {
-            style: { display: category === activePaymentCategory ? "block" : "none" },
-            ref: (el) => componentMountRefMap.current[category] = el
-          }
-        ))
-      ] })
+      ) })
     ] })
   ] }) });
 });

package/dist/es/components/EmailField/EmailField.js

@@ -10,8 +10,8 @@ import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { EMAIL_REG } from "../../utils/reg-exp.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -4,13 +4,15 @@ import { create } from "../../core/create.js";
 import { w, F, h, A, y, u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
-import "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import { intersection } from "../../utils/index.js";
-import { defaultInputStyleConfig } from "../../types/index.js";
 import { createPromise } from "../../utils/create-promise.js";
+import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
+import { intersection } from "../../utils/array.js";
+import { genShortId } from "../../utils/string.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { CardNumberField } from "../CardNumberField/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
 import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
@@ -22,8 +24,6 @@ import "../internal/Form/Form.js";
 import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
 import "../internal/Input/Input.js";
 import { inputWrapperClassName } from "../internal/Input/type.js";
-import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
-import { genShortId } from "../../utils/string.js";
 const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
 const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
 var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {

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

@@ -4,25 +4,24 @@ import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { GooglePayEventType } from "../../types/event.js";
+import { createUrlWithParams } from "../../utils/location.js";
+import { PaymentMethod, SessionMode } from "../../constant.js";
 import { deepMerge } from "../../utils/object.js";
 import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
-import { getBrowserParams } from "../../api/modules/get-browser-params.js";
-import { PaymentMethod, SessionMode } from "../../constant.js";
+import { buildPaymentParams } from "../../api/utils/index.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
+import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.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";
 const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse, onCancel) => {
-  const {
-    transAmount,
-    theme: { merchantName }
-  } = checkout;
+  const { theme: { merchantName } } = checkout;
   const { googlePay: googlePay2 } = (checkout == null ? void 0 : checkout.channelParams) || {};
   let paymentsClient;
   const baseRequest = {
@@ -61,11 +60,12 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
     baseCardPaymentMethod
   );
   const getGoogleTransactionInfo = () => {
+    var _a, _b, _c, _d;
     return {
       countryCode: googlePay2 == null ? void 0 : googlePay2.countryCode,
-      currencyCode: transAmount.currency,
+      currencyCode: ((_b = (_a = core.payment) == null ? void 0 : _a.amount.value) == null ? void 0 : _b.currency) || "",
       totalPriceStatus: "FINAL",
-      totalPrice: String(transAmount.amount),
+      totalPrice: String(((_d = (_c = core.payment) == null ? void 0 : _c.amount.value) == null ? void 0 : _d.amount) || 0),
       totalPriceLabel: "Total"
     };
   };
@@ -136,6 +136,7 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
         (_b = (_a = core.config).onEvent) == null ? void 0 : _b.call(_a, GooglePayEventType.GOOGLE_PAY_CAN_NOT_USE);
       }
     } catch (err) {
+      onCanUse == null ? void 0 : onCanUse(false);
       console.error(err);
       (_c = core.logger) == null ? void 0 : _c.reportErrorEvent(new PayKKaError(
         "ERROR",
@@ -155,7 +156,9 @@ const createGooglePay = (core, checkout, googlePayConfig, pay, onClick, onCanUse
   };
   const onGooglePaymentButtonClicked = async () => {
     var _a, _b, _c;
-    onClick == null ? void 0 : onClick();
+    const clickResult = await (onClick == null ? void 0 : onClick());
+    if (clickResult === false)
+      return;
     const paymentDataRequest = getGooglePaymentDataRequest();
     paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
     const paymentsClient2 = getGooglePaymentsClient();
@@ -208,7 +211,7 @@ const DEFAULT_GOOGLE_PAY_CONFIG = {
 };
 const GooglePay = w((props, ref) => {
   var _a;
-  const { session, threeDSFrame, isDropIn, core } = props;
+  const { session, threeDSFrame, isDropIn, core, enable3DSModal = true } = props;
   const googlePayConfig = deepMerge(DEFAULT_GOOGLE_PAY_CONFIG, props.config || {});
   F(ref, () => ({
     checkThreeDS
@@ -218,7 +221,6 @@ const GooglePay = w((props, ref) => {
   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
@@ -270,23 +272,23 @@ const GooglePay = w((props, ref) => {
         (_c = props.onLoad) == null ? void 0 : _c.call(props, false);
       }
     );
-    setHosted(sessionMode === SessionMode.HOSTED);
     if (status === "SUCCESS") {
       processOnSuccess(session == null ? void 0 : session.checkout);
     }
   }, [sessionReady]);
   const processThreeDS = (threeDSUrl, incomplete) => {
     var _a2;
-    if (hosted) {
-      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, threeDSUrl, incomplete);
-    } else {
+    const finalUrl = createUrlWithParams(threeDSUrl, { locale: i18n.locale });
+    if (enable3DSModal) {
       setShowThreeDSModal(true);
       setThreeDSInfo({
-        url: threeDSUrl,
+        url: finalUrl,
         incomplete,
         width: threeDSFrame == null ? void 0 : threeDSFrame.modalWidth,
         height: threeDSFrame == null ? void 0 : threeDSFrame.modalHeight
       });
+    } else {
+      (_a2 = props.onThreeDS) == null ? void 0 : _a2.call(props, finalUrl, incomplete);
     }
   };
   const handleCloseThreeDSModal = () => {
@@ -314,7 +316,7 @@ const GooglePay = w((props, ref) => {
       bill: {
         firstName: billAddress == null ? void 0 : billAddress.name,
         addressLine1: billAddress == null ? void 0 : billAddress.address1,
-        addressLine2: (billAddress == null ? void 0 : billAddress.address2) ?? "" + (billAddress == null ? void 0 : billAddress.address3) ?? "",
+        addressLine2: ((billAddress == null ? void 0 : billAddress.address2) ?? "") + ((billAddress == null ? void 0 : billAddress.address3) ?? ""),
         country: billAddress == null ? void 0 : billAddress.countryCode,
         state: billAddress == null ? void 0 : billAddress.administrativeArea,
         city: billAddress == null ? void 0 : billAddress.locality,
@@ -329,7 +331,7 @@ const GooglePay = w((props, ref) => {
     };
   };
   async function pay(token, billAddress, search = false, timeout) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     setErrorMsg("");
     if (!search) {
       (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, void 0, getPaymentMethodContext());
@@ -350,17 +352,18 @@ const GooglePay = w((props, ref) => {
           requestOptions
         );
       } else {
+        const paymentParams = await getPaymentParams(token, billAddress);
         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
-        );
+        if ((_f = core.config._checkoutConfig) == null ? void 0 : _f.dynamicSessionId) {
+          await core.updateSessionId(buildPaymentParams(paymentParams, extraParams));
+          session.sessionId && (paymentParams.sessionId = session.sessionId);
+        }
+        res = await googlePay(paymentParams, extraParams, requestOptions);
       }
       const { errorMessage, payInfo = {}, errorCode, sessionId } = res;
       const { threeDSUrl } = payInfo;
       sessionId && (session.sessionId = sessionId);
-      !search && ((_f = props.onSubmitResponse) == null ? void 0 : _f.call(props, res, getPaymentMethodContext()));
+      !search && ((_g = props.onSubmitResponse) == null ? void 0 : _g.call(props, res, getPaymentMethodContext()));
       let result = {
         end: true,
         res: { transactionState: "SUCCESS" }
@@ -441,10 +444,10 @@ const GooglePay = w((props, ref) => {
           };
         }
       } else {
-        (_g = core.payment) == null ? void 0 : _g.resetCurrPaymentMethod();
+        (_h = core.payment) == null ? void 0 : _h.resetCurrPaymentMethod();
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_h = props.onError) == null ? void 0 : _h.call(
+        (_i = props.onError) == null ? void 0 : _i.call(
           props,
           new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
           getPaymentMethodContext()
@@ -558,10 +561,10 @@ const GooglePay = w((props, ref) => {
         session == null ? void 0 : session.checkout,
         googlePayConfig,
         pay,
-        () => {
+        async () => {
           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);
+          return (_c = props.onBtnClick) == null ? void 0 : _c.call(props);
         },
         props.onCanUse,
         props.onCancel

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

@@ -2,11 +2,11 @@ import { u, b } from "../../core.js";
 import { PaymentCategory } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { isMobile } from "../../utils/system-info/get-system-info.js";
 import "../../core/context.js";
-import "../../out/worldpay-jsc-origin.js";
 import { IconRedirect } from "../internal/icons/IconRedirect.js";
 import { IconScan } from "../internal/icons/IconScan.js";
 const { bem } = useBEM("guide-card");
@@ -26,7 +26,7 @@ const GuideCard = (props) => {
   };
   const guideCardInfoMap = {
     [PaymentCategory.ALI_PAY]: redirectGuideCard,
-    [PaymentCategory.WECHAT_PAY]: redirectGuideCard,
+    [PaymentCategory.WECHAT_PAY]: getQRCodeGuideCard(i18n.get("common.wechatPayGlobal")),
     [PaymentCategory.BOOST]: redirectGuideCard,
     [PaymentCategory.GRAB_PAY]: redirectGuideCard,
     [PaymentCategory.LINE_PAY]: redirectGuideCard,

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

@@ -1,22 +1,37 @@
-import { h, y, u } from "../../core.js";
+import { h, x, T, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../out/fraud-detection.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 { formatAmount, normalizedClass } from "../../utils/format.js";
+import { CoreContext } from "../../core/context.js";
+import { Button } from "../internal/Button/Button2.js";
 import { IconSafe } from "../internal/icons/IconSafe.js";
 import { LoadingCheck } from "../internal/LoadingCheck/LoadingCheck.js";
 const { bem } = useBEM("payment-button");
 const PaymentButton = (props) => {
+  var _a;
   const {
     verified = false,
     status = "unSubmit"
   } = props;
   const { i18n } = useI18n();
   const [text, setText] = h("");
+  const coreContext = x(CoreContext);
+  const core = coreContext == null ? void 0 : coreContext.core;
+  const payAmountText = T(() => {
+    var _a2, _b, _c, _d, _e;
+    const amount = (_a2 = core == null ? void 0 : core.payment) == null ? void 0 : _a2.amount.value;
+    const amountNumber = props.amount ?? ((_c = (_b = core == null ? void 0 : core.payment) == null ? void 0 : _b.amount.value) == null ? void 0 : _c.amount);
+    const transAmount = {
+      ...(_e = (_d = core == null ? void 0 : core.session) == null ? void 0 : _d.checkout) == null ? void 0 : _e.transAmount,
+      ...amount,
+      amount: amountNumber
+    };
+    const amountText = amountNumber ? formatAmount(transAmount).jointSymbol() : "";
+    return i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
+  }, [props.amount, (_a = core == null ? void 0 : core.payment) == null ? void 0 : _a.amount.value]);
   const Icon = () => {
     return status === "unSubmit" ? /* @__PURE__ */ u(IconSafe, { size: 20, disabled: !verified }) : /* @__PURE__ */ u(
       LoadingCheck,
@@ -36,10 +51,10 @@ const PaymentButton = (props) => {
       if (props.children) {
         setText("");
       } else {
-        setText(i18n.get("common.pay"));
+        setText(payAmountText);
       }
     }
-  }, [status, props.children]);
+  }, [status, props.children, payAmountText]);
   return /* @__PURE__ */ u(
     Button,
     {

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

@@ -2,7 +2,7 @@ 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 "../../out/worldpay-jsc-origin.js";
+import "../../out/fraud-detection.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
 const { bem } = useBEM("recurring-tip");