@paykka/card-checkout-ui 0.13.8 → 0.13.13

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

@@ -1,8 +1,9 @@
-import { w, h, y, q, u, b } from "../../core.js";
+import { A, w, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { parseE164, underscoreToUpperCamelCase } from "../../utils/format.js";
+import { PaymentStatus } from "../../types/index.js";
 import { deepMerge } from "../../utils/object.js";
 import { formatPaymentResult } from "../../utils/payment.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
@@ -11,40 +12,12 @@ import { getApplePayInfo, applePay, getMerchantSession } from "../../api/modules
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
+import { ApplePayEventType } from "../../types/event.js";
 import "../../out/worldpay-jsc-origin.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";
-const loadApplePayJS = (onload, onerror) => {
-  loadScript({
-    src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js",
-    onload,
-    onerror,
-    extraOptions: {
-      async: true,
-      crossOrigin: ""
-    }
-  });
-};
-async function applePayEnv(id) {
-  var _a, _b;
-  if (!id || !ApplePaySession)
-    return false;
-  if (!((_a = ApplePaySession.canMakePayments) == null ? void 0 : _a.call(ApplePaySession))) {
-    return false;
-  }
-  const capabilities = await ((_b = ApplePaySession.applePayCapabilities) == null ? void 0 : _b.call(ApplePaySession, id));
-  if ([
-    "paymentCredentialsAvailable",
-    "paymentCredentialStatusUnknown",
-    "paymentCredentialsUnavailable"
-  ].includes(capabilities.paymentCredentialStatus)) {
-    return true;
-  }
-  return false;
-}
-const { bem } = useBEM("apple-pay");
 const DEFAULT_APPLE_PAY_CONFIG = {
   request: {
     requiredBillingContactFields: ["name", "email"],
@@ -55,32 +28,116 @@ const DEFAULT_APPLE_PAY_CONFIG = {
     buttonType: "plain"
   }
 };
+const APPLE_SDK_URL = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
+const APPLE_PAY_CAPABILITIES = [
+  /** 付款凭证可用 */
+  "paymentCredentialsAvailable",
+  /** 付款凭证状态未知 */
+  "paymentCredentialStatusUnknown",
+  /** 付款凭证不可用 */
+  "paymentCredentialsUnavailable"
+];
+const APPLE_PAY_VERSION = 3;
+const isApplePaySDKAvailable = () => {
+  const ua = navigator.userAgent;
+  if (/Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR|Android/.test(ua)) {
+    const match = ua.match(/Version\/(\d+\.\d+)/);
+    if (match) {
+      const version = parseFloat(match[1]);
+      return version >= 15;
+    }
+    return false;
+  }
+  if (/iPhone|iPad|iPod/.test(ua)) {
+    const iosMatch = ua.match(/OS (\d+)_(\d+)/);
+    if (iosMatch) {
+      const major = parseInt(iosMatch[1], 10);
+      return major >= 15;
+    }
+    return false;
+  }
+  return true;
+};
+const loadApplePayJS = (onload, onerror) => {
+  if (isApplePaySDKAvailable()) {
+    loadScript({
+      src: APPLE_SDK_URL,
+      onload,
+      onerror,
+      extraOptions: {
+        async: true,
+        crossOrigin: ""
+      }
+    });
+  } else {
+    onload == null ? void 0 : onload();
+  }
+};
+const getApplePayEnvSupported = async (id) => {
+  var _a, _b;
+  if (!id || !window.ApplePaySession)
+    return false;
+  if (!((_a = ApplePaySession.canMakePayments) == null ? void 0 : _a.call(ApplePaySession))) {
+    return false;
+  }
+  if (ApplePaySession.applePayCapabilities) {
+    const capabilities = await ((_b = ApplePaySession.applePayCapabilities) == null ? void 0 : _b.call(ApplePaySession, id));
+    return APPLE_PAY_CAPABILITIES.includes(capabilities.paymentCredentialStatus);
+  } else {
+    return !!ApplePaySession.canMakePaymentsWithActiveCard;
+  }
+};
+const useApplePaySession = () => {
+  const applePaySession = A(null);
+  const initApplePaySession = (options) => {
+    applePaySession.current = new ApplePaySession(APPLE_PAY_VERSION, options.request);
+    applePaySession.current.onvalidatemerchant = options.onValidate;
+    applePaySession.current.onpaymentauthorized = options.onAuthorized;
+    applePaySession.current.oncancel = options.onCancel;
+  };
+  const reportSuccess2ApplePay = () => {
+    var _a;
+    (_a = applePaySession.current) == null ? void 0 : _a.completePayment({ status: ApplePaySession.STATUS_SUCCESS ?? 0 });
+  };
+  const reportFailure2ApplePay = (errorMessage) => {
+    var _a;
+    (_a = applePaySession.current) == null ? void 0 : _a.completePayment({
+      status: ApplePaySession.STATUS_FAILURE ?? 1,
+      errors: [new ApplePayError("unknown", void 0, errorMessage)]
+    });
+  };
+  return {
+    applePaySession,
+    initApplePaySession,
+    reportSuccess2ApplePay,
+    reportFailure2ApplePay
+  };
+};
+const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
   const { session, isDropIn, core, config } = props;
-  let applePaySession;
+  const { applePaySession, initApplePaySession, reportSuccess2ApplePay, reportFailure2ApplePay } = useApplePaySession();
   const { i18n, sessionReady, fraudDetection } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showApplePay, setShowApplePay] = h(false);
   const applePayConfig = deepMerge(DEFAULT_APPLE_PAY_CONFIG, config || {});
+  const canUseApplePaySDK = isApplePaySDKAvailable();
   const processOnSuccess = (res) => {
     var _a, _b;
-    (_b = props.onSuccess) == null ? void 0 : _b.call(
-      props,
-      formatPaymentResult({
-        ...res,
-        returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
-      })
-    );
+    const result = formatPaymentResult({
+      ...res,
+      returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
+    });
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, result);
   };
   y(() => {
-    var _a, _b;
     if (!sessionReady) {
       return;
     }
-    const { status, supportMethods = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    const { supportMethods = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    const { onEvent, onInitError } = props.core.config;
     if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
-      (_b = (_a = props.core.config).onInitError) == null ? void 0 : _b.call(
-        _a,
+      onInitError == null ? void 0 : onInitError(
         new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
@@ -90,32 +147,30 @@ const ApplePay = w((props) => {
     }
     loadApplePayJS(
       async () => {
-        var _a2, _b2, _c, _d, _e;
-        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, true);
-        const envSupported = await applePayEnv(
-          (_d = (_c = (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.channelParams) == null ? void 0 : _c.applePay) == null ? void 0 : _d.merchantIdentifier
+        var _a, _b, _c, _d, _e;
+        (_a = props.onLoad) == null ? void 0 : _a.call(props, true);
+        const envSupported = await getApplePayEnvSupported(
+          (_d = (_c = (_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.channelParams) == null ? void 0 : _c.applePay) == null ? void 0 : _d.merchantIdentifier
         );
+        if (!envSupported) {
+          onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_CAN_NOT_USE);
+        }
         (_e = props.onCanUse) == null ? void 0 : _e.call(props, envSupported);
         setShowApplePay(envSupported);
       },
       () => {
-        var _a2;
+        var _a;
+        onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_LOAD_ERROR);
+        (_a = props.onLoad) == null ? void 0 : _a.call(props, false);
         setShowApplePay(false);
-        (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, false);
       }
     );
-    if (status === "SUCCESS") {
-      processOnSuccess(session == null ? void 0 : session.checkout);
-    }
   }, [sessionReady]);
   const onTimeout = q(
     (message) => {
       var _a;
       const timeoutMessage = message || i18n.get("common.payTimeout");
-      applePaySession.completePayment({
-        status: 1,
-        errors: [new ApplePayError("unknown", void 0, timeoutMessage)]
-      });
+      reportFailure2ApplePay(timeoutMessage);
       setErrorMsg(timeoutMessage);
       (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry");
     },
@@ -131,8 +186,8 @@ const ApplePay = w((props) => {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
       bill: {
-        firstName: billingContact == null ? void 0 : billingContact.familyName,
-        lastName: billingContact == null ? void 0 : billingContact.givenName,
+        firstName: billingContact == null ? void 0 : billingContact.givenName,
+        lastName: billingContact == null ? void 0 : billingContact.familyName,
         addressLine1: (_a = billingContact == null ? void 0 : billingContact.addressLines) == null ? void 0 : _a[0],
         addressLine2: (_b = billingContact == null ? void 0 : billingContact.addressLines) == null ? void 0 : _b[1],
         state: billingContact == null ? void 0 : billingContact.administrativeArea,
@@ -153,7 +208,7 @@ const ApplePay = w((props) => {
     };
   };
   async function pay(search = false, timeout, token, billingContact, shippingContact) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     setErrorMsg("");
     try {
       const requestOptions = { locale: i18n.locale, timeout };
@@ -179,44 +234,39 @@ const ApplePay = w((props) => {
       }
       const { status, orderStatus, errorMessage, errorCode, sessionId } = res;
       sessionId && (session.sessionId = sessionId);
-      if (status === "PROCESSING") {
-        if (orderStatus === "SUCCESS") {
-          applePaySession.completePayment({ status: 0 });
+      if (status === PaymentStatus.PROCESSING) {
+        if (orderStatus === PaymentStatus.SUCCESS) {
+          reportSuccess2ApplePay();
           processOnSuccess(res);
           return { end: true };
-        } else if (orderStatus === "PROCESSING") {
+        } else if (orderStatus === PaymentStatus.PROCESSING) {
           !search && await startReFetchPayInfo();
           return { end: !search };
-        } else if (orderStatus === "FAILURE") {
+        } else if (orderStatus === PaymentStatus.FAILURE) {
           errorMessage && setErrorMsg(errorMessage);
           (_e = props.onError) == null ? void 0 : _e.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-          applePaySession.completePayment({
-            status: 1,
-            errors: [new ApplePayError("unknown", void 0, errorMessage)]
-          });
+          reportFailure2ApplePay(errorMessage);
           return { end: true };
-        } else if (orderStatus === "AUTHORIZED") {
-          applePaySession.completePayment({ status: 0 });
+        } else if (orderStatus === PaymentStatus.AUTHORIZED) {
+          reportSuccess2ApplePay();
           (_f = props.onAuthorized) == null ? void 0 : _f.call(props);
           return { end: true };
-        } else if (!orderStatus) {
-          applePaySession.completePayment({
-            status: 1,
-            errors: [new ApplePayError("unknown", void 0, "")]
-          });
+        } else {
+          reportFailure2ApplePay();
           return { end: true };
         }
-      } else if (status === "SUCCESS") {
+      } else if (status === PaymentStatus.SUCCESS) {
+        reportSuccess2ApplePay();
         processOnSuccess(res);
-        applePaySession.completePayment({ status: 0 });
         return { end: true };
-      } else if (status === "EXPIRED") {
+      } else if (status === PaymentStatus.EXPIRED) {
         (_g = props.onExpired) == null ? void 0 : _g.call(props);
-        applePaySession.abort();
+        (_h = applePaySession.current) == null ? void 0 : _h.abort();
+        return { end: true };
+      } else {
+        reportFailure2ApplePay();
         return { end: true };
       }
-      processOnSuccess(res);
-      return { end: true };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -228,88 +278,104 @@ const ApplePay = w((props) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         message && setErrorMsg(message);
-        (_h = props.onError) == null ? void 0 : _h.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
-        applePaySession.completePayment({
-          status: 1,
-          errors: [new ApplePayError("unknown", void 0, message)]
-        });
+        (_i = props.onError) == null ? void 0 : _i.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        reportFailure2ApplePay(message);
         return { end: true };
       }
     }
   }
-  function onApplePayButtonClicked() {
-    var _a, _b, _c, _d, _e, _f;
-    (_a = props.onBtnClick) == null ? void 0 : _a.call(props);
-    if (!ApplePaySession) {
-      return;
-    }
+  const genApplePayRequest = () => {
+    var _a, _b, _c, _d, _e;
     const checkout = session == null ? void 0 : session.checkout;
     const { applePay: applePay2 } = (checkout == null ? void 0 : checkout.channelParams) ?? {};
-    const requiredBillingContactFields = ((_b = applePayConfig.request) == null ? void 0 : _b.requiredBillingContactFields) || [];
-    if (((_c = checkout == null ? void 0 : checkout.bill) == null ? void 0 : _c.billingAddressCollection) === "REQUIRED") {
+    const requiredBillingContactFields = [
+      ...((_a = applePayConfig.request) == null ? void 0 : _a.requiredBillingContactFields) || []
+    ];
+    if (((_b = checkout == null ? void 0 : checkout.bill) == null ? void 0 : _b.billingAddressCollection) === "REQUIRED") {
       requiredBillingContactFields.push("postalAddress");
     }
-    const request = {
+    return {
       merchantCapabilities: ["supports3DS"],
-      // 固定
       countryCode: (applePay2 == null ? void 0 : applePay2.countryCode) ?? "",
-      // 接口取：会员注册地址
       requiredBillingContactFields,
-      // 接口取：required:  "name", "postalAddress", "email"； 否则： "name", "email"
-      requiredShippingContactFields: (_d = applePayConfig.request) == null ? void 0 : _d.requiredShippingContactFields,
+      requiredShippingContactFields: (_c = applePayConfig.request) == null ? void 0 : _c.requiredShippingContactFields,
       currencyCode: (checkout == null ? void 0 : checkout.transAmount.currency) ?? "",
-      // 接口取
-      supportedNetworks: ((_f = (_e = applePay2 == null ? void 0 : applePay2.supportedNetworks) == null ? void 0 : _e.map) == null ? void 0 : _f.call(_e, (item) => underscoreToUpperCamelCase(item))) ?? [],
-      // 接口获取
+      supportedNetworks: ((_e = (_d = applePay2 == null ? void 0 : applePay2.supportedNetworks) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (item) => underscoreToUpperCamelCase(item))) ?? [],
       total: {
         label: (checkout == null ? void 0 : checkout.theme.merchantName) ?? "",
         type: "final",
-        // 固定
         amount: String(checkout == null ? void 0 : checkout.transAmount.amount)
       }
     };
-    applePaySession = new ApplePaySession(3, request);
-    applePaySession.onvalidatemerchant = async () => {
-      const merchantSession = await getMerchantSession();
-      console.log("onvalidatemerchant");
-      applePaySession.completeMerchantValidation(merchantSession);
-    };
-    applePaySession.onpaymentauthorized = async (event) => {
-      var _a2;
-      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props);
-      console.log("onpaymentauthorized");
-      console.log("apple pay token: ", event.payment.token);
-      console.log("apple pay shippingContact: ", event.payment.shippingContact);
-      console.log("apple pay billingContact", event.payment.billingContact);
-      pay(
-        false,
-        void 0,
-        event.payment.token,
-        event.payment.billingContact,
-        event.payment.shippingContact
-      );
-    };
-    applePaySession.oncancel = () => {
-      var _a2;
-      (_a2 = props.onCancel) == null ? void 0 : _a2.call(props);
-    };
-    applePaySession.begin();
-  }
-  const Button = () => {
+  };
+  const onApplePayButtonClicked = () => {
     var _a, _b;
-    return /* @__PURE__ */ u("div", { className: bem("button"), children: /* @__PURE__ */ u(
+    const { onEvent } = props.core.config;
+    onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_BUTTON_CLICKED);
+    (_a = props.onBtnClick) == null ? void 0 : _a.call(props);
+    if (!ApplePaySession) {
+      return;
+    }
+    const request = genApplePayRequest();
+    console.warn("ApplePay Request", request);
+    initApplePaySession({
+      request,
+      onValidate: async () => {
+        var _a2;
+        onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_VALIDATE_MERCHANT);
+        const merchantSession = await getMerchantSession();
+        (_a2 = applePaySession.current) == null ? void 0 : _a2.completeMerchantValidation(merchantSession);
+      },
+      onAuthorized: async (event) => {
+        var _a2;
+        onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_AUTHORIZED);
+        (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props);
+        const { token, billingContact, shippingContact } = (event == null ? void 0 : event.payment) || {};
+        console.warn("ApplePay Res", event == null ? void 0 : event.payment);
+        pay(false, void 0, token, billingContact, shippingContact);
+      },
+      onCancel: () => {
+        var _a2;
+        onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_CANCELLED);
+        (_a2 = props.onCancel) == null ? void 0 : _a2.call(props);
+      }
+    });
+    (_b = applePaySession.current) == null ? void 0 : _b.begin();
+  };
+  const ApplePayButton = () => {
+    var _a, _b;
+    const buttonStyle = (_a = applePayConfig.button) == null ? void 0 : _a.buttonStyle;
+    const buttonType = (_b = applePayConfig.button) == null ? void 0 : _b.buttonType;
+    return /* @__PURE__ */ u("div", { className: bem("button"), children: canUseApplePaySDK ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u(
       "apple-pay-button",
       {
-        id: "apple-pay-button",
-        buttonstyle: (_a = applePayConfig.button) == null ? void 0 : _a.buttonStyle,
-        type: (_b = applePayConfig.button) == null ? void 0 : _b.buttonType,
+        buttonstyle: buttonStyle,
+        type: buttonType,
         onClick: onApplePayButtonClicked
       }
+    ) }) : /* @__PURE__ */ u(
+      "button",
+      {
+        onClick: onApplePayButtonClicked,
+        style: {
+          "-webkit-appearance": "-apple-pay-button",
+          // @ts-ignore
+          "-apple-pay-button-style": buttonStyle,
+          // @ts-ignore
+          "-apple-pay-button-type": buttonType,
+          width: "100%",
+          height: "44px",
+          minHeight: "44px",
+          border: "none",
+          borderRadius: "6px",
+          cursor: "pointer"
+        }
+      }
     ) });
   };
   return /* @__PURE__ */ u("div", { children: sessionReady && showApplePay && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
     !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
-    Button()
+    /* @__PURE__ */ u(ApplePayButton, {})
   ] }) });
 });
 export {

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

@@ -72,7 +72,7 @@ const Boost = 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 Boost = 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/CPFField/index.js

@@ -0,0 +1,88 @@
+import { w, A, h, F, u } from "../../core.js";
+import { isUndefined } from "../../utils/is.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { EInternalFieldType } from "../SecuredFieldsProvider/index.js";
+import { useI18n } from "../../hooks/useI18n.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";
+import "../internal/Form/Form.js";
+import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
+import { CNPJ_FULL_LENGTH, CPF_FULL_LENGTH, formatCPFOnInsert } from "../../utils/cpf.js";
+const CPFField = w((props, ref) => {
+  const { className, style, security } = props;
+  const { i18n } = useI18n();
+  const inputRef = A(null);
+  const formItemRef = A(null);
+  const [value, setValue] = h("");
+  F(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
+    },
+    resetValidation: (status, errorTip) => {
+      var _a;
+      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
+    }
+  }));
+  const rule = {
+    trigger: ["blur", "submit"],
+    validator(value2) {
+      if (security) {
+        const result = formItemRef.current.getValidateResult();
+        if (result.status === "error") {
+          throw new Error(result.errors[0].message);
+        } else if (result.status === "success") {
+          return true;
+        }
+      }
+      if (isUndefined(value2) || ![CPF_FULL_LENGTH, CNPJ_FULL_LENGTH].includes(value2.length)) {
+        throw new Error(i18n.get("cpf.incomplete"));
+      }
+      return true;
+    }
+  };
+  const onInput = (event) => {
+    var _a;
+    const { currentTarget } = event;
+    const { value: val, cursorPosition } = formatCPFOnInsert(event);
+    setValue(currentTarget.value = val);
+    currentTarget.setSelectionRange(cursorPosition, cursorPosition);
+    (_a = props.onInput) == null ? void 0 : _a.call(props, event);
+  };
+  return /* @__PURE__ */ u(
+    FormItem,
+    {
+      label: i18n.get("cpf.label"),
+      path: "cpf",
+      ref: formItemRef,
+      rule,
+      className,
+      style,
+      children: /* @__PURE__ */ u(
+        Input,
+        {
+          type: "text",
+          inputmode: "numeric",
+          ref: inputRef,
+          maxLength: CNPJ_FULL_LENGTH,
+          value,
+          onInput,
+          placeholder: i18n.get("cpf.placeholder"),
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EInternalFieldType.CPF })
+        }
+      )
+    }
+  );
+});
+export {
+  CPFField
+};

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

@@ -301,7 +301,7 @@ const Card = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c, _d, _e, _f;
+    var _a2, _b2, _c, _d, _e;
     try {
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
@@ -335,10 +335,7 @@ const Card = w((props, ref) => {
           return { end: true };
         }
       } else {
-        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(message);
-        (_f = props.onError) == null ? void 0 : _f.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
-        setSubmitButtonStatus("unSubmit");
+        processPaymentError(error);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
@@ -445,7 +442,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b2, _c, _d;
     if (!session)
       return { end: true };
     try {
@@ -506,10 +503,7 @@ const Card = w((props, ref) => {
           return { end: true };
         }
       } 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 }));
-        setSubmitButtonStatus("unSubmit");
+        processPaymentError(error);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
@@ -655,7 +649,7 @@ const Card = w((props, ref) => {
       (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
       binValue = data.binValue;
     }
-    binValue && new WorldpayDDC().getFraudDetectionId(binValue);
+    binValue && new WorldpayDDC().init(binValue);
   };
   const onAfterPayment = (data) => {
     processAfterPayment(data.response);

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

@@ -3,7 +3,6 @@ import { COMMON_CLASS_NAME } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { clamp } from "../../utils/index.js";
-import "../../api/http.js";
 import "../../out/worldpay-jsc-origin.js";
 import { getSupportedCardBrands, getCardBrandInfo } from "../../utils/card-brand/index.js";
 import { normalizedClass } from "../../utils/format.js";

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

@@ -1,7 +1,7 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } 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/CardHolderNameField/index.js

@@ -2,7 +2,7 @@ import { u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.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/CardIBANField/index.js

@@ -1,7 +1,7 @@
 import { A, h, 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/CardNo/index.js

@@ -5,7 +5,6 @@ import "../../core/context.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 "../../out/worldpay-jsc-origin.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {