@fractalpay/fractalpay-next-test 0.0.37 → 0.0.39

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-test",
-      version: "0.0.37",
+      version: "0.0.39",
       private: false,
       type: "module",
       scripts: {
@@ -97,7 +97,12 @@ var require_package = __commonJS({
       },
       author: "Mukul",
       license: "MIT",
-      keywords: ["nextjs", "next", "typescript", "tailwindcss"],
+      keywords: [
+        "nextjs",
+        "next",
+        "typescript",
+        "tailwindcss"
+      ],
       publishConfig: {
         access: "public"
       }
@@ -236,8 +241,8 @@ var Loader_default = Loader;
 var { name } = require_package();
 var S3Url = "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/";
 if (name === "@fractalpay/fractalpay-next-dev") {
-  masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
-  baseUrl = "https://dev-widget.fractalpay.com/";
+  masterBaseUrl = "https://api.dev.fractalpay.com/";
+  baseUrl = "https://widget.dev.fractalpay.com/";
   fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
   datacapUrl = "https://token-cert.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
@@ -1058,9 +1063,10 @@ function RequestPayment(props) {
       let cash_discount = CalculateCashDiscount(props == null ? void 0 : props.amount, props == null ? void 0 : props.surcharge);
       setCashDiscount(cash_discount);
     }
-  }, [props == null ? void 0 : props.pass_fee]);
+  }, [props == null ? void 0 : props.pass_fee, show]);
   const handleClose = () => {
     setShow(false);
+    setCashDiscount(0);
     setErrors({});
   };
   const handleShow = () => setShow(true);
@@ -2458,6 +2464,20 @@ position:relative;
             border: 0;
             border-right: 1px solid #dee2e6;
         }
+
+        .frac-fee-text{
+            display: block;
+            padding: 10px 0 4px;
+            font-family: 'IBM Plex Mono', monospace !important;
+            color: #727272 !important;
+            font-size: 12px;
+            line-height: 1.4;
+            text-align: start !important;
+        }
+        .frac-fee-amount{
+            color: #c62828 !important;
+        }
+
         ` });
 }
 
@@ -3298,7 +3318,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_month",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "46px", display: "block", minHeight: "46px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3306,7 +3326,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_year",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "46px", display: "block", minHeight: "46px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3314,7 +3334,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "cvv",
           className: "form-control card-cvv-in required",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "46px", display: "block", minHeight: "46px" }
         }
       ) })
     ] }) })
@@ -3573,6 +3593,8 @@ function GetPaymentPage(props) {
   const [saveACHinfo, setSaveACHinfo] = useState4(false);
   const [isBankConsentChecked, setIsBankConsentChecked] = useState4(false);
   const [errorBankConsent, setErrorBankConsent] = useState4("");
+  const [saveACHConsent1, setSaveACHConsent1] = useState4(false);
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState4("");
   const fractalpayClientKey = props.merchantPublicKey;
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
@@ -3593,6 +3615,8 @@ function GetPaymentPage(props) {
   const [selectedCard, setSelectedCard] = useState4();
   const [selectedReader, setSelectedReader] = useState4(void 0);
   const [cashDiscount, setCashDiscount] = useState4(Number(props == null ? void 0 : props.amount));
+  const [bankAmount, setBankAmount] = useState4(Number(props == null ? void 0 : props.amount));
+  const [bankFeeAmount, setBankFeeAmount] = useState4(0);
   const [paymentData, setPaymentData] = useState4();
   let [tranId, setTranId] = useState4("");
   const tokenizerRef = useRef3(null);
@@ -3627,7 +3651,25 @@ function GetPaymentPage(props) {
   useEffect8(() => {
     if (show) {
       let cash_discount = CalculateCashDiscount(props == null ? void 0 : props.amount, (props == null ? void 0 : props.surcharge) || 0);
+      let bankAmount2 = cash_discount;
+      if ((props == null ? void 0 : props.bankFeeAmount) && Number(props == null ? void 0 : props.bankFeeAmount) > 0) {
+        bankAmount2 = Number(cash_discount) + Number(props == null ? void 0 : props.bankFeeAmount);
+      }
+      setBankAmount(bankAmount2);
       setCashDiscount(cash_discount);
+      const cardFeeAmount = Number((Number(props == null ? void 0 : props.amount) - Number(cash_discount || 0)).toFixed(2));
+      const bankFeeAmount2 = Number((props == null ? void 0 : props.bankFeeAmount) || 0);
+      const bankSavingsAmount = Math.max(bankFeeAmount2 > 0 ? cardFeeAmount - bankFeeAmount2 : cardFeeAmount, 0);
+      const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
+      setBankFeeAmount(bankFeeAmount2);
+      console.log({
+        cash_discount,
+        bankAmount: bankAmount2,
+        cardFeeAmount,
+        bankFeeAmount: bankFeeAmount2,
+        bankSavingsAmount,
+        bankSavingsText
+      });
     }
   }, [show, props == null ? void 0 : props.pass_fee, props == null ? void 0 : props.amount, props == null ? void 0 : props.surcharge]);
   const handleClose = () => {
@@ -3694,6 +3736,8 @@ function GetPaymentPage(props) {
     setCardList([]);
     setIsBankConsentChecked(false);
     setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -3793,11 +3837,14 @@ function GetPaymentPage(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
-    if (!isBankConsentChecked) {
+    if (!saveACHinfo && !isBankConsentChecked) {
       setErrorBankConsent("Above consent is required");
     }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
+    return Object.keys(errors).length > 0;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
@@ -3956,7 +4003,13 @@ function GetPaymentPage(props) {
         }
       }
     } else {
-      const hasError = validateAchData();
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
       if (hasError) return;
       else {
         setLoading2(true);
@@ -3967,7 +4020,7 @@ function GetPaymentPage(props) {
           routing_number: achData == null ? void 0 : achData.routingNumber,
           bank_name: achData == null ? void 0 : achData.bankName,
           account_type: achData == null ? void 0 : achData.accountType,
-          amount: String(cashDiscount || 0),
+          amount: String(bankAmount || 0),
           isSaveAch: saveACHinfo,
           customer_id: props == null ? void 0 : props.customerId,
           order_id: props == null ? void 0 : props.orderID,
@@ -4049,11 +4102,11 @@ function GetPaymentPage(props) {
     let amount = String(props == null ? void 0 : props.amount);
     let card_id = selectedCard == null ? void 0 : selectedCard.id;
     let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
-    if (fractalpayPublicKey && order_id && amount && cashDiscount) {
+    if (fractalpayPublicKey && order_id && amount && bankAmount) {
       if (customer_id) {
         if (card_id) {
           let chargeobj = __spreadValues({
-            amount: card_type === "Bank" ? `${cashDiscount}` : amount,
+            amount: card_type === "Bank" ? `${bankAmount}` : amount,
             order_id,
             customer_id,
             card_id,
@@ -4292,22 +4345,21 @@ function GetPaymentPage(props) {
                         /* @__PURE__ */ jsx19("div", { className: "pay-amount-conatiner", children: /* @__PURE__ */ jsx19("small", { className: "pay-payment-amount", children: "Select paymet type" }) }),
                         /* @__PURE__ */ jsxs11("div", { className: "frac-card-bank-radio-main", children: [
                           /* @__PURE__ */ jsx19(CardBankRadio, { label: "Card", amount: (_a = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                          (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Bank", amount: (_b = Number(cashDiscount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab }),
+                          (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab }),
                           (props == null ? void 0 : props.isReader) && (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_c = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Reader", amount: (_d = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _d.toFixed(2), value: "reader", onChange: handletabchange, activetab })
                         ] }),
-                        !loading && (numberToBoolean(paymentData == null ? void 0 : paymentData.showSurcharge) ? cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) ? /* @__PURE__ */ jsxs11("div", { className: "frac-cash-discount-fee", children: [
-                          /* @__PURE__ */ jsxs11("small", { children: [
-                            activetab === "card" || activetab === "reader" ? "Cash Discount" : "Cash Discount Savings",
-                            "  "
-                          ] }),
-                          /* @__PURE__ */ jsx19("p", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
-                        ] }) : null : cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) && (activetab === "card" || activetab === "reader") ? /* @__PURE__ */ jsxs11("div", { className: "frac-cash-discount-fee", children: [
-                          /* @__PURE__ */ jsxs11("small", { children: [
-                            activetab === "card" || activetab === "reader" ? "Surcharge" : null,
-                            "  "
+                        !loading && /* @__PURE__ */ jsxs11("div", { className: "", children: [
+                          activetab == "ach" && bankFeeAmount > 0 && /* @__PURE__ */ jsxs11("small", { className: "frac-fee-text", children: [
+                            "There is a processing fee of ",
+                            /* @__PURE__ */ jsx19("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
+                            "."
                           ] }),
-                          /* @__PURE__ */ jsx19("p", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
-                        ] }) : null)
+                          (activetab === "card" || activetab === "reader") && (props == null ? void 0 : props.pass_fee) && cashDiscount && cashDiscount > 0 && /* @__PURE__ */ jsxs11("small", { className: "frac-fee-text", children: [
+                            "Cards include a fee amount of ",
+                            /* @__PURE__ */ jsx19("span", { className: "frac-fee-amount", children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) }),
+                            "."
+                          ] })
+                        ] })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs11("div", { className: "pay-conatiner-one-last", children: [
@@ -4612,7 +4664,7 @@ function GetPaymentPage(props) {
                         /* @__PURE__ */ jsx19(CardList, { listHeading: "Banks", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
                           setActiveinBank("form");
                         } }),
-                        /* @__PURE__ */ jsx19("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: formatUSD((_n = Number(cashDiscount)) == null ? void 0 : _n.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx19("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: formatUSD((_n = Number(bankAmount)) == null ? void 0 : _n.toFixed(2)) }) })
                       ] }) : /* @__PURE__ */ jsxs11("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
                         if (e.key === "Enter" && loading2) {
                           e.preventDefault();
@@ -4720,27 +4772,46 @@ function GetPaymentPage(props) {
                               accountTypes.map((type) => /* @__PURE__ */ jsx19("option", { value: type.value, children: type.label }, type.value))
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
-                              setIsBankConsentChecked(e.target.checked);
-                              if (e.target.checked) {
-                                setErrorBankConsent("");
-                              }
-                            } }),
-                            /* @__PURE__ */ jsx19("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                          !saveACHinfo && /* @__PURE__ */ jsxs11(Fragment11, { children: [
+                            /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                                setIsBankConsentChecked(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsent("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsx19("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                            ] }),
+                            errorBankConsent && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsent })
                           ] }),
-                          errorBankConsent && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                            /* @__PURE__ */ jsx19("label", { htmlFor: "saveACH", children: "Save Bank" })
+                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => {
+                              setSaveACHinfo(e.target.checked);
+                              if (!e.target.checked) {
+                                setSaveACHConsent1(false);
+                                setErrorBankConsentOther("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsx19("label", { htmlFor: "saveACH", children: "Save for future use" })
                           ] }),
-                          saveACHinfo && /* @__PURE__ */ jsx19("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" }, children: /* @__PURE__ */ jsxs11("p", { children: [
-                            "If checked, I agree for ",
-                            /* @__PURE__ */ jsx19("b", { children: (paymentData == null ? void 0 : paymentData.bname) || "merchant" }),
-                            " to have my permission to charge this bank account for agreed upon purchases in the future."
-                          ] }) })
+                          saveACHinfo && /* @__PURE__ */ jsxs11(Fragment11, { children: [
+                            /* @__PURE__ */ jsxs11("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                                setSaveACHConsent1(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsentOther("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsxs11("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                                "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                                (paymentData == null ? void 0 : paymentData.bname) || "merchant",
+                                "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                              ] })
+                            ] }),
+                            errorBankConsentOther && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsentOther })
+                          ] })
                         ] }),
-                        /* @__PURE__ */ jsx19("div", { className: "form-group ", children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_v = Number(cashDiscount)) == null ? void 0 : _v.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx19("div", { className: "form-group ", children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_v = Number(bankAmount)) == null ? void 0 : _v.toFixed(2)) }) })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs11("div", { id: "reader", style: { display: activetab === "reader" ? "block" : "none" }, className: "tabcontent", children: [
@@ -7450,7 +7521,7 @@ import { IoArrowBack as IoArrowBack3 } from "react-icons/io5";
 import { NumericFormat } from "react-number-format";
 import { Fragment as Fragment17, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function PartialPayment(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const buttonRef = useRef8(null);
   useEffect13(() => {
     if (props.onTriggerPay) {
@@ -7498,6 +7569,8 @@ function PartialPayment(props) {
   const [partialError, setPartialError] = useState8("");
   const [isBankConsentChecked, setIsBankConsentChecked] = useState8(false);
   const [errorBankConsent, setErrorBankConsent] = useState8("");
+  const [saveACHConsent1, setSaveACHConsent1] = useState8(false);
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState8("");
   const tokenizerRef = useRef8(null);
   const fractalStyles = {
     input: {
@@ -7611,6 +7684,8 @@ function PartialPayment(props) {
     setPartialError("");
     setIsBankConsentChecked(false);
     setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -7711,11 +7786,14 @@ function PartialPayment(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
-    if (!isBankConsentChecked) {
+    if (!saveACHinfo && !isBankConsentChecked) {
       setErrorBankConsent("Above consent is required");
     }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
+    return Object.keys(errors).length > 0;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
@@ -7860,7 +7938,13 @@ function PartialPayment(props) {
         }
       }
     } else {
-      const hasError = validateAchData();
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
       if (hasError) return;
       else {
         setLoading2(true);
@@ -8236,10 +8320,7 @@ function PartialPayment(props) {
                       ] }),
                       /* @__PURE__ */ jsxs17("div", { className: "amt-pay-con", children: [
                         /* @__PURE__ */ jsx28("div", { className: "pay-amount-conatiner", children: /* @__PURE__ */ jsx28("small", { className: "pay-payment-amount", children: "Select payment type" }) }),
-                        /* @__PURE__ */ jsxs17("div", { className: "frac-card-bank-radio-main", children: [
-                          /* @__PURE__ */ jsx28(CardBankRadio, { label: "Card", amount: (_a = Number(aftertaxAmount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                          (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsx28(CardBankRadio, { label: "Bank", amount: (_b = Number(cashDiscount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
-                        ] }),
+                        /* @__PURE__ */ jsx28("div", { className: "frac-card-bank-radio-main", children: /* @__PURE__ */ jsx28(CardBankRadio, { label: "Card", amount: (_a = Number(aftertaxAmount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }) }),
                         numberToBoolean(paymentData == null ? void 0 : paymentData.showSurcharge) ? cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) ? /* @__PURE__ */ jsxs17("div", { className: "frac-cash-discount-fee", children: [
                           /* @__PURE__ */ jsxs17("small", { children: [
                             activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
@@ -8308,7 +8389,7 @@ function PartialPayment(props) {
                           /* @__PURE__ */ jsx28("small", { className: "pay-payment-amount", children: "Payment Amount" }),
                           /* @__PURE__ */ jsxs17("strong", { className: "pay-amount", children: [
                             "$",
-                            (_c = Number(aftertaxAmount)) == null ? void 0 : _c.toFixed(2)
+                            (_b = Number(aftertaxAmount)) == null ? void 0 : _b.toFixed(2)
                           ] })
                         ] }),
                         activetab != "ach" && /* @__PURE__ */ jsxs17("div", { children: [
@@ -8350,7 +8431,7 @@ function PartialPayment(props) {
                           /* @__PURE__ */ jsx28("small", { className: "pay-payment-amount", children: "Payment Amount" }),
                           /* @__PURE__ */ jsxs17("strong", { className: "pay-amount", children: [
                             "$",
-                            (_d = Number(aftertaxAmount)) == null ? void 0 : _d.toFixed(2)
+                            (_c = Number(aftertaxAmount)) == null ? void 0 : _c.toFixed(2)
                           ] })
                         ] }),
                         /* @__PURE__ */ jsxs17("div", { children: [
@@ -8385,7 +8466,7 @@ function PartialPayment(props) {
                         /* @__PURE__ */ jsx28(CardList, { listHeading: "Cards", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
                           setActiveinCard("form");
                         } }),
-                        /* @__PURE__ */ jsx28("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: partialAmount && !partialError ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(aftertaxAmount)) == null ? void 0 : _f.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx28("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: partialAmount && !partialError ? formatUSD((_d = Number(partialAmount)) == null ? void 0 : _d.toFixed(2)) : formatUSD((_e = Number(aftertaxAmount)) == null ? void 0 : _e.toFixed(2)) }) })
                       ] }) : (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 ? /* @__PURE__ */ jsxs17(
                         "form",
                         {
@@ -8429,14 +8510,14 @@ function PartialPayment(props) {
                                     maxLength: 100,
                                     placeholder: "Order Id",
                                     disabled: true,
-                                    value: (_g = props == null ? void 0 : props.orderID) != null ? _g : "",
+                                    value: (_f = props == null ? void 0 : props.orderID) != null ? _f : "",
                                     style: { background: "#F6F6F7", color: "#727272" }
                                   }
                                 )
                               ] }),
                               /* @__PURE__ */ jsxs17("div", { className: "form-group", children: [
                                 /* @__PURE__ */ jsx28("label", { htmlFor: "zip", children: "ZIP" }),
-                                /* @__PURE__ */ jsx28("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                                /* @__PURE__ */ jsx28("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
                                 (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx28("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
                               ] }),
                               (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsx28("div", { className: "form-group", children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
@@ -8463,8 +8544,8 @@ function PartialPayment(props) {
                               ] }) })
                             ] }),
                             /* @__PURE__ */ jsxs17("div", { className: "form-group", style: { marginTop: "20px", padding: "0" }, children: [
-                              (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_i = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _i.length) > 0 && /* @__PURE__ */ jsx28("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
-                              /* @__PURE__ */ jsx28("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount && !partialError ? formatUSD((_j = Number(partialAmount)) == null ? void 0 : _j.toFixed(2)) : formatUSD((_k = Number(aftertaxAmount)) == null ? void 0 : _k.toFixed(2)) })
+                              (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_h = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _h.length) > 0 && /* @__PURE__ */ jsx28("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
+                              /* @__PURE__ */ jsx28("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount && !partialError ? formatUSD((_i = Number(partialAmount)) == null ? void 0 : _i.toFixed(2)) : formatUSD((_j = Number(aftertaxAmount)) == null ? void 0 : _j.toFixed(2)) })
                             ] })
                           ]
                         }
@@ -8503,14 +8584,14 @@ function PartialPayment(props) {
                                 maxLength: 100,
                                 placeholder: "Order Id",
                                 disabled: true,
-                                value: (_l = props == null ? void 0 : props.orderID) != null ? _l : "",
+                                value: (_k = props == null ? void 0 : props.orderID) != null ? _k : "",
                                 style: { background: "#F6F6F7", color: "#727272" }
                               }
                             )
                           ] }),
                           /* @__PURE__ */ jsxs17("div", { className: "form-group", children: [
                             /* @__PURE__ */ jsx28("label", { htmlFor: "zip", children: "ZIP" }),
-                            /* @__PURE__ */ jsx28("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_m = cardData == null ? void 0 : cardData.zipCode) != null ? _m : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                            /* @__PURE__ */ jsx28("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_l = cardData == null ? void 0 : cardData.zipCode) != null ? _l : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
                             (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx28("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
                           ] }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsx28("div", { className: "form-group", children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
@@ -8537,8 +8618,8 @@ function PartialPayment(props) {
                           ] }) })
                         ] }),
                         /* @__PURE__ */ jsxs17("div", { className: "form-group", style: { marginTop: "20px", padding: "0" }, children: [
-                          (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_n = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _n.length) > 0 && /* @__PURE__ */ jsx28("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
-                          /* @__PURE__ */ jsx28("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount && !partialError ? formatUSD((_o = Number(partialAmount)) == null ? void 0 : _o.toFixed(2)) : formatUSD((_p = Number(aftertaxAmount)) == null ? void 0 : _p.toFixed(2)) })
+                          (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_m = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _m.length) > 0 && /* @__PURE__ */ jsx28("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
+                          /* @__PURE__ */ jsx28("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount && !partialError ? formatUSD((_n = Number(partialAmount)) == null ? void 0 : _n.toFixed(2)) : formatUSD((_o = Number(aftertaxAmount)) == null ? void 0 : _o.toFixed(2)) })
                         ] })
                       ] })
                     ] }),
@@ -8554,7 +8635,7 @@ function PartialPayment(props) {
                         /* @__PURE__ */ jsx28(CardList, { listHeading: "Banks", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
                           setActiveinBank("form");
                         } }),
-                        /* @__PURE__ */ jsx28("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: partialAmount && !partialError ? formatUSD((_q = Number(partialAmount)) == null ? void 0 : _q.toFixed(2)) : formatUSD((_r = Number(cashDiscount)) == null ? void 0 : _r.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx28("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: partialAmount && !partialError ? formatUSD((_p = Number(partialAmount)) == null ? void 0 : _p.toFixed(2)) : formatUSD((_q = Number(cashDiscount)) == null ? void 0 : _q.toFixed(2)) }) })
                       ] }) : /* @__PURE__ */ jsxs17("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
                         if (e.key === "Enter" && loading2) {
                           e.preventDefault();
@@ -8567,7 +8648,7 @@ function PartialPayment(props) {
                         }, children: [
                           /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4", children: [
                             /* @__PURE__ */ jsx28("label", { htmlFor: "nameonaccount", children: "Name on account" }),
-                            /* @__PURE__ */ jsx28("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_s = achData == null ? void 0 : achData.name) != null ? _s : "", onChange: handleChangeAch }),
+                            /* @__PURE__ */ jsx28("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_r = achData == null ? void 0 : achData.name) != null ? _r : "", onChange: handleChangeAch }),
                             (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx28("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
                           ] }),
                           /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4", children: [
@@ -8581,7 +8662,7 @@ function PartialPayment(props) {
                                 maxLength: 9,
                                 placeholder: "000000000",
                                 name: "routingNumber",
-                                value: (_t = achData == null ? void 0 : achData.routingNumber) != null ? _t : "",
+                                value: (_s = achData == null ? void 0 : achData.routingNumber) != null ? _s : "",
                                 onChange: handleChangeAch
                               }
                             ),
@@ -8598,7 +8679,7 @@ function PartialPayment(props) {
                                 maxLength: 16,
                                 placeholder: "0000000000",
                                 name: "accountNumber",
-                                value: (_u = achData == null ? void 0 : achData.accountNumber) != null ? _u : "",
+                                value: (_t = achData == null ? void 0 : achData.accountNumber) != null ? _t : "",
                                 onChange: handleChangeAch
                               }
                             ),
@@ -8615,7 +8696,7 @@ function PartialPayment(props) {
                                 maxLength: 16,
                                 placeholder: "0000000000",
                                 name: "confirmAccountNumber",
-                                value: (_v = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _v : "",
+                                value: (_u = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _u : "",
                                 onChange: handleChangeAch
                               }
                             ),
@@ -8632,7 +8713,7 @@ function PartialPayment(props) {
                                 maxLength: 100,
                                 placeholder: "My Bank",
                                 name: "bankName",
-                                value: (_w = achData == null ? void 0 : achData.bankName) != null ? _w : "",
+                                value: (_v = achData == null ? void 0 : achData.bankName) != null ? _v : "",
                                 onChange: handleChangeAch
                               }
                             ),
@@ -8649,7 +8730,7 @@ function PartialPayment(props) {
                                 maxLength: 100,
                                 placeholder: "My Company",
                                 name: "companyName",
-                                value: (_x = achData == null ? void 0 : achData.companyName) != null ? _x : "",
+                                value: (_w = achData == null ? void 0 : achData.companyName) != null ? _w : "",
                                 onChange: handleChangeAch
                               }
                             ),
@@ -8657,41 +8738,54 @@ function PartialPayment(props) {
                           ] }),
                           /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4", children: [
                             /* @__PURE__ */ jsx28("label", { htmlFor: "accounttype", children: "Select account type" }),
-                            /* @__PURE__ */ jsxs17("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_y = achData == null ? void 0 : achData.accountType) != null ? _y : "", onChange: handleChangeAch, children: [
+                            /* @__PURE__ */ jsxs17("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_x = achData == null ? void 0 : achData.accountType) != null ? _x : "", onChange: handleChangeAch, children: [
                               /* @__PURE__ */ jsx28("option", { value: "", children: "Select account" }),
                               accountTypes.map((type) => /* @__PURE__ */ jsx28("option", { value: type.value, children: type.label }, type.value))
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx28(
-                              "input",
-                              {
-                                type: "checkbox",
-                                id: "achconsent",
-                                className: "",
-                                checked: isBankConsentChecked,
-                                onChange: (e) => {
-                                  setIsBankConsentChecked(e.target.checked);
-                                  if (e.target.checked) {
-                                    setErrorBankConsent("");
+                          !saveACHinfo && /* @__PURE__ */ jsxs17(Fragment17, { children: [
+                            /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx28(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  id: "achconsent",
+                                  className: "",
+                                  checked: isBankConsentChecked,
+                                  onChange: (e) => {
+                                    setIsBankConsentChecked(e.target.checked);
+                                    if (e.target.checked) {
+                                      setErrorBankConsent("");
+                                    }
                                   }
                                 }
-                              }
-                            ),
-                            /* @__PURE__ */ jsx28("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                              ),
+                              /* @__PURE__ */ jsx28("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                            ] }),
+                            errorBankConsent && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsent })
                           ] }),
-                          errorBankConsent && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
                             /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                            /* @__PURE__ */ jsx28("label", { htmlFor: "saveACH", children: "Save Bank" })
+                            /* @__PURE__ */ jsx28("label", { htmlFor: "saveACH", children: "Save for future use" })
                           ] }),
-                          saveACHinfo && /* @__PURE__ */ jsx28("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" }, children: /* @__PURE__ */ jsxs17("p", { children: [
-                            "If checked, I agree for ",
-                            /* @__PURE__ */ jsx28("b", { children: (paymentData == null ? void 0 : paymentData.bname) || "merchant" }),
-                            " to have my permission to charge this bank account for agreed upon purchases in the future."
-                          ] }) })
+                          saveACHinfo && /* @__PURE__ */ jsxs17(Fragment17, { children: [
+                            /* @__PURE__ */ jsxs17("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                                setSaveACHConsent1(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsentOther("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsxs17("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                                "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                                (paymentData == null ? void 0 : paymentData.bname) || "merchant",
+                                "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                              ] })
+                            ] }),
+                            errorBankConsentOther && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsentOther })
+                          ] })
                         ] }),
-                        /* @__PURE__ */ jsx28("div", { className: "form-group ", children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: partialAmount && !partialError ? formatUSD((_z = Number(partialAmount)) == null ? void 0 : _z.toFixed(2)) : formatUSD((_A = Number(cashDiscount)) == null ? void 0 : _A.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx28("div", { className: "form-group ", children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: partialAmount && !partialError ? formatUSD((_y = Number(partialAmount)) == null ? void 0 : _y.toFixed(2)) : formatUSD((_z = Number(cashDiscount)) == null ? void 0 : _z.toFixed(2)) }) })
                       ] })
                     ] })
                   ] }) }) })
@@ -10187,6 +10281,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [achData, setAchData] = useState11();
   const [achError, setAchError] = useState11({});
   const [saveACHinfo, setSaveACHinfo] = useState11(false);
+  const [saveACHConsent1, setSaveACHConsent1] = useState11(false);
   const [saveCardInfo, setSaveCardInfo] = useState11(false);
   const [error, setError] = useState11("");
   const [errorIframe, setErrorIframe] = useState11("");
@@ -10217,6 +10312,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [dcToken, setDCToken] = useState11();
   const [isBankConsentChecked, setIsBankConsentChecked] = useState11(false);
   const [errorBankConsent, setErrorBankConsent] = useState11("");
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState11("");
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
   let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -10410,11 +10506,14 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
         errors.companyName = "Company Name is required for business accounts";
       }
     }
-    if (!isBankConsentChecked) {
+    if (!saveACHinfo && !isBankConsentChecked) {
       setErrorBankConsent("Above consent is required");
     }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
+    return Object.keys(errors).length > 0;
   };
   const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
@@ -10597,7 +10696,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       let isValid = true;
       if (!isValid) return;
     } else {
-      const hasError = validateAchData();
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
       if (hasError) return;
     }
     try {
@@ -10828,6 +10933,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     setRemainingAmount("");
     setIsBankConsentChecked(false);
     setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
   };
   const getCardList = async () => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
@@ -11456,7 +11563,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
                           (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
                           pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
-                            "Credit cards include a fee amount of ",
+                            "Cards include a fee amount of ",
                             /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
                             "."
                           ] })
@@ -11537,7 +11644,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                         /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
                         (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
                         pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
-                          "Credit cards include a fee amount of ",
+                          "Cards include a fee amount of ",
                           /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
                           "."
                         ] })
@@ -11711,25 +11818,44 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
                           "."
                         ] }),
-                        /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                          /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
-                            setIsBankConsentChecked(e.target.checked);
-                            if (e.target.checked) {
-                              setErrorBankConsent("");
-                            }
-                          } }),
-                          /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                        !saveACHinfo && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                          /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                            /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                              setIsBankConsentChecked(e.target.checked);
+                              if (e.target.checked) {
+                                setErrorBankConsent("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                          ] }),
+                          errorBankConsent && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsent })
                         ] }),
-                        errorBankConsent && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsent }),
                         customerId && /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                          /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                          /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
+                          /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => {
+                            setSaveACHinfo(e.target.checked);
+                            if (!e.target.checked) {
+                              setSaveACHConsent1(false);
+                              setErrorBankConsentOther("");
+                            }
+                          } }),
+                          /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save for future use" })
                         ] }),
-                        saveACHinfo && /* @__PURE__ */ jsx36("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs21("p", { children: [
-                          "If checked, I agree to give the ",
-                          /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
-                          " permission to charge this bank account for agreed-upon purchases in the future."
-                        ] }) })
+                        saveACHinfo && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                          /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                            /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                              setSaveACHConsent1(e.target.checked);
+                              if (e.target.checked) {
+                                setErrorBankConsentOther("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsxs21("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                              "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                              merchantName || "merchant",
+                              "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                            ] })
+                          ] }),
+                          errorBankConsentOther && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsentOther })
+                        ] })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsx36("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "20px 0 0", display: onSubmit ? "none" : "block" }, type: "submit", children: formatUSD((_u = Number(bankAmount)) == null ? void 0 : _u.toFixed(2)) }) })
@@ -11768,7 +11894,8 @@ var PaymentWidget = ({
   isPartial,
   bankSurcharge,
   partialRef,
-  customCSS: customCSS2
+  customCSS: customCSS2,
+  disableSubmitBtn = false
 }) => {
   const [show, setShow] = useState12(autoTrigger || false);
   const [loading, setLoading] = useState12(false);
@@ -11799,7 +11926,8 @@ var PaymentWidget = ({
       isPartial,
       bankSurcharge,
       partialRef,
-      customCSS: customCSS2
+      customCSS: customCSS2,
+      disableSubmitBtn
     }),
     [
       amount,
@@ -11820,7 +11948,8 @@ var PaymentWidget = ({
       autoTrigger,
       isPartial,
       bankSurcharge,
-      partialRef
+      partialRef,
+      disableSubmitBtn
     ]
   );
   const [commonProps, setCommonProps] = useState12(initialCommonProps);
@@ -11868,7 +11997,7 @@ var PaymentWidget = ({
     /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
     /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
     /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
-    !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
+    !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", disabled: disableSubmitBtn, onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
     ] }),
@@ -12103,7 +12232,7 @@ form#ACHPaymentForm .ach-scrl {
 }
     @media screen and (max-width: 375px) {
     .frac-payment-form-div .exp-date-year-container {
-    flex-direction: column;
+    // flex-direction: column;
 }
         .parent-pay-container {
         padding: 10px;
@@ -12204,7 +12333,7 @@ padding:0px !important;
     padding: 0px 10px;
 }
    .toggle-num-wrapper-new .input-main-wrap-frac {
-    height: 36px;
+    height: 38px;
 }
    .toggle-num-wrapper-new:focus {
     border: 1px solid #004eab !important;