@paykka/card-checkout-ui 0.9.2 → 0.11.4

package/dist/es/api/index.js

@@ -1,4 +1,3 @@
+import "./http.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import "../core.js";
-import "../core/context.js";

package/dist/es/api/modules/index.js

@@ -1,4 +1,3 @@
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../core.js";
-import "../../core/context.js";
+import "../http.js";

package/dist/es/api/modules/risk/index.js

@@ -0,0 +1,13 @@
+import { http } from "../../http.js";
+const getRiskAuthorization = async (params, options) => {
+  return http.post("/session/fraud-detection/component/authorization", params, options).then((res) => {
+    return {
+      authCode: res.auth_code,
+      channel: res.channel,
+      expireTime: res.expire_time
+    };
+  });
+};
+export {
+  getRiskAuthorization
+};

package/dist/es/api/modules/threeDS/index.js

@@ -0,0 +1 @@
+import "../../http.js";

package/dist/es/components/AccordionItem/AccordionItem.js

@@ -5,6 +5,7 @@ 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 { AccordionContext } from "../internal/Accordion/type.js";
 import { accordionTransition } from "../internal/Accordion/accordionTransition.js";
 const { bem } = useBEM("accordion-item");

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

@@ -2,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -4,6 +4,7 @@ import { EAddressType } from "../../constant.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import { isArray, isNil } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";

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

@@ -26,7 +26,7 @@ const AliPay = w((props, ref) => {
   const { session } = props;
   const addressState = createAddressCore();
   const emailState = createEmailCore();
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -45,7 +45,7 @@ const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
   const { session, isDropIn } = props;
   let applePaySession;
-  const { i18n, sessionReady, fraudDetection } = usePayState(session);
+  const { i18n, sessionReady, fraudDetection } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showApplePay, setShowApplePay] = h(false);
   const getPaymentSuccessData = () => ({
@@ -139,7 +139,7 @@ const ApplePay = w((props) => {
               country: billingContact == null ? void 0 : billingContact.countryCode
             },
             browser: await getBrowserParams({
-              fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
+              fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
             })
           },
           props.core,

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

@@ -57,7 +57,9 @@ const Boost = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -68,7 +70,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);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -8,6 +8,7 @@ import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
 import { hidePaymentButton } from "../../config.js";
 import { defaultInputStyleConfig } from "../../types/index.js";
+import { WorldpayDDC } from "../../out/worldpay-ddc.js";
 import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
@@ -56,7 +57,7 @@ const Card = w((props, ref) => {
   } = props;
   const addressState = createAddressCore();
   const emailState = createEmailCore();
-  const { i18n, fraudDetection, sessionReady } = usePayState(session);
+  const { i18n, fraudDetection, sessionReady } = usePayState(session, core);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const combinedCardInfoRef = A(null);
@@ -106,7 +107,9 @@ const Card = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -240,7 +243,7 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2;
+    var _a2, _b2, _c2;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
@@ -256,6 +259,10 @@ const Card = w((props, ref) => {
         paymentMethod = cardBrand.code;
       }
     }
+    let cardBin;
+    if (security) {
+      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c2 = combinedCardInfoRef.current) == null ? void 0 : _c2.binValue();
+    }
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -281,7 +288,9 @@ const Card = w((props, ref) => {
         email: form.email
       },
       browser: await getBrowserParams({
-        fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
+        fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId({
+          bin: cardNo || cardBin || ""
+        }))
       })
     };
   };
@@ -289,8 +298,13 @@ const Card = w((props, ref) => {
     var _a2, _b2, _c2, _d2;
     try {
       const paymentParams = await getPaymentParams();
+      const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(
+        _a2,
+        "payment",
+        paymentParams.payment.paymentMethod
+      );
       if (!search && security) {
-        (_a2 = SFPRef.current) == null ? void 0 : _a2.payment(paymentParams);
+        (_c2 = SFPRef.current) == null ? void 0 : _c2.payment(paymentParams, extraParams);
         return { end: true };
       }
       const options = { locale: i18n.locale, timeout };
@@ -301,7 +315,6 @@ const Card = w((props, ref) => {
           options
         );
       } else {
-        const extraParams = (_c2 = (_b2 = core.config)._getExtraParams) == null ? void 0 : _c2.call(_b2, "payment", paymentParams.payment.paymentMethod);
         res = await cardPay(paymentParams, extraParams, options);
       }
       return processAfterPayment(res, search);
@@ -633,8 +646,15 @@ const Card = w((props, ref) => {
   };
   const onBinValueChanged = (data) => {
     var _a2;
-    const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
-    (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
+    let binValue = "";
+    if (typeof data === "string") {
+      binValue = data;
+    } else {
+      const field = splitCardInfo ? cardNumberFieldRef : combinedCardInfoRef;
+      (_a2 = field.current) == null ? void 0 : _a2.binValueChanged(data.binValue);
+      binValue = data.binValue;
+    }
+    binValue && new WorldpayDDC().getFraudDetectionId(binValue);
   };
   const onAfterPayment = (data) => {
     processAfterPayment(data.response);
@@ -677,7 +697,8 @@ const Card = w((props, ref) => {
             {
               supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentMethod) == null ? void 0 : _b2.filter(Boolean),
               security,
-              ref: cardNumberFieldRef
+              ref: cardNumberFieldRef,
+              onBinValue: onBinValueChanged
             }
           ),
           changeBox()

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

@@ -3,6 +3,7 @@ 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 { getSupportedCardBrands, getCardBrandInfo } from "../../utils/card-brand/index.js";
 import { normalizedClass } from "../../utils/format.js";
 const { bem } = useBEM("card-brands");

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

@@ -1,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -2,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -1,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -5,6 +5,7 @@ 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";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
   const { value, className, style } = props;

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

@@ -1,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -13,7 +14,7 @@ import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfo
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w(
   (props, ref) => {
-    const { supportedCardBrands = [], className, security, showLabel } = props;
+    const { supportedCardBrands = [], className, security, showLabel, onBinValue } = props;
     const inputRef = A(null);
     const formItemRef = A(null);
     F(ref, () => ({
@@ -33,6 +34,9 @@ const CardNumberField = w(
       binValueChanged: (binValue) => {
         setValue(binValue);
       },
+      binValue: () => {
+        return value;
+      },
       brandChanged: (brand2) => {
         if (brand2) {
           const brandInfo = finCardBrandInfoByCode(brand2);
@@ -54,12 +58,19 @@ const CardNumberField = w(
     const brandLengths = getSupportedCardBrandsLengths(brands);
     const [brandIcon, setBrandIcon] = h(void 0);
     const [brand, setBrand] = h(void 0);
+    const [cardBin, setCardBin] = h("");
     y(() => {
+      const trimValue = trimAll(value);
       setBrandIcon(value ? () => {
         var _a;
-        return (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
+        return (_a = findCardBrandInfo(trimValue, brands)) == null ? void 0 : _a.icon;
       } : void 0);
+      const newBin = trimValue.substring(0, 6);
+      setCardBin(newBin.length < 6 ? "" : newBin);
     }, [value]);
+    y(() => {
+      onBinValue == null ? void 0 : onBinValue(cardBin);
+    }, [cardBin]);
     const rule = {
       trigger: ["blur", "submit"],
       validator(value2) {

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

@@ -5,6 +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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";

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

@@ -1,6 +1,7 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../internal/Form/type.js";

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

@@ -12,6 +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";
 const { bem } = useBEM("combined-card-info");
 const CombinedCardInfo = w(
   (props, ref) => {
@@ -36,6 +37,9 @@ const CombinedCardInfo = w(
       binValueChanged: (binValue2) => {
         setBinValue(binValue2);
       },
+      binValue: () => {
+        return binValue;
+      },
       brandChanged: (brand) => {
         if (brand) {
           const brandInfo = finCardBrandInfoByCode(brand);

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

@@ -2,6 +2,7 @@ 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 { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, PaymentMethod2CategoryMap } from "../../constant.js";
 import { Card } from "../Card/index.js";
 import { ApplePay } from "../ApplePay/index.js";
@@ -144,7 +145,7 @@ const DropIn = w((props, ref) => {
     core,
     enableAccordionTransition = true
   } = props;
-  const { i18n, sessionReady } = usePayState(session);
+  const { i18n, sessionReady } = usePayState(session, props.core);
   const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
   const [activePaymentCategory, setActivePaymentCategory] = h();
   const [enablePaymentMethod, setEnablePaymentMethod] = h();

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

@@ -8,7 +8,9 @@ import { w, h, A, F, y, u } from "../../core.js";
 import { isValuable } from "../../utils/is.js";
 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 "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -50,42 +52,39 @@ const EmailField = w((props, ref) => {
   const emailCore = createEmailCore(props.value ?? "");
   F(ref, () => ({
     update: (value2) => {
-      var _a, _b;
-      setValue(value2 ?? "");
-      emailCore.email = value2 ?? "";
-      if (emailCore.isValid) {
+      var _a;
+      updateEmail(value2);
+      if (emailCore.isValid || isValuable(value2)) {
         (_a = formItemRef.current) == null ? void 0 : _a.validate(value2, { trigger: "submit", setResult: true });
-      } else {
-        isValuable(value2) && ((_b = formItemRef.current) == null ? void 0 : _b.validate(value2, { trigger: "submit", setResult: true }));
       }
     }
   }));
   y(() => {
-    setValue(props.value ?? "");
-    emailCore.email = props.value ?? "";
+    updateEmail(props.value);
   }, [props.value]);
-  y(() => {
-    emailCore.email = value ?? "";
-  }, [value]);
+  const updateEmail = (value2) => {
+    emailCore.email = value2 ?? "";
+    setValue(value2 ?? "");
+  };
   const rule = {
     trigger: ["blur", "submit"],
     validator(value2) {
       if (!value2) {
         throw new Error(i18n.get("common.email.incomplete"));
       }
-      const emailReg = new RegExp("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$");
+      const emailReg = new RegExp(EMAIL_REG);
       if (!emailReg.test(value2)) {
         throw new Error(i18n.get("common.email.incorrect"));
       }
       return true;
     }
   };
-  function onInput(event) {
+  const onInput = (event) => {
     var _a;
     const { currentTarget } = event;
-    setValue(currentTarget.value);
+    updateEmail(currentTarget.value);
     (_a = props.onInput) == null ? void 0 : _a.call(props, event);
-  }
+  };
   return /* @__PURE__ */ u(
     FormItem,
     {

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

@@ -1,6 +1,7 @@
 import { setApiUrl, setCDNUrl } from "../../config.js";
 import { CoreContext } from "../../core/context.js";
 import { create } from "../../core/create.js";
+import "../../api/http.js";
 import "../../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
 import { w, F, h, A, y, u } from "../../core.js";

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

@@ -180,7 +180,7 @@ const GooglePay = w((props, ref) => {
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionReady, i18n, fraudDetection } = usePayState(session);
+  const { sessionReady, i18n, fraudDetection } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showGooglePay, setShowGooglePay] = h(false);
   const [showThreeDSModal, setShowThreeDSModal] = h(false);
@@ -290,7 +290,7 @@ const GooglePay = w((props, ref) => {
               areaCode: phone == null ? void 0 : phone.areaCode
             },
             browser: await getBrowserParams({
-              fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
+              fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
             })
           },
           props.core,

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

@@ -57,7 +57,9 @@ const GrabPay = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -68,7 +70,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);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -2,6 +2,7 @@ import { u, b } from "../../core.js";
 import { PaymentCategory } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.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";

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

@@ -57,7 +57,9 @@ const LinePay = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -68,7 +70,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);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -57,7 +57,9 @@ const MayBankQRPay = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -68,7 +70,7 @@ const MayBankQRPay = w((props, ref) => {
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
-  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -57,7 +57,9 @@ const NinePay = w((props, ref) => {
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       setForm(Object.assign(form, { email: emailState.email }));
+      form.email = emailState.email;
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -68,7 +70,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);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const formRef = A(null);
   const [form, setForm] = h({

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

@@ -2,6 +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 "../../api/http.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { IconInfo } from "../internal/icons/IconInfo.js";
 const { bem } = useBEM("recurring-tip");

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

@@ -71,10 +71,11 @@ const SecuredFieldsProvider = w((props, ref) => {
   const { sessionMode, i18n, targetElement } = props;
   const rootNodeRef = A(null);
   const hiddenIframe = A(null);
-  const payment = (formData) => {
+  const payment = (formData, extraParams) => {
     const data = {
       action: MessageAction.PAYMENT,
       formData,
+      extraParams,
       locale: props.i18n.locale
     };
     postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);