@paykka/card-checkout-ui 0.13.1 → 0.13.5

package/dist/es/components/LinePay/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("line-pay");
 const fieldClassNames = bem("field");
 const LinePay = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f;
   const {
     session,
     showEmail = false,
@@ -46,21 +45,21 @@ const LinePay = 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 LinePay = 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 LinePay = 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 LinePay = 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.LINE_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.LINE_PAY);
         res = await getLinePayInfo(
           {
             sessionId: session.sessionId,
@@ -184,10 +183,10 @@ const LinePay = w((props, ref) => {
           requestOptions
         );
       } else {
-        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.LINE_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.LINE_PAY);
         res = await linePay(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 LinePay = 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 LinePay = 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 LinePay = 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 LinePay = 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 LinePay = 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 LinePay = 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.LINE_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/MayBankQRPay/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";
@@ -26,7 +26,6 @@ const { bem } = useBEM("may-bank-qr-pay");
 const fieldClassNames = bem("field");
 const MayBankQRPay = w(
   (props, ref) => {
-    var _a, _b, _c, _d, _e, _f;
     const {
       session,
       showEmail = false,
@@ -47,21 +46,21 @@ const MayBankQRPay = w(
         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: () => {
@@ -104,11 +103,11 @@ const MayBankQRPay = w(
       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(() => {
@@ -130,16 +129,16 @@ const MayBankQRPay = w(
       }
     }, [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]
@@ -169,12 +168,12 @@ const MayBankQRPay = w(
       };
     };
     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.MAY_BANK_QR_PAY);
+          const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.MAY_BANK_QR_PAY);
           res = await getMayBankQRPayInfo(
             {
               sessionId: session.sessionId,
@@ -185,14 +184,14 @@ const MayBankQRPay = w(
             requestOptions
           );
         } else {
-          const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(
-            _c2,
+          const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(
+            _c,
             "payment",
             PaymentMethod.MAY_BANK_QR_PAY
           );
           res = await mayBankQRPay(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") {
@@ -219,7 +218,7 @@ const MayBankQRPay = w(
             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 };
           }
@@ -251,8 +250,8 @@ const MayBankQRPay = w(
       }
     };
     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);
@@ -262,12 +261,12 @@ const MayBankQRPay = w(
       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;
@@ -282,8 +281,8 @@ const MayBankQRPay = w(
       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(
@@ -309,24 +308,17 @@ const MayBankQRPay = w(
         }
       ) }) });
     };
-    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 }))
         }
       ) }) });
@@ -339,13 +331,15 @@ const MayBankQRPay = w(
           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.MAY_BANK_QR_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/NinePay/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("nine-pay");
 const fieldClassNames = bem("field");
 const NinePay = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f;
   const {
     session,
     showEmail = false,
@@ -46,21 +45,21 @@ const NinePay = 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 NinePay = 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 NinePay = 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 NinePay = 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.NINE_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.NINE_PAY);
         res = await getNinePayInfo(
           {
             sessionId: session.sessionId,
@@ -184,10 +183,10 @@ const NinePay = w((props, ref) => {
           requestOptions
         );
       } else {
-        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.NINE_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.NINE_PAY);
         res = await ninePay(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 NinePay = 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 NinePay = 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 NinePay = 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 NinePay = 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 NinePay = 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 NinePay = 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.NINE_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()
+          ] })
         ] }) })
       ] })
     }