@fractalpay/fractalpay-next 0.1.6 → 0.1.7

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next",
-      version: "0.1.6",
+      version: "0.1.7",
       private: false,
       type: "module",
       scripts: {
@@ -3614,6 +3614,10 @@ var DataCapFields = ({
     initialize();
     return () => {
       resolverRef.current = null;
+      if (initTimeoutRef.current) {
+        clearTimeout(initTimeoutRef.current);
+        initTimeoutRef.current = null;
+      }
     };
   }, [isOpen, tokenKey]);
   useEffect7(() => {
@@ -4106,7 +4110,8 @@ function FractalOrderSummary({
   cardIcons,
   note,
   secureIcon,
-  secureText = "Secure payment powered by Fractal"
+  secureText = "Secure payment powered by Fractal",
+  extra
 }) {
   return /* @__PURE__ */ jsxs8("aside", { className: "fps-summary", children: [
     /* @__PURE__ */ jsx17("div", { className: "fps-logo", children: logo && /* @__PURE__ */ jsx17("img", { src: logo, alt: "" }) }),
@@ -4121,6 +4126,7 @@ function FractalOrderSummary({
       /* @__PURE__ */ jsx17("div", { className: "fps-total-label", children: totalLabel }),
       /* @__PURE__ */ jsx17("div", { className: "fps-total", children: total })
     ] }),
+    extra,
     cardIcons && /* @__PURE__ */ jsxs8("div", { className: "fps-cards", children: [
       /* @__PURE__ */ jsx17("img", { src: cardIcons.visa, alt: "Visa" }),
       /* @__PURE__ */ jsx17("img", { src: cardIcons.mastercard, alt: "Mastercard" }),
@@ -4326,6 +4332,7 @@ function GetPaymentPage(props) {
   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 [bankSavingsAmount, setBankSavingsAmount] = useState4(0);
   const [paymentData, setPaymentData] = useState4();
   let [tranId, setTranId] = useState4("");
   let [isDebitAdjusted, setIsDebitAdjusted] = useState4(false);
@@ -4434,16 +4441,18 @@ function GetPaymentPage(props) {
       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))}` : "";
+      const bankSavingsAmount2 = Math.max(bankFeeAmount2 > 0 ? cardFeeAmount - bankFeeAmount2 : cardFeeAmount, 0);
+      const bankSavingsText = bankSavingsAmount2 > 0 ? `Save ${formatUSD(bankSavingsAmount2.toFixed(2))}` : "";
       setBankFeeAmount(bankFeeAmount2);
+      setBankSavingsAmount(bankSavingsAmount2);
       console.log({
         cash_discount,
         bankAmount: bankAmount2,
         cardFeeAmount,
         bankFeeAmount: bankFeeAmount2,
-        bankSavingsAmount,
-        bankSavingsText
+        bankSavingsAmount: bankSavingsAmount2,
+        bankSavingsText,
+        amount: props == null ? void 0 : props.amount
       });
     }
   }, [show, props == null ? void 0 : props.pass_fee, props == null ? void 0 : props.amount, props == null ? void 0 : props.surcharge]);
@@ -4454,6 +4463,8 @@ function GetPaymentPage(props) {
     setSuccess(false);
     setTranId("");
     setSurchargeResult(null);
+    setPaymentData(void 0);
+    setLoadingIframe(false);
     setAchData({
       name: "",
       routingNumber: "",
@@ -5304,7 +5315,7 @@ function GetPaymentPage(props) {
     cardTotal = Number((props == null ? void 0 : props.amount) || 0);
   }
   const surchargeFee = Math.max(cardTotal - baseAmount, 0);
-  const isBankView = activetab === "ach";
+  const isBankView = activetab !== "reader" && activeinCard === "list" && !!(selectedCard == null ? void 0 : selectedCard.id) ? (selectedCard == null ? void 0 : selectedCard.card_type) === "Bank" : activetab === "ach";
   const discountNum = Number((props == null ? void 0 : props.discount) || 0);
   const taxNum = Number((props == null ? void 0 : props.tax) || 0);
   const leftTotal = isBankView ? Number(bankAmount || 0) : cardTotal;
@@ -5361,11 +5372,16 @@ function GetPaymentPage(props) {
     { label: "Tax", value: fmtNum(taxNum), muted: true },
     ...showSurchargeLine ? [{ label: "Surcharge", value: formatUSD(surchargeFee.toFixed(2)) }] : []
   ];
-  const summaryNote = !hasFee ? null : isBankView ? /* @__PURE__ */ jsx18(FractalSavingsNote, { label: isSurchargeProgram ? "Savings" : "Cash discount savings", amount: formatUSD(surchargeFee.toFixed(2)) }) : isSurchargeProgram ? /* @__PURE__ */ jsxs9("div", { className: "fps-note", children: [
+  const summaryNote = isBankView ? bankSavingsAmount > 0 ? /* @__PURE__ */ jsx18(FractalSavingsNote, { label: isSurchargeProgram ? "Savings" : "Cash discount savings", amount: formatUSD(bankSavingsAmount.toFixed(2)) }) : null : !hasFee ? null : isSurchargeProgram ? bankFeeAmount > 0 ? /* @__PURE__ */ jsxs9("div", { className: "fps-note", children: [
     /* @__PURE__ */ jsx18("b", { children: formatUSD(baseAmount.toFixed(2)) }),
-    " if customer pays with debit or by bank (no surcharge)."
+    " if customer pays with debit (no surcharge), or ",
+    /* @__PURE__ */ jsx18("b", { children: formatUSD(Number(bankAmount || 0).toFixed(2)) }),
+    " if by bank."
   ] }) : /* @__PURE__ */ jsxs9("div", { className: "fps-note", children: [
     /* @__PURE__ */ jsx18("b", { children: formatUSD(baseAmount.toFixed(2)) }),
+    " if customer pays with debit or by bank (no surcharge)."
+  ] }) : /* @__PURE__ */ jsxs9("div", { className: "fps-note", children: [
+    /* @__PURE__ */ jsx18("b", { children: formatUSD(Number(bankAmount || 0).toFixed(2)) }),
     " if customer pays by bank (cash discount price)."
   ] });
   const LeftSummary = /* @__PURE__ */ jsx18(
@@ -7475,103 +7491,10 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
 import { useEffect as useEffect12, useRef as useRef7, useState as useState7 } from "react";
 import axios6 from "axios";
 import Swal3 from "sweetalert2";
-
-// src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
-import { Fragment as Fragment14, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var CardBankRadio = (_a) => {
-  var _b = _a, { skydesign = false, savingsText } = _b, props = __objRest(_b, ["skydesign", "savingsText"]);
-  const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
-  return /* @__PURE__ */ jsx27(Fragment14, { children: /* @__PURE__ */ jsx27(
-    "div",
-    {
-      className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
-      onClick: () => props.onChange(props.value),
-      role: "radio",
-      children: skydesign ? /* @__PURE__ */ jsxs14(Fragment14, { children: [
-        /* @__PURE__ */ jsxs14("div", { className: "frac-card-title-main", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "box-inner-card-text", children: [
-            /* @__PURE__ */ jsx27("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
-            /* @__PURE__ */ jsx27("div", { className: "frac-card-label-text", children: props.label })
-          ] }),
-          /* @__PURE__ */ jsx27("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx27("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
-        ] }),
-        /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
-          props.onChange(e.target.value);
-        } }) })
-      ] }) : /* @__PURE__ */ jsxs14(Fragment14, { children: [
-        /* @__PURE__ */ jsxs14("div", { className: "frac-card-title-main", children: [
-          /* @__PURE__ */ jsx27("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
-          /* @__PURE__ */ jsxs14("div", { className: "frac-card-label", children: [
-            /* @__PURE__ */ jsx27("div", { className: "frac-card-label-text", children: props.label }),
-            /* @__PURE__ */ jsx27("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
-          props.onChange(e.target.value);
-        } }) })
-      ] })
-    }
-  ) });
-};
-
-// src/app/components/PartialPayment/PartialPayment.tsx
-import { IoArrowBack } from "react-icons/io5";
-
-// src/app/components/Atoms/CardList/CardList.tsx
-import { Fragment as Fragment15, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
-var CardList = ({ listHeading = "Card", ListItems, selectedCard, setSelectedCard, paymentGateway, handleDeleteCard, otherButtonAction, otherButtonLabel, headingClass }) => {
-  let trash2 = S3Url + "widget/Trash.svg";
-  return /* @__PURE__ */ jsxs15(Fragment15, { children: [
-    /* @__PURE__ */ jsx28("h6", { className: headingClass || "card-ach-heading", style: { marginBottom: "10px !important" }, children: listHeading }),
-    /* @__PURE__ */ jsxs15("div", { className: "card-lint-div-in", children: [
-      /* @__PURE__ */ jsx28("div", { className: "card-list-div", children: ListItems && (ListItems == null ? void 0 : ListItems.length) > 0 && (ListItems == null ? void 0 : ListItems.map((card, index) => {
-        let isDisabled = false;
-        if (paymentGateway) {
-          isDisabled = paymentGateway != (card == null ? void 0 : card.payment_method_type) && (card == null ? void 0 : card.card_type) != "Bank";
-        }
-        return /* @__PURE__ */ jsxs15("div", { className: "card-list-single-div", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "card-number-radio", children: [
-            /* @__PURE__ */ jsx28(
-              "input",
-              {
-                disabled: isDisabled,
-                type: "radio",
-                className: "cardRadio",
-                name: "selected_card",
-                id: "",
-                checked: (selectedCard == null ? void 0 : selectedCard.id) === (card == null ? void 0 : card.id),
-                onChange: (e) => setSelectedCard(card)
-              }
-            ),
-            /* @__PURE__ */ jsxs15("label", { htmlFor: "", className: "card-number-last-four", children: [
-              "**** ",
-              card == null ? void 0 : card.cardlastfourdigit
-            ] }),
-            (card == null ? void 0 : card.card_type) != "Bank" && /* @__PURE__ */ jsxs15("h6", { className: "card-expiry-date", children: [
-              card == null ? void 0 : card.expmonth,
-              "/",
-              card == null ? void 0 : card.expyear
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs15("div", { className: "card-number-radio", children: [
-            /* @__PURE__ */ jsx28("span", { className: "visa-card", children: /* @__PURE__ */ jsx28("img", { src: getCardType(card == null ? void 0 : card.card_type), alt: "" }) }),
-            /* @__PURE__ */ jsx28("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id), children: /* @__PURE__ */ jsx28("img", { src: trash2, alt: "" }) })
-          ] })
-        ] }, card == null ? void 0 : card.id);
-      })) }),
-      /* @__PURE__ */ jsxs15("div", { className: "pay-with-other-card", onClick: otherButtonAction, children: [
-        otherButtonLabel,
-        /* @__PURE__ */ jsx28("img", { src: defaultcard, alt: "" })
-      ] })
-    ] })
-  ] });
-};
-
-// src/app/components/PartialPayment/PartialPayment.tsx
 import { NumericFormat } from "react-number-format";
-import { Fragment as Fragment16, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx27, jsxs as jsxs14 } 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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const buttonRef = useRef7(null);
   useEffect12(() => {
     if (props.onTriggerPay) {
@@ -7593,15 +7516,14 @@ function PartialPayment(props) {
   const [loading, setLoading] = useState7(false);
   const [loading2, setLoading2] = useState7(false);
   const [loadingIframe, setLoadingIframe] = useState7(false);
+  const [surchargeLookupLoading, setSurchargeLookupLoading] = useState7(false);
   const [errorIframe, setErrorIframe] = useState7("");
   const [error, setError] = useState7("");
   const [success, setSuccess] = useState7(false);
   const [show, setShow] = useState7(false);
   const [activetab, setActive] = useState7("card");
-  const [activeList, setActiveList] = useState7("card");
   const [activeinCard, setActiveinCard] = useState7("form");
   const [activeinBank, setActiveinBank] = useState7("form");
-  const [activeForm, setActiveForm] = useState7(true);
   const [saveCardInfo, setSaveCardInfo] = useState7(false);
   const [saveACHinfo, setSaveACHinfo] = useState7(false);
   const fractalpayClientKey = props.merchantPublicKey;
@@ -7648,6 +7570,11 @@ function PartialPayment(props) {
   };
   const [paymentData, setPaymentData] = useState7();
   let [tranId, setTranId] = useState7("");
+  const [surchargeResult, setSurchargeResult] = useState7(null);
+  const isSurchargeProgram = Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1;
+  const fundingType = (_a = surchargeResult == null ? void 0 : surchargeResult.card_issue_type) == null ? void 0 : _a.toLowerCase();
+  const feeExempt = fundingType === "debit" || fundingType === "prepaid";
+  const cardTotal = isSurchargeProgram && feeExempt ? Number((_b = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _b : 0) : Number(aftertaxAmount);
   const showLoader = () => setLoading(true);
   const hideLoader = () => setLoading(false);
   const CalculateCashDiscount = (amount, surcharge) => {
@@ -7660,6 +7587,69 @@ function PartialPayment(props) {
     const originalAmount = +amount + +(amount * surchargeVal);
     return originalAmount;
   };
+  const createSurchargeSession = async () => {
+    var _a2;
+    try {
+      const requestOptions = { method: "POST", redirect: "follow" };
+      const res = await axios6.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+      const data = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.data;
+      const public_key_pem = (data == null ? void 0 : data.publicKeyPem) || (data == null ? void 0 : data.public_key_pem);
+      const session_key = data == null ? void 0 : data.session_key;
+      if (!public_key_pem || !session_key) return null;
+      return { session_key, public_key_pem };
+    } catch (err) {
+      console.error("Surcharge session error", err);
+      return null;
+    }
+  };
+  const getSurchargeOptions = () => {
+    var _a2;
+    return {
+      amount: Math.round((partialAmount && !partialError ? Number(partialAmount) : Number((_a2 = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _a2 : 0)) * 100),
+      cardholder_billing_zip: (cardData == null ? void 0 : cardData.zipCode) || void 0
+    };
+  };
+  const runCofSurchargeLookup = async (cardId) => {
+    var _a2, _b2;
+    try {
+      const res = await axios6.post(`${baseUrl}surcharge-lookup-cof`, {
+        fractalpayPublicKey: fractalpayClientKey,
+        customer_id: props == null ? void 0 : props.customerId,
+        card_id: cardId,
+        amount: partialAmount && !partialError ? Number(partialAmount) : Number((_a2 = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _a2 : 0),
+        cardholder_billing_zip: (cardData == null ? void 0 : cardData.zipCode) || void 0
+      });
+      const data = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data;
+      if (!data) return null;
+      return {
+        card_brand: data.card_brand,
+        card_issue_type: data.card_issue_type,
+        surcharge_allowed: data.surcharge_allowed,
+        max_surcharge_percent: data.max_surcharge_percent,
+        max_surcharge_amount: data.max_surcharge_amount
+      };
+    } catch (err) {
+      console.error("COF surcharge lookup failed", err);
+      return null;
+    }
+  };
+  useEffect12(() => {
+    const surchargingOn = Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1 && !!(props == null ? void 0 : props.pass_fee);
+    if (!surchargingOn || !(selectedCard == null ? void 0 : selectedCard.id) || selectedCard.card_type === "Bank") {
+      setSurchargeResult(null);
+      return;
+    }
+    let cancelled = false;
+    setSurchargeLookupLoading(true);
+    runCofSurchargeLookup(selectedCard.id).then((result) => {
+      if (cancelled) return;
+      setSurchargeResult(result);
+      setSurchargeLookupLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedCard == null ? void 0 : selectedCard.id, selectedCard == null ? void 0 : selectedCard.card_type, paymentData == null ? void 0 : paymentData.surchargeProgram, props == null ? void 0 : props.pass_fee]);
   useEffect12(() => {
     if (show) {
       if (props == null ? void 0 : props.pass_fee) {
@@ -7677,6 +7667,9 @@ function PartialPayment(props) {
     setError("");
     setSuccess(false);
     setTranId("");
+    setSurchargeResult(null);
+    setPaymentData(void 0);
+    setLoadingIframe(false);
     setAchData({
       name: "",
       routingNumber: "",
@@ -7725,8 +7718,6 @@ function PartialPayment(props) {
     });
     setSelectedReader({});
     setCashDiscount(0);
-    setActiveList("card");
-    setActiveForm(true);
     setActiveinBank("form");
     setActiveinCard("form");
     setLoading2(false);
@@ -7742,9 +7733,6 @@ function PartialPayment(props) {
     setLoderText("");
   };
   const handleShow = () => setShow(true);
-  const handletabchange = (id) => {
-    setActive(id);
-  };
   const handleCardChange = (field, value) => {
     const name2 = field;
     const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
@@ -7850,7 +7838,7 @@ function PartialPayment(props) {
     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;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n;
     e.preventDefault();
     const el = document.activeElement;
     if (el instanceof HTMLElement) {
@@ -7883,7 +7871,7 @@ function PartialPayment(props) {
                 response.isCardSave = `${saveCardInfo}`;
                 response.isCharge = true;
                 response.posSalesIdEncode = (_a3 = paymentData == null ? void 0 : paymentData.orderDetails) == null ? void 0 : _a3.orderId;
-                response.partial_amount = partialAmount && !partialError ? partialAmount : aftertaxAmount;
+                response.partial_amount = partialAmount && !partialError ? partialAmount : cardTotal;
                 socketClient_default.emit("sendMessage", response);
                 let eventName = (_b3 = paymentData == null ? void 0 : paymentData.orderDetails) == null ? void 0 : _b3.orderId;
                 socketClient_default.on(eventName, (data) => {
@@ -7926,15 +7914,16 @@ function PartialPayment(props) {
                     session_key: (_f2 = (_e2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.session_key
                   });
                   const card_issue_type = ((_g2 = tokenizeData == null ? void 0 : tokenizeData.bin_lookup_result) == null ? void 0 : _g2.card_issue_type) || null;
-                  if (card_issue_type === "Debit" && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
-                    setLoderText("Processing Debit card without fee");
+                  const feeExemptCard = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
+                  if (feeExemptCard && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
+                    setLoderText(`Processing ${card_issue_type} card without fee`);
                   }
                   const reqData = JSON.stringify(__spreadProps(__spreadValues({}, tokenizeData), {
                     isSaveCardChecked: saveCardInfo,
                     name: cardData == null ? void 0 : cardData.cardName,
                     postal_code: cardData == null ? void 0 : cardData.zipCode,
                     customer_id: props == null ? void 0 : props.customerId,
-                    partial_amount: partialAmount && !partialError ? partialAmount : aftertaxAmount,
+                    partial_amount: partialAmount && !partialError ? partialAmount : cardTotal,
                     card_issue_type
                   }));
                   const reqData2 = JSON.stringify({
@@ -7975,7 +7964,7 @@ function PartialPayment(props) {
                 }
               } catch (err) {
                 setLoading2(false);
-                setError(((_l2 = (_k2 = err == null ? void 0 : err.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
+                setError(((_l = (_k2 = err == null ? void 0 : err.response) == null ? void 0 : _k2.data) == null ? void 0 : _l.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
               }
             } else {
               try {
@@ -7992,7 +7981,7 @@ function PartialPayment(props) {
             }
           } catch (err) {
             setLoading2(false);
-            setError(((_n2 = (_m2 = err == null ? void 0 : err.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
+            setError(((_n = (_m = err == null ? void 0 : err.response) == null ? void 0 : _m.data) == null ? void 0 : _n.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
           }
         }
       }
@@ -8046,7 +8035,7 @@ function PartialPayment(props) {
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
     showLoader();
     try {
       const data = {
@@ -8064,7 +8053,7 @@ function PartialPayment(props) {
       let willShowCardForm = true;
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         let banklists = (_k2 = (_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list) == null ? void 0 : _k2.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
-        let cardlists = (_n2 = (_m2 = (_l2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l2.data) == null ? void 0 : _m2.card_list) == null ? void 0 : _n2.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
+        let cardlists = (_n = (_m = (_l = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l.data) == null ? void 0 : _m.card_list) == null ? void 0 : _n.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
         if ((cardlists == null ? void 0 : cardlists.length) > 0) {
           setActiveinCard("list");
           willShowCardForm = false;
@@ -8077,17 +8066,17 @@ function PartialPayment(props) {
       } else {
         setActive("card");
       }
-      if (((_p2 = (_o2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o2.data) == null ? void 0 : _p2.paymentDeviceList) && ((_s2 = (_r2 = (_q2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q2.data) == null ? void 0 : _r2.paymentDeviceList) == null ? void 0 : _s2.length) > 0) {
-        setSelectedReader((_u2 = (_t2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t2.data) == null ? void 0 : _u2.paymentDeviceList[0]);
+      if (((_p = (_o = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o.data) == null ? void 0 : _p.paymentDeviceList) && ((_s = (_r = (_q = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q.data) == null ? void 0 : _r.paymentDeviceList) == null ? void 0 : _s.length) > 0) {
+        setSelectedReader((_u = (_t = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t.data) == null ? void 0 : _u.paymentDeviceList[0]);
       }
-      if (willShowCardForm && ((_w2 = (_v2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v2.data) == null ? void 0 : _w2.paymentGateway) === 31 && ((_y2 = (_x2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x2.data) == null ? void 0 : _y2.dctoken)) {
+      if (willShowCardForm && ((_w = (_v = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v.data) == null ? void 0 : _w.paymentGateway) === 31 && ((_y = (_x = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x.data) == null ? void 0 : _y.dctoken)) {
         setLoadingIframe(true);
       }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
-      setError(((_A = (_z2 = err == null ? void 0 : err.response) == null ? void 0 : _z2.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+      setError(((_A = (_z = err == null ? void 0 : err.response) == null ? void 0 : _z.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async (e) => {
@@ -8115,7 +8104,7 @@ function PartialPayment(props) {
           } else if (card_type === "Bank") {
             amount2 = cashDiscount;
           } else {
-            amount2 = aftertaxAmount;
+            amount2 = cardTotal;
           }
           let chargeobj = {
             amount: amount2,
@@ -8141,8 +8130,9 @@ function PartialPayment(props) {
             "Content-Type": "application/json"
           };
           setLoading2(true);
-          if (card_issue_type == "Debit" && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
-            setLoderText("Processing Debit card without fee");
+          const feeExemptCard = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
+          if (feeExemptCard && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
+            setLoderText(`Processing ${card_issue_type} card without fee`);
           }
           socketClient_default.emit("sendMessage", { url: chargeurl, body: card_type == "Bank" ? rest : chargeobj, isChargebycard: true });
           socketClient_default.on("charge-by-card", (response) => {
@@ -8205,13 +8195,6 @@ function PartialPayment(props) {
       setError("Something went wrong.");
     }
   };
-  const handlepayment = (e) => {
-    if (activeList === "card") {
-      handlechargeCustomer(e);
-    } else if (activeList === "reader") {
-      handleChargewithEMV(e);
-    }
-  };
   useEffect12(() => {
     if (show && fractalpayClientKey) {
       getPaymentDetails();
@@ -8251,7 +8234,6 @@ function PartialPayment(props) {
             confirmButtonText: "OK",
             showConfirmButton: true,
             timer: 1e3,
-            // auto-close after 1 second
             timerProgressBar: true,
             customClass: {
               confirmButton: "btn btn-dark"
@@ -8305,11 +8287,6 @@ function PartialPayment(props) {
         return card;
     }
   };
-  const getCashDiscount = () => {
-    let cashDiscountNew = cashDiscount || 0;
-    let diff = Number(aftertaxAmount) - cashDiscountNew;
-    return diff.toFixed(0);
-  };
   const handlePartialChange = (values) => {
     var _a2, _b2, _c2, _d2;
     if (activetab === "ach") {
@@ -8321,9 +8298,9 @@ function PartialPayment(props) {
         setPartialError("");
       }
     } else {
-      if (((_c2 = Number(aftertaxAmount)) == null ? void 0 : _c2.toFixed(2)) < (values == null ? void 0 : values.floatValue) || (values == null ? void 0 : values.floatValue) <= 0) {
+      if (((_c2 = Number(cardTotal)) == null ? void 0 : _c2.toFixed(2)) < (values == null ? void 0 : values.floatValue) || (values == null ? void 0 : values.floatValue) <= 0) {
         setPartialAmount(values == null ? void 0 : values.value);
-        setPartialError(`Partial amount cannot exceed ${formatUSD((_d2 = Number(aftertaxAmount)) == null ? void 0 : _d2.toFixed(2))}`);
+        setPartialError(`Partial amount cannot exceed ${formatUSD((_d2 = Number(cardTotal)) == null ? void 0 : _d2.toFixed(2))}`);
       } else {
         setPartialAmount(values == null ? void 0 : values.value);
         setPartialError("");
@@ -8331,30 +8308,136 @@ function PartialPayment(props) {
     }
   };
   useEffect12(() => {
-    const baseAmount = activetab === "ach" ? Number(cashDiscount) : Number(aftertaxAmount);
+    const baseAmount2 = activetab === "ach" ? Number(cashDiscount) : Number(cardTotal);
     const partial = Number(partialAmount);
     if (partialAmount) {
-      if (partial <= 0 || partial > baseAmount) {
-        setPartialError(`Partial amount cannot exceed ${formatUSD(baseAmount.toFixed(2))}`);
+      if (partial <= 0 || partial > baseAmount2) {
+        setPartialError(`Partial amount cannot exceed ${formatUSD(baseAmount2.toFixed(2))}`);
       } else {
         setPartialError("");
       }
     } else {
       setPartialError("");
     }
-  }, [activetab, partialAmount, cashDiscount, aftertaxAmount]);
+  }, [activetab, partialAmount, cashDiscount, cardTotal]);
   useEffect12(() => {
     if (typeof FractalTokenizer === "undefined") return;
     const tokenizer = new FractalTokenizer({
       styles: {}
     });
   }, []);
-  return /* @__PURE__ */ jsxs16(Fragment16, { children: [
-    /* @__PURE__ */ jsx29(DataScript, {}),
-    /* @__PURE__ */ jsx29(Chargewidgetstyles, {}),
-    /* @__PURE__ */ jsx29(CardBankRadioStyles, {}),
-    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx29(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
-    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx29(
+  const merchantName = (paymentData == null ? void 0 : paymentData.bname) || (paymentData == null ? void 0 : paymentData.customer_name) || "the merchant";
+  const invoiceNo = String((props == null ? void 0 : props.orderID) || "").replace(/^\s*invoice\s*#?\s*/i, "").trim();
+  const invoiceLabel = invoiceNo ? `Invoice #${invoiceNo}` : "Invoice";
+  const baseAmount = Number((_c = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _c : 0);
+  const surchargeFee = Math.max(cardTotal - baseAmount, 0);
+  const isBankView = activetab !== "reader" && activeinCard === "list" && !!(selectedCard == null ? void 0 : selectedCard.id) ? (selectedCard == null ? void 0 : selectedCard.card_type) === "Bank" : activetab === "ach";
+  const discountNum = Number((props == null ? void 0 : props.discount) || 0);
+  const taxNum = Number((props == null ? void 0 : props.tax) || 0);
+  const hasFee = surchargeFee > 0 && !!(props == null ? void 0 : props.pass_fee);
+  const showSurchargeLine = isSurchargeProgram && !isBankView && hasFee;
+  const summarySubtotal = isSurchargeProgram || isBankView ? baseAmount : cardTotal;
+  const fmtNum = (n) => Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  const partialOverride = partialAmount && !partialError ? Number(partialAmount) : null;
+  const methodTotal = isBankView ? Number(cashDiscount || 0) : cardTotal;
+  const effectiveTotal = partialOverride != null ? partialOverride : methodTotal;
+  const hideBank = true;
+  const savedMethods = [...cardList || [], ...hideBank ? [] : bankList || []];
+  const hasSaved = savedMethods.length > 0;
+  const showList = hasSaved && activetab !== "reader" && activeinCard === "list";
+  const availableMethods = [
+    "card",
+    ...!hideBank && (paymentData == null ? void 0 : paymentData.isSkyFiAccount) ? ["ach"] : [],
+    ...(paymentData == null ? void 0 : paymentData.paymentDeviceList) && paymentData.paymentDeviceList.length > 0 ? ["reader"] : []
+  ];
+  const goToList = () => {
+    setActive("card");
+    setActiveinCard("list");
+    setActiveinBank("list");
+    setError("");
+  };
+  const payWithOther = () => {
+    setActive("card");
+    setActiveinCard("form");
+    setActiveinBank("form");
+    setError("");
+  };
+  const switchMethod = (m) => {
+    setActive(m);
+    if (m === "card" || m === "ach") {
+      setActiveinCard("form");
+      setActiveinBank("form");
+    }
+    setError("");
+  };
+  const rightTitle = showList ? "Payment methods" : activetab === "reader" ? "Reader payment" : activetab === "ach" ? "Bank payment" : "Card payment";
+  const showBack = hasSaved && !showList;
+  const MethodToggle = /* @__PURE__ */ jsx27(
+    FractalMethodToggle,
+    {
+      methods: [
+        { value: "card", label: "Card" },
+        ...availableMethods.includes("ach") ? [{ value: "ach", label: "Bank" }] : [],
+        ...availableMethods.includes("reader") ? [{ value: "reader", label: "Reader" }] : []
+      ],
+      active: activetab,
+      onChange: switchMethod
+    }
+  );
+  const summaryLines = [
+    { label: "Subtotal", value: fmtNum(summarySubtotal) },
+    { label: "Discount", value: fmtNum(discountNum), muted: true },
+    { label: "Tax", value: fmtNum(taxNum), muted: true },
+    ...showSurchargeLine ? [{ label: "Surcharge", value: formatUSD(surchargeFee.toFixed(2)) }] : []
+  ];
+  const summaryNote = isBankView ? null : !hasFee ? null : /* @__PURE__ */ jsxs14("div", { className: "fps-note", children: [
+    /* @__PURE__ */ jsx27("b", { children: formatUSD(baseAmount.toFixed(2)) }),
+    " if customer pays with debit or by bank (no surcharge)."
+  ] });
+  const partialInput = (props == null ? void 0 : props.allowPartial) ? /* @__PURE__ */ jsx27(FractalField, { label: "Partial payment", htmlFor: "partialpayment", error: partialError, children: /* @__PURE__ */ jsx27(
+    NumericFormat,
+    {
+      id: "partialpayment",
+      className: "fps-input",
+      prefix: "$",
+      thousandSeparator: true,
+      allowNegative: false,
+      allowLeadingZeros: false,
+      decimalScale: 2,
+      fixedDecimalScale: true,
+      placeholder: "Enter partial amount",
+      value: partialAmount,
+      onValueChange: handlePartialChange
+    }
+  ) }) : null;
+  const LeftSummary = /* @__PURE__ */ jsx27(
+    FractalOrderSummary,
+    {
+      logo: paymentData == null ? void 0 : paymentData.logo,
+      invoiceLabel,
+      lines: summaryLines,
+      total: formatUSD(effectiveTotal.toFixed(2)),
+      cardIcons: isBankView ? null : { visa: visa2, mastercard: mastercard2, amex: americanexp2, discover: discover2 },
+      note: summaryNote,
+      secureIcon: secure2,
+      extra: partialInput
+    }
+  );
+  const AuthText = /* @__PURE__ */ jsxs14("p", { className: "fps-auth", children: [
+    "By paying, you authorize ",
+    merchantName,
+    " to charge ",
+    formatUSD(effectiveTotal.toFixed(2)),
+    " to your ",
+    isBankView ? "account" : "card",
+    ". ",
+    /* @__PURE__ */ jsx27("u", { children: "Refund policy" }),
+    "."
+  ] });
+  return /* @__PURE__ */ jsxs14(Fragment14, { children: [
+    /* @__PURE__ */ jsx27(DataScript, {}),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx27(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx27(
       DataCapScriptLoader,
       {
         onReady: () => {
@@ -8367,521 +8450,233 @@ function PartialPayment(props) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs16(Fragment16, { children: [
-      /* @__PURE__ */ jsx29("button", { ref: buttonRef, style: { display: "none" }, className: "paymentBtn", onClick: handleShow, children: "Pay" }),
-      /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx27(Chargewidgetstyles, {}),
+    /* @__PURE__ */ jsx27(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx27(FractalWidgetStyles, {}),
+    /* @__PURE__ */ jsxs14(Fragment14, { children: [
+      /* @__PURE__ */ jsx27("button", { ref: buttonRef, style: { display: "none" }, className: "paymentBtn", onClick: handleShow, children: "Pay" }),
+      /* @__PURE__ */ jsxs14(
         CustomModal2_default,
         {
           open: show,
           onClose: handleClose,
+          maxWidth: "760px",
           children: [
-            error && /* @__PURE__ */ jsx29("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx29(ErrorCardMessage_default, { error, onClose: handleClose }) }),
-            errorIframe && /* @__PURE__ */ jsx29("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx29(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
+            error && /* @__PURE__ */ jsx27("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx27(ErrorCardMessage_default, { error, onClose: handleClose }) }),
+            errorIframe && /* @__PURE__ */ jsx27("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx27(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
               setErrorIframe("");
             } }) }),
-            success && /* @__PURE__ */ jsx29(SuccessMsz, { onClose: handleClose, tranId, isDebitAdjusted }),
-            !error && !success && !errorIframe && /* @__PURE__ */ jsxs16(Fragment16, { children: [
-              (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx29(Loader_default, { loading: loading || loading2 || loadingIframe, loaderText }),
-              /* @__PURE__ */ jsx29("div", { className: "frac-card-payment-page frac-form", children: /* @__PURE__ */ jsxs16("div", { className: "parent-pay-container", children: [
-                /* @__PURE__ */ jsx29("span", { className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-                  /* @__PURE__ */ jsx29("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx29("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" }) }),
-                  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx29("rect", { width: "16", height: "16", fill: "white" }) }) })
-                ] }) }),
-                /* @__PURE__ */ jsx29("div", { className: "pay-main-logo-res", children: /* @__PURE__ */ jsx29("img", { src: paymentData == null ? void 0 : paymentData.logo, id: "pay-logos" }) }),
-                /* @__PURE__ */ jsxs16("div", { className: "pay-container", children: [
-                  /* @__PURE__ */ jsxs16("div", { className: "pay-header pay-conatiner-one frac-pay-conatiner-one", children: [
-                    /* @__PURE__ */ jsxs16("div", { className: "pay-conatiner-one-first", children: [
-                      /* @__PURE__ */ jsxs16("div", { className: "pay-logo-container", children: [
-                        /* @__PURE__ */ jsx29("div", { className: "pay-main-logo", children: /* @__PURE__ */ jsx29("img", { src: paymentData == null ? void 0 : paymentData.logo, id: "pay-logos" }) }),
-                        (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs16("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
-                          " ",
-                          /* @__PURE__ */ jsx29(IoArrowBack, {}),
-                          " Back"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxs16("div", { className: "amt-pay-con", children: [
-                        /* @__PURE__ */ jsx29("div", { className: "pay-amount-conatiner", children: /* @__PURE__ */ jsx29("small", { className: "pay-payment-amount", children: "Select payment type" }) }),
-                        /* @__PURE__ */ jsx29("div", { className: "frac-card-bank-radio-main", children: /* @__PURE__ */ jsx29(CardBankRadio, { label: "Card", amount: (_a = Number(aftertaxAmount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }) }),
-                        !loading && (activetab === "card" || activetab === "reader") && (props == null ? void 0 : props.pass_fee) && cashDiscount && cashDiscount > 0 && /* @__PURE__ */ jsxs16("div", { className: "frac-cash-discount-fee", children: [
-                          /* @__PURE__ */ jsx29("small", { children: (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1 ? "Surcharge" : (paymentData == null ? void 0 : paymentData.showSurcharge) ? "3% Card Fee" : "Cash Discount" }),
-                          /* @__PURE__ */ jsx29("p", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
-                        ] }),
-                        !loading && (props == null ? void 0 : props.pass_fee) && /* @__PURE__ */ jsx29("div", { className: "", children: (activetab === "card" || activetab === "reader") && (props == null ? void 0 : props.pass_fee) && cashDiscount && cashDiscount > 0 && /* @__PURE__ */ jsxs16(
-                          "div",
-                          {
-                            id: "surcharge-program-notice",
-                            className: "surcharge-program-notice-text",
-                            children: [
-                              "A 3% processing surcharge is applied to all credit card transactions. Debit card payments are processed for",
-                              " ",
-                              /* @__PURE__ */ jsxs16("span", { className: "surcharge-program-notice-text-att", children: [
-                                "$",
-                                Number(cashDiscount).toLocaleString("en-US", {
-                                  minimumFractionDigits: 2,
-                                  maximumFractionDigits: 2
-                                })
-                              ] })
-                            ]
+            success && /* @__PURE__ */ jsx27(SuccessMsz, { onClose: handleClose, tranId, isDebitAdjusted }),
+            !error && !success && !errorIframe && /* @__PURE__ */ jsxs14(Fragment14, { children: [
+              (loading || loading2 || loadingIframe || surchargeLookupLoading) && /* @__PURE__ */ jsx27(Loader_default, { loading: loading || loading2 || loadingIframe || surchargeLookupLoading, loaderText }),
+              /* @__PURE__ */ jsxs14("div", { className: "fps-modal", children: [
+                LeftSummary,
+                /* @__PURE__ */ jsxs14("section", { className: "fps-content", children: [
+                  /* @__PURE__ */ jsx27(FractalModalHeader, { title: rightTitle, onBack: showBack ? goToList : void 0, onClose: handleClose }),
+                  showList ? /* @__PURE__ */ jsxs14(Fragment14, { children: [
+                    /* @__PURE__ */ jsx27(
+                      FractalSavedMethods,
+                      {
+                        sectionLabel: "Cards / bank accounts",
+                        items: savedMethods.map((card) => {
+                          const isBankCard = (card == null ? void 0 : card.card_type) === "Bank";
+                          let isDisabled = false;
+                          if (paymentData == null ? void 0 : paymentData.paymentGateway) {
+                            isDisabled = (paymentData == null ? void 0 : paymentData.paymentGateway) != (card == null ? void 0 : card.payment_method_type) && !isBankCard;
                           }
-                        ) }),
-                        (props == null ? void 0 : props.allowPartial) && /* @__PURE__ */ jsxs16("div", { className: "frac-partial-payment-input", children: [
-                          /* @__PURE__ */ jsx29("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
-                          /* @__PURE__ */ jsx29(
-                            NumericFormat,
-                            {
-                              prefix: "$",
-                              className: "form-control",
-                              value: partialAmount,
-                              onValueChange: (values) => {
-                                handlePartialChange(values);
-                              },
-                              thousandSeparator: true,
-                              placeholder: "Enter partial amount",
-                              allowNegative: false,
-                              allowLeadingZeros: false,
-                              decimalScale: 2,
-                              fixedDecimalScale: true
-                            }
-                          ),
-                          partialError && /* @__PURE__ */ jsx29("span", { className: "error-span", children: partialError })
-                        ] })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs16("div", { className: "pay-conatiner-one-last", children: [
-                      /* @__PURE__ */ jsx29("img", { src: secure2, alt: "" }),
-                      /* @__PURE__ */ jsx29("img", { src: pov2, alt: "" }),
-                      "Secure payments powered by Fractal"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx29("div", { className: "pay-tab pay-conatiner-two", children: !loading && /* @__PURE__ */ jsx29("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs16("div", { id: "payment-form-div", children: [
-                    activetab !== "cardList" ? /* @__PURE__ */ jsxs16("div", { className: "frac-charge-payment-back-btn-wrap ", children: [
-                      (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ jsxs16("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
-                        " ",
-                        /* @__PURE__ */ jsx29(IoArrowBack, {}),
-                        " Back"
-                      ] }),
-                      (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsxs16("div", { className: "tab", children: [
-                        /* @__PURE__ */ jsxs16("button", { className: "tablinks", onClick: (e) => {
-                          handletabchange("card");
-                        }, style: { border: activetab === "card" ? "1px solid" : "" }, children: [
-                          /* @__PURE__ */ jsx29("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }),
-                          "Card"
-                        ] }),
-                        /* @__PURE__ */ jsxs16("button", { className: "tablinks", onClick: (e) => {
-                          handletabchange("ach");
-                        }, style: { border: activetab === "ach" ? "1px solid" : "" }, children: [
-                          /* @__PURE__ */ jsx29("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }),
-                          "Bank"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxs16("div", { className: "res-pay-con", children: [
-                        /* @__PURE__ */ jsxs16("div", { className: "pay-amount-conatiner", style: { margin: 0 }, children: [
-                          /* @__PURE__ */ jsx29("small", { className: "pay-payment-amount", children: "Payment Amount" }),
-                          /* @__PURE__ */ jsxs16("strong", { className: "pay-amount", children: [
-                            "$",
-                            (_b = Number(aftertaxAmount)) == null ? void 0 : _b.toFixed(2)
-                          ] })
-                        ] }),
-                        activetab != "ach" && /* @__PURE__ */ jsxs16("div", { children: [
-                          /* @__PURE__ */ jsxs16("div", { children: [
-                            /* @__PURE__ */ jsx29("img", { src: visa2, alt: "", width: 35, style: { paddingRight: "5px" } }),
-                            /* @__PURE__ */ jsx29("img", { src: mastercard2, width: 35, alt: "" })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { children: [
-                            /* @__PURE__ */ jsx29("img", { src: americanexp2, alt: "", width: 35, style: { paddingRight: "5px" } }),
-                            /* @__PURE__ */ jsx29("img", { src: discover2, width: 35, alt: "" })
-                          ] })
-                        ] })
-                      ] }),
-                      !loading && numberToBoolean(paymentData == null ? void 0 : paymentData.showSurcharge) ? cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) ? /* @__PURE__ */ jsxs16("div", { className: "frac-cash-discount-fee", children: [
-                        /* @__PURE__ */ jsxs16("small", { children: [
-                          activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
-                          "  "
-                        ] }),
-                        /* @__PURE__ */ jsx29("p", { children: formatUSD((Number(aftertaxAmount) - cashDiscount).toFixed(2)) })
-                      ] }) : null : cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) && activetab === "card" ? /* @__PURE__ */ jsxs16("div", { className: "frac-cash-discount-fee", children: [
-                        /* @__PURE__ */ jsxs16("small", { children: [
-                          activetab === "card" ? "Surcharge" : null,
-                          "  "
-                        ] }),
-                        /* @__PURE__ */ jsx29("p", { children: formatUSD((Number(aftertaxAmount) - cashDiscount).toFixed(2)) })
-                      ] }) : null
-                    ] }) : /* @__PURE__ */ jsxs16("div", { children: [
-                      /* @__PURE__ */ jsxs16("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" }, children: [
-                        " Charge ",
-                        paymentData == null ? void 0 : paymentData.customer_name
-                      ] }),
-                      /* @__PURE__ */ jsxs16("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" }, children: [
-                        " ",
-                        activeList === "card" ? "Cards/Banks" : "Readers",
-                        " "
-                      ] }),
-                      /* @__PURE__ */ jsxs16("div", { className: "res-pay-con", children: [
-                        /* @__PURE__ */ jsxs16("div", { className: "pay-amount-conatiner", style: { margin: 0 }, children: [
-                          /* @__PURE__ */ jsx29("small", { className: "pay-payment-amount", children: "Payment Amount" }),
-                          /* @__PURE__ */ jsxs16("strong", { className: "pay-amount", children: [
-                            "$",
-                            (_c = Number(aftertaxAmount)) == null ? void 0 : _c.toFixed(2)
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxs16("div", { children: [
-                          /* @__PURE__ */ jsxs16("div", { children: [
-                            /* @__PURE__ */ jsx29("img", { src: visa2, alt: "", width: 35, style: { paddingRight: "5px" } }),
-                            /* @__PURE__ */ jsx29("img", { src: mastercard2, width: 35, alt: "" })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { children: [
-                            /* @__PURE__ */ jsx29("img", { src: americanexp2, alt: "", width: 35, style: { paddingRight: "5px" } }),
-                            /* @__PURE__ */ jsx29("img", { src: discover2, width: 35, alt: "" })
-                          ] })
-                        ] })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs16("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
-                      /* @__PURE__ */ jsxs16("div", { className: "frac-card-payment", children: [
-                        /* @__PURE__ */ jsxs16("div", { className: "frac-heading-card-wrap", children: [
-                          /* @__PURE__ */ jsx29("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs16("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
-                            " ",
-                            /* @__PURE__ */ jsx29(IoArrowBack, {})
-                          ] }) }),
-                          /* @__PURE__ */ jsx29("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
-                        ] }),
-                        activetab != "ach" && /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
-                          /* @__PURE__ */ jsx29("img", { src: visa2, alt: "", width: 33 }),
-                          /* @__PURE__ */ jsx29("img", { src: mastercard2, width: 33, alt: "" }),
-                          /* @__PURE__ */ jsx29("img", { src: americanexp2, alt: "", width: 33 }),
-                          /* @__PURE__ */ jsx29("img", { src: discover2, width: 33, alt: "" })
-                        ] })
-                      ] }),
-                      activeinCard === "list" ? /* @__PURE__ */ jsxs16(Fragment16, { children: [
-                        /* @__PURE__ */ jsx29(CardList, { listHeading: "Cards", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
-                          setActiveinCard("form");
-                        } }),
-                        /* @__PURE__ */ jsx29("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx29("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__ */ jsxs16(
-                        "form",
+                          return {
+                            id: card == null ? void 0 : card.id,
+                            primaryText: `**** ${card == null ? void 0 : card.cardlastfourdigit}`,
+                            secondaryText: isBankCard ? void 0 : `${card == null ? void 0 : card.expmonth}/${card == null ? void 0 : card.expyear}`,
+                            badge: isBankCard ? "BANK" : (card == null ? void 0 : card.card_issue_type) || "CARD",
+                            brandLogo: isBankCard ? void 0 : getCardType2(card == null ? void 0 : card.card_type),
+                            disabled: isDisabled
+                          };
+                        }),
+                        selectedId: selectedCard == null ? void 0 : selectedCard.id,
+                        onSelect: (id) => setSelectedCard(savedMethods.find((c) => (c == null ? void 0 : c.id) === id)),
+                        onRemove: (id) => handleDeleteCard(id),
+                        removeIcon: trash2,
+                        otherLabel: "Pay with other method",
+                        onOther: payWithOther,
+                        otherIcon: defaultcard2
+                      }
+                    ),
+                    /* @__PURE__ */ jsx27(
+                      FractalFooter,
+                      {
+                        authText: AuthText,
+                        disabled: loading2 || !(selectedCard == null ? void 0 : selectedCard.id) || surchargeLookupLoading,
+                        onPay: handlechargeCustomer,
+                        buttonLabel: `Pay ${formatUSD(effectiveTotal.toFixed(2))} to ${merchantName}`
+                      }
+                    )
+                  ] }) : activetab === "reader" ? (
+                    /* ---------- Reader ---------- */
+                    /* @__PURE__ */ jsxs14(Fragment14, { children: [
+                      MethodToggle,
+                      /* @__PURE__ */ jsx27(
+                        FractalReaderList,
                         {
-                          id: "paymentForm",
-                          onSubmit: submitFunc,
-                          onKeyDown: (e) => {
-                            if (e.key === "Enter" && loading2) {
-                              e.preventDefault();
-                              e.stopPropagation();
-                            }
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxs16("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "444px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "456px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" }, children: [
-                              /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                                /* @__PURE__ */ jsx29("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                                /* @__PURE__ */ jsx29("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
-                                  const value = e.target.value;
-                                  if (/^[a-zA-Z\s]*$/.test(value)) {
-                                    handleCardChange("cardName", value);
-                                  }
-                                } }),
-                                (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
-                              ] }),
-                              /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                                /* @__PURE__ */ jsx29("label", { children: "CARD NUMBER" }),
-                                /* @__PURE__ */ jsx29("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && isTokenizerReady && /* @__PURE__ */ jsx29(
-                                  FractalFields_default,
-                                  {
-                                    fractalStyles,
-                                    tokenizerRef
-                                  }
-                                ) })
-                              ] }),
-                              /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                                /* @__PURE__ */ jsx29("label", { htmlFor: "OrderId", children: "Order ID / Description" }),
-                                /* @__PURE__ */ jsx29(
-                                  "input",
-                                  {
-                                    type: "text",
-                                    className: "form-control",
-                                    maxLength: 100,
-                                    placeholder: "Order Id",
-                                    disabled: true,
-                                    value: (_f = props == null ? void 0 : props.orderID) != null ? _f : "",
-                                    style: { background: "#F6F6F7", color: "#727272" }
-                                  }
-                                )
-                              ] }),
-                              /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                                /* @__PURE__ */ jsx29("label", { htmlFor: "zip", children: "ZIP" }),
-                                /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
-                              ] }),
-                              (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsx29("div", { className: "form-group", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                                /* @__PURE__ */ jsx29(
-                                  "input",
-                                  {
-                                    type: "checkbox",
-                                    id: "save_card",
-                                    className: "toggle-checkbox",
-                                    checked: saveCardInfo,
-                                    onChange: (e) => setSaveCardInfo(e.target.checked)
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx29("label", { htmlFor: "save_card", className: "toggle-label" }),
-                                /* @__PURE__ */ jsx29("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
-                                /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-                                  /* @__PURE__ */ jsxs16("g", { clipPath: "url(#clip0_12420_50192)", children: [
-                                    /* @__PURE__ */ jsx29("rect", { width: "20", height: "20", fill: "white" }),
-                                    /* @__PURE__ */ jsx29("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                    /* @__PURE__ */ jsx29("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })
-                                  ] }),
-                                  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_12420_50192", children: /* @__PURE__ */ jsx29("rect", { width: "20", height: "20", fill: "white" }) }) })
-                                ] })
-                              ] }) })
-                            ] }),
-                            /* @__PURE__ */ jsxs16("div", { className: "form-group", style: { marginTop: "20px", padding: "0" }, children: [
-                              (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_h = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _h.length) > 0 && /* @__PURE__ */ jsx29("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
-                              /* @__PURE__ */ jsx29("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)) })
-                            ] })
-                          ]
+                          sectionLabel: "Readers",
+                          items: ((paymentData == null ? void 0 : paymentData.paymentDeviceList) || []).map((r) => ({ id: String(r == null ? void 0 : r.id), name: r == null ? void 0 : r.device_name })),
+                          selectedId: (selectedReader == null ? void 0 : selectedReader.id) != null ? String(selectedReader == null ? void 0 : selectedReader.id) : void 0,
+                          onSelect: (id) => setSelectedReader(((paymentData == null ? void 0 : paymentData.paymentDeviceList) || []).find((r) => String(r == null ? void 0 : r.id) === id)),
+                          icon: pax2
                         }
-                      ) : /* @__PURE__ */ jsxs16("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
-                        if (e.key === "Enter" && loading2) {
-                          e.preventDefault();
-                          e.stopPropagation();
+                      ),
+                      /* @__PURE__ */ jsx27(
+                        FractalFooter,
+                        {
+                          authText: AuthText,
+                          disabled: loading2,
+                          onPay: handleChargewithEMV,
+                          buttonLabel: `Pay ${formatUSD(effectiveTotal.toFixed(2))} to ${merchantName}`
                         }
-                      }, children: [
-                        /* @__PURE__ */ jsxs16("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "444px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "456px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" }, children: [
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                            /* @__PURE__ */ jsx29("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
-                              const value = e.target.value;
-                              if (/^[a-zA-Z\s]*$/.test(value)) {
-                                handleCardChange("cardName", value);
-                              }
-                            } }),
-                            (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
-                          ] }),
-                          /* @__PURE__ */ jsx29("div", { className: "form-group", children: /* @__PURE__ */ jsx29(
-                            DataCapFields,
-                            {
-                              isOpen: show,
-                              tokenKey: paymentData == null ? void 0 : paymentData.dctoken,
-                              setLoader: setLoadingIframe,
-                              onError: (msg) => setError(msg || DcLoadingError)
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "OrderId", children: "Order ID / Description" }),
-                            /* @__PURE__ */ jsx29(
-                              "input",
-                              {
-                                type: "text",
-                                className: "form-control",
-                                maxLength: 100,
-                                placeholder: "Order Id",
-                                disabled: true,
-                                value: (_k = props == null ? void 0 : props.orderID) != null ? _k : "",
-                                style: { background: "#F6F6F7", color: "#727272" }
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "zip", children: "ZIP" }),
-                            /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
-                          ] }),
-                          (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsx29("div", { className: "form-group", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                            /* @__PURE__ */ jsx29(
-                              "input",
-                              {
-                                type: "checkbox",
-                                id: "save_card",
-                                className: "toggle-checkbox",
-                                checked: saveCardInfo,
-                                onChange: (e) => setSaveCardInfo(e.target.checked)
+                      )
+                    ] })
+                  ) : activetab === "ach" ? (
+                    /* ---------- Bank form ---------- */
+                    /* @__PURE__ */ jsxs14(
+                      "form",
+                      {
+                        id: "ACHPaymentForm",
+                        autoComplete: "off",
+                        onSubmit: submitFunc,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && loading2) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }
+                        },
+                        style: { display: "flex", flexDirection: "column", gap: "20px", flex: "1 1 auto", minHeight: 0, width: "100%" },
+                        children: [
+                          MethodToggle,
+                          /* @__PURE__ */ jsxs14("div", { className: "fps-scroll", children: [
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Name on account", htmlFor: "nameonaccount", error: achError == null ? void 0 : achError.name, children: /* @__PURE__ */ jsx27("input", { id: "nameonaccount", className: "fps-input", maxLength: 100, placeholder: "John Doe", name: "name", value: (_d = achData == null ? void 0 : achData.name) != null ? _d : "", onChange: handleChangeAch }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Routing number", htmlFor: "routingnumber", error: achError == null ? void 0 : achError.routingNumber, children: /* @__PURE__ */ jsx27("input", { id: "routingnumber", className: "fps-input", maxLength: 9, placeholder: "000000000", name: "routingNumber", value: (_e = achData == null ? void 0 : achData.routingNumber) != null ? _e : "", onChange: handleChangeAch }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Account number", htmlFor: "accountnumber", error: achError == null ? void 0 : achError.accountNumber, children: /* @__PURE__ */ jsx27("input", { id: "accountnumber", className: "fps-input", maxLength: 16, placeholder: "0000000000", name: "accountNumber", value: (_f = achData == null ? void 0 : achData.accountNumber) != null ? _f : "", onChange: handleChangeAch }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Confirm account number", htmlFor: "confirmaccountnumber", error: achError == null ? void 0 : achError.confirmAccountNumber, children: /* @__PURE__ */ jsx27("input", { id: "confirmaccountnumber", className: "fps-input", maxLength: 16, placeholder: "0000000000", name: "confirmAccountNumber", value: (_g = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _g : "", onChange: handleChangeAch }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Bank name", htmlFor: "bankname", error: achError == null ? void 0 : achError.bankName, children: /* @__PURE__ */ jsx27("input", { id: "bankname", className: "fps-input", maxLength: 100, placeholder: "My Bank", name: "bankName", value: (_h = achData == null ? void 0 : achData.bankName) != null ? _h : "", onChange: handleChangeAch }) }),
+                            ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsx27(FractalField, { label: "Company name", htmlFor: "companyName", error: achError == null ? void 0 : achError.companyName, children: /* @__PURE__ */ jsx27("input", { id: "companyName", className: "fps-input", maxLength: 100, placeholder: "My Company", name: "companyName", value: (_i = achData == null ? void 0 : achData.companyName) != null ? _i : "", onChange: handleChangeAch }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Account type", htmlFor: "accounttype", children: /* @__PURE__ */ jsxs14("select", { id: "accounttype", name: "accountType", className: "fps-input", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch, children: [
+                              /* @__PURE__ */ jsx27("option", { value: "", children: "Select" }),
+                              accountTypes.map((type) => /* @__PURE__ */ jsx27("option", { value: type.value, children: type.label }, type.value))
+                            ] }) }),
+                            (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs14(FractalCheckbox, { id: "saveACH", checked: saveACHinfo, onChange: (v) => {
+                              setSaveACHinfo(v);
+                              if (!v) {
+                                setSaveACHConsent1(false);
+                                setErrorBankConsentOther("");
                               }
-                            ),
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "save_card", className: "toggle-label" }),
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
-                            /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-                              /* @__PURE__ */ jsxs16("g", { clipPath: "url(#clip0_12420_50192)", children: [
-                                /* @__PURE__ */ jsx29("rect", { width: "20", height: "20", fill: "white" }),
-                                /* @__PURE__ */ jsx29("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                /* @__PURE__ */ jsx29("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })
+                            }, children: [
+                              "Save this bank account. ",
+                              merchantName,
+                              " may charge it for future invoices. ",
+                              /* @__PURE__ */ jsx27("u", { children: "See terms" }),
+                              "."
+                            ] }),
+                            saveACHinfo && /* @__PURE__ */ jsxs14(Fragment14, { children: [
+                              /* @__PURE__ */ jsxs14(FractalCheckbox, { id: "saveACHConsent1", checked: saveACHConsent1, onChange: (v) => {
+                                setSaveACHConsent1(v);
+                                if (v) setErrorBankConsentOther("");
+                              }, children: [
+                                "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                                merchantName,
+                                " 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."
                               ] }),
-                              /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_12420_50192", children: /* @__PURE__ */ jsx29("rect", { width: "20", height: "20", fill: "white" }) }) })
+                              errorBankConsentOther && /* @__PURE__ */ jsx27("span", { className: "fps-error", children: errorBankConsentOther })
+                            ] }),
+                            !saveACHinfo && /* @__PURE__ */ jsxs14(Fragment14, { children: [
+                              /* @__PURE__ */ jsxs14(FractalCheckbox, { id: "achconsent", checked: isBankConsentChecked, onChange: (v) => {
+                                setIsBankConsentChecked(v);
+                                if (v) setErrorBankConsent("");
+                              }, children: [
+                                "By selecting this box, I authorize ",
+                                merchantName,
+                                " 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__ */ jsx27("span", { className: "fps-error", children: errorBankConsent })
                             ] })
-                          ] }) })
-                        ] }),
-                        /* @__PURE__ */ jsxs16("div", { className: "form-group", style: { marginTop: "20px", padding: "0" }, children: [
-                          (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_m = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _m.length) > 0 && /* @__PURE__ */ jsx29("button", { type: "button", style: { marginBottom: "10px" }, className: "pay-button", onClick: () => setActiveForm(!activeForm), children: activeForm ? "Pay With Reader" : "Pay With Card" }),
-                          /* @__PURE__ */ jsx29("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)) })
-                        ] })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs16("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: [
-                      /* @__PURE__ */ jsx29("div", { className: "frac-card-payment", children: /* @__PURE__ */ jsxs16("div", { className: "frac-heading-card-wrap", children: [
-                        /* @__PURE__ */ jsx29("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs16("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
-                          " ",
-                          /* @__PURE__ */ jsx29(IoArrowBack, {})
-                        ] }) }),
-                        /* @__PURE__ */ jsx29("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
-                      ] }) }),
-                      activeinBank === "list" ? /* @__PURE__ */ jsxs16(Fragment16, { children: [
-                        /* @__PURE__ */ jsx29(CardList, { listHeading: "Banks", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
-                          setActiveinBank("form");
-                        } }),
-                        /* @__PURE__ */ jsx29("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx29("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__ */ jsxs16("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
-                        if (e.key === "Enter" && loading2) {
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }
-                      }, children: [
-                        /* @__PURE__ */ jsxs16("div", { className: "ach-scrl", style: {
-                          minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "444px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "436px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px",
-                          maxHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "444px" : (cardList == null ? void 0 : cardList.length) > 0 ? "380px" : "380px"
-                        }, children: [
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "nameonaccount", children: "Name on account" }),
-                            /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "routingnumber", children: "Routing number" }),
-                            /* @__PURE__ */ jsx29(
-                              "input",
-                              {
-                                type: "text",
-                                id: "routingnumber",
-                                className: "form-control",
-                                maxLength: 9,
-                                placeholder: "000000000",
-                                name: "routingNumber",
-                                value: (_s = achData == null ? void 0 : achData.routingNumber) != null ? _s : "",
-                                onChange: handleChangeAch
-                              }
-                            ),
-                            (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
                           ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "accountnumber", children: "Account number" }),
-                            /* @__PURE__ */ jsx29(
-                              "input",
-                              {
-                                type: "text",
-                                id: "accountnumber",
-                                className: "form-control",
-                                maxLength: 16,
-                                placeholder: "0000000000",
-                                name: "accountNumber",
-                                value: (_t = achData == null ? void 0 : achData.accountNumber) != null ? _t : "",
-                                onChange: handleChangeAch
-                              }
-                            ),
-                            (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
-                            /* @__PURE__ */ jsx29(
-                              "input",
-                              {
-                                type: "text",
-                                id: "confirmaccountnumber",
-                                className: "form-control",
-                                maxLength: 16,
-                                placeholder: "0000000000",
-                                name: "confirmAccountNumber",
-                                value: (_u = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _u : "",
-                                onChange: handleChangeAch
-                              }
-                            ),
-                            (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "bankname", children: "Bank name" }),
-                            /* @__PURE__ */ jsx29(
+                          /* @__PURE__ */ jsx27(
+                            FractalFooter,
+                            {
+                              authText: AuthText,
+                              submit: true,
+                              disabled: loading2,
+                              buttonLabel: `Pay ${formatUSD(effectiveTotal.toFixed(2))} to ${merchantName}`
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ) : (
+                    /* ---------- Card form ---------- */
+                    /* @__PURE__ */ jsxs14(
+                      "form",
+                      {
+                        id: (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 ? "paymentForm" : "PaymentForm",
+                        onSubmit: submitFunc,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && loading2) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }
+                        },
+                        style: { display: "flex", flexDirection: "column", gap: "20px", flex: "1 1 auto", minHeight: 0, width: "100%" },
+                        children: [
+                          MethodToggle,
+                          /* @__PURE__ */ jsxs14("div", { className: "fps-scroll", children: [
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Name on card", htmlFor: "cardHolderName", error: cardError == null ? void 0 : cardError.cardName, children: /* @__PURE__ */ jsx27(
                               "input",
                               {
-                                type: "text",
-                                id: "bankname",
-                                className: "form-control",
+                                id: "cardHolderName",
+                                className: "fps-input",
                                 maxLength: 100,
-                                placeholder: "My Bank",
-                                name: "bankName",
-                                value: (_v = achData == null ? void 0 : achData.bankName) != null ? _v : "",
-                                onChange: handleChangeAch
+                                placeholder: "John Doe",
+                                value: (cardData == null ? void 0 : cardData.cardName) || "",
+                                onChange: (e) => {
+                                  const value = e.target.value;
+                                  if (/^[a-zA-Z\s]*$/.test(value)) handleCardChange("cardName", value);
+                                }
                               }
-                            ),
-                            (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
-                          ] }),
-                          ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "companyName", children: "Company name" }),
-                            /* @__PURE__ */ jsx29(
-                              "input",
+                            ) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 ? "Card number" : "", error: cardError == null ? void 0 : cardError.cardNumber, children: /* @__PURE__ */ jsx27("div", { className: `fps-tokenizer ${(paymentData == null ? void 0 : paymentData.paymentGateway) !== 32 ? "dc-tokenizer" : ""}`, children: (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 ? show && isTokenizerReady && /* @__PURE__ */ jsx27(
+                              FractalFields_default,
                               {
-                                type: "text",
-                                id: "companyName",
-                                className: "form-control",
-                                maxLength: 100,
-                                placeholder: "My Company",
-                                name: "companyName",
-                                value: (_w = achData == null ? void 0 : achData.companyName) != null ? _w : "",
-                                onChange: handleChangeAch
+                                fractalStyles,
+                                tokenizerRef,
+                                surchargeEnabled: Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1 && !!(props == null ? void 0 : props.pass_fee),
+                                createSurchargeSession,
+                                getSurchargeOptions,
+                                onSurchargeResult: setSurchargeResult
                               }
-                            ),
-                            (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx29("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
-                          ] }),
-                          /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4", children: [
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "accounttype", children: "Select account type" }),
-                            /* @__PURE__ */ jsxs16("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_x = achData == null ? void 0 : achData.accountType) != null ? _x : "", onChange: handleChangeAch, children: [
-                              /* @__PURE__ */ jsx29("option", { value: "", children: "Select account" }),
-                              accountTypes.map((type) => /* @__PURE__ */ jsx29("option", { value: type.value, children: type.label }, type.value))
+                            ) : /* @__PURE__ */ jsx27(DataCapFields, { isOpen: show, tokenKey: paymentData == null ? void 0 : paymentData.dctoken, setLoader: setLoadingIframe, onError: (msg) => setError(msg || DcLoadingError) }) }) }),
+                            /* @__PURE__ */ jsx27(FractalField, { label: "Zip", htmlFor: "zip", error: cardError == null ? void 0 : cardError.zipCode, children: /* @__PURE__ */ jsx27("input", { id: "zip", className: "fps-input", maxLength: 100, placeholder: "000000", value: (_k = cardData == null ? void 0 : cardData.zipCode) != null ? _k : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }) }),
+                            (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs14(FractalCheckbox, { id: "save_card", checked: saveCardInfo, onChange: (v) => setSaveCardInfo(v), children: [
+                              "Save this card. ",
+                              merchantName,
+                              " may charge it for future invoices. ",
+                              /* @__PURE__ */ jsx27("u", { children: "See terms" }),
+                              "."
                             ] })
                           ] }),
-                          !saveACHinfo && /* @__PURE__ */ jsxs16(Fragment16, { children: [
-                            /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                              /* @__PURE__ */ jsx29(
-                                "input",
-                                {
-                                  type: "checkbox",
-                                  id: "achconsent",
-                                  className: "",
-                                  checked: isBankConsentChecked,
-                                  onChange: (e) => {
-                                    setIsBankConsentChecked(e.target.checked);
-                                    if (e.target.checked) {
-                                      setErrorBankConsent("");
-                                    }
-                                  }
-                                }
-                              ),
-                              /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: "error-span", children: errorBankConsent })
-                          ] }),
-                          (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs16("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx29("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                            /* @__PURE__ */ jsx29("label", { htmlFor: "saveACH", children: "Save for future use" })
-                          ] }),
-                          saveACHinfo && /* @__PURE__ */ jsxs16(Fragment16, { children: [
-                            /* @__PURE__ */ jsxs16("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                              /* @__PURE__ */ jsx29("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__ */ jsxs16("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__ */ jsx29("span", { className: "error-span", children: errorBankConsentOther })
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsx29("div", { className: "form-group ", children: /* @__PURE__ */ jsx29("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)) }) })
-                      ] })
-                    ] })
-                  ] }) }) })
+                          /* @__PURE__ */ jsx27(
+                            FractalFooter,
+                            {
+                              authText: AuthText,
+                              submit: true,
+                              disabled: loading2 || surchargeLookupLoading,
+                              buttonLabel: `Pay ${formatUSD(effectiveTotal.toFixed(2))} to ${merchantName}`
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  )
                 ] })
-              ] }) })
+              ] })
             ] })
           ]
         }
@@ -8894,13 +8689,13 @@ function PartialPayment(props) {
 import { useEffect as useEffect16, useState as useState10, useMemo } from "react";
 
 // src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function SkyChargewidgetstyles() {
   const primarycolor = "#000";
   const primarybgcolor = "#fff";
   const primarybodycolor = "#212529";
   const primarybordercolor = "#dee2e6";
-  return /* @__PURE__ */ jsx30("style", { children: `
+  return /* @__PURE__ */ jsx28("style", { children: `
         @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); 
         body
         {
@@ -9786,6 +9581,44 @@ function ThreeDSChallenge({
   return null;
 }
 
+// src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
+import { Fragment as Fragment15, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+var CardBankRadio = (_a) => {
+  var _b = _a, { skydesign = false, savingsText } = _b, props = __objRest(_b, ["skydesign", "savingsText"]);
+  const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
+  return /* @__PURE__ */ jsx29(Fragment15, { children: /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
+      onClick: () => props.onChange(props.value),
+      role: "radio",
+      children: skydesign ? /* @__PURE__ */ jsxs15(Fragment15, { children: [
+        /* @__PURE__ */ jsxs15("div", { className: "frac-card-title-main", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "box-inner-card-text", children: [
+            /* @__PURE__ */ jsx29("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
+            /* @__PURE__ */ jsx29("div", { className: "frac-card-label-text", children: props.label })
+          ] }),
+          /* @__PURE__ */ jsx29("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx29("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
+        ] }),
+        /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsx29("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
+          props.onChange(e.target.value);
+        } }) })
+      ] }) : /* @__PURE__ */ jsxs15(Fragment15, { children: [
+        /* @__PURE__ */ jsxs15("div", { className: "frac-card-title-main", children: [
+          /* @__PURE__ */ jsx29("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
+          /* @__PURE__ */ jsxs15("div", { className: "frac-card-label", children: [
+            /* @__PURE__ */ jsx29("div", { className: "frac-card-label-text", children: props.label }),
+            /* @__PURE__ */ jsx29("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsx29("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
+          props.onChange(e.target.value);
+        } }) })
+      ] })
+    }
+  ) });
+};
+
 // src/app/components/Atoms/ThreedsCheckout/ThreedsCheckout.tsx
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
@@ -9794,7 +9627,7 @@ import { loadStripe } from "@stripe/stripe-js";
 import { PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import axios7 from "axios";
 import { useState as useState8 } from "react";
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var CheckoutForm = ({ onSuccess, showLoader, setError, session_token, callback, hideLoader, handleClose, amount, isPreAuth }) => {
   var _a;
   const stripe = useStripe();
@@ -9859,24 +9692,76 @@ var CheckoutForm = ({ onSuccess, showLoader, setError, session_token, callback,
       hideLoader();
     }
   };
-  return /* @__PURE__ */ jsxs17("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx31(PaymentElement, {}),
-    /* @__PURE__ */ jsx31("button", { className: "pay-button", disabled: loading || !stripe, children: loading ? "Processing..." : `${formatUSD((_a = Number(amount)) == null ? void 0 : _a.toFixed(2))}` })
+  return /* @__PURE__ */ jsxs16("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx30(PaymentElement, {}),
+    /* @__PURE__ */ jsx30("button", { className: "pay-button", disabled: loading || !stripe, children: loading ? "Processing..." : `${formatUSD((_a = Number(amount)) == null ? void 0 : _a.toFixed(2))}` })
   ] });
 };
 
 // src/app/components/Atoms/ThreedsCheckout/ThreedsCheckout.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var stripePromise = loadStripe(
   threedsSecurePublicKey
 );
 function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, session_token, callback, hideLoader, handleClose, amount, isPreAuth }) {
   if (!clientSecret) return null;
-  return /* @__PURE__ */ jsx32(Elements, { stripe: stripePromise, options: { clientSecret }, children: /* @__PURE__ */ jsx32(CheckoutForm, { onSuccess, showLoader, hideLoader, setError, session_token, callback, handleClose, amount, isPreAuth }) });
+  return /* @__PURE__ */ jsx31(Elements, { stripe: stripePromise, options: { clientSecret }, children: /* @__PURE__ */ jsx31(CheckoutForm, { onSuccess, showLoader, hideLoader, setError, session_token, callback, handleClose, amount, isPreAuth }) });
 }
 
 // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
-import { IoArrowBack as IoArrowBack2 } from "react-icons/io5";
+import { IoArrowBack } from "react-icons/io5";
+
+// src/app/components/Atoms/CardList/CardList.tsx
+import { Fragment as Fragment16, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+var CardList = ({ listHeading = "Card", ListItems, selectedCard, setSelectedCard, paymentGateway, handleDeleteCard, otherButtonAction, otherButtonLabel, headingClass }) => {
+  let trash2 = S3Url + "widget/Trash.svg";
+  return /* @__PURE__ */ jsxs17(Fragment16, { children: [
+    /* @__PURE__ */ jsx32("h6", { className: headingClass || "card-ach-heading", style: { marginBottom: "10px !important" }, children: listHeading }),
+    /* @__PURE__ */ jsxs17("div", { className: "card-lint-div-in", children: [
+      /* @__PURE__ */ jsx32("div", { className: "card-list-div", children: ListItems && (ListItems == null ? void 0 : ListItems.length) > 0 && (ListItems == null ? void 0 : ListItems.map((card, index) => {
+        let isDisabled = false;
+        if (paymentGateway) {
+          isDisabled = paymentGateway != (card == null ? void 0 : card.payment_method_type) && (card == null ? void 0 : card.card_type) != "Bank";
+        }
+        return /* @__PURE__ */ jsxs17("div", { className: "card-list-single-div", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "card-number-radio", children: [
+            /* @__PURE__ */ jsx32(
+              "input",
+              {
+                disabled: isDisabled,
+                type: "radio",
+                className: "cardRadio",
+                name: "selected_card",
+                id: "",
+                checked: (selectedCard == null ? void 0 : selectedCard.id) === (card == null ? void 0 : card.id),
+                onChange: (e) => setSelectedCard(card)
+              }
+            ),
+            /* @__PURE__ */ jsxs17("label", { htmlFor: "", className: "card-number-last-four", children: [
+              "**** ",
+              card == null ? void 0 : card.cardlastfourdigit
+            ] }),
+            (card == null ? void 0 : card.card_type) != "Bank" && /* @__PURE__ */ jsxs17("h6", { className: "card-expiry-date", children: [
+              card == null ? void 0 : card.expmonth,
+              "/",
+              card == null ? void 0 : card.expyear
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs17("div", { className: "card-number-radio", children: [
+            /* @__PURE__ */ jsx32("span", { className: "visa-card", children: /* @__PURE__ */ jsx32("img", { src: getCardType(card == null ? void 0 : card.card_type), alt: "" }) }),
+            /* @__PURE__ */ jsx32("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id), children: /* @__PURE__ */ jsx32("img", { src: trash2, alt: "" }) })
+          ] })
+        ] }, card == null ? void 0 : card.id);
+      })) }),
+      /* @__PURE__ */ jsxs17("div", { className: "pay-with-other-card", onClick: otherButtonAction, children: [
+        otherButtonLabel,
+        /* @__PURE__ */ jsx32("img", { src: defaultcard, alt: "" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 
 // src/app/components/ErrorCardMessage/ErrorCardOverlaystyle.tsx
@@ -11327,7 +11212,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                   /* @__PURE__ */ jsx36("h1", { className: "pay-heading", children: "Pay" }),
                   (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs19("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
                     " ",
-                    /* @__PURE__ */ jsx36(IoArrowBack2, {}),
+                    /* @__PURE__ */ jsx36(IoArrowBack, {}),
                     " Back"
                   ] })
                 ] }),
@@ -11407,7 +11292,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                     /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
                       /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
                         " ",
-                        /* @__PURE__ */ jsx36(IoArrowBack2, {})
+                        /* @__PURE__ */ jsx36(IoArrowBack, {})
                       ] }) }),
                       /* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
                     ] }),
@@ -11606,7 +11491,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                   !onSubmit && /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
                     /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
                       " ",
-                      /* @__PURE__ */ jsx36(IoArrowBack2, {})
+                      /* @__PURE__ */ jsx36(IoArrowBack, {})
                     ] }) }),
                     /* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
                   ] }),