@paykka/card-checkout-ui 0.11.5 → 0.13.1

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,8 +35,8 @@ 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";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
 const Card = w((props, ref) => {
@@ -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");
@@ -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, _c2, _d2, _e2, _f2;
     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 = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.BANKCARD);
+        if (security) {
+          (_e2 = SFPRef.current) == null ? void 0 : _e2.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 }));
+        (_f2 = props.onError) == null ? void 0 : _f2.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");
@@ -444,15 +451,17 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c2, _d2, _e2;
     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 +472,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);
+          (_c2 = props.onAuthorized) == null ? void 0 : _c2.call(props);
         } else if (orderStatus === "IN_THREED") {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
@@ -482,17 +491,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);
+        (_d2 = props.onExpired) == null ? void 0 : _d2.call(props);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
-      processOnSuccess();
       setSubmitButtonStatus("unSubmit");
       stopReFetchCardPay3DSInfo();
       return { end: true };
@@ -507,7 +514,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 }));
+        (_e2 = props.onError) == null ? void 0 : _e2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         stopReFetchCardPay3DSInfo();
         return { end: true };
@@ -685,7 +692,7 @@ 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;
@@ -695,7 +702,7 @@ const Card = w((props, ref) => {
           /* @__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 +714,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: (_d2 = (_c2 = session == null ? void 0 : session.checkout) == null ? void 0 : _c2.supportMethods) == null ? void 0 : _d2.filter(Boolean)
           }
         )
       ] }),
@@ -747,9 +754,11 @@ const Card = w((props, ref) => {
       (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 = () => {
@@ -779,11 +788,13 @@ const Card = w((props, ref) => {
         )
       ] }),
       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(b, { children: [
     /* @__PURE__ */ u(
       SecuredFieldsProvider,
       {

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

@@ -9,6 +9,7 @@ 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,6 @@ 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";
 const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
 const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
 var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {