@paykka/card-checkout-ui 0.13.1 → 0.13.5

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

@@ -35,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 { 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,
@@ -244,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("/");
@@ -262,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,
@@ -300,7 +300,7 @@ const Card = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c, _d, _e, _f;
     try {
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
@@ -316,9 +316,9 @@ const Card = w((props, ref) => {
         );
       } else {
         const paymentParams = await getPaymentParams();
-        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.BANKCARD);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.BANKCARD);
         if (security) {
-          (_e2 = SFPRef.current) == null ? void 0 : _e2.payment(paymentParams, extraParams);
+          (_e = SFPRef.current) == null ? void 0 : _e.payment(paymentParams, extraParams);
           return { end: true };
         } else {
           res = await cardPay(paymentParams, extraParams, requestOptions);
@@ -336,7 +336,7 @@ const Card = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_f2 = props.onError) == null ? void 0 : _f2.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 };
@@ -436,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),
     {
@@ -451,7 +444,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2, _c, _d, _e;
     if (!session)
       return { end: true };
     try {
@@ -477,7 +470,7 @@ const Card = w((props, ref) => {
           processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
         } else if (orderStatus === "AUTHORIZED") {
           setSubmitButtonStatus("unSubmit");
-          (_c2 = props.onAuthorized) == null ? void 0 : _c2.call(props);
+          (_c = props.onAuthorized) == null ? void 0 : _c.call(props);
         } else if (orderStatus === "IN_THREED") {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
@@ -496,7 +489,7 @@ const Card = w((props, ref) => {
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_d2 = props.onExpired) == null ? void 0 : _d2.call(props);
+        (_d = props.onExpired) == null ? void 0 : _d.call(props);
         stopReFetchCardPay3DSInfo();
         return { end: true };
       }
@@ -514,7 +507,7 @@ const Card = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         setErrorMsg(message);
-        (_e2 = props.onError) == null ? void 0 : _e2.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 };
@@ -536,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);
     };
@@ -550,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();
@@ -616,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) {
@@ -637,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();
@@ -695,7 +688,7 @@ const Card = w((props, ref) => {
     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: [
@@ -714,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.supportMethods) == 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)
           }
         )
       ] }),
@@ -748,40 +741,41 @@ 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(),
       /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
-        isShowStoreCheckBox && storeCheckBox(),
+        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
           }
@@ -794,13 +788,14 @@ const Card = w((props, ref) => {
       ] })
     ] }) });
   };
-  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n, core }, 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,
@@ -818,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/DropIn/index.js

@@ -17,6 +17,11 @@ 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 { Vietqr } from "../wallets/Vietqr/Vietqr.js";
+import { Pix } from "../wallets/Pix/Pix.js";
+import { PicPay } from "../wallets/PicPay/PicPay.js";
+import { OpayWallet } from "../wallets/OpayWallet/OpayWallet.js";
+import { PagaWallet } from "../wallets/PagaWallet/PagaWallet.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { intersection } from "../../utils/index.js";
 import { PayKKaError } from "../../core/error.js";
@@ -34,6 +39,11 @@ 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 { IconVietqr } from "../internal/icons/IconVietqr.js";
+import { IconPix } from "../internal/icons/IconPix.js";
+import { IconPicPay } from "../internal/icons/IconPicPay.js";
+import { IconOpayWallet } from "../internal/icons/IconOpayWallet.js";
+import { IconPagaWallet } from "../internal/icons/IconPagaWallet.js";
 import { removeElementFromArray } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
@@ -48,7 +58,12 @@ const dropInSupportedPaymentMethods = [
   PaymentMethod.MAY_BANK_QR_PAY,
   PaymentMethod.GCASH,
   PaymentMethod.PAYMAYA,
-  PaymentMethod.ZALOPAY
+  PaymentMethod.VIETQR,
+  PaymentMethod.ZALOPAY,
+  PaymentMethod.PIX,
+  PaymentMethod.PIC_PAY,
+  PaymentMethod.OPAY_WALLET,
+  PaymentMethod.PAGA_WALLET
 ];
 const PaymentComponentMap = {
   [PaymentCategory.CARD]: Card,
@@ -63,7 +78,12 @@ const PaymentComponentMap = {
   [PaymentCategory.GRAB_PAY]: GrabPay,
   [PaymentCategory.GCASH]: GCash,
   [PaymentCategory.PAYMAYA]: Paymaya,
-  [PaymentCategory.ZALOPAY]: Zalopay
+  [PaymentCategory.ZALOPAY]: Zalopay,
+  [PaymentCategory.VIETQR]: Vietqr,
+  [PaymentCategory.PIX]: Pix,
+  [PaymentCategory.PIC_PAY]: PicPay,
+  [PaymentCategory.OPAY_WALLET]: OpayWallet,
+  [PaymentCategory.PAGA_WALLET]: PagaWallet
   // [PaymentCategory.WECHAT_PAY]: WechatPay,
   // [PaymentCategory.ALI_PAY]: AliPay,
   // [PaymentCategory.SEPA_DEBIT]: Sepa
@@ -142,6 +162,26 @@ const paymentCategoryOptionMap = {
   [PaymentCategory.ZALOPAY]: {
     icon: IconZalopay,
     nameKey: "dropIn.zalopay.label"
+  },
+  [PaymentCategory.VIETQR]: {
+    icon: IconVietqr,
+    nameKey: "dropIn.vietqr.label"
+  },
+  [PaymentCategory.PIX]: {
+    icon: IconPix,
+    nameKey: "dropIn.pix.label"
+  },
+  [PaymentCategory.PIC_PAY]: {
+    icon: IconPicPay,
+    nameKey: "dropIn.picPay.label"
+  },
+  [PaymentCategory.OPAY_WALLET]: {
+    icon: IconOpayWallet,
+    nameKey: "dropIn.opayWallet.label"
+  },
+  [PaymentCategory.PAGA_WALLET]: {
+    icon: IconPagaWallet,
+    nameKey: "dropIn.pagaWallet.label"
   }
 };
 const { bem } = useBEM("drop-in");

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

@@ -1,10 +1,10 @@
 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";
@@ -23,6 +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 { 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,

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

@@ -526,6 +526,7 @@ const GooglePay = w((props, ref) => {
       {
         show: showThreeDSModal,
         theme: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.theme,
+        checkoutId: core.id,
         ...threeDSInfo,
         onClose: handleCloseThreeDSModal
       }

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

@@ -3,7 +3,7 @@ import { useBEM } from "../../hooks/useBEM.js";
 import { CoreContext } from "../../core/context.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
+import { normalizedClass, formatAmount } from "../../utils/format.js";
 import { redirectToPayment } from "../../utils/redirect.js";
 import { formatPaymentResult } from "../../utils/payment.js";
 import { isTimeoutError } from "../../api/http.js";
@@ -25,7 +25,6 @@ import { GuideCard } from "../GuideCard/index.js";
 const { bem } = useBEM("grab-pay");
 const fieldClassNames = bem("field");
 const GrabPay = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f;
   const {
     session,
     showEmail = false,
@@ -46,21 +45,21 @@ const GrabPay = w((props, ref) => {
       startReFetchPayInfo({ timeout });
     },
     updateAddress: () => {
-      var _a2;
+      var _a;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
       const newForm = Object.assign(form, { address: addressCore.getAddressState() });
       setForm(newForm);
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
+      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressCore.getAddressState());
       validateForm();
     },
     updateEmail: () => {
-      var _a2;
+      var _a;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
       const newForm = Object.assign(form, { email: emailState.email });
       setForm(newForm);
-      (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
       validateForm();
     },
     payment: () => {
@@ -103,11 +102,11 @@ const GrabPay = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   const processOnSuccess = (res) => {
-    var _a2, _b2;
+    var _a, _b;
     setSubmitButtonStatus("success");
-    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, formatPaymentResult({
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, formatPaymentResult({
       ...res,
-      returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
+      returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
     }));
   };
   y(() => {
@@ -129,16 +128,16 @@ const GrabPay = w((props, ref) => {
     }
   }, [sessionReady]);
   const processOnError = (error) => {
-    var _a2;
-    (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
+    var _a;
+    (_a = props.onError) == null ? void 0 : _a.call(props, error);
     core.resetEnablePaymentMethod();
   };
   const onTimeout = q(
     (message) => {
-      var _a2;
+      var _a;
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
-      (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
+      (_a = props.onTimeout) == null ? void 0 : _a.call(props);
       core.resetEnablePaymentMethod();
     },
     [i18n, props.onTimeout]
@@ -168,12 +167,12 @@ const GrabPay = w((props, ref) => {
     };
   };
   const pay = async (search = false, timeout) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       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.GRAB_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.GRAB_PAY);
         res = await getGrabPayInfo(
           {
             sessionId: session.sessionId,
@@ -184,10 +183,10 @@ const GrabPay = w((props, ref) => {
           requestOptions
         );
       } else {
-        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.GRAB_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.GRAB_PAY);
         res = await grabPay(await getPaymentParams(), extraParams, requestOptions);
       }
-      !search && ((_e2 = props.onSubmitResponse) == null ? void 0 : _e2.call(props, res));
+      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
       const { status, orderStatus, errorMessage, errorCode, payInfo, sessionId } = res;
       sessionId && (session.sessionId = sessionId);
       if (status === "PROCESSING") {
@@ -214,7 +213,7 @@ const GrabPay = w((props, ref) => {
           return { end: false };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_f2 = props.onTimeout) == null ? void 0 : _f2.call(props);
+          (_f = props.onTimeout) == null ? void 0 : _f.call(props);
           core.resetEnablePaymentMethod();
           return { end: true };
         }
@@ -246,8 +245,8 @@ const GrabPay = w((props, ref) => {
     }
   };
   const validateForm = () => {
-    var _a2;
-    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
+    var _a;
+    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
       setValidated(true);
     }).catch(() => {
       setValidated(false);
@@ -257,12 +256,12 @@ const GrabPay = w((props, ref) => {
     validateForm();
   }, [form]);
   const onSubmit = async () => {
-    var _a2;
+    var _a;
     setErrorMsg("");
-    (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
-      var _a3;
+    (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
+      var _a2;
       (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
-      (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
         return;
@@ -277,8 +276,8 @@ const GrabPay = w((props, ref) => {
     dom && validateForm();
   };
   const Button = () => {
-    var _a2;
-    const transAmount = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.transAmount;
+    var _a;
+    const transAmount = (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount;
     const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
     const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
     return /* @__PURE__ */ u(
@@ -304,24 +303,17 @@ const GrabPay = 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 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 Address = () => {
-    var _a2, _b2;
+    var _a, _b;
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
       AddressField,
       {
         ref: addressFieldRef,
         value: form.address,
-        country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.bill.country),
+        country: ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.country) || ((_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.bill.country),
         onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });
@@ -334,13 +326,15 @@ const GrabPay = w((props, ref) => {
         session,
         core
       },
-      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
         showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.GRAB_PAY }),
-        /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+        /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
           Email(),
           Address(),
-          ErrorMessage(),
-          !hidePaymentButton && Button()
+          /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+            ErrorMessage(),
+            !hidePaymentButton && Button()
+          ] })
         ] }) })
       ] })
     }

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

@@ -35,7 +35,12 @@ const GuideCard = (props) => {
     [PaymentCategory.MAY_BANK_QR_PAY]: redirectGuideCard,
     [PaymentCategory.GCASH]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.gcash.label")),
     [PaymentCategory.PAYMAYA]: redirectGuideCard,
-    [PaymentCategory.ZALOPAY]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.zalopay.label"))
+    [PaymentCategory.ZALOPAY]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.zalopay.label")),
+    [PaymentCategory.VIETQR]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.vietqr.label")),
+    [PaymentCategory.PIX]: redirectGuideCard,
+    [PaymentCategory.PIC_PAY]: redirectGuideCard,
+    [PaymentCategory.OPAY_WALLET]: redirectGuideCard,
+    [PaymentCategory.PAGA_WALLET]: redirectGuideCard
   };
   return /* @__PURE__ */ u(b, { children: guideCardInfoMap[type] && /* @__PURE__ */ u("div", { className: bem(), children: /* @__PURE__ */ u("div", { className: bem("content"), children: [
     /* @__PURE__ */ u("div", { className: bem("icon"), children: (_a = guideCardInfoMap[type]) == null ? void 0 : _a.icon }),