@paykka/card-checkout-ui 0.13.8 → 0.13.13

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

@@ -1,7 +1,7 @@
 import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../api/http.js";
+import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";

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

@@ -5,7 +5,7 @@ import "../../utils/system-info/get-browser-info.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../api/http.js";
+import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";

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

@@ -3,7 +3,7 @@ import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../api/http.js";
+import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";

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

@@ -12,7 +12,7 @@ import { trimAll } from "../../utils/format.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../api/http.js";
+import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 const { bem } = useBEM("combined-card-info");
 const CombinedCardInfo = w(

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

@@ -2,7 +2,6 @@ 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 "../../api/http.js";
 import "../../out/worldpay-jsc-origin.js";
 import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, PaymentMethod2CategoryMap } from "../../constant.js";
 import { Card } from "../Card/index.js";

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

@@ -10,7 +10,7 @@ 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 "../../api/http.js";
+import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";

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

@@ -2,14 +2,13 @@ import { setApiUrl, setCDNUrl } from "../../config.js";
 import { CoreContext } from "../../core/context.js";
 import { create } from "../../core/create.js";
 import { w, F, h, A, y, u } from "../../core.js";
-import "../../api/http.js";
 import "../../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
 import "../../out/worldpay-jsc-origin.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import { defaultInputStyleConfig } from "../../types/index.js";
 import { intersection } from "../../utils/index.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { createPromise } from "../../utils/create-promise.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
 import { CardNumberField } from "../CardNumberField/index.js";
@@ -273,15 +272,16 @@ const EncryptedCard = w((props, ref) => {
   };
   const onFieldsFocus = (data) => {
     var _a, _b, _c, _d;
-    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    const fieldType = data.fieldType;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[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");
+      (_b = props.onFocus) == null ? void 0 : _b.call(props, fieldType);
+      updateFieldStyles(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");
+      (_d = props.onBlur) == null ? void 0 : _d.call(props, fieldType);
+      updateFieldStyles(fieldType, "blur");
     }
   };
   const onBinValueChanged = (data) => {
@@ -320,13 +320,14 @@ const EncryptedCard = w((props, ref) => {
   };
   const onFieldValidStatusChanged = (data) => {
     var _a, _b, _c, _d, _e;
-    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    const fieldType = data.fieldType;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[fieldType];
     const error = data.errorTip && i18n.get(data.errorTip);
     (_a = props.onValidationChanged) == null ? void 0 : _a.call(props, {
-      fieldType: data.fieldType,
+      fieldType,
       status: data.status
     });
-    fieldValidStatusMap.current[data.fieldType] = {
+    fieldValidStatusMap.current[fieldType] = {
       status: data.status,
       errorTip: error
     };
@@ -349,7 +350,7 @@ const EncryptedCard = w((props, ref) => {
     } 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);
+      updateFieldStyles(fieldType, type);
     }
   };
   const onFrameActivated = (data) => {

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

@@ -110,6 +110,7 @@ function createGooglePay(checkout, googlePayConfig, pay, onClick, onCanUse) {
         postalCode,
         phoneNumber
       } = ((_b = paymentData.paymentMethodData.info) == null ? void 0 : _b.billingAddress) ?? {};
+      console.warn("GooglePay Res", paymentData.paymentMethodData);
       pay(paymentData.paymentMethodData.tokenizationData.token, {
         email: paymentData.email,
         name,

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

@@ -72,7 +72,7 @@ const GrabPay = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -164,7 +164,9 @@ const GrabPay = w((props, ref) => {
         state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
         city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   const pay = async (search = false, timeout) => {

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

@@ -5,7 +5,7 @@ import { useI18n } from "../../hooks/useI18n.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 "../../api/http.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";

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

@@ -72,7 +72,7 @@ const LinePay = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -164,7 +164,9 @@ const LinePay = w((props, ref) => {
         state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
         city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   const pay = async (search = false, timeout) => {

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

@@ -73,7 +73,7 @@ const MayBankQRPay = w(
     const addressFieldRef = A(null);
     const emailFieldRef = A(null);
     const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-    const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+    const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
     const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
     const formRef = A(null);
     const [form, setForm] = h({
@@ -165,7 +165,9 @@ const MayBankQRPay = w(
           state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
           city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
         },
-        browser: await getBrowserParams()
+        browser: await getBrowserParams({
+          fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+        })
       };
     };
     const pay = async (search = false, timeout) => {

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

@@ -72,7 +72,7 @@ const NinePay = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -164,7 +164,9 @@ const NinePay = w((props, ref) => {
         state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
         city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   const pay = async (search = false, timeout) => {

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

@@ -2,7 +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 "../../api/http.js";
 import "../../out/worldpay-jsc-origin.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
@@ -12,7 +11,7 @@ function RecurringTip() {
     var _a;
     return /* @__PURE__ */ u("div", { className: bem(), children: [
       /* @__PURE__ */ u("div", { className: bem("icon"), children: IconInfo({ size: 16 }) }),
-      /* @__PURE__ */ u("div", { children: (_a = value == null ? void 0 : value.i18n) == null ? void 0 : _a.get("common.recurringTip") })
+      /* @__PURE__ */ u("div", { className: bem("text"), children: (_a = value == null ? void 0 : value.i18n) == null ? void 0 : _a.get("common.recurringTip") })
     ] });
   } });
 }

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

@@ -18,6 +18,10 @@ var EFieldType = /* @__PURE__ */ ((EFieldType2) => {
   EFieldType2["EXPIRE_DATE"] = "EXPIRE_DATE";
   return EFieldType2;
 })(EFieldType || {});
+var EInternalFieldType = /* @__PURE__ */ ((EInternalFieldType2) => {
+  EInternalFieldType2["CPF"] = "CPF";
+  return EInternalFieldType2;
+})(EInternalFieldType || {});
 const SECURED_FILED_ATTR = "data-sf";
 const SECURED_IFRAME_CLASS_NAME = "secured-iframe";
 const HIDDEN_IFRAME_NAME = "hidden-pay-iframe";
@@ -126,7 +130,8 @@ const SecuredFieldsProvider = w((props, ref) => {
   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")
+    [EFieldType.EXPIRE_DATE]: i18n.get("card.cardExpireDate.placeholder"),
+    [EInternalFieldType.CPF]: i18n.get("cpf.placeholder")
   };
   y(() => {
     init();
@@ -174,7 +179,7 @@ const SecuredFieldsProvider = w((props, ref) => {
         fieldType,
         placeholder: securedFieldPlaceholderMap[fieldType],
         style: props.style,
-        supportedCardBrands: props.supportedCardBrands,
+        supportedCardBrands: props.supportedCardBrands || [],
         onFocus: props.onFocus,
         onBinValue: props.onBinValue,
         onAfterPayment: props.onAfterPayment,
@@ -185,12 +190,23 @@ const SecuredFieldsProvider = w((props, ref) => {
       });
     });
   };
+  const isOwnIframe = (source) => {
+    var _a;
+    const isFieldIframe = Object.values(securedFieldMap.current).some(
+      (field) => field.iframe.contentWindow === source
+    );
+    const isHiddenIframe = ((_a = hiddenIframe.current) == null ? void 0 : _a.contentWindow) === source;
+    return isFieldIframe || isHiddenIframe;
+  };
   const onReceiveMessage = q((event) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-    const { data, origin } = event;
+    const { data, origin, source } = event;
     if (origin !== cdnOrigin) {
       return;
     }
+    if (!source || !isOwnIframe(source)) {
+      return;
+    }
     const feedbackData = safeParse(data);
     if (!Reflect.has(feedbackData, "action")) {
       return;
@@ -242,6 +258,7 @@ const SecuredFieldsProvider = w((props, ref) => {
 });
 export {
   EFieldType,
+  EInternalFieldType,
   FIELD_IFRAME_NAME,
   HIDDEN_IFRAME_NAME,
   SECURED_FILED_ATTR,

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

@@ -1,7 +1,8 @@
 import { A, h, y, u, b } from "../../core.js";
 import { clamp, isExpired, safeParse } from "../../utils/index.js";
-import { EFieldType } from "../SecuredFieldsProvider/index.js";
+import { EInternalFieldType, EFieldType } from "../SecuredFieldsProvider/index.js";
 import { formatExpireDateOnInsert, formatExpireDateOnPaste } from "../../utils/expire-data.js";
+import { CNPJ_FULL_LENGTH, formatCPFOnInsert, CPF_FULL_LENGTH } from "../../utils/cpf.js";
 import { getSupportedCardBrands, getSupportedCardBrandsLengths, findCardBrand } from "../../utils/card-brand/index.js";
 import { limitedToNumber, trimAll } from "../../utils/format.js";
 import { isUndefined, isNil } from "../../utils/is.js";
@@ -11,10 +12,12 @@ import { generateClassNameMap, style2String, createPlaceholderStyle, loadStyle }
 import { postMessageToIframe } from "../../utils/iframe.js";
 import { isTimeoutError } from "../../api/http.js";
 import { cardPay } from "../../api/modules/card/index.js";
+import { PaymentMethod } from "../../constant.js";
+import { pixPay } from "../../api/modules/pix/index.js";
+import { picPay } from "../../api/modules/pic-pay/index.js";
 import { encryptCard } from "../../api/modules/encrypted-card/index.js";
 const useSecuredInput = () => {
   let fieldType;
-  let supportedCardBrands;
   const value = A("");
   const [cardBin, setCardBin] = h("");
   let brands;
@@ -22,8 +25,7 @@ const useSecuredInput = () => {
   const [brand, setBrand] = h(void 0);
   const initSecuredInput = (options) => {
     fieldType = options.fieldType;
-    supportedCardBrands = options.supportedCardBrands;
-    brands = getSupportedCardBrands(supportedCardBrands);
+    brands = getSupportedCardBrands(options.supportedCardBrands);
     brandLengths = getSupportedCardBrandsLengths(brands);
   };
   const getConfigByFieldType = () => {
@@ -60,6 +62,15 @@ const useSecuredInput = () => {
         };
         break;
       }
+      case EInternalFieldType.CPF: {
+        config = {
+          maxLength: CNPJ_FULL_LENGTH,
+          inputMode: "numeric",
+          onInput: onInputCPF,
+          validator: cpfValidator
+        };
+        break;
+      }
     }
     return config;
   };
@@ -132,6 +143,12 @@ const useSecuredInput = () => {
       currentTarget.setSelectionRange(selectionStart + 1, selectionStart + 1);
     }
   };
+  const onInputCPF = (event) => {
+    const currentTarget = event.currentTarget;
+    const { value: val, cursorPosition } = formatCPFOnInsert(event);
+    value.current = currentTarget.value = val;
+    currentTarget.setSelectionRange(cursorPosition, cursorPosition);
+  };
   const cvvValidator = () => {
     if (isUndefined(value.current) || value.current.length < 3) {
       throw new Error("card.cardSecurityCode.incomplete");
@@ -156,27 +173,24 @@ const useSecuredInput = () => {
     if (isExpired(value.current)) {
       throw new Error("card.cardExpireDate.expired");
     }
+    return true;
+  };
+  const cpfValidator = () => {
+    if (isUndefined(value.current) || ![CPF_FULL_LENGTH, CNPJ_FULL_LENGTH].includes(value.current.length)) {
+      throw new Error("cpf.incomplete");
+    }
+    return true;
   };
   const getCurrCardBrand = (realValue) => {
     return findCardBrand(realValue, brands);
   };
-  const validate = () => {
-    if (fieldType === EFieldType.CARD_NUMBER) {
-      return cardNumberValidator();
-    } else if (fieldType === EFieldType.CVV) {
-      return cvvValidator();
-    } else if (fieldType === EFieldType.EXPIRE_DATE) {
-      return expireDateValidator();
-    }
-  };
   return {
     value,
     cardBin,
     initSecuredInput,
     getConfigByFieldType,
     getCurrCardBrand,
-    brand,
-    validate
+    brand
   };
 };
 const inputClassNameMap = generateClassNameMap("input");
@@ -190,10 +204,7 @@ const FieldIframe = (props) => {
   const initInput = () => {
     initSecuredInput({
       fieldType: props.fieldType,
-      supportedCardBrands: props.supportedCardBrands,
-      sendMessage: (message) => {
-        postMessageToIframe(message, window.parent);
-      }
+      supportedCardBrands: props.supportedCardBrands
     });
     processInputStyleConfig(props.style);
   };
@@ -405,7 +416,8 @@ const HiddenIframe = ({ checkoutId }) => {
     expYear: "",
     expMonth: "",
     cardNo: "",
-    cvv: ""
+    cvv: "",
+    cpf: void 0
   };
   const onReceiveMessage = async (event) => {
     const { data } = event;
@@ -434,6 +446,10 @@ const HiddenIframe = ({ checkoutId }) => {
           formData.expYear = `20${expYear}`;
           break;
         }
+        case EInternalFieldType.CPF: {
+          formData.cpf = limitedToNumber(trimAll(feedbackData.value));
+          break;
+        }
       }
     } else if (parsedData.action === MessageAction.PAYMENT) {
       const feedbackData = parsedData;
@@ -454,12 +470,24 @@ const HiddenIframe = ({ checkoutId }) => {
     window.addEventListener("message", onReceiveMessage);
   }, []);
   const pay = (params, locale, extraParams) => {
-    cardPay(
+    const paymentMethod = params.payment.paymentMethod;
+    const payMap = {
+      [PaymentMethod.PIX]: pixPay,
+      [PaymentMethod.PIC_PAY]: picPay
+    };
+    const payFn = payMap[paymentMethod] || cardPay;
+    payFn(
       {
         ...params,
         payment: {
           ...params.payment,
-          ...formData
+          cvv: formData.cvv,
+          cardNo: formData.cardNo,
+          expYear: formData.expYear,
+          expMonth: formData.expMonth
+        },
+        customer: {
+          document: formData.cpf
         }
       },
       extraParams,

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

@@ -30,7 +30,7 @@ const Sepa = w((props, ref) => {
   const { session, core } = props;
   const addressCore = core.getAddressCore();
   let emailState = createEmailCore();
-  const { i18n, sessionReady } = usePayState(session, props.core);
+  const { i18n, fraudDetection, sessionReady } = usePayState(session, props.core);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const formRef = A(null);
@@ -178,7 +178,9 @@ const Sepa = w((props, ref) => {
       } : {
         email: form.email
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   async function pay(search = false, timeout) {

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

@@ -72,7 +72,7 @@ const ShopeePay = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -164,7 +164,9 @@ const ShopeePay = w((props, ref) => {
         state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
         city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   const pay = async (search = false, timeout) => {

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

@@ -4,7 +4,7 @@ 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 "../../api/http.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";

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

@@ -72,7 +72,7 @@ const TNGWallet = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -164,7 +164,9 @@ const TNGWallet = w((props, ref) => {
         state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
         city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   const pay = async (search = false, timeout) => {

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

@@ -2,15 +2,14 @@ import { h, A, T, y, u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../../core/context.js";
-import "../../api/http.js";
 import "../../out/worldpay-jsc-origin.js";
 import { Modal } from "../internal/Modal/Modal.js";
 import "../internal/Button/button2.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import { safeParse } from "../../utils/index.js";
 import { cdnOrigin } from "../../config.js";
 import { MessageAction } from "../../types/message.js";
-import { safeParse } from "../../utils/index.js";
 import { useBreakpoints } from "../../hooks/useBreakpoints.js";
 import { Icon3DSInfo } from "../internal/icons/Icon3DSInfo.js";
 import { Button } from "../internal/Button/Button.js";

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

@@ -0,0 +1,18 @@
+import { u } from "../../core.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import "../../core/context.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import "../../out/worldpay-jsc-origin.js";
+import { IconInfo } from "../internal/icons/IconInfo.js";
+const { bem } = useBEM("tip");
+function Tip(props) {
+  const { text, icon, showIcon = true } = props;
+  return /* @__PURE__ */ u("div", { className: bem(), children: [
+    showIcon && /* @__PURE__ */ u("div", { className: bem("icon"), children: icon || IconInfo({ size: 16 }) }),
+    /* @__PURE__ */ u("div", { className: bem("text"), children: text })
+  ] });
+}
+export {
+  Tip
+};

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

@@ -60,7 +60,7 @@ const WechatPay = w((props, ref) => {
       validateForm();
     }
   }));
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({
@@ -165,7 +165,9 @@ const WechatPay = w((props, ref) => {
       payment: {
         paymentMethod: PaymentMethod.WECHAT_PAY
       },
-      browser: await getBrowserParams()
+      browser: await getBrowserParams({
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
+      })
     };
   };
   async function pay(search = false, timeout) {

package/dist/es/components/business/QRCodeModal/QRCodeModal.js

@@ -5,7 +5,7 @@ import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { formatAmount } from "../../../utils/format.js";
 import { formatTime } from "../../../utils/date.js";
-import "../../../api/http.js";
+import "../../../core/context.js";
 import "../../../out/worldpay-jsc-origin.js";
 import { useBreakpoints } from "../../../hooks/useBreakpoints.js";
 import { Modal } from "../../internal/Modal/Modal.js";

package/dist/es/components/business/QRCodeModal/index.js

@@ -2,7 +2,6 @@ import "../../../core.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../core/context.js";
-import "../../../api/http.js";
 import "../../../out/worldpay-jsc-origin.js";
 import "../../internal/Modal/Modal.js";
 import "./qr-code-modal.js";

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

@@ -2,7 +2,6 @@ import "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../../core/context.js";
-import "../../api/http.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Modal/Modal.js";
 import "./QRCodeModal/qr-code-modal.js";

package/dist/es/components/index.js

@@ -6,7 +6,6 @@ import "./CardBrands/index.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import "../core/context.js";
-import "../api/http.js";
 import "../out/worldpay-jsc-origin.js";
 import "./CardExpireDateField/index.js";
 import "./internal/Form/type.js";

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

@@ -4,6 +4,5 @@ import "./accordion2.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../core/context.js";
-import "../../../api/http.js";
 import "../../../out/worldpay-jsc-origin.js";
 import "../../AccordionItem/AccordionItem.js";