@paykka/card-checkout-ui 0.11.6 → 0.13.2

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

@@ -1,15 +1,14 @@
 import { w, A, h, F, y, q, T, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentType, SessionMode, CardPaymentMethods, COMMON_CLASS_NAME, PaymentMethod } from "../../constant.js";
 import { intersection } from "../../utils/index.js";
-import { getBrowserParams } from "../../api/modules/get-browser-params.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
 import { getCardPayInfo, cardPay } from "../../api/modules/card/index.js";
+import { getBrowserParams } from "../../api/modules/get-browser-params.js";
+import { PaymentType, SessionMode, CardPaymentMethods, PaymentMethod, COMMON_CLASS_NAME } from "../../constant.js";
 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 { createPromise } from "../../utils/create-promise.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
@@ -36,12 +35,12 @@ import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
 import { cardBrandCodes } from "../../utils/card-brand/brands.js";
 import { findCardBrand } from "../../utils/card-brand/index.js";
 import { separateInputStyle } from "../../utils/style.js";
-import { createPromise } from "../../utils/create-promise.js";
-import { cssVarPrefix, normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
+import { formatPaymentResult } from "../../utils/payment.js";
+import { normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
 const Card = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b;
   const {
     showCardBrands = true,
     session,
@@ -53,9 +52,10 @@ const Card = w((props, ref) => {
     styles,
     enable3DSModal = true,
     isDropIn,
-    core
+    core,
+    hidePaymentButton = false
   } = props;
-  const addressState = createAddressCore();
+  const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
   const { i18n, fraudDetection, sessionReady } = usePayState(session, core);
   const addressFieldRef = A(null);
@@ -70,13 +70,13 @@ const Card = w((props, ref) => {
     holderName: "",
     cardInfo: "",
     address: {
-      country: "",
-      province: "",
-      city: "",
-      area: "",
-      postCode: "",
-      address1: "",
-      address2: ""
+      country: void 0,
+      province: void 0,
+      city: void 0,
+      area: void 0,
+      postCode: void 0,
+      address1: void 0,
+      address2: void 0
     }
   });
   const [validated, setValidated] = h(false);
@@ -99,15 +99,17 @@ const Card = w((props, ref) => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
-      setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
+      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
+      setForm(newForm);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
+      validateForm();
     },
     updateEmail: () => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
-      setForm(Object.assign(form, { email: emailState.email }));
-      form.email = emailState.email;
+      const newForm = Object.assign(form, { email: emailState.email });
+      setForm(newForm);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
       validateForm();
     },
@@ -115,12 +117,6 @@ const Card = w((props, ref) => {
       hidePaymentButton && onSubmit();
     }
   }));
-  const getPaymentSuccessData = () => {
-    var _a2;
-    return {
-      returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
-    };
-  };
   const initFieldStatus = () => {
     const { field, sessionMode } = session.checkout;
     const { email, address, holderName } = field;
@@ -150,7 +146,7 @@ const Card = w((props, ref) => {
     if (!sessionReady) {
       return;
     }
-    const { status, paymentMethod = [], bill = {}, sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    const { status, supportMethods = [], bill = {}, sessionMode, country } = (session == null ? void 0 : session.checkout) || {};
     if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
       (_b2 = (_a2 = props.core.config).onInitError) == null ? void 0 : _b2.call(
         _a2,
@@ -158,18 +154,19 @@ const Card = w((props, ref) => {
       );
       return;
     }
-    if (!intersection(paymentMethod, CardPaymentMethods).length) {
+    if (!intersection(supportMethods, CardPaymentMethods).length) {
       return;
     }
     initFieldStatus();
     initElementStyles();
     setSecurity(sessionMode !== SessionMode.HOSTED);
+    country && addressCore.setCountry(country);
     form.email = bill.email ?? "";
-    setSupportedCardBrands(intersection(cardBrandCodes, paymentMethod || []));
+    form.address.country = country;
+    setSupportedCardBrands(intersection(cardBrandCodes, supportMethods || []));
     setIsCheckoutEnabled(true);
     if (status === "SUCCESS") {
-      setSubmitButtonStatus("success");
-      processOnSuccess();
+      processOnSuccess(session == null ? void 0 : session.checkout);
     }
   }, [sessionReady]);
   const onTimeout = q(
@@ -182,9 +179,13 @@ const Card = w((props, ref) => {
     },
     [i18n, props.onTimeout]
   );
-  const processOnSuccess = () => {
-    var _a2;
-    (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
+  const processOnSuccess = (res) => {
+    var _a2, _b2;
+    setSubmitButtonStatus("success");
+    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, formatPaymentResult({
+      ...res,
+      returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
+    }));
   };
   const processOnError = (error) => {
     var _a2;
@@ -231,7 +232,7 @@ const Card = w((props, ref) => {
     }
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
-      (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressState.setValidateAllFields(true);
+      (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
       (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
@@ -243,7 +244,7 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
@@ -261,7 +262,7 @@ const Card = w((props, ref) => {
     }
     let cardBin;
     if (security) {
-      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c2 = combinedCardInfoRef.current) == null ? void 0 : _c2.binValue();
+      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c = combinedCardInfoRef.current) == null ? void 0 : _c.binValue();
     }
     return {
       sessionId: session.sessionId,
@@ -281,9 +282,13 @@ const Card = w((props, ref) => {
       },
       bill: (fieldStatus == null ? void 0 : fieldStatus.address.show) ? {
         email: form.email,
-        ...form.address,
-        province: addressState.getLabel(form.address.province, addressState.getProvinceOption()) ?? form.address.province,
-        city: addressState.getLabel(form.address.city, addressState.getCityOptions()) ?? form.address.city
+        addressLine1: form.address.address1,
+        addressLine2: form.address.address2,
+        postalCode: form.address.postCode,
+        country: form.address.country,
+        district: form.address.area,
+        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
       } : {
         email: form.email
       },
@@ -295,27 +300,29 @@ const Card = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c, _d, _e, _f;
     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) {
-        (_c2 = SFPRef.current) == null ? void 0 : _c2.payment(paymentParams, extraParams);
-        return { end: true };
-      }
-      const options = { locale: i18n.locale, timeout };
-      let res = {};
+      const requestOptions = { locale: i18n.locale, timeout };
+      let res = null;
       if (search) {
+        const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", PaymentMethod.BANKCARD);
         res = await getCardPayInfo(
-          { sessionId: session.sessionId, clientKey: session.clientKey },
-          options
+          {
+            sessionId: session.sessionId,
+            clientKey: session.clientKey
+          },
+          extraParams,
+          requestOptions
         );
       } else {
-        res = await cardPay(paymentParams, extraParams, options);
+        const paymentParams = await getPaymentParams();
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.BANKCARD);
+        if (security) {
+          (_e = SFPRef.current) == null ? void 0 : _e.payment(paymentParams, extraParams);
+          return { end: true };
+        } else {
+          res = await cardPay(paymentParams, extraParams, requestOptions);
+        }
       }
       return processAfterPayment(res, search);
     } catch (error) {
@@ -329,7 +336,7 @@ const Card = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_d2 = props.onError) == null ? void 0 : _d2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        (_f = props.onError) == null ? void 0 : _f.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
@@ -359,32 +366,32 @@ const Card = w((props, ref) => {
   };
   const processAfterPayment = (res, search = false) => {
     var _a2, _b2;
-    const { status, orderStatus, errorMessage, errorCode, threeDSUrl } = res;
+    const { status, orderStatus, errorMessage, errorCode, payInfo = {}, sessionId } = res;
+    const { threeDSUrl } = payInfo;
+    sessionId && (session.sessionId = sessionId);
     if (status === "PROCESSING") {
       if (!orderStatus) {
         setSubmitButtonStatus("unSubmit");
       } else if (orderStatus === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        processOnSuccess();
+        processOnSuccess(res);
       } else if (orderStatus === "PROCESSING") {
         !search && startReFetchPayInfo();
         return { end: false };
       } else if (orderStatus === "FAILURE") {
-        setErrorMsg(errorMessage);
+        errorMessage && setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
         processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
       } else if (orderStatus === "AUTHORIZED") {
         setSubmitButtonStatus("unSubmit");
         (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
       } else if (orderStatus === "IN_THREED") {
-        processThreeDS(threeDSUrl, false);
+        threeDSUrl && processThreeDS(threeDSUrl, false);
       } else if (orderStatus === "IN_PREVIOUS_THREED") {
-        processThreeDS(threeDSUrl, true);
+        threeDSUrl && processThreeDS(threeDSUrl, true);
       }
       return { end: true };
     } else if (status === "SUCCESS") {
-      setSubmitButtonStatus("success");
-      processOnSuccess();
+      processOnSuccess(res);
       return { end: true };
     } else if (status === "EXPIRED") {
       setSubmitButtonStatus("unSubmit");
@@ -429,13 +436,6 @@ const Card = w((props, ref) => {
       }
     );
   };
-  const formStyle = {
-    [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
-    [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
-    [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
-    [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
-    [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
-  };
   const { start: startReFetchCardPay3DSInfo, stop: stopReFetchCardPay3DSInfo } = useRetry(
     (timeout) => checkThreeDS(true, timeout),
     {
@@ -444,15 +444,17 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c, _d, _e;
     if (!session)
       return { end: true };
     try {
+      const extraParams = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.call(_a2, "query", PaymentMethod.BANKCARD);
       const res = await getCardPayInfo(
         {
           sessionId: session.sessionId,
           clientKey: session.clientKey
         },
+        extraParams,
         {
           locale: i18n.locale,
           timeout
@@ -463,12 +465,12 @@ const Card = w((props, ref) => {
         if (orderStatus === "PROCESSING") {
           startReFetchPayInfo();
         } else if (orderStatus === "FAILURE") {
-          setErrorMsg(errorMessage);
+          errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
           processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
         } else if (orderStatus === "AUTHORIZED") {
           setSubmitButtonStatus("unSubmit");
-          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props);
+          (_c = props.onAuthorized) == null ? void 0 : _c.call(props);
         } else if (orderStatus === "IN_THREED") {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
@@ -482,17 +484,15 @@ const Card = w((props, ref) => {
         stopReFetchCardPay3DSInfo();
         return { end: true };
       } else if (status === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        processOnSuccess();
+        processOnSuccess(res);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_b2 = props.onExpired) == null ? void 0 : _b2.call(props);
+        (_d = props.onExpired) == null ? void 0 : _d.call(props);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
-      processOnSuccess();
       setSubmitButtonStatus("unSubmit");
       stopReFetchCardPay3DSInfo();
       return { end: true };
@@ -507,7 +507,7 @@ const Card = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_c2 = props.onError) == null ? void 0 : _c2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        (_e = props.onError) == null ? void 0 : _e.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
@@ -529,7 +529,7 @@ const Card = w((props, ref) => {
     }
     return (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE && (session == null ? void 0 : session.checkout.storePaymentMethod);
   }, [session == null ? void 0 : session.checkout]);
-  const storeCheckBox = () => {
+  const StoreCheckBox = () => {
     const onCheck = (checked) => {
       setStorePaymentMethod(checked);
     };
@@ -543,9 +543,9 @@ const Card = w((props, ref) => {
     ) });
   };
   const changeBox = () => {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c;
     const isPurchase = ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.PURCHASE;
-    const hasCardTokens = !!((_c2 = (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.tokens) == null ? void 0 : _c2.length);
+    const hasCardTokens = !!((_c = (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.tokens) == null ? void 0 : _c.length);
     const onClick = () => {
       var _a3;
       (_a3 = formRef.current) == null ? void 0 : _a3.resetValidation();
@@ -609,7 +609,7 @@ const Card = w((props, ref) => {
     [EFieldType.CVV]: null
   });
   const onFieldValidStatusChanged = (data) => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c, _d;
     const fieldRef = splitCardInfo ? fieldRefMap[data.fieldType] : combinedCardInfoRef;
     const error = data.errorTip && i18n.get(data.errorTip);
     if (!splitCardInfo) {
@@ -630,10 +630,10 @@ const Card = w((props, ref) => {
       if (isSuccess) {
         (_b2 = fieldRef.current) == null ? void 0 : _b2.resetValidation("success");
       } else {
-        (_c2 = fieldRef.current) == null ? void 0 : _c2.resetValidation("unValidate");
+        (_c = fieldRef.current) == null ? void 0 : _c.resetValidation("unValidate");
       }
     } else {
-      (_d2 = fieldRef.current) == null ? void 0 : _d2.resetValidation(data.status, error);
+      (_d = fieldRef.current) == null ? void 0 : _d.resetValidation(data.status, error);
     }
     setTimeout(() => {
       validateForm();
@@ -685,17 +685,17 @@ const Card = w((props, ref) => {
     ) }) });
   };
   const ErrorMessage = () => {
-    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
+    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
   };
   const CardInfo = q(() => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c, _d;
     return splitCardInfo ? /* @__PURE__ */ u(b, { children: [
       /* @__PURE__ */ u("div", { className: fieldClassNames, children: [
         /* @__PURE__ */ u("div", { className: bem("card-number-wrapper"), children: [
           /* @__PURE__ */ u(
             CardNumberField,
             {
-              supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentMethod) == null ? void 0 : _b2.filter(Boolean),
+              supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.supportMethods) == null ? void 0 : _b2.filter(Boolean),
               security,
               ref: cardNumberFieldRef,
               onBinValue: onBinValueChanged
@@ -707,7 +707,7 @@ const Card = w((props, ref) => {
           CardBrands,
           {
             className: bem("card-brands"),
-            supportedCardBrands: (_d2 = (_c2 = session == null ? void 0 : session.checkout) == null ? void 0 : _c2.paymentMethod) == null ? void 0 : _d2.filter(Boolean)
+            supportedCardBrands: (_d = (_c = session == null ? void 0 : session.checkout) == null ? void 0 : _c.supportMethods) == null ? void 0 : _d.filter(Boolean)
           }
         )
       ] }),
@@ -741,55 +741,61 @@ const Card = w((props, ref) => {
   }, [splitCardInfo, security]);
   const cardForm = () => {
     var _a2;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
       CardInfo(),
       (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: fieldStatus == null ? void 0 : fieldStatus.holderName.disabled }) }),
       Address(),
       ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.RECURRING && RecurringTip(),
-      isShowStoreCheckBox && storeCheckBox(),
-      ErrorMessage(),
-      !hidePaymentButton && Button()
+      /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+        isShowStoreCheckBox && StoreCheckBox(),
+        ErrorMessage(),
+        !hidePaymentButton && Button()
+      ] })
     ] }) });
   };
   const fastPaymentCardForm = () => {
-    var _a2, _b2, _c2, _d2;
-    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+    var _a2, _b2, _c, _d;
+    return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
       /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
         /* @__PURE__ */ u(
           CardSelector,
           {
-            value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
-            cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
+            value: (_c = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c.token,
+            cardList: (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.tokens,
             onClickEdit: onEditOtherCard,
             onClickChange: onClickChangeCard,
             onCardChange,
-            style: { flex: 2, marginRight: "12px" }
+            className: bem("card-selector", fieldClassNames),
+            style: { flex: 2 }
           }
         ),
         /* @__PURE__ */ u(
           CardSecurityCodeField,
           {
-            className: fieldClassNames,
-            style: { flex: 1, marginLeft: "12px" },
+            className: bem("card-security-code", fieldClassNames),
+            style: { flex: 1 },
             security,
             ref: cardSecurityCodeFieldRef
           }
         )
       ] }),
       tokenAddressFilled && Address(),
-      ErrorMessage(),
-      !hidePaymentButton && Button()
+      /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+        ErrorMessage(),
+        !hidePaymentButton && Button()
+      ] })
     ] }) });
   };
-  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n, core }, children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
     /* @__PURE__ */ u(
       SecuredFieldsProvider,
       {
         ref: SFPRef,
         i18n,
-        sessionMode: (_g = session.checkout) == null ? void 0 : _g.sessionMode,
+        checkoutId: core.id,
+        sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
         supportedCardBrands,
         style: inputStyle || defaultInputStyleConfig,
         onFocus: onFieldsFocus,
@@ -807,8 +813,9 @@ const Card = w((props, ref) => {
       ThreeDSAuth,
       {
         show: showThreeDSModal,
-        theme: (_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.theme,
+        theme: (_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.theme,
         onClose: handleCloseThreeDSModal,
+        checkoutId: core.id,
         ...threeDSInfo
       }
     )

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

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

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

@@ -16,6 +16,7 @@ import { ShopeePay } from "../ShopeePay/index.js";
 import { GrabPay } from "../GrabPay/index.js";
 import { GCash } from "../wallets/GCash/GCash.js";
 import { Paymaya } from "../wallets/Paymaya/Paymaya.js";
+import { Zalopay } from "../wallets/Zalopay/Zalopay.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { intersection } from "../../utils/index.js";
 import { PayKKaError } from "../../core/error.js";
@@ -32,6 +33,7 @@ import { IconTNGWallet } from "../internal/icons/IconTNGWallet.js";
 import { IconCard2 } from "../internal/icons/IconCard2.js";
 import { IconGCash } from "../internal/icons/IconGCash.js";
 import { IconPaymaya } from "../internal/icons/IconPaymaya.js";
+import { IconZalopay } from "../internal/icons/IconZalopay.js";
 import { removeElementFromArray } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
@@ -45,7 +47,8 @@ const dropInSupportedPaymentMethods = [
   PaymentMethod.TNG_WALLET,
   PaymentMethod.MAY_BANK_QR_PAY,
   PaymentMethod.GCASH,
-  PaymentMethod.PAYMAYA
+  PaymentMethod.PAYMAYA,
+  PaymentMethod.ZALOPAY
 ];
 const PaymentComponentMap = {
   [PaymentCategory.CARD]: Card,
@@ -59,7 +62,8 @@ const PaymentComponentMap = {
   [PaymentCategory.SHOPEE_PAY]: ShopeePay,
   [PaymentCategory.GRAB_PAY]: GrabPay,
   [PaymentCategory.GCASH]: GCash,
-  [PaymentCategory.PAYMAYA]: Paymaya
+  [PaymentCategory.PAYMAYA]: Paymaya,
+  [PaymentCategory.ZALOPAY]: Zalopay
   // [PaymentCategory.WECHAT_PAY]: WechatPay,
   // [PaymentCategory.ALI_PAY]: AliPay,
   // [PaymentCategory.SEPA_DEBIT]: Sepa
@@ -134,6 +138,10 @@ const paymentCategoryOptionMap = {
   [PaymentCategory.PAYMAYA]: {
     icon: IconPaymaya,
     nameKey: "dropIn.paymaya.label"
+  },
+  [PaymentCategory.ZALOPAY]: {
+    icon: IconZalopay,
+    nameKey: "dropIn.zalopay.label"
   }
 };
 const { bem } = useBEM("drop-in");
@@ -272,9 +280,9 @@ const DropIn = w((props, ref) => {
       );
       return;
     }
-    const { paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
+    const { supportMethods = [] } = (session == null ? void 0 : session.checkout) || {};
     const enablePaymentMethods = intersection(
-      paymentMethod,
+      supportMethods,
       dropInSupportedPaymentMethods
     );
     if (!enablePaymentMethods.length) {

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

@@ -1,14 +1,15 @@
 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 { w, F, h, A, y, u } from "../../core.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 { createPromise } from "../../utils/create-promise.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
 import { CardNumberField } from "../CardNumberField/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
@@ -22,7 +23,7 @@ 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 { createPromise } from "../../utils/create-promise.js";
+import { genShortId } from "../../utils/string.js";
 const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
 const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
 var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {
@@ -52,6 +53,7 @@ const EncryptedCard = w((props, ref) => {
         var _a2;
         console.log("校验通过");
         (_a2 = SFPRef.current) == null ? void 0 : _a2.encryptCard({
+          checkoutId,
           merchantId,
           clientKey
         });
@@ -60,6 +62,7 @@ const EncryptedCard = w((props, ref) => {
       });
     }
   }));
+  const [checkoutId] = h(genShortId(6));
   const { i18n } = useI18n(locale || getBrowserInfo().language);
   const [single, setSingle] = h(false);
   const [showEncryptedCard, setShowEncryptedCard] = h(false);
@@ -371,6 +374,7 @@ const EncryptedCard = w((props, ref) => {
     {
       ref: SFPRef,
       targetElement,
+      checkoutId,
       i18n,
       style: inputStyle || defaultInputStyleConfig,
       supportedCardBrands: supportedBrands,