@fractalpay/fractalpay-next-test 0.0.36 → 0.0.38

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-test",
-      version: "0.0.36",
+      version: "0.0.38",
       private: false,
       type: "module",
       scripts: {
@@ -113,8 +113,25 @@ import { useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 var LoaderStyle = (props) => {
   return /* @__PURE__ */ jsx("style", { children: `
-            
-     .loader {
+          
+          .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 {
   position: fixed; /* Fixed position to cover the viewport */
   top: 0;
   left: 0;
@@ -126,7 +143,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(.5px); /* Blur effect */
+  backdrop-filter: blur(6.5px); /* Blur effect */
   z-index: 999999999999 !important; /* Ensure it's on top of other elements */
       transform: translate(0%, 0%) !important
 }
@@ -201,10 +218,11 @@ var LoaderStyle_default = LoaderStyle;
 
 // src/app/components/Loader/Loader.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Loader = (props) => {
+var Loader = (_a) => {
+  var _b = _a, { intensity = "light" } = _b, props = __objRest(_b, ["intensity"]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(LoaderStyle_default, {}),
-    (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: "loader", children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
+    (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: `loader-${intensity}`, children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
       /* @__PURE__ */ jsx2("div", {}),
       /* @__PURE__ */ jsx2("div", {}),
       /* @__PURE__ */ jsx2("div", {}),
@@ -223,36 +241,60 @@ if (name === "@fractalpay/fractalpay-next-dev") {
   fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
   datacapUrl = "https://token-cert.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
+  applePayMerchantId = "fractal";
+  googlePayMerchantId = "12345678901234567890";
+  googlePayEnvironment = "TEST";
+  googlePayGatewayMerchantId = "fractal";
 } else if (name === "@fractalpay/fractalpay-next-test") {
   masterBaseUrl = "https://testapi.fractalpay.com/";
   baseUrl = "https://staging-widget.fractalpay.com/";
   fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
   datacapUrl = "https://token-cert.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
+  applePayMerchantId = "fractal";
+  googlePayMerchantId = "12345678901234567890";
+  googlePayEnvironment = "TEST";
+  googlePayGatewayMerchantId = "fractal";
 } else if (name === "@fractalpay/fractalpay-next-testprod") {
   masterBaseUrl = "https://sky-node-prod.fractalpay.com/";
   baseUrl = "https://widget-prod.fractalpay.com/";
   fractalGatewayUrl = "https://api.merchant-trends.com/";
   datacapUrl = "https://token.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
+  applePayMerchantId = "fractal";
+  googlePayMerchantId = "BCR2DN4T6OC2TCQH";
+  googlePayEnvironment = "PRODUCTION";
+  googlePayGatewayMerchantId = "fractal";
 } else if (name === "@fractalpay/fractalpay-next") {
   masterBaseUrl = "https://api.fractalpay.com/";
   baseUrl = "https://widget.fractalpay.com/";
   fractalGatewayUrl = "https://api.merchant-trends.com/";
   datacapUrl = "https://token.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
+  applePayMerchantId = "fractal";
+  googlePayMerchantId = "BCR2DN4T6OC2TCQH";
+  googlePayEnvironment = "PRODUCTION";
+  googlePayGatewayMerchantId = "fractal";
 } else {
   baseUrl = "http://localhost:8082/";
   masterBaseUrl = "http://localhost:8081/";
   fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
   datacapUrl = "https://token-cert.dcap.com/v1/client";
   threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
+  applePayMerchantId = "fractal";
+  googlePayMerchantId = "12345678901234567890";
+  googlePayEnvironment = "TEST";
+  googlePayGatewayMerchantId = "fractal";
 }
 var masterBaseUrl;
 var baseUrl;
 var fractalGatewayUrl;
 var datacapUrl;
 var threedsSecurePublicKey;
+var applePayMerchantId;
+var googlePayMerchantId;
+var googlePayEnvironment;
+var googlePayGatewayMerchantId;
 
 // src/app/components/Errortext.ts
 var ErrorText = {
@@ -2908,7 +2950,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 }) => {
+var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
   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: [
@@ -2917,7 +2959,7 @@ var ErrorCardMessage = ({ onClose, error }) => {
         /* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
         /* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
+      !autoTrigger && /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
     ] }) }) })
   ] });
 };
@@ -2934,14 +2976,27 @@ 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 = (props) => {
-  return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
+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(
     "div",
     {
       className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
       onClick: () => props.onChange(props.value),
       role: "radio",
-      children: [
+      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) }) })
+        ] }),
+        /* @__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: [
         /* @__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: [
@@ -2952,7 +3007,7 @@ var CardBankRadio = (props) => {
         /* @__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);
         } }) })
-      ]
+      ] })
     }
   ) });
 };
@@ -2977,6 +3032,7 @@ function CardBankRadioStyles({}) {
                 justify-content: space-between;
                 align-items: center;
                 align-self: stretch;
+                position: relative;
             }
             
             input[type="radio"] {
@@ -3034,6 +3090,28 @@ 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;
+            }
                 ` });
 }
 
@@ -3211,7 +3289,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
       {
         id: "card_number",
         className: "form-control card-number-new",
-        style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
+        style: { height: `${isSky ? "36px" : "46px"}` }
       }
     ),
     /* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
@@ -3220,7 +3298,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_month",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3228,7 +3306,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_year",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3236,7 +3314,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "cvv",
           className: "form-control card-cvv-in required",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) })
     ] }) })
@@ -3359,7 +3437,10 @@ var DataCapFields = ({
   isOpen,
   tokenKey,
   setLoader,
-  isAddCard
+  isAddCard,
+  isEmbedded,
+  customCSS: extraCss,
+  height
 }) => {
   const iframeId = "datacap-iframe";
   const resolverRef = useRef2(null);
@@ -3385,15 +3466,37 @@ 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);
+      }
+      `;
+    }
+    if (extraCss) {
+      customCSS += extraCss;
+    }
     const initialize = async () => {
       setLoader == null ? void 0 : setLoader(true);
       setIframeReady(false);
-      const waitForSDK = () => new Promise((resolve) => {
+      const waitForSDK = () => new Promise((resolve, reject) => {
+        let attempts = 0;
         const interval = setInterval(() => {
           if (window.DatacapHostedWebToken) {
             clearInterval(interval);
             resolve();
           }
+          if (attempts++ > 50) {
+            clearInterval(interval);
+            reject("Datacap SDK not loaded");
+          }
         }, 100);
       });
       await waitForSDK();
@@ -3416,13 +3519,20 @@ var DataCapFields = ({
     };
     initialize();
   }, [isOpen, tokenKey]);
-  window.requestDcToken = () => {
-    return new Promise((resolve, reject) => {
-      setLoader == null ? void 0 : setLoader(true);
-      resolverRef.current = { resolve, reject };
-      window.DatacapHostedWebToken.requestToken();
-    });
-  };
+  useEffect7(() => {
+    const uniqueId = Math.random();
+    const fn = () => {
+      return new Promise((resolve, reject) => {
+        setLoader == null ? void 0 : setLoader(true);
+        resolverRef.current = { resolve, reject };
+        window.DatacapHostedWebToken.requestToken();
+      });
+    };
+    window.requestDcToken = fn;
+    return () => {
+      delete window.requestDcToken;
+    };
+  }, []);
   return /* @__PURE__ */ jsx18(
     "iframe",
     {
@@ -3434,7 +3544,7 @@ var DataCapFields = ({
       },
       style: {
         width: "100%",
-        height: "250px",
+        height: `${height || "250px"}`,
         border: "none",
         opacity: iframeReady ? 1 : 0,
         transition: "opacity 0.3s ease"
@@ -3463,6 +3573,8 @@ function GetPaymentPage(props) {
   const [saveACHinfo, setSaveACHinfo] = useState4(false);
   const [isBankConsentChecked, setIsBankConsentChecked] = useState4(false);
   const [errorBankConsent, setErrorBankConsent] = useState4("");
+  const [saveACHConsent1, setSaveACHConsent1] = useState4(false);
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState4("");
   const fractalpayClientKey = props.merchantPublicKey;
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
@@ -3584,6 +3696,8 @@ function GetPaymentPage(props) {
     setCardList([]);
     setIsBankConsentChecked(false);
     setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -3683,11 +3797,14 @@ function GetPaymentPage(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
-    if (!isBankConsentChecked) {
+    if (!saveACHinfo && !isBankConsentChecked) {
       setErrorBankConsent("Above consent is required");
     }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
+    return Object.keys(errors).length > 0;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
@@ -3846,7 +3963,13 @@ function GetPaymentPage(props) {
         }
       }
     } else {
-      const hasError = validateAchData();
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
       if (hasError) return;
       else {
         setLoading2(true);
@@ -4610,25 +4733,44 @@ function GetPaymentPage(props) {
                               accountTypes.map((type) => /* @__PURE__ */ jsx19("option", { value: type.value, children: type.label }, type.value))
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
-                              setIsBankConsentChecked(e.target.checked);
-                              if (e.target.checked) {
-                                setErrorBankConsent("");
-                              }
-                            } }),
-                            /* @__PURE__ */ jsx19("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                          !saveACHinfo && /* @__PURE__ */ jsxs11(Fragment11, { children: [
+                            /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                                setIsBankConsentChecked(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsent("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsx19("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                            ] }),
+                            errorBankConsent && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsent })
                           ] }),
-                          errorBankConsent && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs11("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                            /* @__PURE__ */ jsx19("label", { htmlFor: "saveACH", children: "Save Bank" })
+                            /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => {
+                              setSaveACHinfo(e.target.checked);
+                              if (!e.target.checked) {
+                                setSaveACHConsent1(false);
+                                setErrorBankConsentOther("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsx19("label", { htmlFor: "saveACH", children: "Save for future use" })
                           ] }),
-                          saveACHinfo && /* @__PURE__ */ jsx19("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" }, children: /* @__PURE__ */ jsxs11("p", { children: [
-                            "If checked, I agree for ",
-                            /* @__PURE__ */ jsx19("b", { children: (paymentData == null ? void 0 : paymentData.bname) || "merchant" }),
-                            " to have my permission to charge this bank account for agreed upon purchases in the future."
-                          ] }) })
+                          saveACHinfo && /* @__PURE__ */ jsxs11(Fragment11, { children: [
+                            /* @__PURE__ */ jsxs11("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx19("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                                setSaveACHConsent1(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsentOther("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsxs11("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                                "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                                (paymentData == null ? void 0 : paymentData.bname) || "merchant",
+                                "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                              ] })
+                            ] }),
+                            errorBankConsentOther && /* @__PURE__ */ jsx19("span", { className: "error-span", children: errorBankConsentOther })
+                          ] })
                         ] }),
                         /* @__PURE__ */ jsx19("div", { className: "form-group ", children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_v = Number(cashDiscount)) == null ? void 0 : _v.toFixed(2)) }) })
                       ] })
@@ -6702,7 +6844,7 @@ var FractalFieldsAddCardSky_default = FractalFieldsAddCardSky;
 
 // src/app/components/AddCard/AddCardSky.tsx
 import { Fragment as Fragment16, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
-function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual }) {
+function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual, customCSS: customCSS2, height }) {
   var _a, _b;
   const [loading, setLoading] = useState7(false);
   const [errorIframe, setErrorIframe] = useState7("");
@@ -7215,7 +7357,9 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
         {
           isOpen: true,
           tokenKey: dcToken,
-          setLoader: setLoadingIframe
+          setLoader: setLoadingIframe,
+          customCSS: customCSS2,
+          height
         }
       ) }),
       /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
@@ -7386,6 +7530,8 @@ function PartialPayment(props) {
   const [partialError, setPartialError] = useState8("");
   const [isBankConsentChecked, setIsBankConsentChecked] = useState8(false);
   const [errorBankConsent, setErrorBankConsent] = useState8("");
+  const [saveACHConsent1, setSaveACHConsent1] = useState8(false);
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState8("");
   const tokenizerRef = useRef8(null);
   const fractalStyles = {
     input: {
@@ -7499,6 +7645,8 @@ function PartialPayment(props) {
     setPartialError("");
     setIsBankConsentChecked(false);
     setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
   };
   const handleShow = () => setShow(true);
   const handletabchange = (id) => {
@@ -7599,11 +7747,14 @@ function PartialPayment(props) {
         errors.companyName = "Company Name is required for business accounts";
       }
     }
-    if (!isBankConsentChecked) {
+    if (!saveACHinfo && !isBankConsentChecked) {
       setErrorBankConsent("Above consent is required");
     }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
     setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
+    return Object.keys(errors).length > 0;
   };
   const submitFunc = async (e) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
@@ -7748,7 +7899,13 @@ function PartialPayment(props) {
         }
       }
     } else {
-      const hasError = validateAchData();
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
       if (hasError) return;
       else {
         setLoading2(true);
@@ -8550,34 +8707,47 @@ function PartialPayment(props) {
                               accountTypes.map((type) => /* @__PURE__ */ jsx28("option", { value: type.value, children: type.label }, type.value))
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx28(
-                              "input",
-                              {
-                                type: "checkbox",
-                                id: "achconsent",
-                                className: "",
-                                checked: isBankConsentChecked,
-                                onChange: (e) => {
-                                  setIsBankConsentChecked(e.target.checked);
-                                  if (e.target.checked) {
-                                    setErrorBankConsent("");
+                          !saveACHinfo && /* @__PURE__ */ jsxs17(Fragment17, { children: [
+                            /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx28(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  id: "achconsent",
+                                  className: "",
+                                  checked: isBankConsentChecked,
+                                  onChange: (e) => {
+                                    setIsBankConsentChecked(e.target.checked);
+                                    if (e.target.checked) {
+                                      setErrorBankConsent("");
+                                    }
                                   }
                                 }
-                              }
-                            ),
-                            /* @__PURE__ */ jsx28("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                              ),
+                              /* @__PURE__ */ jsx28("label", { htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${(paymentData == null ? void 0 : paymentData.bname) || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                            ] }),
+                            errorBankConsent && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsent })
                           ] }),
-                          errorBankConsent && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsent }),
                           (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs17("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" }, children: [
                             /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
-                            /* @__PURE__ */ jsx28("label", { htmlFor: "saveACH", children: "Save Bank" })
+                            /* @__PURE__ */ jsx28("label", { htmlFor: "saveACH", children: "Save for future use" })
                           ] }),
-                          saveACHinfo && /* @__PURE__ */ jsx28("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" }, children: /* @__PURE__ */ jsxs17("p", { children: [
-                            "If checked, I agree for ",
-                            /* @__PURE__ */ jsx28("b", { children: (paymentData == null ? void 0 : paymentData.bname) || "merchant" }),
-                            " to have my permission to charge this bank account for agreed upon purchases in the future."
-                          ] }) })
+                          saveACHinfo && /* @__PURE__ */ jsxs17(Fragment17, { children: [
+                            /* @__PURE__ */ jsxs17("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                              /* @__PURE__ */ jsx28("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                                setSaveACHConsent1(e.target.checked);
+                                if (e.target.checked) {
+                                  setErrorBankConsentOther("");
+                                }
+                              } }),
+                              /* @__PURE__ */ jsxs17("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                                "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                                (paymentData == null ? void 0 : paymentData.bname) || "merchant",
+                                "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                              ] })
+                            ] }),
+                            errorBankConsentOther && /* @__PURE__ */ jsx28("span", { className: "error-span", children: errorBankConsentOther })
+                          ] })
                         ] }),
                         /* @__PURE__ */ jsx28("div", { className: "form-group ", children: /* @__PURE__ */ jsx28("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: partialAmount && !partialError ? formatUSD((_z = Number(partialAmount)) == null ? void 0 : _z.toFixed(2)) : formatUSD((_A = Number(cashDiscount)) == null ? void 0 : _A.toFixed(2)) }) })
                       ] })
@@ -8594,7 +8764,7 @@ function PartialPayment(props) {
 }
 
 // src/app/components/Skysystemz/PayButtonWithForm.tsx
-import { useEffect as useEffect16, useState as useState11, useMemo } from "react";
+import { useEffect as useEffect19, useState as useState12, useMemo } from "react";
 
 // src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -8830,6 +9000,17 @@ 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%;
@@ -8864,7 +9045,7 @@ function SkyChargewidgetstyles() {
         }
             .exp-date-year-container .form-group {
     flex: 1;
-    padding-left:.75rem;
+    padding-left:.75rem !important;
 }
         .card-crdi {
             display: flex;
@@ -8881,7 +9062,7 @@ function SkyChargewidgetstyles() {
         }
         .exp-date-year-container .form-group-frac{
                 flex:1;
-                padding: 0px !important
+                // padding: 0px !important
                
             }
 
@@ -9382,13 +9563,54 @@ 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;
+}
+    .frac-or {
+    position: relative;
+    margin: 15px 0;
+    text-align: center;
+}
+    .frac-or:before {
+    position: absolute;
+    left: 0;
+    transform: translateY(-50%);
+    top: 50%;
+    height: 1px;
+    width: 100%;
+    background: #E0DFE2;
+    content: '';
+    z-index: 1;
+}
+    .frac-or span {
+    background: transparent;
+    font-size: 13px;
+    margin: 0 auto;
+    width: 15px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: #727272;
+    padding: 3px;
+    position: relative;
+    z-index: 3;
+}
+    button#gpay-button-online-api-id{
+    width: 100%;
+    }
+
 
         ` });
 }
 
 // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
-import { useCallback, useEffect as useEffect15, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback, useEffect as useEffect18, useRef as useRef12, useState as useState11 } from "react";
 import axios9 from "axios";
 import Swal5 from "sweetalert2";
 
@@ -9529,1412 +9751,2608 @@ 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";
-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 cardListRunRef = useRef10(false);
-  const threeDSContainerRef = useRef10(null);
-  const [activetab, setActive] = useState10("card");
-  const [activeList, setActiveList] = useState10("card");
-  const [cardData, setCardData] = useState10();
-  const [cardError, setCardError] = useState10({});
-  const [achData, setAchData] = useState10();
-  const [achError, setAchError] = useState10({});
-  const [saveACHinfo, setSaveACHinfo] = useState10(false);
-  const [saveCardInfo, setSaveCardInfo] = useState10(false);
-  const [error, setError] = useState10("");
-  const [errorIframe, setErrorIframe] = useState10("");
-  const [success, setSuccess] = useState10(false);
-  let [tranId, setTranId] = useState10("");
-  const [loading, setLoading] = useState10(false);
-  const [loading2, setLoading2] = useState10(false);
-  const [loadingIframe, setLoadingIframe] = useState10(false);
-  const [cardList, setCardList] = useState10([]);
-  const [bankList, setBankList] = useState10([]);
-  const [selectedCard, setSelectedCard] = useState10();
-  const [cashDiscount, setCashDiscount] = useState10(Number(amount));
-  const [activeinCard, setActiveinCard] = useState10("form");
-  const [activeinBank, setActiveinBank] = useState10("form");
-  const [isBankActive, setIsBankActive] = useState10(false);
-  const [processingFee, setProcessingFee] = useState10(0);
-  const [clientSecret, setClientSecret] = useState10("");
-  const [errorMessage, setErrorMessage] = useState10(null);
-  const [initialLoader, setInitialLoader] = useState10(false);
-  const [is3DSEnable, setIs3DSEnable] = useState10(false);
-  const [stripeResponse, setStripeResponse] = useState10(null);
-  const [orderLoader, setOrderLoader] = useState10(false);
-  const [orderGuid, setOrderGuid] = useState10(ordGuid || null);
-  const [partialAmount, setPartialAmount] = useState10("");
-  const [partialError, setPartialError] = useState10("");
-  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";
-  let discover2 = S3Url + "widget/discover-img.svg";
-  let defaultcard2 = S3Url + "widget/card.svg";
-  let trash2 = S3Url + "widget/Trash.svg";
-  let bank2 = S3Url + "widget/bank.svg";
-  let secure2 = S3Url + "widget/secure-img.png";
-  let pov2 = S3Url + "widget/pov-by.png";
-  let pax2 = S3Url + "widget/pax.svg";
-  let cardicon = S3Url + "widget/cardicon.svg";
-  let bankicon = S3Url + "widget/bankicon.svg";
-  const showLoader = () => setLoading(true);
-  const hideLoader = () => setLoading(false);
-  const CalculateCashDiscount = (amount2, surcharge2) => {
-    const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
-    const originalAmount = amount2 / (1 + surchargeVal);
-    return Math.round(originalAmount * 100) / 100;
-  };
-  const tokenizerRef = useRef10(null);
-  const fractalStyles = {
-    input: {
-      "font-family": "'Inter', sans-serif",
-      "font-size": "16px",
-      "color": "#212529",
-      "background-color": "transparent",
-      "padding": "0px",
-      "appearance": "none",
-      "outline": "none",
-      "border": "none",
-      "box-shadow": "none"
-    },
-    ":focus": {
-      "color": "#212529",
-      "outline": "none",
-      "border": "none"
-    },
-    "::placeholder": {
-      "color": "#212529"
-    }
-  };
-  const handleCharge = async (data) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-    try {
-      let dataObj = __spreadValues({
-        pass_fee_amount: Number(amount) - cashDiscount,
-        pass_fee,
-        Token: data == null ? void 0 : data.Token,
-        amount: partialAmount ? partialAmount : amount,
-        postal_code: data == null ? void 0 : data.postalCode,
-        require3ds,
-        isPartial,
-        orderGuid: orderGuid || ordGuid
-      }, saveCardInfo ? {
-        card: {
-          postal_code: cardData == null ? void 0 : cardData.zipCode,
-          customer_id: customerId,
-          gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
-          name: cardData == null ? void 0 : cardData.cardName
+
+// 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;
         }
-      } : null);
-      if (require3ds && (data == null ? void 0 : data.stripe_3ds_auth_id)) {
-        dataObj.stripe_3ds_auth_id = data == null ? void 0 : data.stripe_3ds_auth_id;
-      }
-      const chargeResponse = await axios9.post(`${masterBaseUrl}api/v1/gateway/charge/${session_token}`, dataObj);
-      if ((_a2 = chargeResponse == null ? void 0 : chargeResponse.data) == null ? void 0 : _a2.result) {
-        let callbackdata = {
-          // cardDetails: { ...addCard, ...data },
-          callback: __spreadProps(__spreadValues({}, (_b2 = chargeResponse == null ? void 0 : chargeResponse.data) == null ? void 0 : _b2.data), { name: cardData == null ? void 0 : cardData.cardName, isPreAuth })
-        };
-        callback(callbackdata);
-        hideLoader();
-        handleClose();
-      }
-    } catch (error2) {
-      setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
-      callback({
-        error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
-        result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
-        statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
-      });
-      hideLoader();
-    }
-  };
-  const handlePreAuth = async (data) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-    try {
-      let dataObj = __spreadValues({
-        Token: data == null ? void 0 : data.Token,
-        amount,
-        postal_code: data == null ? void 0 : data.postalCode
-      }, saveCardInfo ? {
-        card: {
-          postal_code: cardData == null ? void 0 : cardData.zipCode,
-          customer_id: customerId,
-          gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
-          name: cardData == null ? void 0 : cardData.cardName
+
+        .card-error-overlay .client-logo {
+            max-width: 100px;
+            height: auto;
+            object-fit: contain;
+            display: block;
         }
-      } : null);
-      const preAuthResponse = await axios9.post(`${masterBaseUrl}api/v1/gateway/preauth/${session_token}`, dataObj);
-      if ((_a2 = preAuthResponse == null ? void 0 : preAuthResponse.data) == null ? void 0 : _a2.result) {
-        let addCard;
-        let callbackdata = {
-          // cardDetails: { ...addCard, ...data },
-          callback: __spreadProps(__spreadValues({}, (_b2 = preAuthResponse == null ? void 0 : preAuthResponse.data) == null ? void 0 : _b2.data), { name: cardData == null ? void 0 : cardData.cardName, isPreAuth })
-        };
-        callback(callbackdata);
-        hideLoader();
-        handleClose();
-      }
-    } catch (error2) {
-      setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
-      callback({
-        error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
-        result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
-        statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
-      });
-      hideLoader();
-    }
-  };
-  const handleTokenCallback = async (token) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-    if (token.Error) {
-      setError(token.Error);
-      callback({
-        error: token.Error || "Something went wrong!"
-      });
-      hideLoader();
-    } else {
-      let data = {
-        token: token.Token,
-        resp: token
-      };
-      try {
-        const updateToken = await axios9.post(`${masterBaseUrl}api/v1/gateway/update/token/${session_token}`, data);
-        if ((updateToken == null ? void 0 : updateToken.status) == 200) {
-          let respData = {
-            Token: (_b2 = (_a2 = updateToken == null ? void 0 : updateToken.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.gateway_token,
-            Brand: token.Brand,
-            ExpirationMonth: token.ExpirationMonth,
-            ExpirationYear: token.ExpirationYear,
-            Last4: token.Last4,
-            Bin: token.Bin,
-            CVV: token.CVV,
-            postalCode: cardData == null ? void 0 : cardData.zipCode
-          };
-          let addCard;
-          if (isPreAuth) {
-            handlePreAuth(respData);
-          } else {
-            handleCharge(respData);
-          }
+
+       
+        .card-error-overlay .error-icon-overlay {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            min-height: 116px;
+            z-index: 2;
         }
-      } catch (error2) {
-        console.log(error2, "error");
-        hideLoader();
-        setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
-        callback({
-          error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
-          result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
-          statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
-        });
-      }
+
+        .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/Googlepay/Googlepay.tsx
+import { useRef as useRef10 } from "react";
+
+// src/app/components/Atoms/Googlepay/GooglePayScriptLoader.tsx
+import { useEffect as useEffect15 } from "react";
+var googlePayScriptLoaded = false;
+var GooglePayScriptLoader = ({
+  onLoad
+}) => {
+  useEffect15(() => {
+    if (googlePayScriptLoaded) {
+      onLoad == null ? void 0 : onLoad();
+      return;
+    }
+    const existingScript = document.querySelector(
+      `script[src="https://pay.google.com/gp/p/js/pay.js"]`
+    );
+    if (!existingScript) {
+      const script2 = document.createElement("script");
+      script2.src = "https://pay.google.com/gp/p/js/pay.js";
+      script2.async = true;
+      script2.onload = () => {
+        console.log("\u2705 Google Pay script loaded");
+        googlePayScriptLoaded = true;
+        console.log("google:", window.google);
+        onLoad == null ? void 0 : onLoad();
+      };
+      script2.onerror = (err) => {
+        console.error("\u274C Google Pay script failed", err);
+      };
+      document.head.appendChild(script2);
+    } else {
+      googlePayScriptLoaded = true;
+      onLoad == null ? void 0 : onLoad();
     }
+  }, []);
+  return null;
+};
+
+// src/app/components/Atoms/Googlepay/Googlepay.tsx
+import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+function GooglePayComponent({
+  amount,
+  googlePayEnvironment: googlePayEnvironment2,
+  googlePayGatewayMerchantId: googlePayGatewayMerchantId2,
+  googlePayMerchantId: googlePayMerchantId2,
+  googlePayMerchantName,
+  require3ds = false,
+  completeFractalFlow,
+  setLoading
+}) {
+  const containerRef = useRef10(null);
+  const paymentsClientRef = useRef10(null);
+  const baseRequest = {
+    apiVersion: 2,
+    apiVersionMinor: 0
   };
-  const handletabchange = (id) => {
-    setActive(id);
+  const allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];
+  const allowedCardAuthMethods = require3ds ? ["CRYPTOGRAM_3DS"] : ["PAN_ONLY", "CRYPTOGRAM_3DS"];
+  const baseCardPaymentMethod = {
+    type: "CARD",
+    parameters: {
+      allowedAuthMethods: allowedCardAuthMethods,
+      allowedCardNetworks
+    }
   };
-  const validateAchData = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-    const errors = {};
-    const data = achData;
-    if (!((_a2 = data == null ? void 0 : data.name) == null ? void 0 : _a2.trim())) errors.name = "Name is required";
-    if (!((_b2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _b2.trim())) errors.accountNumber = "Account number is required";
-    if (((_c2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _c2.trim()) && ((_d2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _d2.trim()) !== ((_e2 = data == null ? void 0 : data.confirmAccountNumber) == null ? void 0 : _e2.trim())) errors.confirmAccountNumber = "Account numbers must match";
-    if (!((_f2 = data == null ? void 0 : data.bankName) == null ? void 0 : _f2.trim())) errors.bankName = "Bank name is required";
-    if (!((_g2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _g2.trim())) errors.routingNumber = "Routing Number is required";
-    if ((data == null ? void 0 : data.routingNumber) && ((_h2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _h2.length) !== 9) errors.routingNumber = "Routing number must be 9 digits";
-    if ((data == null ? void 0 : data.accountType) === "business saving" || (data == null ? void 0 : data.accountType) === "business checking") {
-      if (!(data == null ? void 0 : data.companyName) || (data == null ? void 0 : data.companyName) === "") {
-        errors.companyName = "Company Name is required for business accounts";
+  const cardPaymentMethod = __spreadProps(__spreadValues({}, baseCardPaymentMethod), {
+    tokenizationSpecification: {
+      type: "PAYMENT_GATEWAY",
+      parameters: {
+        gateway: googlePayGatewayMerchantId2,
+        gatewayMerchantId: googlePayGatewayMerchantId2
       }
     }
-    if (!isBankConsentChecked) {
-      setErrorBankConsent("Above consent is required");
+  });
+  const handlePaymentAuthorization = async (paymentData) => {
+    var _a, _b;
+    try {
+      const token = (_b = (_a = paymentData == null ? void 0 : paymentData.paymentMethodData) == null ? void 0 : _a.tokenizationData) == null ? void 0 : _b.token;
+      if (!token) throw new Error("Missing token");
+      const parsed = JSON.parse(token);
+      console.log(parsed, "parsed token");
+      setLoading(true);
+      completeFractalFlow(parsed, null, "google_pay");
+      return {
+        transactionState: "SUCCESS"
+        // ✅ CLOSES GOOGLE PAY POPUP
+      };
+    } catch (err) {
+      console.error("Payment failed:", err);
+      return {
+        transactionState: "ERROR",
+        // ❌ CLOSES WITH ERROR UI
+        error: {
+          intent: "PAYMENT_AUTHORIZATION",
+          message: "Payment failed",
+          reason: "PAYMENT_DATA_INVALID"
+        }
+      };
     }
-    setAchError(errors);
-    return Object.keys(errors).length > 0 || !isBankConsentChecked;
   };
-  const completeFractalFlow = async (tokenizeData, intentid) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-    try {
-      let token = tokenizeData;
-      let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
-        token,
-        require3ds,
-        pass_fee
-      });
-      if ((verifyandsaveresp == null ? void 0 : verifyandsaveresp.status) == 200) {
-        let responsetemp = (_a2 = verifyandsaveresp == null ? void 0 : verifyandsaveresp.data) == null ? void 0 : _a2.data;
-        let respData = {
-          Token: responsetemp.gateway_token,
-          Brand: responsetemp.card_data.brand,
-          ExpirationMonth: responsetemp.card_data.expire_mm,
-          ExpirationYear: responsetemp.card_data.expire_yy,
-          Last4: responsetemp.card_data.last4,
-          Bin: responsetemp.card_data.bin,
-          postalCode: cardData == null ? void 0 : cardData.zipCode,
-          stripe_3ds_auth_id: intentid
-        };
-        if (isPreAuth) {
-          handlePreAuth(respData);
-        } else {
-          handleCharge(respData);
+  const getPaymentsClient = () => {
+    if (!paymentsClientRef.current && typeof window !== "undefined") {
+      const google = window.google;
+      if (!google) return null;
+      paymentsClientRef.current = new google.payments.api.PaymentsClient({
+        environment: googlePayEnvironment2,
+        // ✅ ADD THIS
+        paymentDataCallbacks: {
+          onPaymentAuthorized: handlePaymentAuthorization
         }
-      }
-    } catch (error2) {
-      console.log(error2, "error");
-      setError(((_c2 = (_b2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _b2.data) == null ? void 0 : _c2.message) || "Something went wrong!");
-      callback({
-        error: ((_e2 = (_d2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _d2.data) == null ? void 0 : _e2.message) || "Something went wrong!",
-        result: (_g2 = (_f2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _f2.data) == null ? void 0 : _g2.result,
-        statusCode: (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.status
       });
-      hideLoader();
     }
+    return paymentsClientRef.current;
   };
-  const handleFractalTokenFlow = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w;
+  const getIsReadyToPayRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
+    allowedPaymentMethods: [baseCardPaymentMethod]
+  });
+  const getTransactionInfo = () => ({
+    countryCode: "US",
+    currencyCode: "USD",
+    totalPriceStatus: "FINAL",
+    totalPrice: amount,
+    checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE"
+  });
+  const getPaymentDataRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
+    allowedPaymentMethods: [cardPaymentMethod],
+    transactionInfo: getTransactionInfo(),
+    merchantInfo: {
+      merchantId: googlePayMerchantId2,
+      merchantName: googlePayMerchantName
+    },
+    // ✅ ADD THIS
+    callbackIntents: ["PAYMENT_AUTHORIZATION"]
+  });
+  const initializeGooglePay = async () => {
     try {
-      const requestOptions = {
-        method: "POST",
-        redirect: "follow"
-      };
-      let sesionResult = await axios9.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
-      let objtokenize = {
-        public_key_pem: ((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem) || ((_d2 = (_c2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.public_key_pem),
-        session_key: (_f2 = (_e2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.session_key
-      };
-      let three_ds_data = null;
-      if (require3ds) {
-        if (typeof window !== "undefined" && typeof navigator !== "undefined") {
-          const languages = (_g2 = navigator.languages) != null ? _g2 : [navigator.language];
-          const language = Array.isArray(languages) ? languages[0] : languages;
-          three_ds_data = {
-            amount: partialAmount ? Math.round(parseFloat(partialAmount) * 100) : Math.round(parseFloat(amount) * 100),
-            // convert dollars → cents
-            currency: "usd",
-            channel: {
-              type: "browser",
-              browser: {
-                language: typeof language === "string" ? language : null,
-                color_depth: (_i2 = (_h2 = window.screen) == null ? void 0 : _h2.colorDepth) != null ? _i2 : null,
-                java_enabled: typeof navigator.javaEnabled === "function" ? navigator.javaEnabled() : false,
-                screen_height: (_k2 = (_j2 = window.screen) == null ? void 0 : _j2.height) != null ? _k2 : null,
-                screen_width: (_m2 = (_l2 = window.screen) == null ? void 0 : _l2.width) != null ? _m2 : null,
-                timezoneOffset: (/* @__PURE__ */ new Date()).getTimezoneOffset()
-              }
-            }
-          };
-        }
-      }
-      let tokenizeData;
-      try {
-        tokenizeData = await tokenizerRef.current.createToken(
-          objtokenize,
-          three_ds_data
-        );
-      } catch (error2) {
-        setErrorIframe(error2);
-        hideLoader();
+      const client = getPaymentsClient();
+      if (!client) {
+        console.error("Google Pay client not ready");
+        return;
       }
-      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" && ((_n2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _n2.challenge_url)) {
-          setError("Something went wrong. Please try again later.");
-        }
-        if (require3ds) {
-          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), {
-              fractalToken: tokenizeData == null ? void 0 : tokenizeData.token
-            }));
-          }
-        } else {
-          completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, null);
+      const response = await client.isReadyToPay(
+        getIsReadyToPayRequest()
+      );
+      if (response.result && containerRef.current) {
+        const button = client.createButton({
+          onClick: onGooglePayClick,
+          allowedPaymentMethods: [baseCardPaymentMethod],
+          buttonType: "pay",
+          buttonColor: "black",
+          buttonRadius: 8
+        });
+        if (containerRef.current) {
+          containerRef.current.innerHTML = "";
         }
+        containerRef.current.appendChild(button);
       }
-    } catch (error2) {
-      hideLoader();
-      console.log(error2, "error");
-      let readableMessage = "Something went wrong!";
-      try {
-        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 = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
-        const lastLine = lines.at(-1) || "";
-        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!";
+    } catch (err) {
+      console.error("Google Pay init error:", err);
+    }
+  };
+  const onGooglePayClick = async () => {
+    const client = getPaymentsClient();
+    if (!client) {
+      console.error("Google Pay client not ready");
+      return;
+    }
+    try {
+      await client.loadPaymentData(getPaymentDataRequest());
+    } catch (err) {
+      if ((err == null ? void 0 : err.statusCode) !== "CANCELED") {
+        console.error(err);
       }
-      setError(readableMessage);
-      callback({
-        error: readableMessage,
-        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
-      });
     }
   };
-  const validateCardData = () => {
-    var _a2, _b2;
-    const errors = {};
-    const data = cardData;
-    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
-    if (!((_b2 = data == null ? void 0 : data.zipCode) == null ? void 0 : _b2.trim())) errors.zipCode = "ZIP code is required";
-    setCardError(errors);
-    return Object.keys(errors).length > 0;
+  const onScriptLoad = () => {
+    if (!googlePayEnvironment2 || !googlePayGatewayMerchantId2 || !amount || !googlePayMerchantId2) {
+      console.error("Missing Google Pay config");
+      return;
+    }
+    setTimeout(() => {
+      initializeGooglePay();
+    }, 0);
   };
-  const validateCardInputs = () => {
-    let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
-    let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
-    let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
-    let errors = {};
-    if (!validCard) errors.cardNumber = "Invalid card Number";
-    if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
-    if (!validCVV) errors.cvv = "Invalid CVV";
-    setCardError(errors);
-    return validCard && validCVV && validExpirationDate;
+  return /* @__PURE__ */ jsxs20(Fragment19, { children: [
+    /* @__PURE__ */ jsx34("div", { ref: containerRef, className: "text-center" }),
+    /* @__PURE__ */ jsx34(GooglePayScriptLoader, { onLoad: onScriptLoad })
+  ] });
+}
+
+// src/app/components/Atoms/Applepay/ApplePayButton.tsx
+import { useEffect as useEffect17, useRef as useRef11 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function ApplePayButton({
+  applePayMerchantId: applePayMerchantId2,
+  applePayAmount,
+  applePayMerchantName,
+  showLoader,
+  completeFractalFlow
+}) {
+  const applePayRef = useRef11(null);
+  const paymentRequestMethods = [
+    {
+      supportedMethods: "https://apple.com/apple-pay",
+      data: {
+        version: 3,
+        merchantIdentifier: applePayMerchantId2,
+        // ✅ FIXED
+        merchantCapabilities: ["supports3DS"],
+        supportedNetworks: ["amex", "discover", "mastercard", "visa"],
+        // ✅ FIXED
+        countryCode: "US"
+      }
+    }
+  ];
+  const paymentRequestOptions = {
+    requestPayerName: false,
+    requestPayerEmail: false,
+    requestPayerPhone: false,
+    requestShipping: false
   };
-  const submitFunc = async (e) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
-    e.preventDefault();
-    const el = document.activeElement;
-    if (el instanceof HTMLElement) {
-      el.blur();
+  function buildPaymentDetails() {
+    return {
+      total: {
+        label: applePayMerchantName,
+        amount: {
+          currency: "USD",
+          value: applePayAmount
+        }
+      }
+    };
+  }
+  async function validateMerchant(event) {
+    var _a;
+    console.log("\u{1F7E1} STEP 1: Merchant validation started");
+    try {
+      console.log("Validation URL:", event.validationURL);
+      console.log("Domain:", window.location.hostname);
+      const res = await fetch(
+        `${masterBaseUrl}api/v1/widget/generate-apple-pay-session`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            validationUrl: event.validationURL,
+            applePayMerchantId: applePayMerchantId2,
+            applepayDisplayName: applePayMerchantName,
+            requestDomain: window.location.hostname
+            // ✅ IMPORTANT
+          })
+        }
+      );
+      console.log("\u{1F7E1} STEP 2: Response status:", res.status);
+      const data = await res.json();
+      console.log("RAW session response:", JSON.stringify(data));
+      console.log("\u{1F7E2} STEP 3: Session response: data fetched");
+      const merchantSession = (_a = data == null ? void 0 : data.data) != null ? _a : data;
+      if (!merchantSession || typeof merchantSession !== "object") {
+        console.error("\u274C Bad session shape");
+        event.complete(null);
+        return;
+      }
+      console.log("\u{1F7E2} STEP 4.1: Completing merchant validation");
+      event.complete(merchantSession);
+      console.log("\u{1F7E2} STEP 4.2: Completed merchant validation");
+    } catch (err) {
+      console.log("\u274C Merchant validation failed:", err == null ? void 0 : err.message);
+      event.complete(null);
     }
-    if (loading) return;
-    if (partialError) {
-      return;
+  }
+  async function authorizePayment(paymentResponse) {
+    console.log("\u{1F7E1} STEP 5: Authorizing payment");
+    try {
+      const token = paymentResponse.details.token.paymentData;
+      console.log("\u{1F7E2} STEP 6: Got token");
+      await completeFractalFlow(token, null, "apple_pay");
+      await paymentResponse.complete("success");
+      console.log("\u2705 Payment completed successfully");
+    } catch (err) {
+      console.log("\u274C Authorization failed:", err == null ? void 0 : err.message);
+      await paymentResponse.complete("fail");
     }
-    if (activetab !== "ach") {
-      const hasError = validateCardData();
-      if (hasError) return;
-      let isValid = true;
-      if (!isValid) return;
+  }
+  async function handleApplePayClick() {
+    console.log("\u{1F7E1} STEP A: Click detected");
+    try {
+      const request = new PaymentRequest(
+        paymentRequestMethods,
+        buildPaymentDetails(),
+        paymentRequestOptions
+      );
+      request.onmerchantvalidation = validateMerchant;
+      console.log("\u{1F7E1} STEP B: Calling show()");
+      const response = await request.show();
+      console.log("\u{1F7E2} STEP C: Payment sheet opened");
+      await authorizePayment(response);
+    } catch (err) {
+      console.log("\u274C Apple Pay flow failed:", err == null ? void 0 : err.message);
+    }
+  }
+  useEffect17(() => {
+    if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
+      console.log("\u2705 Apple Pay is available");
     } else {
-      const hasError = validateAchData();
-      if (hasError) return;
+      console.log("\u274C Apple Pay NOT available");
+    }
+  }, []);
+  useEffect17(() => {
+    const btn = applePayRef.current;
+    if (!btn) return;
+    const handleClick = () => handleApplePayClick();
+    btn.addEventListener("click", handleClick);
+    return () => btn.removeEventListener("click", handleClick);
+  }, [applePayMerchantId2, applePayAmount, applePayMerchantName]);
+  return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
+    "apple-pay-button",
+    {
+      ref: applePayRef,
+      buttonstyle: "black",
+      type: "pay",
+      locale: "en-US",
+      style: { width: "100%" }
+    }
+  ) });
+}
+
+// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
+import { Fragment as Fragment20, jsx as jsx36, jsxs as jsxs21 } 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, customCSS: customCSS2 }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  const hasRunRef = useRef12(false);
+  const cardFormRef = useRef12(null);
+  const bankFormRef = useRef12(null);
+  const expiryYearRef = useRef12(null);
+  const expiryMonthRef = useRef12(null);
+  const cardListRunRef = useRef12(false);
+  const threeDSContainerRef = useRef12(null);
+  const [activetab, setActive] = useState11("card");
+  const [activeList, setActiveList] = useState11("card");
+  const [cardData, setCardData] = useState11();
+  const [cardError, setCardError] = useState11({});
+  const [achData, setAchData] = useState11();
+  const [achError, setAchError] = useState11({});
+  const [saveACHinfo, setSaveACHinfo] = useState11(false);
+  const [saveACHConsent1, setSaveACHConsent1] = useState11(false);
+  const [saveCardInfo, setSaveCardInfo] = useState11(false);
+  const [error, setError] = useState11("");
+  const [errorIframe, setErrorIframe] = useState11("");
+  const [success, setSuccess] = useState11(false);
+  let [tranId, setTranId] = useState11("");
+  const [loading, setLoading] = useState11(false);
+  const [loading2, setLoading2] = useState11(false);
+  const [loadingIframe, setLoadingIframe] = useState11(false);
+  const [cardList, setCardList] = useState11([]);
+  const [bankList, setBankList] = useState11([]);
+  const [selectedCard, setSelectedCard] = useState11();
+  const [cashDiscount, setCashDiscount] = useState11(Number(amount));
+  const [activeinCard, setActiveinCard] = useState11("form");
+  const [activeinBank, setActiveinBank] = useState11("form");
+  const [isBankActive, setIsBankActive] = useState11(false);
+  const [processingFee, setProcessingFee] = useState11(0);
+  const [clientSecret, setClientSecret] = useState11("");
+  const [errorMessage, setErrorMessage] = useState11(null);
+  const [initialLoader, setInitialLoader] = useState11(false);
+  const [is3DSEnable, setIs3DSEnable] = useState11(false);
+  const [stripeResponse, setStripeResponse] = useState11(null);
+  const [orderLoader, setOrderLoader] = useState11(false);
+  const [orderGuid, setOrderGuid] = useState11(ordGuid || null);
+  const [partialAmount, setPartialAmount] = useState11("");
+  const [partialError, setPartialError] = useState11("");
+  const [remainingAmount, setRemainingAmount] = useState11("");
+  const [paymentGateway, setPaymentGateway] = useState11();
+  const [dcToken, setDCToken] = useState11();
+  const [isBankConsentChecked, setIsBankConsentChecked] = useState11(false);
+  const [errorBankConsent, setErrorBankConsent] = useState11("");
+  const [errorBankConsentOther, setErrorBankConsentOther] = useState11("");
+  let mastercard2 = S3Url + "widget/mc-img.svg";
+  let visa2 = S3Url + "widget/visa-img.svg";
+  let americanexp2 = S3Url + "widget/ae-img.svg";
+  let discover2 = S3Url + "widget/discover-img.svg";
+  let defaultcard2 = S3Url + "widget/card.svg";
+  let trash2 = S3Url + "widget/Trash.svg";
+  let bank2 = S3Url + "widget/bank.svg";
+  let secure2 = S3Url + "widget/secure-img.png";
+  let pov2 = S3Url + "widget/pov-by.png";
+  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) => {
+    const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
+    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 = useRef12(null);
+  const fractalStyles = {
+    input: {
+      "font-family": "'Inter', sans-serif",
+      "font-size": "16px",
+      "color": "#212529",
+      "background-color": "transparent",
+      "padding": "0px",
+      "appearance": "none",
+      "outline": "none",
+      "border": "none",
+      "box-shadow": "none"
+    },
+    ":focus": {
+      "color": "#212529",
+      "outline": "none",
+      "border": "none"
+    },
+    "::placeholder": {
+      "color": "#212529"
     }
+  };
+  const handleCharge = async (data) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
     try {
-      showLoader();
-      const result = await axios9.get(`${masterBaseUrl}api/v1/gateway/token/${session_token}`, {
-        params: {
-          require3ds,
-          pass_fee
-        }
-      });
-      if ((result == null ? void 0 : result.status) == 200) {
-        let gatewayToken = (_b2 = (_a2 = result == null ? void 0 : result.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.gateway_token;
-        let paymentGateway2 = (_d2 = (_c2 = result == null ? void 0 : result.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.paymentGateway;
-        if (activetab !== "ach") {
-          if (paymentGateway2 == ((_e2 = PaymentMethodKeys) == null ? void 0 : _e2.FRACTALKEY)) {
-            await handleFractalTokenFlow();
-          } else {
-            try {
-              const result2 = await window.requestDcToken();
-              ;
-              console.log("Token:", result2.Token);
-              if (result2.Token) {
-                handleTokenCallback(result2);
-              }
-            } catch (err) {
-              console.log(err, "Error while tokenizing");
-              setErrorIframe(err);
-              setLoading(false);
-            }
-          }
-        } else {
-          let callbackdata;
-          try {
-            const payByBank = await axios9.post(`${masterBaseUrl}api/v1/gateway/bank-charge/${session_token}`, __spreadValues({
-              label: achData == null ? void 0 : achData.name,
-              account_number: achData == null ? void 0 : achData.accountNumber,
-              routing_number: achData == null ? void 0 : achData.routingNumber,
-              bank_name: achData == null ? void 0 : achData.bankName,
-              account_type: achData == null ? void 0 : achData.accountType,
-              amount: `${bankAmount}`,
-              customer_id: null,
-              isSaveAch: false,
-              tax: "0.00",
-              discount: "0.00",
-              surcharge: "0.00",
-              order_id: "",
-              company_name: (achData == null ? void 0 : achData.companyName) || ""
-            }, saveACHinfo ? {
-              bank: {
-                name: achData == null ? void 0 : achData.name,
-                account_number: achData == null ? void 0 : achData.accountNumber,
-                routing_number: achData == null ? void 0 : achData.routingNumber,
-                bank_name: achData == null ? void 0 : achData.bankName,
-                account_type: achData == null ? void 0 : achData.accountType,
-                customer_id: customerId || "",
-                company_name: (achData == null ? void 0 : achData.companyName) || ""
-              }
-            } : null));
-            if ((_f2 = payByBank == null ? void 0 : payByBank.data) == null ? void 0 : _f2.result) {
-              callbackdata = __spreadProps(__spreadValues({}, callbackdata), {
-                callback: __spreadProps(__spreadValues({}, (_g2 = payByBank == null ? void 0 : payByBank.data) == null ? void 0 : _g2.data), { name: achData == null ? void 0 : achData.name, isPreAuth })
-              });
-              callback(callbackdata);
-              handleClose();
-              hideLoader();
-            }
-          } catch (error2) {
-            console.log(error2, "errororor");
-            let data = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data;
-            if (typeof (data == null ? void 0 : data.message) == "object") {
-              Object.values(data == null ? void 0 : data.message).forEach((message) => {
-                var _a3;
-                setError(message || "Something went wrong");
-                callback({
-                  error: message || "Something went wrong!",
-                  result: (data == null ? void 0 : data.result) || false,
-                  statusCode: (_a3 = error2 == null ? void 0 : error2.response) == null ? void 0 : _a3.status
-                });
-              });
-            } else {
-              setError((data == null ? void 0 : data.message) || "Something went wrong");
-              callback({
-                error: (data == null ? void 0 : data.message) || "Something went wrong!",
-                result: (data == null ? void 0 : data.result) || false,
-                statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
-              });
-            }
-            hideLoader();
-          }
+      let dataObj = __spreadValues(__spreadValues({
+        pass_fee_amount: Number(amount) - cashDiscount,
+        pass_fee,
+        Token: data == null ? void 0 : data.Token,
+        amount: partialAmount ? partialAmount : amount,
+        postal_code: data == null ? void 0 : data.postalCode,
+        require3ds,
+        isPartial,
+        orderGuid: orderGuid || ordGuid
+      }, saveCardInfo ? {
+        card: {
+          postal_code: cardData == null ? void 0 : cardData.zipCode,
+          customer_id: customerId,
+          gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
+          name: cardData == null ? void 0 : cardData.cardName
         }
+      } : null), (data == null ? void 0 : data.typeoftoken) ? {
+        typeoftoken: data == null ? void 0 : data.typeoftoken
+      } : null);
+      if (require3ds && (data == null ? void 0 : data.stripe_3ds_auth_id)) {
+        dataObj.stripe_3ds_auth_id = data == null ? void 0 : data.stripe_3ds_auth_id;
+      }
+      const chargeResponse = await axios9.post(`${masterBaseUrl}api/v1/gateway/charge/${session_token}`, dataObj);
+      if ((_a2 = chargeResponse == null ? void 0 : chargeResponse.data) == null ? void 0 : _a2.result) {
+        let callbackdata = {
+          // cardDetails: { ...addCard, ...data },
+          callback: __spreadProps(__spreadValues({}, (_b2 = chargeResponse == null ? void 0 : chargeResponse.data) == null ? void 0 : _b2.data), { name: cardData == null ? void 0 : cardData.cardName, isPreAuth })
+        };
+        callback(callbackdata);
+        hideLoader();
+        handleClose();
       }
     } catch (error2) {
-      hideLoader();
+      setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
       callback({
-        error: ((_k2 = (_j2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _j2.data) == null ? void 0 : _k2.message) || "Something went wrong!",
-        result: (_m2 = (_l2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _l2.data) == null ? void 0 : _m2.result,
-        statusCode: (_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.status
+        error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
+        result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
+        statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
       });
-      setError(((_p2 = (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.data) == null ? void 0 : _p2.message) || "Something went wrong!");
+      hideLoader();
     }
   };
-  const handleCardChange = (field, value) => {
-    const name2 = field;
-    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
-    if (numericFields.includes(name2)) {
-      if (value === "" || /^[0-9]+$/.test(value)) {
-        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: ""
-        }));
-        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: value
-        }));
+  const handlePreAuth = async (data) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    try {
+      let dataObj = __spreadValues({
+        Token: data == null ? void 0 : data.Token,
+        amount,
+        postal_code: data == null ? void 0 : data.postalCode
+      }, saveCardInfo ? {
+        card: {
+          postal_code: cardData == null ? void 0 : cardData.zipCode,
+          customer_id: customerId,
+          gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
+          name: cardData == null ? void 0 : cardData.cardName
+        }
+      } : null);
+      const preAuthResponse = await axios9.post(`${masterBaseUrl}api/v1/gateway/preauth/${session_token}`, dataObj);
+      if ((_a2 = preAuthResponse == null ? void 0 : preAuthResponse.data) == null ? void 0 : _a2.result) {
+        let addCard;
+        let callbackdata = {
+          // cardDetails: { ...addCard, ...data },
+          callback: __spreadProps(__spreadValues({}, (_b2 = preAuthResponse == null ? void 0 : preAuthResponse.data) == null ? void 0 : _b2.data), { name: cardData == null ? void 0 : cardData.cardName, isPreAuth })
+        };
+        callback(callbackdata);
+        hideLoader();
+        handleClose();
       }
-      return;
+    } catch (error2) {
+      setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
+      callback({
+        error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
+        result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
+        statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
+      });
+      hideLoader();
     }
-    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
-      [name2]: ""
-    }));
-    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
-      [name2]: value
-    }));
-  };
-  const handleCardNumberChange = (e) => {
-    var _a2;
-    const input = e.target;
-    const rawValue = input.value.replace(/\D/g, "");
-    const { formatted, cursor } = formatCardNumberWithCursor(
-      input.value,
-      (_a2 = input.selectionStart) != null ? _a2 : 0
-    );
-    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
-      cardNumber: ""
-    }));
-    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
-      cardNumber: formatted
-    }));
-    requestAnimationFrame(() => {
-      input.setSelectionRange(cursor, cursor);
-    });
   };
-  const handleChangeAch = (e) => {
-    const { name: name2, value } = e.target;
-    const numericFields = ["routingNumber", "accountNumber", "confirmAccountNumber"];
-    if (name2 == "name") {
-      if (/^[a-zA-Z\s]*$/.test(value)) {
-        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: ""
-        }));
-        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: value
-        }));
+  const handleTokenCallback = async (token) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    if (token.Error) {
+      setError(token.Error);
+      callback({
+        error: token.Error || "Something went wrong!"
+      });
+      hideLoader();
+    } else {
+      let data = {
+        token: token.Token,
+        resp: token
+      };
+      try {
+        const updateToken = await axios9.post(`${masterBaseUrl}api/v1/gateway/update/token/${session_token}`, data);
+        if ((updateToken == null ? void 0 : updateToken.status) == 200) {
+          let respData = {
+            Token: (_b2 = (_a2 = updateToken == null ? void 0 : updateToken.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.gateway_token,
+            Brand: token.Brand,
+            ExpirationMonth: token.ExpirationMonth,
+            ExpirationYear: token.ExpirationYear,
+            Last4: token.Last4,
+            Bin: token.Bin,
+            CVV: token.CVV,
+            postalCode: cardData == null ? void 0 : cardData.zipCode
+          };
+          let addCard;
+          if (isPreAuth) {
+            handlePreAuth(respData);
+          } else {
+            handleCharge(respData);
+          }
+        }
+      } catch (error2) {
+        console.log(error2, "error");
+        hideLoader();
+        setError(((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!");
+        callback({
+          error: ((_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || "Something went wrong!",
+          result: (_h2 = (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.result,
+          statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
+        });
       }
-      return;
     }
-    if (numericFields.includes(name2)) {
-      if (value === "" || /^[0-9]+$/.test(value)) {
-        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: ""
-        }));
-        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
-          [name2]: value
-        }));
+  };
+  const handletabchange = (id) => {
+    setActive(id);
+  };
+  const validateAchData = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    const errors = {};
+    const data = achData;
+    if (!((_a2 = data == null ? void 0 : data.name) == null ? void 0 : _a2.trim())) errors.name = "Name is required";
+    if (!((_b2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _b2.trim())) errors.accountNumber = "Account number is required";
+    if (((_c2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _c2.trim()) && ((_d2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _d2.trim()) !== ((_e2 = data == null ? void 0 : data.confirmAccountNumber) == null ? void 0 : _e2.trim())) errors.confirmAccountNumber = "Account numbers must match";
+    if (!((_f2 = data == null ? void 0 : data.bankName) == null ? void 0 : _f2.trim())) errors.bankName = "Bank name is required";
+    if (!((_g2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _g2.trim())) errors.routingNumber = "Routing Number is required";
+    if ((data == null ? void 0 : data.routingNumber) && ((_h2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _h2.length) !== 9) errors.routingNumber = "Routing number must be 9 digits";
+    if ((data == null ? void 0 : data.accountType) === "business saving" || (data == null ? void 0 : data.accountType) === "business checking") {
+      if (!(data == null ? void 0 : data.companyName) || (data == null ? void 0 : data.companyName) === "") {
+        errors.companyName = "Company Name is required for business accounts";
       }
-      return;
     }
-    setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
-      [name2]: ""
-    }));
-    setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
-      [name2]: value
-    }));
-  };
-  const handleClose = () => {
-    setShow(false);
-    setActive("card");
-    setError("");
-    setSuccess(false);
-    setTranId("");
-    setAchData({
-      name: "",
-      routingNumber: "",
-      accountNumber: "",
-      confirmAccountNumber: "",
-      bankName: "",
-      accountType: ""
-    });
-    setAchError({
-      name: "",
-      routingNumber: "",
-      accountNumber: "",
-      confirmAccountNumber: "",
-      bankName: "",
-      accountType: ""
-    });
-    setCardData({
-      cardName: "",
-      cardNumber: "",
-      expiryMonth: "",
-      expiryYear: "",
-      cvv: "",
-      orderId: "",
-      zipCode: ""
-    });
-    setCardError({
-      cardName: "",
-      cardNumber: "",
-      expiryMonth: "",
-      expiryYear: "",
-      cvv: "",
-      orderId: "",
-      zipCode: ""
-    });
-    setSaveACHinfo(false);
-    setSaveCardInfo(false);
-    setActiveinBank("form");
-    setActiveinCard("form");
-    setIsBankActive(false);
-    setProcessingFee(0);
-    setCashDiscount(0);
-    setCardList([]);
-    setErrorMessage(null);
-    setClientSecret(null);
-    setInitialLoader(false);
-    setIs3DSEnable(false);
-    setStripeResponse(null);
-    setOrderGuid(null);
-    setPartialAmount("");
-    setPartialError("");
-    setRemainingAmount("");
-    setIsBankConsentChecked(false);
-    setErrorBankConsent("");
+    if (!saveACHinfo && !isBankConsentChecked) {
+      setErrorBankConsent("Above consent is required");
+    }
+    if (saveACHinfo && !saveACHConsent1) {
+      setErrorBankConsentOther("Your consent is required to save your bank details for future use");
+    }
+    setAchError(errors);
+    return Object.keys(errors).length > 0;
   };
-  const getCardList = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-    showLoader();
+  const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     try {
-      const data = {
-        isPreAuth,
-        "customerId": customerId
-      };
-      let cardListData = await axios9.post(`${masterBaseUrl}api/v1/gateway/card-list/${session_token}`, data);
-      let savedpaymentsList = ((_b2 = (_a2 = cardListData == null ? void 0 : cardListData.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.cardList) || [];
-      let banklists = savedpaymentsList == null ? void 0 : savedpaymentsList.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
-      let cardlists = savedpaymentsList == null ? void 0 : savedpaymentsList.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
-      if (cardlists && (cardlists == null ? void 0 : cardlists.length) > 0) {
-        setActive("card");
-        setActiveinCard("list");
-        setCardList(cardlists);
-        setLoadingIframe(false);
-      } else {
-        setActive("card");
-        setCardList([]);
-      }
-      if (banklists && (banklists == null ? void 0 : banklists.length) > 0) {
-        setActiveinBank("list");
-        setBankList(banklists);
-      } else {
-        setBankList([]);
+      if (typeoftoken == "google_pay" || typeoftoken == "apple_pay") {
+        handleCharge({
+          Token: tokenizeData,
+          postalCode: cardData == null ? void 0 : cardData.zipCode,
+          typeoftoken
+        });
+        return;
       }
-      hideLoader();
-    } catch (err) {
-      console.log(err);
-      hideLoader();
-      callback({
-        error: ((_d2 = (_c2 = err == null ? void 0 : err.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!",
-        result: (_f2 = (_e2 = err == null ? void 0 : err.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.result,
-        statusCode: (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.status
+      let token = tokenizeData;
+      let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
+        token,
+        require3ds,
+        pass_fee,
+        typeoftoken
       });
-      setError(((_i2 = (_h2 = err == null ? void 0 : err.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || (err == null ? void 0 : err.message) || "Something went wrong");
-    }
-  };
-  const getCardType2 = (card) => {
-    let card_type = card == null ? void 0 : card.toLowerCase();
-    switch (card_type) {
-      case "visa":
-        return visa2;
-      case "mastercard":
-      case "mc":
-      case "m/c":
-        return mastercard2;
-      case "amex":
-      case "american express":
-      case "ae":
-        return americanexp2;
-      case "discover":
-      case "dcvr":
-        return discover2;
-      case "bank":
-        return bank2;
-      default:
-        return card;
+      if ((verifyandsaveresp == null ? void 0 : verifyandsaveresp.status) == 200) {
+        let responsetemp = (_a2 = verifyandsaveresp == null ? void 0 : verifyandsaveresp.data) == null ? void 0 : _a2.data;
+        let respData = {
+          Token: responsetemp.gateway_token,
+          Brand: responsetemp.card_data.brand,
+          ExpirationMonth: responsetemp.card_data.expire_mm,
+          ExpirationYear: responsetemp.card_data.expire_yy,
+          Last4: responsetemp.card_data.last4,
+          Bin: responsetemp.card_data.bin,
+          postalCode: cardData == null ? void 0 : cardData.zipCode,
+          stripe_3ds_auth_id: intentid
+        };
+        if (isPreAuth) {
+          handlePreAuth(respData);
+        } else {
+          handleCharge(respData);
+        }
+      }
+    } catch (error2) {
+      console.log(error2, "error");
+      setError(((_c2 = (_b2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _b2.data) == null ? void 0 : _c2.message) || "Something went wrong!");
+      callback({
+        error: ((_e2 = (_d2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _d2.data) == null ? void 0 : _e2.message) || "Something went wrong!",
+        result: (_g2 = (_f2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _f2.data) == null ? void 0 : _g2.result,
+        statusCode: (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.status
+      });
+      hideLoader();
     }
   };
-  const handleDeleteCard = async (cardId) => {
-    Swal5.fire({
-      icon: "warning",
-      text: "Do you want to delete the card?",
-      showCancelButton: true,
-      confirmButtonText: "Yes",
-      cancelButtonText: "No",
-      reverseButtons: true,
-      buttonsStyling: false,
-      customClass: {
-        confirmButton: "swal2-confirm btn btn-dark",
-        cancelButton: "swal2-cancel btn btn-dark",
-        popup: "custom-swal-popup",
-        icon: "custom-swal-icon"
-      }
-    }).then(async (result) => {
-      var _a2, _b2;
-      if (result.isConfirmed) {
-        setLoading2(true);
-        try {
-          let obj = {
-            card_id: cardId,
-            customer_id: customerId
-          };
-          const res = await axios9.patch(`${masterBaseUrl}api/v1/gateway/delete-card/${session_token}`, obj);
-          if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.result) {
-            setLoading2(false);
-            getCardList();
-            Swal5.fire({
-              icon: "success",
-              title: "Deleted!",
-              text: ((_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.message) || "Card deleted.",
-              confirmButtonText: "OK",
-              showConfirmButton: true,
-              timer: 1e3,
-              // auto-close after 1 second
-              timerProgressBar: true,
-              customClass: {
-                confirmButton: "btn btn-dark"
-              }
-            });
-          } else {
-            setLoading2(false);
-            Swal5.fire({
-              icon: "error",
-              title: "Failure!",
-              text: "Card not deleted.",
-              timer: 1e3,
-              // auto-close after 1 second
-              timerProgressBar: true,
-              customClass: {
-                confirmButton: "btn btn-dark"
+  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;
+    try {
+      const requestOptions = {
+        method: "POST",
+        redirect: "follow"
+      };
+      let sesionResult = await axios9.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+      let objtokenize = {
+        public_key_pem: ((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem) || ((_d2 = (_c2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.public_key_pem),
+        session_key: (_f2 = (_e2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.session_key
+      };
+      let three_ds_data = null;
+      if (require3ds) {
+        if (typeof window !== "undefined" && typeof navigator !== "undefined") {
+          const languages = (_g2 = navigator.languages) != null ? _g2 : [navigator.language];
+          const language = Array.isArray(languages) ? languages[0] : languages;
+          three_ds_data = {
+            amount: partialAmount ? Math.round(parseFloat(partialAmount) * 100) : Math.round(parseFloat(amount) * 100),
+            // convert dollars → cents
+            currency: "usd",
+            channel: {
+              type: "browser",
+              browser: {
+                language: typeof language === "string" ? language : null,
+                color_depth: (_i2 = (_h2 = window.screen) == null ? void 0 : _h2.colorDepth) != null ? _i2 : null,
+                java_enabled: typeof navigator.javaEnabled === "function" ? navigator.javaEnabled() : false,
+                screen_height: (_k2 = (_j2 = window.screen) == null ? void 0 : _j2.height) != null ? _k2 : null,
+                screen_width: (_m2 = (_l2 = window.screen) == null ? void 0 : _l2.width) != null ? _m2 : null,
+                timezoneOffset: (/* @__PURE__ */ new Date()).getTimezoneOffset()
               }
-            });
-          }
-        } catch (err) {
-          setLoading2(false);
-          Swal5.fire({
-            icon: "error",
-            title: "Error!",
-            text: "Failed to delete the card.",
-            confirmButtonText: "OK",
-            customClass: {
-              confirmButton: "btn btn-dark"
             }
-          });
+          };
         }
-      } else if (result.dismiss === Swal5.DismissReason.cancel) {
-        Swal5.fire({
-          icon: "info",
-          text: "Card not deleted",
-          confirmButtonText: "OK",
-          buttonsStyling: false,
-          customClass: {
-            confirmButton: "btn btn-dark float-end",
-            actions: "swal2-actions-end"
-          }
-        });
       }
-    });
-  };
-  const handlechargeCustomer = async (e) => {
-    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;
-    let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
-    if (partialError) {
-      return;
-    }
-    if (amount) {
-      if (customer_id) {
-        if (card_id) {
-          let chargeobj = {
-            amount: (card_type == null ? void 0 : card_type.toLowerCase()) === "bank" ? `${bankAmount}` : partialAmount ? partialAmount : amount,
-            customer_id,
-            card_id,
-            pass_fee,
-            pass_fee_amount: Number(amount) - cashDiscount
-          };
-          if (isPartial) {
-            chargeobj.orderGuid = orderGuid || ordGuid;
-            if (partialAmount) {
-              chargeobj.ispartialPayment = true;
-            }
-          }
-          if (isPreAuth) {
-            chargeobj.isPreauth = true;
-          }
-          let chargeurl = masterBaseUrl + "api/v1/gateway/charge-by-saved-details/" + session_token;
-          const headers = {
-            "Content-Type": "application/json"
-          };
-          try {
-            showLoader();
-            const response = await axios9.post(chargeurl, chargeobj);
-            if ((_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.result) {
-              callback({ callback: __spreadProps(__spreadValues({}, (_b2 = response == null ? void 0 : response.data) == null ? void 0 : _b2.data), { isPreAuth }) });
-              hideLoader();
-              handleClose();
-            }
-          } catch (error2) {
-            console.log(error2 == null ? void 0 : error2.response, "error by saved details");
-            callback({
-              error: ((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!",
-              result: (_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.result,
-              statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
-            });
+      let tokenizeData;
+      try {
+        tokenizeData = await tokenizerRef.current.createToken(
+          objtokenize,
+          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);
+        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)) {
+          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);
+          } else {
             hideLoader();
-            setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
+            setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
+              fractalToken: tokenizeData == null ? void 0 : tokenizeData.token
+            }));
           }
         } else {
-          setError("Please Select A Card/Bank");
-          callback({
-            error: "Please Select A Card/Bank"
-          });
+          completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, null);
         }
-      } else {
-        setError("Please Select Customer");
-        callback({
-          error: "Please Select Customer"
-        });
       }
-    } else {
-      setError("Something went wrong.");
+    } catch (error2) {
+      hideLoader();
+      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 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 lastLine = lines.at(-1) || "";
+        const parts = (_x = lastLine.split) == null ? void 0 : _x.call(lastLine, ": ");
+        readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
+      } catch (e) {
+        readableMessage = "Something went wrong!";
+      }
+      setError(readableMessage);
       callback({
-        error: "Something went wrong."
+        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
       });
     }
   };
-  const getPaymentDetails = async () => {
-    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}`, {
-        params: {
-          require3ds,
-          pass_fee
+  const validateCardData = () => {
+    var _a2, _b2;
+    const errors = {};
+    const data = cardData;
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b2 = data == null ? void 0 : data.zipCode) == null ? void 0 : _b2.trim())) errors.zipCode = "ZIP code is required";
+    setCardError(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const validateCardInputs = () => {
+    let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+    let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+    let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+    let errors = {};
+    if (!validCard) errors.cardNumber = "Invalid card Number";
+    if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+    if (!validCVV) errors.cvv = "Invalid CVV";
+    setCardError(errors);
+    return validCard && validCVV && validExpirationDate;
+  };
+  const submitFunc = async (e) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
+    e.preventDefault();
+    const el = document.activeElement;
+    if (el instanceof HTMLElement) {
+      el.blur();
+    }
+    if (loading) return;
+    if (partialError) {
+      return;
+    }
+    if (activetab !== "ach") {
+      const hasError = validateCardData();
+      if (hasError) return;
+      let isValid = true;
+      if (!isValid) return;
+    } else {
+      let hasError = validateAchData();
+      if (saveACHinfo && !saveACHConsent1) {
+        hasError = true;
+      }
+      if (!saveACHinfo && !isBankConsentChecked) {
+        hasError = true;
+      }
+      if (hasError) return;
+    }
+    try {
+      showLoader();
+      const result = await axios9.get(`${masterBaseUrl}api/v1/gateway/token/${session_token}`, {
+        params: {
+          require3ds,
+          pass_fee
         }
       });
-      if ((res == null ? void 0 : res.status) == 200) {
-        setIsBankActive((_b2 = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.isBankActive);
-        setProcessingFee(Number((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.fee) || 0);
-        setPaymentGateway((_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.paymentGateway);
-        setDCToken((_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.data) == null ? void 0 : _h2.dctoken);
-        hideLoader();
+      if ((result == null ? void 0 : result.status) == 200) {
+        let gatewayToken = (_b2 = (_a2 = result == null ? void 0 : result.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.gateway_token;
+        let paymentGateway2 = (_d2 = (_c2 = result == null ? void 0 : result.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.paymentGateway;
+        if (activetab !== "ach") {
+          if (paymentGateway2 == ((_e2 = PaymentMethodKeys) == null ? void 0 : _e2.FRACTALKEY)) {
+            await handleFractalTokenFlow();
+          } else {
+            try {
+              const result2 = await window.requestDcToken();
+              console.log("Token:", result2.Token);
+              if (result2.Token) {
+                handleTokenCallback(result2);
+              }
+            } catch (err) {
+              console.log(err, "Error while tokenizing");
+              setErrorIframe(err);
+              setLoading(false);
+            }
+          }
+        } else {
+          let callbackdata;
+          try {
+            const payByBank = await axios9.post(`${masterBaseUrl}api/v1/gateway/bank-charge/${session_token}`, __spreadValues({
+              label: achData == null ? void 0 : achData.name,
+              account_number: achData == null ? void 0 : achData.accountNumber,
+              routing_number: achData == null ? void 0 : achData.routingNumber,
+              bank_name: achData == null ? void 0 : achData.bankName,
+              account_type: achData == null ? void 0 : achData.accountType,
+              amount: `${bankAmount}`,
+              customer_id: null,
+              isSaveAch: false,
+              tax: "0.00",
+              discount: "0.00",
+              surcharge: "0.00",
+              order_id: "",
+              company_name: (achData == null ? void 0 : achData.companyName) || ""
+            }, saveACHinfo ? {
+              bank: {
+                name: achData == null ? void 0 : achData.name,
+                account_number: achData == null ? void 0 : achData.accountNumber,
+                routing_number: achData == null ? void 0 : achData.routingNumber,
+                bank_name: achData == null ? void 0 : achData.bankName,
+                account_type: achData == null ? void 0 : achData.accountType,
+                customer_id: customerId || "",
+                company_name: (achData == null ? void 0 : achData.companyName) || ""
+              }
+            } : null));
+            if ((_f2 = payByBank == null ? void 0 : payByBank.data) == null ? void 0 : _f2.result) {
+              callbackdata = __spreadProps(__spreadValues({}, callbackdata), {
+                callback: __spreadProps(__spreadValues({}, (_g2 = payByBank == null ? void 0 : payByBank.data) == null ? void 0 : _g2.data), { name: achData == null ? void 0 : achData.name, isPreAuth })
+              });
+              callback(callbackdata);
+              handleClose();
+              hideLoader();
+            }
+          } catch (error2) {
+            console.log(error2, "errororor");
+            let data = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data;
+            if (typeof (data == null ? void 0 : data.message) == "object") {
+              Object.values(data == null ? void 0 : data.message).forEach((message) => {
+                var _a3;
+                setError(message || "Something went wrong");
+                callback({
+                  error: message || "Something went wrong!",
+                  result: (data == null ? void 0 : data.result) || false,
+                  statusCode: (_a3 = error2 == null ? void 0 : error2.response) == null ? void 0 : _a3.status
+                });
+              });
+            } else {
+              setError((data == null ? void 0 : data.message) || "Something went wrong");
+              callback({
+                error: (data == null ? void 0 : data.message) || "Something went wrong!",
+                result: (data == null ? void 0 : data.result) || false,
+                statusCode: (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.status
+              });
+            }
+            hideLoader();
+          }
+        }
       }
     } catch (error2) {
-      console.log((_j2 = (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.data) == null ? void 0 : _j2.result, "error while getting payment details");
+      hideLoader();
       callback({
-        error: ((_l2 = (_k2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || "Something went wrong!",
-        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
+        error: ((_k2 = (_j2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _j2.data) == null ? void 0 : _k2.message) || "Something went wrong!",
+        result: (_m2 = (_l2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _l2.data) == null ? void 0 : _m2.result,
+        statusCode: (_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.status
       });
-      hideLoader();
+      setError(((_p2 = (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.data) == null ? void 0 : _p2.message) || "Something went wrong!");
     }
   };
-  const crateOrderFrac = async () => {
-    var _a2, _b2, _c2, _d2, _e2;
-    if (orderLoader) return;
-    setOrderLoader(true);
-    try {
-      const res = await axios9.post(`${masterBaseUrl}api/v1/gateway/create-pay-order/${session_token}`, {
-        amount,
-        cashDiscount,
-        bankAmount,
-        bankSurcharge,
-        customerId,
-        passFee: pass_fee,
-        passFeeAmount: pass_fee_amount ? pass_fee_amount : Number(amount) - cashDiscount,
-        require3ds,
-        isPartial
-      });
-      if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.result) {
-        setOrderLoader(false);
-        setOrderGuid((_c2 = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.orderGuid);
-        setRemainingAmount((_e2 = (_d2 = res == null ? void 0 : res.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.remainingAmount);
-        hasRunRef.current = true;
+  const handleCardChange = (field, value) => {
+    const name2 = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name2)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: value
+        }));
       }
-    } catch (error2) {
-      console.log("error in creating order", error2);
-      setOrderLoader(false);
+      return;
     }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name2]: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name2]: value
+    }));
   };
-  useEffect15(() => {
-    if (!show && !autoTrigger) {
-      hasRunRef.current = false;
-      cardListRunRef.current = false;
-    }
-  }, [show, autoTrigger]);
-  useEffect15(() => {
-    if (!hasRunRef.current && (show || autoTrigger)) {
-      getPaymentDetails();
-      if (isPartial && !partialRef) {
-        crateOrderFrac();
+  const handleCardNumberChange = (e) => {
+    var _a2;
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    const { formatted, cursor } = formatCardNumberWithCursor(
+      input.value,
+      (_a2 = input.selectionStart) != null ? _a2 : 0
+    );
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+    requestAnimationFrame(() => {
+      input.setSelectionRange(cursor, cursor);
+    });
+  };
+  const handleChangeAch = (e) => {
+    const { name: name2, value } = e.target;
+    const numericFields = ["routingNumber", "accountNumber", "confirmAccountNumber"];
+    if (name2 == "name") {
+      if (/^[a-zA-Z\s]*$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: value
+        }));
       }
+      return;
     }
-  }, [show, autoTrigger, isPartial]);
-  useEffect15(() => {
-    if ((show || autoTrigger) && pass_fee_amount) {
-      let cashdisc = Number(amount) - Number(pass_fee_amount);
-      if (cashdisc && !isNaN(cashdisc)) {
-        setCashDiscount(cashdisc);
-      }
-    } else if ((show || autoTrigger) && pass_fee && processingFee) {
-      let cashdisc = CalculateCashDiscount(amount, processingFee);
-      if (cashdisc && !isNaN(cashdisc)) {
-        setCashDiscount(cashdisc);
+    if (numericFields.includes(name2)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name2]: value
+        }));
       }
-    } else {
-      setCashDiscount(Number(amount));
-    }
-    if (!cardListRunRef.current && customerId && (show || autoTrigger) && !isRequest) {
-      cardListRunRef.current = true;
-      getCardList();
-    }
-  }, [customerId, show, amount, processingFee, autoTrigger]);
-  const getHeading = () => {
-    if (isPreAuth) {
-      return "Cards";
-    } else {
-      return "Cards/Bank";
+      return;
     }
+    setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name2]: ""
+    }));
+    setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name2]: value
+    }));
   };
-  const fetchClientSecret = useCallback(async () => {
+  const handleClose = () => {
+    setShow(false);
+    setActive("card");
+    setError("");
+    setSuccess(false);
+    setTranId("");
+    setAchData({
+      name: "",
+      routingNumber: "",
+      accountNumber: "",
+      confirmAccountNumber: "",
+      bankName: "",
+      accountType: ""
+    });
+    setAchError({
+      name: "",
+      routingNumber: "",
+      accountNumber: "",
+      confirmAccountNumber: "",
+      bankName: "",
+      accountType: ""
+    });
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setCardError({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setSaveACHinfo(false);
+    setSaveCardInfo(false);
+    setActiveinBank("form");
+    setActiveinCard("form");
+    setIsBankActive(false);
+    setProcessingFee(0);
+    setCashDiscount(0);
+    setCardList([]);
+    setErrorMessage(null);
+    setClientSecret(null);
+    setInitialLoader(false);
+    setIs3DSEnable(false);
+    setStripeResponse(null);
+    setOrderGuid(null);
+    setPartialAmount("");
+    setPartialError("");
+    setRemainingAmount("");
+    setIsBankConsentChecked(false);
+    setErrorBankConsent("");
+    setSaveACHConsent1(false);
+    setErrorBankConsentOther("");
+  };
+  const getCardList = async () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    showLoader();
     try {
-      setInitialLoader(true);
-      const res = await fetch(`${masterBaseUrl}api/v1/gateway/create-payment-intent/${session_token}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ amount, require3ds, pass_fee })
-      });
-      const data = await res.json();
-      if (data.is3dEnable) {
-        setInitialLoader(false);
-        setClientSecret(data.clientSecret);
-        setIs3DSEnable(data.is3dEnable);
+      const data = {
+        isPreAuth,
+        "customerId": customerId
+      };
+      let cardListData = await axios9.post(`${masterBaseUrl}api/v1/gateway/card-list/${session_token}`, data);
+      let savedpaymentsList = ((_b2 = (_a2 = cardListData == null ? void 0 : cardListData.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.cardList) || [];
+      let banklists = savedpaymentsList == null ? void 0 : savedpaymentsList.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
+      let cardlists = savedpaymentsList == null ? void 0 : savedpaymentsList.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
+      if (cardlists && (cardlists == null ? void 0 : cardlists.length) > 0) {
+        setActive("card");
+        setActiveinCard("list");
+        setCardList(cardlists);
+        setLoadingIframe(false);
       } else {
-        setInitialLoader(false);
-        setIs3DSEnable(data.is3dEnable);
+        setActive("card");
+        setCardList([]);
       }
-      if (!data.result) {
-        setError(data.error || (data == null ? void 0 : data.message) || "Failed to get client secret");
+      if (banklists && (banklists == null ? void 0 : banklists.length) > 0) {
+        setActiveinBank("list");
+        setBankList(banklists);
+      } else {
+        setBankList([]);
       }
+      hideLoader();
     } catch (err) {
-      console.log(err.response, "err.response");
-      setError(err.message);
+      console.log(err);
+      hideLoader();
+      callback({
+        error: ((_d2 = (_c2 = err == null ? void 0 : err.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!",
+        result: (_f2 = (_e2 = err == null ? void 0 : err.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.result,
+        statusCode: (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.status
+      });
+      setError(((_i2 = (_h2 = err == null ? void 0 : err.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+    }
+  };
+  const getCardType2 = (card) => {
+    let card_type = card == null ? void 0 : card.toLowerCase();
+    switch (card_type) {
+      case "visa":
+        return visa2;
+      case "mastercard":
+      case "mc":
+      case "m/c":
+        return mastercard2;
+      case "amex":
+      case "american express":
+      case "ae":
+        return americanexp2;
+      case "discover":
+      case "dcvr":
+        return discover2;
+      case "bank":
+        return bank2;
+      default:
+        return card;
+    }
+  };
+  const handleDeleteCard = async (cardId) => {
+    Swal5.fire({
+      icon: "warning",
+      text: "Do you want to delete the card?",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      reverseButtons: true,
+      buttonsStyling: false,
+      customClass: {
+        confirmButton: "swal2-confirm btn btn-dark",
+        cancelButton: "swal2-cancel btn btn-dark",
+        popup: "custom-swal-popup",
+        icon: "custom-swal-icon"
+      }
+    }).then(async (result) => {
+      var _a2, _b2;
+      if (result.isConfirmed) {
+        setLoading2(true);
+        try {
+          let obj = {
+            card_id: cardId,
+            customer_id: customerId
+          };
+          const res = await axios9.patch(`${masterBaseUrl}api/v1/gateway/delete-card/${session_token}`, obj);
+          if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.result) {
+            setLoading2(false);
+            getCardList();
+            Swal5.fire({
+              icon: "success",
+              title: "Deleted!",
+              text: ((_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.message) || "Card deleted.",
+              confirmButtonText: "OK",
+              showConfirmButton: true,
+              timer: 1e3,
+              // auto-close after 1 second
+              timerProgressBar: true,
+              customClass: {
+                confirmButton: "btn btn-dark"
+              }
+            });
+          } else {
+            setLoading2(false);
+            Swal5.fire({
+              icon: "error",
+              title: "Failure!",
+              text: "Card not deleted.",
+              timer: 1e3,
+              // auto-close after 1 second
+              timerProgressBar: true,
+              customClass: {
+                confirmButton: "btn btn-dark"
+              }
+            });
+          }
+        } catch (err) {
+          setLoading2(false);
+          Swal5.fire({
+            icon: "error",
+            title: "Error!",
+            text: "Failed to delete the card.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        }
+      } else if (result.dismiss === Swal5.DismissReason.cancel) {
+        Swal5.fire({
+          icon: "info",
+          text: "Card not deleted",
+          confirmButtonText: "OK",
+          buttonsStyling: false,
+          customClass: {
+            confirmButton: "btn btn-dark float-end",
+            actions: "swal2-actions-end"
+          }
+        });
+      }
+    });
+  };
+  const handlechargeCustomer = async (e) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    e == null ? void 0 : e.currentTarget.blur();
+    if (loading) return;
+    let customer_id = customerId;
+    let card_id = selectedCard == null ? void 0 : selectedCard.id;
+    let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
+    if (partialError) {
+      return;
+    }
+    if (amount) {
+      if (customer_id) {
+        if (card_id) {
+          let chargeobj = {
+            amount: (card_type == null ? void 0 : card_type.toLowerCase()) === "bank" ? `${bankAmount}` : partialAmount ? partialAmount : amount,
+            customer_id,
+            card_id,
+            pass_fee,
+            pass_fee_amount: Number(amount) - cashDiscount
+          };
+          if (isPartial) {
+            chargeobj.orderGuid = orderGuid || ordGuid;
+            if (partialAmount) {
+              chargeobj.ispartialPayment = true;
+            }
+          }
+          if (isPreAuth) {
+            chargeobj.isPreauth = true;
+          }
+          let chargeurl = masterBaseUrl + "api/v1/gateway/charge-by-saved-details/" + session_token;
+          const headers = {
+            "Content-Type": "application/json"
+          };
+          try {
+            showLoader();
+            const response = await axios9.post(chargeurl, chargeobj);
+            if ((_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.result) {
+              callback({ callback: __spreadProps(__spreadValues({}, (_b2 = response == null ? void 0 : response.data) == null ? void 0 : _b2.data), { isPreAuth }) });
+              hideLoader();
+              handleClose();
+            }
+          } catch (error2) {
+            console.log(error2 == null ? void 0 : error2.response, "error by saved details");
+            callback({
+              error: ((_d2 = (_c2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || "Something went wrong!",
+              result: (_f2 = (_e2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.result,
+              statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
+            });
+            hideLoader();
+          }
+        } else {
+          setError("Please Select A Card/Bank");
+          callback({
+            error: "Please Select A Card/Bank"
+          });
+        }
+      } else {
+        setError("Please Select Customer");
+        callback({
+          error: "Please Select Customer"
+        });
+      }
+    } else {
+      setError("Something went wrong.");
+      callback({
+        error: "Something went wrong."
+      });
+    }
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    try {
+      showLoader();
+      const res = await axios9.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`, {
+        params: {
+          require3ds,
+          pass_fee
+        }
+      });
+      if ((res == null ? void 0 : res.status) == 200) {
+        setIsBankActive((_b2 = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.isBankActive);
+        setProcessingFee(Number((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.fee) || 0);
+        setPaymentGateway((_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.paymentGateway);
+        setDCToken((_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.data) == null ? void 0 : _h2.dctoken);
+        hideLoader();
+      }
+    } catch (error2) {
+      console.log((_j2 = (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.data) == null ? void 0 : _j2.result, "error while getting payment details");
+      callback({
+        error: ((_l2 = (_k2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || "Something went wrong!",
+        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();
+    }
+  };
+  const crateOrderFrac = async () => {
+    var _a2, _b2, _c2, _d2, _e2;
+    if (orderLoader) return;
+    setOrderLoader(true);
+    try {
+      const res = await axios9.post(`${masterBaseUrl}api/v1/gateway/create-pay-order/${session_token}`, {
+        amount,
+        cashDiscount,
+        bankAmount,
+        bankSurcharge,
+        customerId,
+        passFee: pass_fee,
+        passFeeAmount: pass_fee_amount ? pass_fee_amount : Number(amount) - cashDiscount,
+        require3ds,
+        isPartial
+      });
+      if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.result) {
+        setOrderLoader(false);
+        setOrderGuid((_c2 = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.orderGuid);
+        setRemainingAmount((_e2 = (_d2 = res == null ? void 0 : res.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.remainingAmount);
+        hasRunRef.current = true;
+      }
+    } catch (error2) {
+      console.log("error in creating order", error2);
+      setOrderLoader(false);
+    }
+  };
+  useEffect18(() => {
+    if (!show && !autoTrigger) {
+      hasRunRef.current = false;
+      cardListRunRef.current = false;
+    }
+  }, [show, autoTrigger]);
+  useEffect18(() => {
+    if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
+      getPaymentDetails();
+      if (isPartial && !partialRef) {
+        crateOrderFrac();
+      }
+    }
+  }, [show, autoTrigger, isPartial, onLoad]);
+  useEffect18(() => {
+    if ((show || autoTrigger) && pass_fee_amount) {
+      let cashdisc = Number(amount) - Number(pass_fee_amount);
+      if (cashdisc && !isNaN(cashdisc)) {
+        setCashDiscount(cashdisc);
+      }
+    } else if ((show || autoTrigger) && pass_fee && processingFee) {
+      let cashdisc = CalculateCashDiscount(amount, processingFee);
+      if (cashdisc && !isNaN(cashdisc)) {
+        setCashDiscount(cashdisc);
+      }
+    } else {
+      setCashDiscount(Number(amount));
+    }
+    if (!cardListRunRef.current && customerId && (show || autoTrigger) && !isRequest) {
+      cardListRunRef.current = true;
+      getCardList();
+    }
+  }, [customerId, show, amount, processingFee, autoTrigger]);
+  const getHeading = () => {
+    if (isPreAuth) {
+      return "Cards";
+    } else {
+      return "Cards/Bank";
+    }
+  };
+  const fetchClientSecret = useCallback(async () => {
+    try {
+      setInitialLoader(true);
+      const res = await fetch(`${masterBaseUrl}api/v1/gateway/create-payment-intent/${session_token}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ amount, require3ds, pass_fee })
+      });
+      const data = await res.json();
+      if (data.is3dEnable) {
+        setInitialLoader(false);
+        setClientSecret(data.clientSecret);
+        setIs3DSEnable(data.is3dEnable);
+      } else {
+        setInitialLoader(false);
+        setIs3DSEnable(data.is3dEnable);
+      }
+      if (!data.result) {
+        setError(data.error || (data == null ? void 0 : data.message) || "Failed to get client secret");
+      }
+    } catch (err) {
+      console.log(err.response, "err.response");
+      setError(err.message);
+    }
+  }, [amount]);
+  const onSuccess = () => {
+  };
+  const handleSuccess = (token, intentId) => {
+    showLoader();
+    completeFractalFlow(token, intentId);
+    setStripeResponse(null);
+  };
+  const handleError = (status) => {
+    console.error("3DS Auth failed \u274C", status);
+    setError(`3DS Authentication ${status}`);
+  };
+  useEffect18(() => {
+    if (setHandleCloseRef) {
+      setHandleCloseRef(() => handleClose);
+    }
+  }, []);
+  const handlePartialChange = (values) => {
+    var _a2, _b2;
+    if (((_a2 = Number(remainingAmount || remAmount)) == null ? void 0 : _a2.toFixed(2)) < (values == null ? void 0 : values.floatValue) || (values == null ? void 0 : values.floatValue) < 0) {
+      setPartialAmount(values == null ? void 0 : values.value);
+      setPartialError(`Partial amount cannot exceed ${formatUSD((_b2 = Number(remainingAmount || remAmount)) == null ? void 0 : _b2.toFixed(2))}`);
+    } else if ((values == null ? void 0 : values.floatValue) == 0) {
+      setPartialAmount(values == null ? void 0 : values.value);
+      setPartialError("Partial amount must be greater than 0");
+    } else {
+      setPartialAmount(values == null ? void 0 : values.value);
+      setPartialError("");
+    }
+  };
+  useEffect18(() => {
+    if (typeof FractalTokenizer === "undefined") return;
+    const tokenizer = new FractalTokenizer({
+      styles: {}
+    });
+  }, []);
+  const stateRef = useRef12({
+    activeinBank,
+    activeinCard,
+    activetab
+  });
+  useEffect18(() => {
+    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();
+      }
+    }
+  }, []);
+  useEffect18(() => {
+    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__ */ jsx36("img", { src: visa2, alt: "visa", width: 33 });
+      case "mastercard":
+        return /* @__PURE__ */ jsx36("img", { src: mastercard2, width: 33, alt: "mastercard" });
+      case "amex":
+        return /* @__PURE__ */ jsx36("img", { src: americanexp2, alt: "amex", width: 33 });
+      case "discover":
+        return /* @__PURE__ */ jsx36("img", { src: discover2, width: 33, alt: "discover" });
+      case "diners":
+        return /* @__PURE__ */ jsx36("img", { src: dinersicon, alt: "Diners Club" });
+      case "jcb":
+        return /* @__PURE__ */ jsx36("img", { src: jcbicon, alt: "JCB" });
+      case "unionpay":
+        return /* @__PURE__ */ jsx36("img", { src: unionicon, alt: "UnionPay" });
+      default:
+        return /* @__PURE__ */ jsx36("img", { src: defualtcardborder, alt: "card" });
+    }
+  }
+  return /* @__PURE__ */ jsxs21(Fragment20, { children: [
+    (initialLoader || !onLoad) && /* @__PURE__ */ jsx36(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
+    error && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
+    errorIframe && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
+      setErrorIframe("");
+    }, autoTrigger: onSubmit ? !onSubmit : autoTrigger }) }),
+    /* @__PURE__ */ jsxs21(Fragment20, { children: [
+      (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx36(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
+      /* @__PURE__ */ jsxs21("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
+        /* @__PURE__ */ jsx36("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
+        (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx36(
+          ThreeDSChallenge,
+          {
+            containerRef: threeDSContainerRef,
+            challengeUrl: stripeResponse.challenge_url,
+            fractalToken: stripeResponse.fractalToken,
+            stripeIntentId: stripeResponse.id,
+            onSuccess: handleSuccess,
+            onError: handleError
+          }
+        ) : /* @__PURE__ */ jsxs21("div", { className: "parent-pay-container", children: [
+          /* @__PURE__ */ jsx36("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs21("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsx36("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx36("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__ */ jsx36("defs", { children: /* @__PURE__ */ jsx36("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx36("rect", { width: "16", height: "16", fill: "white" }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx36("div", { className: "pay-main-logo-res" }),
+          /* @__PURE__ */ jsxs21("div", { className: onSubmit ? "pay-container frac-pay-container " : "pay-container", children: [
+            !onSubmit && /* @__PURE__ */ jsxs21("div", { className: "pay-header pay-conatiner-one", children: [
+              /* @__PURE__ */ jsxs21("div", { className: "pay-conatiner-one-first", children: [
+                /* @__PURE__ */ jsxs21("div", { className: "pay-logo-container", children: [
+                  /* @__PURE__ */ jsx36("div", { className: "pay-main-logo" }),
+                  /* @__PURE__ */ jsx36("h1", { className: "pay-heading", children: "Pay" }),
+                  (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs21("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
+                    " ",
+                    /* @__PURE__ */ jsx36(IoArrowBack4, {}),
+                    " Back"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx36("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs21("div", { className: "pay-amount-conatiner", children: [
+                  /* @__PURE__ */ jsx36("small", { className: "pay-payment-amount", children: "Select payment type" }),
+                  /* @__PURE__ */ jsxs21("div", { className: "frac-card-bank-radio-main", children: [
+                    /* @__PURE__ */ jsx36(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
+                    !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx36(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+                  ] }),
+                  isPartial && /* @__PURE__ */ jsxs21("div", { className: "frac-partial-payment-input", children: [
+                    /* @__PURE__ */ jsx36("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
+                    /* @__PURE__ */ jsx36(
+                      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,
+                        isAllowed: (values) => {
+                          const { floatValue = 0, value } = values;
+                          if (value === "") return true;
+                          if (value === "0" || value.startsWith("0.")) return true;
+                          if (floatValue === 0) return false;
+                          return floatValue > 0;
+                        }
+                      }
+                    ),
+                    partialError && /* @__PURE__ */ jsx36("span", { className: "error-span", children: partialError })
+                  ] })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs21("div", { className: "pay-conatiner-one-last", children: [
+                /* @__PURE__ */ jsx36("img", { src: secure2, alt: "" }),
+                /* @__PURE__ */ jsx36("img", { src: pov2, alt: "" }),
+                "Secure payments powered by Fractal"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx36("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx36("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs21("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
+              onSubmit && /* @__PURE__ */ jsx36("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs21("div", { className: "pay-amount-conatiner", children: [
+                /* @__PURE__ */ jsxs21("div", { className: "frac-card-bank-radio-main", children: [
+                  /* @__PURE__ */ jsx36(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
+                  !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx36(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+                ] }),
+                isPartial && /* @__PURE__ */ jsxs21("div", { className: "frac-partial-payment-input", children: [
+                  /* @__PURE__ */ jsx36("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
+                  /* @__PURE__ */ jsx36(
+                    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__ */ jsx36("span", { className: "error-span", children: partialError })
+                ] })
+              ] }) }),
+              is3DSEnable ? clientSecret && /* @__PURE__ */ jsx36(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                /* @__PURE__ */ jsxs21("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
+                  !onSubmit && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                    /* @__PURE__ */ jsxs21("div", { className: "frac-heading-card-wrap", children: [
+                      /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs21("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
+                        " ",
+                        /* @__PURE__ */ jsx36(IoArrowBack4, {})
+                      ] }) }),
+                      /* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
+                    ] }),
+                    /* @__PURE__ */ jsxs21("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
+                      /* @__PURE__ */ jsx36("img", { src: visa2, alt: "", width: 33 }),
+                      /* @__PURE__ */ jsx36("img", { src: mastercard2, width: 33, alt: "" }),
+                      /* @__PURE__ */ jsx36("img", { src: americanexp2, alt: "", width: 33 }),
+                      /* @__PURE__ */ jsx36("img", { src: discover2, width: 33, alt: "" })
+                    ] })
+                  ] }),
+                  activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                    /* @__PURE__ */ jsx36(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
+                      setActiveinCard("form");
+                    } }),
+                    /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx36("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__ */ jsxs21(Fragment20, { children: [
+                    onSubmit && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                      /* @__PURE__ */ jsx36(
+                        ApplePayButton,
+                        {
+                          applePayAmount: partialAmount ? partialAmount : amount,
+                          applePayMerchantId,
+                          applePayMerchantName: merchantName,
+                          completeFractalFlow,
+                          showLoader
+                        }
+                      ),
+                      /* @__PURE__ */ jsx36(
+                        GooglePayComponent,
+                        {
+                          amount: partialAmount ? partialAmount : amount,
+                          googlePayEnvironment,
+                          googlePayGatewayMerchantId,
+                          googlePayMerchantId,
+                          googlePayMerchantName: merchantName,
+                          completeFractalFlow,
+                          setLoading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx36("div", { id: "digital-wallet-or", className: "frac-or", children: /* @__PURE__ */ jsx36("span", { children: "or" }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs21("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
+                      if (e.key === "Enter" && loading) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }
+                    }, children: [
+                      /* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
+                        /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                          /* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                          /* @__PURE__ */ jsx36("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__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
+                        ] }),
+                        /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                          /* @__PURE__ */ jsx36("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
+                          /* @__PURE__ */ jsx36("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx36(
+                            FractalFields_default,
+                            {
+                              fractalStyles,
+                              tokenizerRef,
+                              isSky: true
+                            }
+                          ) })
+                        ] }),
+                        /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                          /* @__PURE__ */ jsx36("label", { htmlFor: "zip", children: "ZIP" }),
+                          /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                          (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
+                          pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
+                            "Credit cards include a fee amount of ",
+                            /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
+                            "."
+                          ] })
+                        ] }),
+                        customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                          /* @__PURE__ */ jsx36(
+                            "input",
+                            {
+                              type: "checkbox",
+                              id: "save_card",
+                              className: "toggle-checkbox",
+                              checked: saveCardInfo,
+                              onChange: (e) => setSaveCardInfo(e.target.checked)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", className: "toggle-label" }),
+                          /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                          /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-wrapper", children: [
+                            /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs21(
+                              "svg",
+                              {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "20",
+                                height: "20",
+                                viewBox: "0 0 20 20",
+                                fill: "none",
+                                children: [
+                                  /* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                                  /* @__PURE__ */ jsx36(
+                                    "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__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
+                              "If checked, I agree to give the ",
+                              /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
+                              " permission to charge this credit card for agreed-upon purchases in the future."
+                            ] }) })
+                          ] })
+                        ] }) })
+                      ] }),
+                      /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("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__ */ jsxs21("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
+                    if (e.key === "Enter" && loading) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }
+                  }, children: [
+                    /* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                        /* @__PURE__ */ jsx36("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__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
+                      ] }),
+                      /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx36(
+                        DataCapFields,
+                        {
+                          isOpen: show || autoTrigger,
+                          tokenKey: dcToken,
+                          setLoader: activeinCard === "form" ? setLoadingIframe : null,
+                          isEmbedded: onSubmit ? true : false,
+                          customCSS: customCSS2
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "zip", children: "ZIP" }),
+                        /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
+                        (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
+                        pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
+                          "Credit cards include a fee amount of ",
+                          /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
+                          "."
+                        ] })
+                      ] }),
+                      customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                        /* @__PURE__ */ jsx36(
+                          "input",
+                          {
+                            type: "checkbox",
+                            id: "save_card",
+                            className: "toggle-checkbox",
+                            checked: saveCardInfo,
+                            onChange: (e) => setSaveCardInfo(e.target.checked)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", className: "toggle-label" }),
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                        /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-wrapper", children: [
+                          /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs21(
+                            "svg",
+                            {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "20",
+                              height: "20",
+                              viewBox: "0 0 20 20",
+                              fill: "none",
+                              children: [
+                                /* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                                /* @__PURE__ */ jsx36(
+                                  "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__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
+                            "If checked, I agree to give the ",
+                            /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
+                            " permission to charge this credit card for agreed-upon purchases in the future."
+                          ] }) })
+                        ] })
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("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__ */ jsx36("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                  !onSubmit && /* @__PURE__ */ jsxs21("div", { className: "frac-heading-card-wrap", children: [
+                    /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs21("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
+                      " ",
+                      /* @__PURE__ */ jsx36(IoArrowBack4, {})
+                    ] }) }),
+                    /* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
+                  ] }),
+                  activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                    /* @__PURE__ */ jsx36(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
+                      setActiveinBank("form");
+                    } }),
+                    /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
+                  ] }) : /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { className: "ach-scrl", style: {
+                      minHeight: "444px",
+                      maxHeight: "444px"
+                    }, children: [
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "nameonaccount", children: "Name on account" }),
+                        /* @__PURE__ */ jsx36("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__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "routingnumber", children: "Routing number" }),
+                        /* @__PURE__ */ jsx36(
+                          "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__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "accountnumber", children: "Account number" }),
+                        /* @__PURE__ */ jsx36(
+                          "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__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
+                        /* @__PURE__ */ jsx36(
+                          "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__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "bankname", children: "Bank name" }),
+                        /* @__PURE__ */ jsx36(
+                          "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__ */ jsx36("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__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "companyName", children: "Company name" }),
+                        /* @__PURE__ */ jsx36(
+                          "input",
+                          {
+                            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
+                          }
+                        ),
+                        (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
+                        /* @__PURE__ */ jsx36("label", { htmlFor: "accounttype", children: "Select account type" }),
+                        /* @__PURE__ */ jsxs21("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
+                          /* @__PURE__ */ jsx36("option", { value: "", children: "Select account" }),
+                          accountTypes.map((type) => /* @__PURE__ */ jsx36("option", { value: type.value, children: type.label }, type.value))
+                        ] }),
+                        bankFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
+                          "There is a processing fee of ",
+                          /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
+                          "."
+                        ] }),
+                        !saveACHinfo && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                          /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                            /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                              setIsBankConsentChecked(e.target.checked);
+                              if (e.target.checked) {
+                                setErrorBankConsent("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                          ] }),
+                          errorBankConsent && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsent })
+                        ] }),
+                        customerId && /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                          /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => {
+                            setSaveACHinfo(e.target.checked);
+                            if (!e.target.checked) {
+                              setSaveACHConsent1(false);
+                              setErrorBankConsentOther("");
+                            }
+                          } }),
+                          /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save for future use" })
+                        ] }),
+                        saveACHinfo && /* @__PURE__ */ jsxs21(Fragment20, { children: [
+                          /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
+                            /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                              setSaveACHConsent1(e.target.checked);
+                              if (e.target.checked) {
+                                setErrorBankConsentOther("");
+                              }
+                            } }),
+                            /* @__PURE__ */ jsxs21("label", { className: "saveachlabel", htmlFor: "saveACHConsent1", children: [
+                              "By providing my bank account information and selecting \u2018Save for future payments\u2019, I authorize ",
+                              merchantName || "merchant",
+                              "  to store my bank account details for future ACH payments. I understand that future payments may be initiated using this saved account in accordance with my instructions. I confirm I am authorized to use this bank account."
+                            ] })
+                          ] }),
+                          errorBankConsentOther && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsentOther })
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx36("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "20px 0 0", display: onSubmit ? "none" : "block" }, type: "submit", children: formatUSD((_u = Number(bankAmount)) == null ? void 0 : _u.toFixed(2)) }) })
+                  ] })
+                ] }) })
+              ] })
+            ] }) }) })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var ModelContentSky_default = ModelContentSky;
+
+// src/app/components/Skysystemz/PayButtonWithForm.tsx
+import axios10 from "axios";
+import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var PaymentWidget = ({
+  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,
+  customCSS: customCSS2,
+  disableSubmitBtn = false
+}) => {
+  const [show, setShow] = useState12(autoTrigger || false);
+  const [loading, setLoading] = useState12(false);
+  const [childHandleClose, setChildHandleClose] = useState12(() => () => {
+  });
+  const [orderGuid, setOrderGuid] = useState12(null);
+  const [remainingAmount, setRemainingAmount] = useState12(null);
+  const initialCommonProps = useMemo(
+    () => ({
+      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,
+      customCSS: customCSS2,
+      disableSubmitBtn
+    }),
+    [
+      amount,
+      bankAmount,
+      submitBtnText,
+      session_token,
+      customerId,
+      callback,
+      merchantName,
+      isPreAuth,
+      surcharge,
+      submitBtnClass,
+      submitBtnIcon,
+      isRequest,
+      pass_fee,
+      pass_fee_amount,
+      require3ds,
+      autoTrigger,
+      isPartial,
+      bankSurcharge,
+      partialRef,
+      disableSubmitBtn
+    ]
+  );
+  const [commonProps, setCommonProps] = useState12(initialCommonProps);
+  useEffect19(() => {
+    if (show) {
+      setCommonProps(initialCommonProps);
+    }
+  }, [show, initialCommonProps]);
+  const getskyosOrderDetails = async () => {
+    var _a;
+    setLoading(true);
+    try {
+      const res = await axios10.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);
+    }
+  };
+  useEffect19(() => {
+    if (show && isPartial && partialRef) {
+      getskyosOrderDetails();
+    }
+  }, [show, isPartial, partialRef]);
+  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, {}),
+    !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", disabled: disableSubmitBtn, onClick: () => setShow(true), children: [
+      submitBtnText,
+      submitBtnIcon
+    ] }),
+    !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
+  ] });
+};
+
+// src/app/components/Skysystemz/EmbeddedCheckout.tsx
+import { useEffect as useEffect21, useState as useState13, useMemo as useMemo2 } from "react";
+import axios11 from "axios";
+
+// src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+function EmbeddedCheckoutStyles({ extraCustomCSS }) {
+  return /* @__PURE__ */ jsx38("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;
     }
-  }, [amount]);
-  const onSuccess = () => {
-  };
-  const handleSuccess = (token, intentId) => {
-    showLoader();
-    completeFractalFlow(token, intentId);
-    setStripeResponse(null);
-  };
-  const handleError = (status) => {
-    console.error("3DS Auth failed \u274C", status);
-    setError(`3DS Authentication ${status}`);
-  };
-  useEffect15(() => {
-    if (setHandleCloseRef) {
-      setHandleCloseRef(() => handleClose);
     }
-  }, []);
-  const handlePartialChange = (values) => {
-    var _a2, _b2;
-    if (((_a2 = Number(remainingAmount || remAmount)) == null ? void 0 : _a2.toFixed(2)) < (values == null ? void 0 : values.floatValue) || (values == null ? void 0 : values.floatValue) < 0) {
-      setPartialAmount(values == null ? void 0 : values.value);
-      setPartialError(`Partial amount cannot exceed ${formatUSD((_b2 = Number(remainingAmount || remAmount)) == null ? void 0 : _b2.toFixed(2))}`);
-    } else if ((values == null ? void 0 : values.floatValue) == 0) {
-      setPartialAmount(values == null ? void 0 : values.value);
-      setPartialError("Partial amount must be greater than 0");
+}
+.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/Atoms/Applepay/ApplePayScriptLoader.tsx
+import { useEffect as useEffect20 } from "react";
+var applePayScriptLoaded = false;
+var ApplePayScriptLoader = () => {
+  useEffect20(() => {
+    if (applePayScriptLoaded) return;
+    const existingScript = document.querySelector(
+      `script[src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"]`
+    );
+    if (!existingScript) {
+      const script2 = document.createElement("script");
+      script2.src = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js";
+      script2.async = true;
+      script2.onload = () => {
+        console.log("\u2705 Apple Pay script loaded");
+        applePayScriptLoaded = true;
+        console.log("ApplePaySession:", window.ApplePaySession);
+      };
+      script2.onerror = (err) => {
+        console.error("\u274C Apple Pay script failed", err);
+      };
+      document.head.appendChild(script2);
     } else {
-      setPartialAmount(values == null ? void 0 : values.value);
-      setPartialError("");
+      applePayScriptLoaded = true;
     }
-  };
-  useEffect15(() => {
-    if (typeof FractalTokenizer === "undefined") return;
-    const tokenizer = new FractalTokenizer({
-      styles: {}
-    });
   }, []);
-  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("");
-    } }) }),
-    !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,
-            challengeUrl: stripeResponse.challenge_url,
-            fractalToken: stripeResponse.fractalToken,
-            stripeIntentId: stripeResponse.id,
-            onSuccess: handleSuccess,
-            onError: handleError
-          }
-        ) : /* @__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__ */ 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__ */ jsx32(IoArrowBack4, {}),
-                    " Back"
-                  ] })
-                ] }),
-                /* @__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 })
-                  ] }),
-                  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: "$",
-                        className: "form-control-frac",
-                        value: partialAmount,
-                        onValueChange: (values) => {
-                          handlePartialChange(values);
-                        },
-                        thousandSeparator: true,
-                        placeholder: "Enter partial amount",
-                        allowNegative: false,
-                        allowLeadingZeros: false,
-                        decimalScale: 2,
-                        fixedDecimalScale: true,
-                        isAllowed: (values) => {
-                          const { floatValue = 0, value } = values;
-                          if (value === "") return true;
-                          if (value === "0" || value.startsWith("0.")) return true;
-                          if (floatValue === 0) return false;
-                          return floatValue > 0;
-                        }
-                      }
-                    ),
-                    partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
-                  ] })
-                ] }) })
-              ] }),
-              /* @__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__ */ 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" })
-                ] }),
-                /* @__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__ */ 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__ */ 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",
-                        {
-                          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",
-                          {
-                            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__ */ 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((_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",
-                          {
-                            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__ */ 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__ */ 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)) }) })
-                ] })
-              ] }) })
-            ] }) }) }) })
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
+  return null;
 };
-var ModelContentSky_default = ModelContentSky;
 
-// src/app/components/Skysystemz/PayButtonWithForm.tsx
-import axios10 from "axios";
-import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
-var PaymentWidget = ({
+// src/app/components/Skysystemz/EmbeddedCheckout.tsx
+import { Fragment as Fragment22, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+var EmbeddedCheckout = ({
   amount,
   bankAmount,
   submitBtnText = "Pay",
@@ -10953,15 +12371,18 @@ var PaymentWidget = ({
   autoTrigger = false,
   isPartial,
   bankSurcharge,
-  partialRef
+  partialRef,
+  onSubmit,
+  onLoad,
+  customCSS: customCSS2
 }) => {
-  const [show, setShow] = useState11(autoTrigger || false);
-  const [loading, setLoading] = useState11(false);
-  const [childHandleClose, setChildHandleClose] = useState11(() => () => {
+  const [show, setShow] = useState13(false);
+  const [loading, setLoading] = useState13(false);
+  const [childHandleClose, setChildHandleClose] = useState13(() => () => {
   });
-  const [orderGuid, setOrderGuid] = useState11(null);
-  const [remainingAmount, setRemainingAmount] = useState11(null);
-  const initialCommonProps = useMemo(
+  const [orderGuid, setOrderGuid] = useState13(null);
+  const [remainingAmount, setRemainingAmount] = useState13(null);
+  const initialCommonProps = useMemo2(
     () => ({
       amount,
       bankAmount,
@@ -11007,8 +12428,8 @@ var PaymentWidget = ({
       partialRef
     ]
   );
-  const [commonProps, setCommonProps] = useState11(initialCommonProps);
-  useEffect16(() => {
+  const [commonProps, setCommonProps] = useState13(initialCommonProps);
+  useEffect21(() => {
     if (show) {
       setCommonProps(initialCommonProps);
     }
@@ -11017,7 +12438,7 @@ var PaymentWidget = ({
     var _a;
     setLoading(true);
     try {
-      const res = await axios10.get(
+      const res = await axios11.get(
         `${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
         { params: { isPartial, partialRef } }
       );
@@ -11039,29 +12460,44 @@ var PaymentWidget = ({
       setLoading(false);
     }
   };
-  useEffect16(() => {
+  useEffect21(() => {
     if (show && isPartial && partialRef) {
       getskyosOrderDetails();
     }
   }, [show, isPartial, partialRef]);
-  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: [
+  console.log(onLoad, "onLoad");
+  useEffect21(() => {
+    const supported = !!window.ApplePaySession;
+    let canPay = false;
+    if (supported) {
+      try {
+        canPay = window.ApplePaySession.canMakePayments();
+      } catch (e) {
+      }
+    }
+    console.log(`ApplePaySession: ${supported}, canMakePayments: ${canPay}`);
+  }, []);
+  return /* @__PURE__ */ jsxs23(Fragment22, { children: [
+    /* @__PURE__ */ jsx39("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
+    /* @__PURE__ */ jsx39(DataScript, {}),
+    /* @__PURE__ */ jsx39(FractalTokenizerScript, {}),
+    /* @__PURE__ */ jsx39(SkyChargewidgetstyles, {}),
+    /* @__PURE__ */ jsx39(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx39(CustomModal2styles_default, {}),
+    /* @__PURE__ */ jsx39(DataCapScriptLoader, {}),
+    /* @__PURE__ */ jsx39(ApplePayScriptLoader, {}),
+    /* @__PURE__ */ jsx39(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
+    !autoTrigger && /* @__PURE__ */ jsxs23("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
     ] }),
-    !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 }))
+    !autoTrigger ? /* @__PURE__ */ jsx39(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx39(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx39(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
   ] });
 };
 export {
   AddCardEasyPay as AddCard,
   CardOnFile,
+  EmbeddedCheckout,
   GetPaymentPage,
   PartialPayment,
   PaymentWidget,