@fractalpay/fractalpay-next-dev 0.0.245 → 0.0.246

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-dev",
-      version: "0.0.245",
+      version: "0.0.246",
       private: false,
       type: "module",
       scripts: {
@@ -113,25 +113,8 @@ import { useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 var LoaderStyle = (props) => {
   return /* @__PURE__ */ jsx("style", { children: `
-          
-          .loader-light {
-  position: fixed; /* Fixed position to cover the viewport */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
-  background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
-
-  backdrop-filter: blur(0.5px); /* Blur effect */
-  z-index: 999999999999 !important; /* Ensure it's on top of other elements */
-      transform: translate(0%, 0%) !important
-}
-          
-     .loader-dark {
+            
+     .loader {
   position: fixed; /* Fixed position to cover the viewport */
   top: 0;
   left: 0;
@@ -143,7 +126,7 @@ var LoaderStyle = (props) => {
   /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
   background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
 
-  backdrop-filter: blur(6.5px); /* Blur effect */
+  backdrop-filter: blur(.5px); /* Blur effect */
   z-index: 999999999999 !important; /* Ensure it's on top of other elements */
       transform: translate(0%, 0%) !important
 }
@@ -218,11 +201,10 @@ var LoaderStyle_default = LoaderStyle;
 
 // src/app/components/Loader/Loader.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Loader = (_a) => {
-  var _b = _a, { intensity = "light" } = _b, props = __objRest(_b, ["intensity"]);
+var Loader = (props) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(LoaderStyle_default, {}),
-    (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: `loader-${intensity}`, children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
+    (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: "loader", children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
       /* @__PURE__ */ jsx2("div", {}),
       /* @__PURE__ */ jsx2("div", {}),
       /* @__PURE__ */ jsx2("div", {}),
@@ -2926,7 +2908,7 @@ function ErrorCardMszStyle() {
 
 // src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
 import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
+var ErrorCardMessage = ({ onClose, error }) => {
   return /* @__PURE__ */ jsxs6(Fragment6, { children: [
     /* @__PURE__ */ jsx12(ErrorCardMszStyle, {}),
     /* @__PURE__ */ jsx12("div", { className: "card-error", children: /* @__PURE__ */ jsx12("div", { className: "payment-error-container", children: /* @__PURE__ */ jsxs6("div", { className: "error-icon", children: [
@@ -2935,7 +2917,7 @@ var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
         /* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
         /* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
       ] }),
-      !autoTrigger && /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
+      /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
     ] }) }) })
   ] });
 };
@@ -2952,28 +2934,14 @@ var socketClient_default = socket;
 
 // src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
 import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } 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__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsx13(
+var CardBankRadio = (props) => {
+  return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
       onClick: () => props.onChange(props.value),
       role: "radio",
-      children: skydesign ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
-        /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "box-inner-card-text", children: [
-            /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
-            /* @__PURE__ */ jsx13("div", { className: "frac-card-label-text", children: props.label })
-          ] }),
-          /* @__PURE__ */ jsx13("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
-        ] }),
-        savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
-        /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
-          props.onChange(e.target.value);
-        } }) })
-      ] }) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
+      children: [
         /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
           /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
           /* @__PURE__ */ jsxs7("div", { className: "frac-card-label", children: [
@@ -2981,11 +2949,10 @@ var CardBankRadio = (_a) => {
             /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
           ] })
         ] }),
-        savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
         /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
           props.onChange(e.target.value);
         } }) })
-      ] })
+      ]
     }
   ) });
 };
@@ -3010,7 +2977,6 @@ function CardBankRadioStyles({}) {
                 justify-content: space-between;
                 align-items: center;
                 align-self: stretch;
-                position: relative;
             }
             
             input[type="radio"] {
@@ -3068,28 +3034,6 @@ function CardBankRadioStyles({}) {
             .frac-card-bank-radio.frac-active {
                 background: #F6F6F7;
             }
-
-            .frac-saving-badge {
-                padding: 1px 7px !important;
-                border: 1px solid #9ad7ab;
-                border-radius: 999px;
-                background: #e8f8ec;
-                color: #1e6a34;
-                font-size: 10px;
-                font-weight: 600;
-                line-height: 15px;
-                pointer-events: none;
-            }
-
-            .frac-saving-badge-corner {
-                position: absolute;
-                top: 8px;
-                right: 10px;
-            }
-
-            .frac-saving-badge-with-radio {
-                right: 34px;
-            }
                 ` });
 }
 
@@ -3267,7 +3211,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
       {
         id: "card_number",
         className: "form-control card-number-new",
-        style: { height: `${isSky ? "36px" : "46px"}` }
+        style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
       }
     ),
     /* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
@@ -3276,7 +3220,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_month",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "36px", display: "inline-block" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3284,7 +3228,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_year",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "36px", display: "inline-block" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3292,7 +3236,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "cvv",
           className: "form-control card-cvv-in required",
-          style: { height: "36px", display: "block", minHeight: "36px" }
+          style: { height: "36px", display: "inline-block" }
         }
       ) })
     ] }) })
@@ -3415,8 +3359,7 @@ var DataCapFields = ({
   isOpen,
   tokenKey,
   setLoader,
-  isAddCard,
-  isEmbedded
+  isAddCard
 }) => {
   const iframeId = "datacap-iframe";
   const resolverRef = useRef2(null);
@@ -3442,20 +3385,6 @@ var DataCapFields = ({
     
       `;
     }
-    if (isEmbedded) {
-      customCSS += `
-      
-      input {
-        background-color: #F6F6F7;
-        box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1;
-      }
-      
-      select {
-        background-color: #F6F6F7;
-        box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
-      }
-      `;
-    }
     const initialize = async () => {
       setLoader == null ? void 0 : setLoader(true);
       setIframeReady(false);
@@ -3487,18 +3416,13 @@ var DataCapFields = ({
     };
     initialize();
   }, [isOpen, tokenKey]);
-  useEffect7(() => {
-    window.requestDcToken = () => {
-      return new Promise((resolve, reject) => {
-        setLoader == null ? void 0 : setLoader(true);
-        resolverRef.current = { resolve, reject };
-      });
-    };
-    return () => {
-      delete window.requestDcToken;
-    };
-  }, []);
-  console.log(setLoader, "loadingIframe");
+  window.requestDcToken = () => {
+    return new Promise((resolve, reject) => {
+      setLoader == null ? void 0 : setLoader(true);
+      resolverRef.current = { resolve, reject };
+      window.DatacapHostedWebToken.requestToken();
+    });
+  };
   return /* @__PURE__ */ jsx18(
     "iframe",
     {
@@ -3537,6 +3461,8 @@ function GetPaymentPage(props) {
   const [activeForm, setActiveForm] = useState4(true);
   const [saveCardInfo, setSaveCardInfo] = useState4(false);
   const [saveACHinfo, setSaveACHinfo] = useState4(false);
+  const [isBankConsentChecked, setIsBankConsentChecked] = useState4(false);
+  const [errorBankConsent, setErrorBankConsent] = useState4("");
   const fractalpayClientKey = props.merchantPublicKey;
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
@@ -3656,6 +3582,8 @@ function GetPaymentPage(props) {
     setLoading(false);
     setBankList([]);
     setCardList([]);
+    setIsBankConsentChecked(false);
+    setErrorBankConsent("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -3755,8 +3683,11 @@ function GetPaymentPage(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
+    if (!isBankConsentChecked) {
+      setErrorBankConsent("Above consent is requied");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0;
+    return Object.keys(errors).length > 0 || !isBankConsentChecked;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
@@ -4680,9 +4611,15 @@ function GetPaymentPage(props) {
                             ] })
                           ] }),
                           /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", maxLength: 100, placeholder: "My Bank" }),
+                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                              setIsBankConsentChecked(e.target.checked);
+                              if (e.target.checked) {
+                                setErrorBankConsent("");
+                              }
+                            } }),
                             /* @__PURE__ */ jsx19("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
                           ] }),
+                          errorBankConsent && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
                             /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
                             /* @__PURE__ */ jsx19("label", { htmlFor: "saveACH", children: "Save Bank" })
@@ -7447,6 +7384,8 @@ function PartialPayment(props) {
   const [aftertaxAmount, setAfterTaxAmount] = useState8(Number(props == null ? void 0 : props.amount));
   const [partialAmount, setPartialAmount] = useState8("");
   const [partialError, setPartialError] = useState8("");
+  const [isBankConsentChecked, setIsBankConsentChecked] = useState8(false);
+  const [errorBankConsent, setErrorBankConsent] = useState8("");
   const tokenizerRef = useRef8(null);
   const fractalStyles = {
     input: {
@@ -7558,6 +7497,8 @@ function PartialPayment(props) {
     setCardList([]);
     setPartialAmount("");
     setPartialError("");
+    setIsBankConsentChecked(false);
+    setErrorBankConsent("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -7658,8 +7599,11 @@ function PartialPayment(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
+    if (!isBankConsentChecked) {
+      setErrorBankConsent("Above consent is requied");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0;
+    return Object.keys(errors).length > 0 || !isBankConsentChecked;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
@@ -8607,9 +8551,24 @@ function PartialPayment(props) {
                             ] })
                           ] }),
                           /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "achconsent", className: "", maxLength: 100, placeholder: "My Bank" }),
+                            /* @__PURE__ */ jsx28(
+                              "input",
+                              {
+                                type: "checkbox",
+                                id: "achconsent",
+                                className: "",
+                                checked: isBankConsentChecked,
+                                onChange: (e) => {
+                                  setIsBankConsentChecked(e.target.checked);
+                                  if (e.target.checked) {
+                                    setErrorBankConsent("");
+                                  }
+                                }
+                              }
+                            ),
                             /* @__PURE__ */ jsx28("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
                           ] }),
+                          errorBankConsent && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
                             /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
                             /* @__PURE__ */ jsx28("label", { htmlFor: "saveACH", children: "Save Bank" })
@@ -8871,17 +8830,6 @@ function SkyChargewidgetstyles() {
             text-align : left !important;
             text-transform: uppercase !important;
         }
-        .frac-form .frac-fee-text{
-            display: block;
-            padding: 10px 0 4px;
-            font-family: 'IBM Plex Mono', monospace !important;
-            color: #727272 !important;
-            font-size: 12px;
-            line-height: 1.4;
-        }
-        .frac-form .frac-fee-amount{
-            color: #c62828 !important;
-        }
         .form-control-frac{
             display: block;
             width: 100%;
@@ -8916,7 +8864,7 @@ function SkyChargewidgetstyles() {
         }
             .exp-date-year-container .form-group {
     flex: 1;
-    padding-left:.75rem !important;
+    padding-left:.75rem;
 }
         .card-crdi {
             display: flex;
@@ -8933,7 +8881,7 @@ function SkyChargewidgetstyles() {
         }
         .exp-date-year-container .form-group-frac{
                 flex:1;
-                // padding: 0px !important
+                padding: 0px !important
                
             }
 
@@ -9434,16 +9382,7 @@ margin:0px !important;
 padding:0px !important;
 }
 
-
-.toggle-num-wrapper-new div#card_number {
-    display: block !important;
-}
-   .toggle-num-wrapper-new .input-main-wrap-frac {
-    height: 36px;
-}
-   .toggle-num-wrapper-new:focus {
-    border: 1px solid #004eab !important;
-}
+    
 
         ` });
 }
@@ -9590,162 +9529,10 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
 // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
 import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
-
-// src/app/components/ErrorCardMessage/ErrorCardOverlaystyle.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-function ErrorCardOverlayStyle() {
-  return /* @__PURE__ */ jsx32("style", { children: `
-        .card-error-overlay .logo-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-bottom: -50px; /* Adjust this to overlap the content */
-            z-index: 10;
-        }
-
-        .card-error-overlay .client-logo {
-            max-width: 100px;
-            height: auto;
-            object-fit: contain;
-            display: block;
-        }
-
-       
-        .card-error-overlay .error-icon-overlay {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 12px;
-            min-height: 116px;
-            z-index: 2;
-        }
-
-        .card-error-overlay .circle {
-            width: 50px;
-            height: 50px;
-            border: 1px solid red;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-bottom:20px
-        }
-
-        .card-error-overlay .circle .fa-times {
-            font-size: 30px;
-            color: red;
-        }
-
-        .card-error-overlay .error-text-overlay {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            gap: 4px;
-            // width: 227px;
-        }
-
-        .card-error-overlay .payment-error-text-overlay {
-            font-family: 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 21px;
-            text-align: center;
-            letter-spacing: -0.02em;
-            color: #161616;
-        }
-
-        .card-error-overlay .thank-you-text-overlay {
-            font-family: 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 18px;
-            text-align: center;
-            letter-spacing: -0.02em;
-            color: #161616 !important;
-            opacity: 0.5;
-            padding-top:10px
-        }
-
-        .card-error-overlay .error-btn-div-overlay{
-            padding-top:20px;
-            width: 100%;
-        
-        }
-        .card-error-overlay .error-btn-div-overlay button{
-             outline: 0;
-    height: 46px;
-    font-size: 16px;
-    background: #727272;
-    border: none;
-    display: block;
-    color: #fff;
-    width: 100%;
-    border-radius: 180px;
-    margin: 10px 0;
-    text-decoration: none;
-        }
-    .card-error-overlay .error-btn-div-overlay button:hover, .card-error-overlay .error-btn-div-overlay button:focus {
-    background: #222;
-    color: #fff;
-    cursor: pointer;
-}
-                .payment-error-container-overlay {
-width: fit-content;
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-radius: 12px;
-    z-index: 11111;
-    max-width: 240px;
-    min-width: 224px;
-    padding: 20px;
-    margin-left: 17px !important;
-}
-.card-error-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(87 87 87 / 15%);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(12px);
-    z-index: 1111;
-}
-            ` });
-}
-
-// src/app/components/ErrorCardMessage/ErrorCardOverlay.tsx
-import { Fragment as Fragment18, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
-var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
-  return /* @__PURE__ */ jsxs19(Fragment18, { children: [
-    /* @__PURE__ */ jsx33(ErrorCardOverlayStyle, {}),
-    /* @__PURE__ */ jsx33("div", { className: "card-error-overlay", children: /* @__PURE__ */ jsx33("div", { className: "payment-error-container-overlay", children: /* @__PURE__ */ jsxs19("div", { className: "error-icon-overlay", children: [
-      /* @__PURE__ */ jsx33("div", { className: "circle", children: /* @__PURE__ */ jsx33("i", { className: "fa fa-times", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsxs19("div", { className: "error-text-overlay", children: [
-        /* @__PURE__ */ jsx33("div", { className: "payment-error-text-overlay", children: error }),
-        /* @__PURE__ */ jsx33("div", { className: "thank-you-text-overlay", children: "Try again later " })
-      ] }),
-      !autoTrigger && /* @__PURE__ */ jsx33("div", { className: "error-btn-div-overlay", children: /* @__PURE__ */ jsx33("button", { onClick: onClose, children: "OK" }) })
-    ] }) }) })
-  ] });
-};
-var ErrorCardOverlay_default = ErrorCardOverlay;
-
-// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
-import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
-var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount, onSubmit, onLoad = true }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+import { Fragment as Fragment18, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const hasRunRef = useRef10(false);
-  const cardFormRef = useRef10(null);
-  const bankFormRef = useRef10(null);
-  const expiryYearRef = useRef10(null);
-  const expiryMonthRef = useRef10(null);
   const cardListRunRef = useRef10(false);
   const threeDSContainerRef = useRef10(null);
   const [activetab, setActive] = useState10("card");
@@ -9783,6 +9570,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [remainingAmount, setRemainingAmount] = useState10("");
   const [paymentGateway, setPaymentGateway] = useState10();
   const [dcToken, setDCToken] = useState10();
+  const [isBankConsentChecked, setIsBankConsentChecked] = useState10(false);
+  const [errorBankConsent, setErrorBankConsent] = useState10("");
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
   let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -9795,10 +9584,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   let pax2 = S3Url + "widget/pax.svg";
   let cardicon = S3Url + "widget/cardicon.svg";
   let bankicon = S3Url + "widget/bankicon.svg";
-  let defualtcardborder = S3Url + "widget/defualtcardborder.svg";
-  let unionicon = S3Url + "widget/unionpay.svg";
-  let dinersicon = S3Url + "widget/diners.svg";
-  let jcbicon = S3Url + "widget/jcb.svg";
   const showLoader = () => setLoading(true);
   const hideLoader = () => setLoading(false);
   const CalculateCashDiscount = (amount2, surcharge2) => {
@@ -9806,10 +9591,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     const originalAmount = amount2 / (1 + surchargeVal);
     return Math.round(originalAmount * 100) / 100;
   };
-  const cardFeeAmount = Number(pass_fee_amount || 0);
-  const bankFeeAmount = Number(bankSurcharge || 0);
-  const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
-  const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
   const tokenizerRef = useRef10(null);
   const fractalStyles = {
     input: {
@@ -9974,8 +9755,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
         errors.companyName = "Company Name is required for business accounts";
       }
     }
+    if (!isBankConsentChecked) {
+      setErrorBankConsent("Above consent is requied");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0;
+    return Object.keys(errors).length > 0 || !isBankConsentChecked;
   };
   const completeFractalFlow = async (tokenizeData, intentid) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
@@ -10016,7 +9800,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     }
   };
   const handleFractalTokenFlow = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v, _w, _x, _y, _z, _A;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w;
     try {
       const requestOptions = {
         method: "POST",
@@ -10057,29 +9841,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
           three_ds_data
         );
       } catch (error2) {
-        console.log(error2, "error in tokenization");
-        let readableMessage = "Something went wrong!";
-        try {
-          const rawError = ((_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.data) || (error2 == null ? void 0 : error2.message) || "";
-          const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
-          const lines = ((_p2 = (_o2 = errorText.split) == null ? void 0 : _o2.call(errorText, "\n")) == null ? void 0 : _p2.filter(Boolean)) || [];
-          const lastLine = lines.at(-1) || "";
-          const parts = (_q2 = lastLine.split) == null ? void 0 : _q2.call(lastLine, ": ");
-          readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
-        } catch (e) {
-          readableMessage = "Something went wrong!";
-        }
-        setErrorIframe(readableMessage);
+        setErrorIframe(error2);
         hideLoader();
       }
       if (tokenizeData == null ? void 0 : tokenizeData.token) {
         let ThreedsData = tokenizeData == null ? void 0 : tokenizeData.stripe_three_ds_response;
-        if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_r2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _r2.challenge_url)) {
+        if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_n2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _n2.challenge_url)) {
           setError("Something went wrong. Please try again later.");
         }
         if (require3ds) {
-          if (!((_s2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _s2.challenge_url)) {
-            completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_t2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _t2.id);
+          if (!((_o2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _o2.challenge_url)) {
+            completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_p2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _p2.id);
           } else {
             hideLoader();
             setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
@@ -10095,11 +9867,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       console.log(error2, "error");
       let readableMessage = "Something went wrong!";
       try {
-        const rawError = ((_u2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _u2.data) || (error2 == null ? void 0 : error2.message) || "";
+        const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
         const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
-        const lines = ((_w = (_v = errorText.split) == null ? void 0 : _v.call(errorText, "\n")) == null ? void 0 : _w.filter(Boolean)) || [];
+        const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
         const lastLine = lines.at(-1) || "";
-        const parts = (_x = lastLine.split) == null ? void 0 : _x.call(lastLine, ": ");
+        const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
         readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
       } catch (e) {
         readableMessage = "Something went wrong!";
@@ -10107,8 +9879,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       setError(readableMessage);
       callback({
         error: readableMessage,
-        result: (_z = (_y = error2 == null ? void 0 : error2.response) == null ? void 0 : _y.data) == null ? void 0 : _z.result,
-        statusCode: (_A = error2 == null ? void 0 : error2.response) == null ? void 0 : _A.status
+        result: (_v = (_u = error2 == null ? void 0 : error2.response) == null ? void 0 : _u.data) == null ? void 0 : _v.result,
+        statusCode: (_w = error2 == null ? void 0 : error2.response) == null ? void 0 : _w.status
       });
     }
   };
@@ -10379,6 +10151,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     setPartialAmount("");
     setPartialError("");
     setRemainingAmount("");
+    setIsBankConsentChecked(false);
+    setErrorBankConsent("");
   };
   const getCardList = async () => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
@@ -10523,8 +10297,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     });
   };
   const handlechargeCustomer = async (e) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-    e == null ? void 0 : e.currentTarget.blur();
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    e.currentTarget.blur();
     if (loading) return;
     let customer_id = customerId;
     let card_id = selectedCard == null ? void 0 : selectedCard.id;
@@ -10571,6 +10345,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
               statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
             });
             hideLoader();
+            setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
           }
         } else {
           setError("Please Select A Card/Bank");
@@ -10592,7 +10367,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2;
     try {
       showLoader();
       const res = await axios9.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`, {
@@ -10615,7 +10390,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
         result: (_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result,
         statusCode: (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.status
       });
-      setError(((_q2 = (_p2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _p2.data) == null ? void 0 : _q2.message) || (error2 == null ? void 0 : error2.message) || "Something went wrong");
       hideLoader();
     }
   };
@@ -10653,13 +10427,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     }
   }, [show, autoTrigger]);
   useEffect15(() => {
-    if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
+    if (!hasRunRef.current && (show || autoTrigger)) {
       getPaymentDetails();
       if (isPartial && !partialRef) {
         crateOrderFrac();
       }
     }
-  }, [show, autoTrigger, isPartial, onLoad]);
+  }, [show, autoTrigger, isPartial]);
   useEffect15(() => {
     if ((show || autoTrigger) && pass_fee_amount) {
       let cashdisc = Number(amount) - Number(pass_fee_amount);
@@ -10746,89 +10520,18 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       styles: {}
     });
   }, []);
-  const stateRef = useRef10({
-    activeinBank,
-    activeinCard,
-    activetab
-  });
-  useEffect15(() => {
-    stateRef.current = {
-      activeinBank,
-      activeinCard,
-      activetab
-    };
-  }, [activeinBank, activeinCard, activetab]);
-  const submit = useCallback(() => {
-    var _a2, _b2;
-    const { activeinBank: activeinBank2, activeinCard: activeinCard2, activetab: activetab2 } = stateRef.current;
-    if (activetab2 === "card") {
-      if (activeinCard2 === "form") {
-        (_a2 = cardFormRef.current) == null ? void 0 : _a2.requestSubmit();
-      } else if (activeinCard2 === "list") {
-        handlechargeCustomer();
-      }
-    } else if (activetab2 === "ach") {
-      if (activeinBank2 === "form") {
-        (_b2 = bankFormRef.current) == null ? void 0 : _b2.requestSubmit();
-      } else if (activeinBank2 === "list") {
-        handlechargeCustomer();
-      }
-    }
-  }, []);
-  useEffect15(() => {
-    onSubmit == null ? void 0 : onSubmit(submit);
-  }, [onSubmit, submit]);
-  function detectCardType(cardinput) {
-    if (!cardinput) return null;
-    const number = cardinput.replace(/\D/g, "");
-    const patterns = {
-      visa: /^4/,
-      mastercard: /^(5[1-5]|2[2-7][0-9]{2})/,
-      amex: /^3[47]/,
-      discover: /^(6011|65|64[4-9])/,
-      diners: /^(30[0-5]|36|38)/,
-      jcb: /^(35[2-8][0-9])/,
-      unionpay: /^62/
-    };
-    for (const [type, regex] of Object.entries(patterns)) {
-      if (regex.test(number)) {
-        return type;
-      }
-    }
-    return "unknown";
-  }
-  function getCardImage(cardInput) {
-    const cardType = detectCardType(cardInput);
-    switch (cardType) {
-      case "visa":
-        return /* @__PURE__ */ jsx34("img", { src: visa2, alt: "visa", width: 33 });
-      case "mastercard":
-        return /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "mastercard" });
-      case "amex":
-        return /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "amex", width: 33 });
-      case "discover":
-        return /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "discover" });
-      case "diners":
-        return /* @__PURE__ */ jsx34("img", { src: dinersicon, alt: "Diners Club" });
-      case "jcb":
-        return /* @__PURE__ */ jsx34("img", { src: jcbicon, alt: "JCB" });
-      case "unionpay":
-        return /* @__PURE__ */ jsx34("img", { src: unionicon, alt: "UnionPay" });
-      default:
-        return /* @__PURE__ */ jsx34("img", { src: defualtcardborder, alt: "card" });
-    }
-  }
-  return /* @__PURE__ */ jsxs20(Fragment19, { children: [
-    (initialLoader || !onLoad) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
-    error && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
-    errorIframe && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
+  console.log(activeinCard === "list", "activeinCard", activeList);
+  return /* @__PURE__ */ jsxs19(Fragment18, { children: [
+    initialLoader && /* @__PURE__ */ jsx32(Loader_default, { loading: initialLoader }),
+    error && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error, onClose: handleClose }) }),
+    errorIframe && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
       setErrorIframe("");
-    }, autoTrigger: onSubmit ? !onSubmit : autoTrigger }) }),
-    /* @__PURE__ */ jsxs20(Fragment19, { children: [
-      (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
-      /* @__PURE__ */ jsxs20("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
-        /* @__PURE__ */ jsx34("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
-        (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx34(
+    } }) }),
+    !error && !errorIframe && /* @__PURE__ */ jsxs19(Fragment18, { children: [
+      (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx32(Loader_default, { loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
+      /* @__PURE__ */ jsxs19("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
+        /* @__PURE__ */ jsx32("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
+        (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx32(
           ThreeDSChallenge,
           {
             containerRef: threeDSContainerRef,
@@ -10838,33 +10541,40 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
             onSuccess: handleSuccess,
             onError: handleError
           }
-        ) : /* @__PURE__ */ jsxs20("div", { className: "parent-pay-container", children: [
-          /* @__PURE__ */ jsx34("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-            /* @__PURE__ */ jsx34("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx34("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__ */ jsx34("defs", { children: /* @__PURE__ */ jsx34("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx34("rect", { width: "16", height: "16", fill: "white" }) }) })
+        ) : /* @__PURE__ */ jsxs19("div", { className: "parent-pay-container", children: [
+          /* @__PURE__ */ jsx32("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsx32("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx32("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__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx32("rect", { width: "16", height: "16", fill: "white" }) }) })
           ] }) }),
-          /* @__PURE__ */ jsx34("div", { className: "pay-main-logo-res" }),
-          /* @__PURE__ */ jsxs20("div", { className: onSubmit ? "pay-container frac-pay-container " : "pay-container", children: [
-            !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "pay-header pay-conatiner-one", children: [
-              /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-first", children: [
-                /* @__PURE__ */ jsxs20("div", { className: "pay-logo-container", children: [
-                  /* @__PURE__ */ jsx34("div", { className: "pay-main-logo" }),
-                  /* @__PURE__ */ jsx34("h1", { className: "pay-heading", children: "Pay" }),
-                  (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs20("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
+          /* @__PURE__ */ jsx32("div", { className: "pay-main-logo-res" }),
+          /* @__PURE__ */ jsxs19("div", { className: "pay-container", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "pay-header pay-conatiner-one", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-first", children: [
+                /* @__PURE__ */ jsxs19("div", { className: "pay-logo-container", children: [
+                  /* @__PURE__ */ jsx32("div", { className: "pay-main-logo" }),
+                  /* @__PURE__ */ jsx32("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__ */ jsx34(IoArrowBack4, {}),
+                    /* @__PURE__ */ jsx32(IoArrowBack4, {}),
                     " Back"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
-                  /* @__PURE__ */ jsx34("small", { className: "pay-payment-amount", children: "Select payment type" }),
-                  /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
-                    /* @__PURE__ */ jsx34(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                    !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+                /* @__PURE__ */ jsx32("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs19("div", { className: "pay-amount-conatiner", children: [
+                  /* @__PURE__ */ jsx32("small", { className: "pay-payment-amount", children: "Select payment type" }),
+                  /* @__PURE__ */ jsxs19("div", { className: "frac-card-bank-radio-main", children: [
+                    /* @__PURE__ */ jsx32(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
+                    !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx32(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
                   ] }),
-                  isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
-                    /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
-                    /* @__PURE__ */ jsx34(
+                  pass_fee && activetab === "card" && cashDiscount && Number(amount) - Number(cashDiscount) > 0 ? /* @__PURE__ */ jsxs19("div", { className: "frac-cash-discount-fee", children: [
+                    /* @__PURE__ */ jsxs19("small", { children: [
+                      activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
+                      "  "
+                    ] }),
+                    /* @__PURE__ */ jsx32("p", { children: formatUSD((Number(amount) - Number(cashDiscount)).toFixed(2)) })
+                  ] }) : null,
+                  isPartial && /* @__PURE__ */ jsxs19("div", { className: "frac-partial-payment-input", children: [
+                    /* @__PURE__ */ jsx32("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
+                    /* @__PURE__ */ jsx32(
                       NumericFormat2,
                       {
                         prefix: "$",
@@ -10888,372 +10598,331 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                         }
                       }
                     ),
-                    partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
+                    partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
                   ] })
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-last", children: [
-                /* @__PURE__ */ jsx34("img", { src: secure2, alt: "" }),
-                /* @__PURE__ */ jsx34("img", { src: pov2, alt: "" }),
+              /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
+                /* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
+                /* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
                 "Secure payments powered by Fractal"
               ] })
             ] }),
-            /* @__PURE__ */ jsx34("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx34("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs20("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
-              onSubmit && /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
-                /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
-                  /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                  !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+            /* @__PURE__ */ jsx32("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx32("div", { className: "col-md-12", children: /* @__PURE__ */ jsx32("div", { id: "payment-form-div", children: is3DSEnable ? clientSecret && /* @__PURE__ */ jsx32(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs19(Fragment18, { children: [
+              /* @__PURE__ */ jsxs19("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
+                /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
+                  /* @__PURE__ */ jsx32("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__ */ jsx32(IoArrowBack4, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
                 ] }),
-                isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
-                  /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
-                  /* @__PURE__ */ jsx34(
-                    NumericFormat2,
-                    {
-                      prefix: "$",
-                      className: "form-control-frac",
-                      value: partialAmount,
-                      onValueChange: (values) => {
-                        handlePartialChange(values);
-                      },
-                      thousandSeparator: true,
-                      placeholder: "Enter partial amount",
-                      allowNegative: false,
-                      allowLeadingZeros: false,
-                      decimalScale: 2,
-                      fixedDecimalScale: true
-                    }
-                  ),
-                  partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
-                ] })
-              ] }) }),
-              is3DSEnable ? clientSecret && /* @__PURE__ */ jsx34(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                /* @__PURE__ */ jsxs20("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
-                  !onSubmit && /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
-                      /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
-                        " ",
-                        /* @__PURE__ */ jsx34(IoArrowBack4, {})
-                      ] }) }),
-                      /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
+                /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
+                  /* @__PURE__ */ jsx32("img", { src: visa2, alt: "", width: 33 }),
+                  /* @__PURE__ */ jsx32("img", { src: mastercard2, width: 33, alt: "" }),
+                  /* @__PURE__ */ jsx32("img", { src: americanexp2, alt: "", width: 33 }),
+                  /* @__PURE__ */ jsx32("img", { src: discover2, width: 33, alt: "" })
+                ] }),
+                activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
+                  /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
+                    setActiveinCard("form");
+                  } }),
+                  /* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_c = Number(partialAmount)) == null ? void 0 : _c.toFixed(2)) : formatUSD((_d = Number(amount)) == null ? void 0 : _d.toFixed(2)) }) })
+                ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs19("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
+                  if (e.key === "Enter" && loading) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }, children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                      /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", 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__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
                     ] }),
-                    /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
-                      /* @__PURE__ */ jsx34("img", { src: visa2, alt: "", width: 33 }),
-                      /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "" }),
-                      /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "", width: 33 }),
-                      /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "" })
-                    ] })
-                  ] }),
-                  activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
-                      setActiveinCard("form");
-                    } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
-                  ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs20("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
-                    if (e.key === "Enter" && loading) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                  }, children: [
-                    /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", 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__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
-                        /* @__PURE__ */ jsx34("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx34(
-                          FractalFields_default,
-                          {
-                            fractalStyles,
-                            tokenizerRef,
-                            isSky: true
-                          }
-                        ) })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
-                        (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
-                        pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
-                          "Credit cards include a fee amount of ",
-                          /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
-                          "."
-                        ] })
-                      ] }),
-                      customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                        /* @__PURE__ */ jsx34(
-                          "input",
-                          {
-                            type: "checkbox",
-                            id: "save_card",
-                            className: "toggle-checkbox",
-                            checked: saveCardInfo,
-                            onChange: (e) => setSaveCardInfo(e.target.checked)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
-                        /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
-                          /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
-                            "svg",
-                            {
-                              xmlns: "http://www.w3.org/2000/svg",
-                              width: "20",
-                              height: "20",
-                              viewBox: "0 0 20 20",
-                              fill: "none",
-                              children: [
-                                /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                /* @__PURE__ */ jsx34(
-                                  "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__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
-                            "If checked, I agree to give the ",
-                            /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
-                            " permission to charge this credit card for agreed-upon purchases in the future."
-                          ] }) })
-                        ] })
-                      ] }) })
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
+                      /* @__PURE__ */ jsx32("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx32(
+                        FractalFields_default,
+                        {
+                          fractalStyles,
+                          tokenizerRef,
+                          isSky: true
+                        }
+                      ) })
                     ] }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
-                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
-                    if (e.key === "Enter" && loading) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                  }, children: [
-                    /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", 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__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
-                      ] }),
-                      /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx34(
-                        DataCapFields,
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
+                      /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_e = cardData == null ? void 0 : cardData.zipCode) != null ? _e : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                      (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
+                    ] }),
+                    customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                      /* @__PURE__ */ jsx32(
+                        "input",
                         {
-                          isOpen: show || autoTrigger,
-                          tokenKey: dcToken,
-                          setLoader: activeinCard === "form" ? setLoadingIframe : null,
-                          isEmbedded: onSubmit ? true : false
+                          type: "checkbox",
+                          id: "save_card",
+                          className: "toggle-checkbox",
+                          checked: saveCardInfo,
+                          onChange: (e) => setSaveCardInfo(e.target.checked)
                         }
-                      ) }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
-                        (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
-                        pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
-                          "Credit cards include a fee amount of ",
-                          /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
-                          "."
-                        ] })
-                      ] }),
-                      customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                        /* @__PURE__ */ jsx34(
-                          "input",
+                      ),
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                      /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
+                        /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
+                          "svg",
                           {
-                            type: "checkbox",
-                            id: "save_card",
-                            className: "toggle-checkbox",
-                            checked: saveCardInfo,
-                            onChange: (e) => setSaveCardInfo(e.target.checked)
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            children: [
+                              /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                              /* @__PURE__ */ jsx32(
+                                "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__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
-                        /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
-                          /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
-                            "svg",
-                            {
-                              xmlns: "http://www.w3.org/2000/svg",
-                              width: "20",
-                              height: "20",
-                              viewBox: "0 0 20 20",
-                              fill: "none",
-                              children: [
-                                /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                /* @__PURE__ */ jsx34(
-                                  "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__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
-                            "If checked, I agree to give the ",
-                            /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
-                            " permission to charge this credit card for agreed-upon purchases in the future."
-                          ] }) })
-                        ] })
-                      ] }) })
-                    ] }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx34("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                  !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
-                    /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
-                      " ",
-                      /* @__PURE__ */ jsx34(IoArrowBack4, {})
-                    ] }) }),
-                    /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
+                        ) }),
+                        /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
+                          "If checked, I agree to give the ",
+                          /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
+                          " permission to charge this credit card for agreed-upon purchases in the future."
+                        ] }) })
+                      ] })
+                    ] }) })
                   ] }),
-                  activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
-                      setActiveinBank("form");
-                    } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
-                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
-                    if (e.key === "Enter" && loading) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                  }, children: [
-                    /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: {
-                      minHeight: "444px",
-                      maxHeight: "444px"
-                    }, children: [
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "nameonaccount", children: "Name on account" }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_n = achData == null ? void 0 : achData.name) != null ? _n : "", onChange: handleChangeAch }),
-                        (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "routingnumber", children: "Routing number" }),
-                        /* @__PURE__ */ jsx34(
-                          "input",
-                          {
-                            type: "text",
-                            id: "routingnumber",
-                            className: "form-control-frac",
-                            maxLength: 9,
-                            placeholder: "000000000",
-                            name: "routingNumber",
-                            value: (_o = achData == null ? void 0 : achData.routingNumber) != null ? _o : "",
-                            onChange: handleChangeAch
-                          }
-                        ),
-                        (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "accountnumber", children: "Account number" }),
-                        /* @__PURE__ */ jsx34(
-                          "input",
-                          {
-                            type: "text",
-                            id: "accountnumber",
-                            className: "form-control-frac",
-                            maxLength: 16,
-                            placeholder: "0000000000",
-                            name: "accountNumber",
-                            value: (_p = achData == null ? void 0 : achData.accountNumber) != null ? _p : "",
-                            onChange: handleChangeAch
-                          }
-                        ),
-                        (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
-                        /* @__PURE__ */ jsx34(
-                          "input",
-                          {
-                            type: "text",
-                            id: "confirmaccountnumber",
-                            className: "form-control-frac",
-                            maxLength: 16,
-                            placeholder: "0000000000",
-                            name: "confirmAccountNumber",
-                            value: (_q = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _q : "",
-                            onChange: handleChangeAch
-                          }
-                        ),
-                        (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "bankname", children: "Bank name" }),
-                        /* @__PURE__ */ jsx34(
-                          "input",
-                          {
-                            type: "text",
-                            id: "bankname",
-                            className: "form-control-frac",
-                            maxLength: 100,
-                            placeholder: "My Bank",
-                            name: "bankName",
-                            value: (_r = achData == null ? void 0 : achData.bankName) != null ? _r : "",
-                            onChange: handleChangeAch
-                          }
-                        ),
-                        (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx34("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__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "companyName", children: "Company name" }),
-                        /* @__PURE__ */ jsx34(
-                          "input",
+                  /* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_f = Number(partialAmount)) == null ? void 0 : _f.toFixed(2)) : formatUSD((_g = Number(amount)) == null ? void 0 : _g.toFixed(2)) }) })
+                ] }) : /* @__PURE__ */ jsxs19("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
+                  if (e.key === "Enter" && loading) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }, children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                      /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", 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__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
+                    ] }),
+                    /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
+                      DataCapFields,
+                      {
+                        isOpen: show || autoTrigger,
+                        tokenKey: dcToken,
+                        setLoader: activeinCard === "form" ? setLoadingIframe : null
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
+                      /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                      (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
+                    ] }),
+                    customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "checkbox",
+                          id: "save_card",
+                          className: "toggle-checkbox",
+                          checked: saveCardInfo,
+                          onChange: (e) => setSaveCardInfo(e.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                      /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
+                        /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
+                          "svg",
                           {
-                            type: "text",
-                            id: "companyName",
-                            className: "form-control-frac",
-                            maxLength: 100,
-                            placeholder: "My Company",
-                            name: "companyName",
-                            value: (_s = achData == null ? void 0 : achData.companyName) != null ? _s : "",
-                            onChange: handleChangeAch
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            children: [
+                              /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                              /* @__PURE__ */ jsx32(
+                                "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"
+                                }
+                              )
+                            ]
                           }
-                        ),
-                        (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "accounttype", children: "Select account type" }),
-                        /* @__PURE__ */ jsxs20("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
-                          /* @__PURE__ */ jsx34("option", { value: "", children: "Select account" }),
-                          accountTypes.map((type) => /* @__PURE__ */ jsx34("option", { value: type.value, children: type.label }, type.value))
-                        ] }),
-                        bankFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
-                          "There is a processing fee of ",
-                          /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
-                          "."
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                        /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "achconsent", className: "", maxLength: 100, placeholder: "My Bank" }),
-                        /* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
-                      ] }),
-                      customerId && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                        /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                        /* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
-                      ] }),
-                      saveACHinfo && /* @__PURE__ */ jsx34("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs20("p", { children: [
-                        "If checked, I agree to give the ",
-                        /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
-                        " permission to charge this bank account for agreed-upon purchases in the future."
-                      ] }) })
+                        ) }),
+                        /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
+                          "If checked, I agree to give the ",
+                          /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
+                          " permission to charge this credit card for agreed-upon purchases in the future."
+                        ] }) })
+                      ] })
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_i = Number(partialAmount)) == null ? void 0 : _i.toFixed(2)) : formatUSD((_j = Number(amount)) == null ? void 0 : _j.toFixed(2)) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx32("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs19(Fragment18, { children: [
+                /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
+                  /* @__PURE__ */ jsx32("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__ */ jsx32(IoArrowBack4, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
+                ] }),
+                activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
+                  /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
+                    setActiveinBank("form");
+                  } }),
+                  /* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_k = Number(bankAmount)) == null ? void 0 : _k.toFixed(2)) }) })
+                ] }) : /* @__PURE__ */ jsxs19("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
+                  if (e.key === "Enter" && loading) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }, children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: {
+                    minHeight: "444px",
+                    maxHeight: "444px"
+                  }, children: [
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "nameonaccount", children: "Name on account" }),
+                      /* @__PURE__ */ jsx32("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_l = achData == null ? void 0 : achData.name) != null ? _l : "", onChange: handleChangeAch }),
+                      (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
                     ] }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "20px 0 0", display: onSubmit ? "none" : "block" }, type: "submit", children: formatUSD((_u = Number(bankAmount)) == null ? void 0 : _u.toFixed(2)) }) })
-                  ] })
-                ] }) })
-              ] })
-            ] }) }) })
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "routingnumber", children: "Routing number" }),
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "text",
+                          id: "routingnumber",
+                          className: "form-control-frac",
+                          maxLength: 9,
+                          placeholder: "000000000",
+                          name: "routingNumber",
+                          value: (_m = achData == null ? void 0 : achData.routingNumber) != null ? _m : "",
+                          onChange: handleChangeAch
+                        }
+                      ),
+                      (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
+                    ] }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "accountnumber", children: "Account number" }),
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "text",
+                          id: "accountnumber",
+                          className: "form-control-frac",
+                          maxLength: 16,
+                          placeholder: "0000000000",
+                          name: "accountNumber",
+                          value: (_n = achData == null ? void 0 : achData.accountNumber) != null ? _n : "",
+                          onChange: handleChangeAch
+                        }
+                      ),
+                      (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
+                    ] }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "text",
+                          id: "confirmaccountnumber",
+                          className: "form-control-frac",
+                          maxLength: 16,
+                          placeholder: "0000000000",
+                          name: "confirmAccountNumber",
+                          value: (_o = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _o : "",
+                          onChange: handleChangeAch
+                        }
+                      ),
+                      (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
+                    ] }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "bankname", children: "Bank name" }),
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "text",
+                          id: "bankname",
+                          className: "form-control-frac",
+                          maxLength: 100,
+                          placeholder: "My Bank",
+                          name: "bankName",
+                          value: (_p = achData == null ? void 0 : achData.bankName) != null ? _p : "",
+                          onChange: handleChangeAch
+                        }
+                      ),
+                      (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx32("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__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "companyName", children: "Company name" }),
+                      /* @__PURE__ */ jsx32(
+                        "input",
+                        {
+                          type: "text",
+                          id: "companyName",
+                          className: "form-control-frac",
+                          maxLength: 100,
+                          placeholder: "My Company",
+                          name: "companyName",
+                          value: (_q = achData == null ? void 0 : achData.companyName) != null ? _q : "",
+                          onChange: handleChangeAch
+                        }
+                      ),
+                      (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
+                    ] }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
+                      /* @__PURE__ */ jsx32("label", { htmlFor: "accounttype", children: "Select account type" }),
+                      /* @__PURE__ */ jsxs19("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_r = achData == null ? void 0 : achData.accountType) != null ? _r : "", onChange: handleChangeAch, children: [
+                        /* @__PURE__ */ jsx32("option", { value: "", children: "Select account" }),
+                        accountTypes.map((type) => /* @__PURE__ */ jsx32("option", { value: type.value, children: type.label }, type.value))
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                      /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                        setIsBankConsentChecked(e.target.checked);
+                        if (e.target.checked) {
+                          setErrorBankConsent("");
+                        }
+                      } }),
+                      /* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                    ] }),
+                    errorBankConsent && /* @__PURE__ */ jsx32("span", { className: "error-span", children: errorBankConsent }),
+                    customerId && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                      /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
+                      /* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
+                    ] }),
+                    saveACHinfo && /* @__PURE__ */ jsx32("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs19("p", { children: [
+                      "If checked, I agree to give the ",
+                      /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
+                      " permission to charge this bank account for agreed-upon purchases in the future."
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx32("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_s = Number(bankAmount)) == null ? void 0 : _s.toFixed(2)) }) })
+                ] })
+              ] }) })
+            ] }) }) }) })
           ] })
         ] })
       ] })
@@ -11264,7 +10933,7 @@ var ModelContentSky_default = ModelContentSky;
 
 // src/app/components/Skysystemz/PayButtonWithForm.tsx
 import axios10 from "axios";
-import { Fragment as Fragment20, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var PaymentWidget = ({
   amount,
   bankAmount,
@@ -11375,510 +11044,24 @@ var PaymentWidget = ({
       getskyosOrderDetails();
     }
   }, [show, isPartial, partialRef]);
-  return /* @__PURE__ */ jsxs21(Fragment20, { children: [
-    /* @__PURE__ */ jsx35("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
-    /* @__PURE__ */ jsx35(DataScript, {}),
-    /* @__PURE__ */ jsx35(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx35(SkyChargewidgetstyles, {}),
-    /* @__PURE__ */ jsx35(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx35(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx35(DataCapScriptLoader, {}),
-    !autoTrigger && /* @__PURE__ */ jsxs21("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
-      submitBtnText,
-      submitBtnIcon
-    ] }),
-    !autoTrigger ? /* @__PURE__ */ jsx35(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
-  ] });
-};
-
-// src/app/components/Skysystemz/EmbeddedCheckout.tsx
-import { useEffect as useEffect17, useState as useState12, useMemo as useMemo2 } from "react";
-import axios11 from "axios";
-
-// src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
-function EmbeddedCheckoutStyles({ extraCustomCSS }) {
-  return /* @__PURE__ */ jsx36("style", { children: `
-
-            .pay-amount-conatiner{
-            margin-top: 20px !important;
-            margin-bottom: 20px !important ;
-        }
-
-            .frac-pay-container.pay-container {
-                grid-template-columns:1fr;
-            }
-
-
-            /* Card */
-.plan-card {
-  width: 100%;
-  font-family: Inter, sans-serif;
-  background: #fff;
-}
-
-/* Header */
-.card-header {
-  padding: 12px 0 0 0;
-}
-
-/* Button */
-.collapse-btn {
-  width: 100%;
-  background: none;
-  border: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  font-size: 15px;
-  padding: 0;
-}
-
-/* Arrow */
-.arrow {
-  transition: transform 0.3s ease;
-  height: 8px;
-}
-
-/* Open State */
-.collapse-btn.open .arrow {
-  transform: rotate(180deg); /* Down */
-}
-
-/* Body */
-.card-body {
-  padding: 0;
-}
-
-/* Plan Header */
-.plan-header {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-/* Scrollable List */
-.plan-list {
-  max-height: 200px;
-  overflow-y: auto;
-  padding-right: 6px;
-}
-
-/* Items */
-.plan-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 6px 0;
-  font-size: 14px;
-}
-
-/* Badges */
-.badge {
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.badge-included {
-  background: #f1f3f5;
-  color: #495057;
-}
-
-.badge-available {
-  background: #f8f9fa;
-  color: #212529;
-}
-
-/* Helpers */
-.row-between {
-  display: flex;
-  justify-content: space-between;
-}
-
-.text-end {
-  text-align: right;
-}
-
-.text-muted {
-  color: #6c757d;
-  font-size: 12px;
-}
-
-.fw-semibold {
-  font-weight: 600;
-}
-
-.mb-2 {
-  margin-bottom: 8px;
-}
-
-/* Divider */
-.divider {
-  height: 1px;
-  background: #e5e7eb;
-  margin: 8px 0;
-}
-
-/* Collapse Animation */
-.collapse {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-}
-
-.collapse.show {
-  max-height: 1000px;
-}
-  .frac-pay-container.pay-container {
-    grid-template-columns:1fr;
-}
-   .frac-payment-form-div .amt-pay-con {
-    padding-right: 0px;
-}
- .frac-payment-form-div .ach-scrl {
-    padding-right: 0px;
-    gap: 10px;
-    max-height: fit-content !important;
-    min-height: fit-content !important;
-    overflow: hidden !important;
-}
-.frac-payment-form-div .frac-card-bank-radio-main {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    align-self: stretch;
-    border-radius: 14px;
-    border: none;
-    overflow: visible;
-    gap: 10px;
-}
-    .frac-payment-form-div .frac-card-bank-radio {
-    display: flex;
-    padding: 12px 16px;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    width: 50%;
-    border: 1px solid #E0DFE2;
-    border-radius: 10px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
-}
-   .frac-payment-form-div .frac-card-bank-radio.frac-active {
-    background: #fff;
-    border: 2px solid #004eab !important;
-}
-   
- .frac-payment-form-div .form-control-frac {
-    border: 1px solid #dee2e6 !important;
-    border-radius: 0.375rem !important;
-    background-color: #F6F6F7;
-    box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
-}
-   .frac-payment-form-div .form-control-frac:focus  {
-        border: 1px solid #004eab !important;
-    }
-    .frac-payment-form-div .card-expiry-new {
-    border: none;
-    gap: 10px;
-}
- .frac-payment-form-div .exp-date-year-container {
-    gap: 10px;
-    width: 100%;
-}
- .frac-payment-form-div .card-type-logo-wrap{
-    position: absolute;
-    right: 10px;
-    max-width: 30px;
-}
-    .detials-wrap.detials-wrap-1 {
-    display: flex;
-    flex-wrap: wrap;
-}
-@media screen and (max-width: 1280px) {
-.frac-pay-container.pay-container {
-    grid-template-columns: 1fr;
-    border: none;
-}
-}
-@media screen and (max-width: 899px) {
-.detials-wrap {
-    grid-template-columns: 1fr !important;
-}
-.frac-payment-form-div .exp-date-year-container{
-width: 100%;}
-
-}
-@media screen and (max-width: 575px) {
-.frac-payment-form-div .card-type-logo-wrap{
-max-width: 30px;
-}
-form#ACHPaymentForm .ach-scrl {
-    grid-template-columns: 1fr !important;
-}
-    @media screen and (max-width: 375px) {
-    .frac-payment-form-div .exp-date-year-container {
-    flex-direction: column;
-}
-        .parent-pay-container {
-        padding: 10px;
-    }
-    }
-}
-.box-inner-card-text{
-    display: flex;
-    gap: 0px;
-    flex-direction: column;
-}
-    .box-inner-card-text .frac-payment-type-logo {
-    width: 17px;
-    height: 17px;
-    aspect-ratio: 1/1;
-}
-    .exp-date-year-wrap.form-control-frac input {
-    background: transparent;
-    border: none;
-    outline: none;
-    font-size: 1rem;
-    font-weight: 400;
-}
-    .exp-date-year-wrap.form-control-frac {
-    display: flex;
-    gap: 2px;
-}
- .exp-date-year-wrap input.exp-month {
-    width: 32px;
-}
-    .detials-wrap {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-    .detials-wrap.detials-wrap-2{
-     grid-template-columns: 1fr 1fr; 
-    }
-     form#ACHPaymentForm .ach-scrl {
-    display: grid;
-    grid-gap: 0px 10px;
-    grid-template-columns: 1fr;
-}
-  .plan-list {
-            max-height: 130px;
-            min-height: 130px;
-            overflow-y: auto;
-            padding-right: 6px;
-        }
-        .plan-list::-webkit-scrollbar {
-            width: 3px;
-            background-color: #F5F5F5;
-        }
-        .plan-list::-webkit-scrollbar-thumb {
-            background-color: #35254D;
-        }
-        div#cvv {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-top: 0;
-            border-bottom: 0;
-            border-right: 0;
-        }
-            div#exp_year {
-            height: 36px;
-            width: calc(100% + 1px);
-            border-radius: 0;
-            border-top: 0;
-            border-bottom: 0;
-            border-right: 1px solid #dee2e6;
-        }
-            div#exp_month {
-            width: calc(100% + 1px);
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border: 0;
-            border-right: 1px solid #dee2e6;
-        }
-        .exp-date-year-container .form-group {
-            flex: 1;
-        }
-.input-main-wrap-frac{
-margin:0px !important;
-padding:0px !important;
-}
-.toggle-num-wrapper.toggle-num-wrapper-new {
-    border: 1px solid #dee2e6 !important;
-    border-radius: 0.375rem !important;
-    background-color: #F6F6F7;
-    box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
-}
-   .toggle-num-wrapper-new div#card_number {
-    padding: 0px 10px;
-    border: none;
-    border-bottom: 1px solid #dee2e6;
-}
-   .toggle-num-wrapper-new .card-crdi.card-expiry-new {
-    padding: 0px 10px;
-}
-   .toggle-num-wrapper-new .input-main-wrap-frac {
-    height: 36px;
-}
-   .toggle-num-wrapper-new:focus {
-    border: 1px solid #004eab !important;
-}
-    .frac-card-title-main {
-    display: flex;
-    align-items: start;
-    gap: 4px;
-    flex-direction: column;
-}
-    .parent-pay-container {
-    padding: 24px;
-    background-color: #ffffff !important;
-    border-radius: 15px;
-    min-width: 300px;
-}
-
-
-    ${extraCustomCSS}
-
-            ` });
-}
-
-// src/app/components/Skysystemz/EmbeddedCheckout.tsx
-import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
-var EmbeddedCheckout = ({
-  amount,
-  bankAmount,
-  submitBtnText = "Pay",
-  session_token,
-  customerId,
-  callback,
-  merchantName = "merchant",
-  isPreAuth,
-  surcharge = "0",
-  submitBtnClass,
-  submitBtnIcon,
-  isRequest,
-  pass_fee,
-  pass_fee_amount,
-  require3ds = false,
-  autoTrigger = false,
-  isPartial,
-  bankSurcharge,
-  partialRef,
-  onSubmit,
-  onLoad,
-  customCSS: customCSS2
-}) => {
-  const [show, setShow] = useState12(false);
-  const [loading, setLoading] = useState12(false);
-  const [childHandleClose, setChildHandleClose] = useState12(() => () => {
-  });
-  const [orderGuid, setOrderGuid] = useState12(null);
-  const [remainingAmount, setRemainingAmount] = useState12(null);
-  const initialCommonProps = useMemo2(
-    () => ({
-      amount,
-      bankAmount,
-      submitBtnText,
-      session_token,
-      customerId,
-      callback,
-      merchantName,
-      isPreAuth,
-      surcharge,
-      submitBtnClass,
-      submitBtnIcon,
-      isRequest,
-      pass_fee,
-      pass_fee_amount,
-      require3ds,
-      autoTrigger,
-      setShow,
-      setHandleCloseRef: setChildHandleClose,
-      isPartial,
-      bankSurcharge,
-      partialRef
-    }),
-    [
-      amount,
-      bankAmount,
-      submitBtnText,
-      session_token,
-      customerId,
-      callback,
-      merchantName,
-      isPreAuth,
-      surcharge,
-      submitBtnClass,
-      submitBtnIcon,
-      isRequest,
-      pass_fee,
-      pass_fee_amount,
-      require3ds,
-      autoTrigger,
-      isPartial,
-      bankSurcharge,
-      partialRef
-    ]
-  );
-  const [commonProps, setCommonProps] = useState12(initialCommonProps);
-  useEffect17(() => {
-    if (show) {
-      setCommonProps(initialCommonProps);
-    }
-  }, [show, initialCommonProps]);
-  const getskyosOrderDetails = async () => {
-    var _a;
-    setLoading(true);
-    try {
-      const res = await axios11.get(
-        `${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
-        { params: { isPartial, partialRef } }
-      );
-      if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
-        const data = res.data.data;
-        if (data == null ? void 0 : data.orderGuid) {
-          setOrderGuid(data == null ? void 0 : data.orderGuid);
-          setRemainingAmount(data == null ? void 0 : data.remainingAmount);
-        }
-        setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
-          amount: data.amount,
-          pass_fee_amount: data.pass_fee_amount,
-          pass_fee: data.pass_fee
-        }));
-      }
-    } catch (error) {
-      console.log("error while getting skyosorderdeatils", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-  useEffect17(() => {
-    if (show && isPartial && partialRef) {
-      getskyosOrderDetails();
-    }
-  }, [show, isPartial, partialRef]);
-  console.log(onLoad, "onLoad");
-  return /* @__PURE__ */ jsxs22(Fragment21, { children: [
-    /* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
-    /* @__PURE__ */ jsx37(DataScript, {}),
-    /* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
-    /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
-    /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
-    !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
+  return /* @__PURE__ */ jsxs20(Fragment19, { children: [
+    /* @__PURE__ */ jsx33("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
+    /* @__PURE__ */ jsx33(DataScript, {}),
+    /* @__PURE__ */ jsx33(FractalTokenizerScript, {}),
+    /* @__PURE__ */ jsx33(SkyChargewidgetstyles, {}),
+    /* @__PURE__ */ jsx33(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx33(CustomModal2styles_default, {}),
+    /* @__PURE__ */ jsx33(DataCapScriptLoader, {}),
+    !autoTrigger && /* @__PURE__ */ jsxs20("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
     ] }),
-    !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
+    !autoTrigger ? /* @__PURE__ */ jsx33(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
   ] });
 };
 export {
   AddCardEasyPay as AddCard,
   CardOnFile,
-  EmbeddedCheckout,
   GetPaymentPage,
   PartialPayment,
   PaymentWidget,