@fractalpay/fractalpay-next 0.0.42 → 0.0.44

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next",
-      version: "0.0.42",
+      version: "0.0.44",
       private: false,
       type: "module",
       scripts: {
@@ -2816,25 +2816,25 @@ import { IoArrowBack } from "react-icons/io5";
 import { useEffect as useEffect3 } from "react";
 function DataScript() {
   useEffect3(() => {
-    const src2 = datacapUrl;
+    const src = datacapUrl;
     if (typeof window === "undefined") return;
     if (window.DatacapWebToken) {
       return;
     }
-    if (!document.querySelector(`script[src="${src2}"]`)) {
-      const script2 = document.createElement("script");
-      script2.src = src2;
-      script2.async = true;
-      script2.onload = () => {
+    if (!document.querySelector(`script[src="${src}"]`)) {
+      const script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.onload = () => {
         if (window.DatacapWebToken) {
         } else {
           console.warn("\u26A0\uFE0F Script loaded, but DatacapWebToken not found");
         }
       };
-      script2.onerror = (err) => {
+      script.onerror = (err) => {
         console.error("\u274C Failed to load Datacap script", err);
       };
-      document.head.appendChild(script2);
+      document.head.appendChild(script);
     } else {
     }
   }, []);
@@ -3214,21 +3214,31 @@ var PaxList = ({ listHeading = "Readers", ListItems, selectedPax, setSlectedPax,
 
 // src/app/components/FractalTokenizer.tsx
 import { useEffect as useEffect4 } from "react";
-function FractalTokenizerScript() {
+function FractalTokenizerScript({ onLoad }) {
   useEffect4(() => {
     const src = `${fractalGatewayUrl}tokenizer/static/js/fractal_tokenizer.js`;
-    if (document.querySelector(`script[src="${src}"]`)) return;
+    if (window.FractalTokenizer) {
+      onLoad == null ? void 0 : onLoad();
+      return;
+    }
+    const existing = document.querySelector(`script[src="${src}"]`);
+    if (existing) {
+      existing.addEventListener("load", () => onLoad == null ? void 0 : onLoad());
+      return;
+    }
     const script = document.createElement("script");
     script.src = src;
     script.async = true;
     script.onload = () => {
       try {
-        const TokenizerClass = eval("FractalTokenizer");
-        if (TokenizerClass) {
-          window.FractalTokenizer = TokenizerClass;
+        if (typeof FractalTokenizer !== "undefined") {
+          window.FractalTokenizer = FractalTokenizer;
+          onLoad == null ? void 0 : onLoad();
+        } else {
+          console.error("FractalTokenizer not defined in global scope");
         }
       } catch (err) {
-        console.error("FractalTokenizer not accessible:", err);
+        console.error(err);
       }
     };
     document.head.appendChild(script);
@@ -3242,8 +3252,12 @@ import { Fragment as Fragment10, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-
 var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = false }) => {
   const instanceRef = useRef(null);
   useEffect5(() => {
-    if (!window.FractalTokenizer) return;
-    const instance = new window.FractalTokenizer({
+    const Tokenizer = window.FractalTokenizer;
+    if (!Tokenizer) {
+      console.error("Tokenizer not available");
+      return;
+    }
+    const instance = new Tokenizer({
       styles: fractalStyles
     });
     instanceRef.current = instance;
@@ -3344,30 +3358,62 @@ var FractalFields_default = FractalFields;
 
 // src/app/components/Datacap-Payment/DataCapScriptLoader.tsx
 import { useEffect as useEffect6 } from "react";
-var scriptLoaded = false;
-var DataCapScriptLoader = () => {
+var DataCapScriptLoader = ({
+  onReady,
+  onError
+}) => {
   useEffect6(() => {
-    if (scriptLoaded) {
+    const src = `${datacapUrl}/hosted`;
+    if (window.__DATACAP_SCRIPT_LOADED__ && window.DatacapHostedWebToken) {
+      onReady == null ? void 0 : onReady();
       return;
     }
+    if (window.__DATACAP_SCRIPT_LOADING__) {
+      const interval = setInterval(() => {
+        if (window.DatacapHostedWebToken) {
+          clearInterval(interval);
+          onReady == null ? void 0 : onReady();
+        }
+      }, 100);
+      return () => clearInterval(interval);
+    }
+    window.__DATACAP_SCRIPT_LOADING__ = true;
     const existingScript = document.querySelector(
-      `script[src="${datacapUrl}/hosted"]`
+      `script[src="${src}"]`
     );
-    console.log("\u{1F535} existingScript found:", !!existingScript);
-    if (!existingScript) {
-      const script2 = document.createElement("script");
-      script2.src = `${datacapUrl}/hosted`;
-      script2.async = true;
-      script2.onload = () => {
-        console.log("\u2705 DataCap script loaded successfully");
-        scriptLoaded = true;
-      };
-      script2.onerror = (err) => {
-        console.error("\u274C DataCap script failed to load", err);
-      };
-      document.head.appendChild(script2);
-    } else {
-      scriptLoaded = true;
+    if (existingScript) {
+      waitForSDK();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.onload = () => {
+      waitForSDK();
+    };
+    script.onerror = (err) => {
+      console.error("Datacap script failed");
+      window.__DATACAP_SCRIPT_LOADING__ = false;
+      onError == null ? void 0 : onError(err);
+    };
+    document.head.appendChild(script);
+    function waitForSDK() {
+      let attempts = 0;
+      const interval = setInterval(() => {
+        attempts++;
+        if (window.DatacapHostedWebToken) {
+          clearInterval(interval);
+          window.__DATACAP_SCRIPT_LOADING__ = false;
+          window.__DATACAP_SCRIPT_LOADED__ = true;
+          console.log("\u2705 Datacap SDK Ready");
+          onReady == null ? void 0 : onReady();
+        }
+        if (attempts > 100) {
+          clearInterval(interval);
+          window.__DATACAP_SCRIPT_LOADING__ = false;
+          onError == null ? void 0 : onError("SDK bootstrap timeout");
+        }
+      }, 100);
     }
   }, []);
   return null;
@@ -3376,7 +3422,7 @@ var DataCapScriptLoader = () => {
 // src/app/components/Datacap-Payment/DataCapFields.tsx
 import { useEffect as useEffect7, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var customCSS = `
+var baseCSS = `
     body { 
       margin: 0; 
       font-family: 'IBM Plex Mono', monospace !important; 
@@ -3453,6 +3499,8 @@ var customCSS = `
     }
 
   `;
+var datacapInitializing = false;
+var datacapInitialized = false;
 var DataCapFields = ({
   isOpen,
   tokenKey,
@@ -3465,6 +3513,7 @@ var DataCapFields = ({
   const iframeId = "datacap-iframe";
   const resolverRef = useRef2(null);
   const [iframeReady, setIframeReady] = useState3(false);
+  let customCSS = baseCSS;
   useEffect7(() => {
     if (!isOpen || !tokenKey) return;
     if (isAddCard) {
@@ -3509,11 +3558,13 @@ var DataCapFields = ({
       const waitForSDK = () => new Promise((resolve, reject) => {
         let attempts = 0;
         const interval = setInterval(() => {
+          attempts++;
           if (window.DatacapHostedWebToken) {
             clearInterval(interval);
+            console.log("\u2705 Datacap SDK Ready");
             resolve();
           }
-          if (attempts++ > 50) {
+          if (attempts > 100) {
             clearInterval(interval);
             reject("Datacap SDK not loaded");
           }
@@ -3521,10 +3572,28 @@ var DataCapFields = ({
       });
       await waitForSDK();
       const sdk = window.DatacapHostedWebToken;
+      if (datacapInitializing || datacapInitialized) {
+        console.log("\u{1F7E1} Datacap already initializing/initialized");
+        return;
+      }
+      datacapInitializing = true;
+      const initTimeout = setTimeout(() => {
+        var _a, _b;
+        console.error("\u274C Datacap iframe load timeout");
+        datacapInitializing = false;
+        setLoader == null ? void 0 : setLoader(false);
+        (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
+          _a,
+          "Unable to load payment form"
+        );
+      }, 15e3);
       sdk.init(
         tokenKey,
         iframeId,
         (response) => {
+          clearTimeout(initTimeout);
+          datacapInitializing = false;
+          datacapInitialized = true;
           setLoader == null ? void 0 : setLoader(false);
           if (!resolverRef.current) return;
           if ((response == null ? void 0 : response.Error) || (response == null ? void 0 : response.Errors)) {
@@ -3538,6 +3607,9 @@ var DataCapFields = ({
       );
     };
     initialize();
+    return () => {
+      resolverRef.current = null;
+    };
   }, [isOpen, tokenKey]);
   useEffect7(() => {
     const uniqueId = Math.random();
@@ -3545,7 +3617,15 @@ var DataCapFields = ({
       return new Promise((resolve, reject) => {
         setLoader == null ? void 0 : setLoader(true);
         resolverRef.current = { resolve, reject };
-        window.DatacapHostedWebToken.requestToken();
+        if (!window.DatacapHostedWebToken) {
+          reject("Datacap SDK unavailable");
+          return;
+        }
+        try {
+          window.DatacapHostedWebToken.requestToken();
+        } catch (err) {
+          reject(err);
+        }
       });
     };
     window.requestDcToken = fn;
@@ -3553,26 +3633,71 @@ var DataCapFields = ({
       delete window.requestDcToken;
     };
   }, []);
-  return /* @__PURE__ */ jsx18(
-    "iframe",
-    {
-      id: iframeId,
-      onLoad: () => {
-        console.log("\u{1F7E2} Iframe visually loaded");
-        setIframeReady(true);
-        setLoader == null ? void 0 : setLoader(false);
-      },
-      style: {
-        width: "100%",
-        height: `${height || "250px"}`,
-        border: "none",
-        opacity: iframeReady ? 1 : 0,
-        transition: "opacity 0.3s ease"
+  useEffect7(() => {
+    if (!isOpen) {
+      datacapInitializing = false;
+      datacapInitialized = false;
+    }
+  }, [isOpen]);
+  return (
+    // <iframe
+    //   id={iframeId}
+    //   onLoad={() => {
+    //     console.log("🟢 Iframe visually loaded");
+    //     setIframeReady(true);
+    //     setLoader?.(false);
+    //   }}
+    //   style={{
+    //     width: "100%",
+    //     height: `${height || "250px"}`,
+    //     border: "none",
+    //     opacity: iframeReady ? 1 : 0,
+    //     transition: "opacity 0.3s ease",
+    //   }}
+    // />
+    /* @__PURE__ */ jsx18(
+      "iframe",
+      {
+        id: iframeId,
+        onLoad: () => {
+          console.log("\u{1F7E2} Iframe visually loaded");
+          setIframeReady(true);
+          setLoader == null ? void 0 : setLoader(false);
+        },
+        onError: () => {
+          var _a, _b;
+          console.error("\u274C iframe failed");
+          setLoader == null ? void 0 : setLoader(false);
+          (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
+            _a,
+            "Payment form failed to load"
+          );
+        },
+        style: {
+          width: "100%",
+          height: `${height || "250px"}`,
+          border: "none",
+          opacity: iframeReady ? 1 : 0,
+          transition: "opacity 0.3s ease"
+        }
       }
-    }
+    )
   );
 };
 
+// src/app/utils/Constant.js
+var PaymentMethodKeys = {
+  PROPAYKEY: "25",
+  PAYARCKEY: "26",
+  STRIPEKEYCC: "27",
+  PAYRIXKEY: "28",
+  SKYFIACHKEY: "29",
+  JUSTIFIKEY: "30",
+  INFINICEPTKEY: "31",
+  FRACTALKEY: "32"
+};
+var DcLoadingError = "Something went wrong while loading the payment form. Please try again after some time.";
+
 // src/app/components/Charge/GetPaymentPage.tsx
 import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function GetPaymentPage(props) {
@@ -3595,6 +3720,7 @@ function GetPaymentPage(props) {
   const [errorBankConsent, setErrorBankConsent] = useState4("");
   const [saveACHConsent1, setSaveACHConsent1] = useState4(false);
   const [errorBankConsentOther, setErrorBankConsentOther] = useState4("");
+  const [isTokenizerReady, setTokenizerReady] = useState4(false);
   const fractalpayClientKey = props.merchantPublicKey;
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
@@ -3934,6 +4060,7 @@ function GetPaymentPage(props) {
                   } catch (err) {
                     setErrorIframe(((_h2 = (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
                     setLoading2(false);
+                    return;
                   }
                   console.log(tokenizeData, "tokenizeData");
                   const reqData = JSON.stringify(__spreadProps(__spreadValues({}, tokenizeData), {
@@ -4298,8 +4425,20 @@ function GetPaymentPage(props) {
   }, []);
   return /* @__PURE__ */ jsxs11(Fragment11, { children: [
     /* @__PURE__ */ jsx19(DataScript, {}),
-    /* @__PURE__ */ jsx19(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx19(DataCapScriptLoader, {}),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx19(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx19(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
     /* @__PURE__ */ jsx19(Chargewidgetstyles, {}),
     /* @__PURE__ */ jsx19(CardBankRadioStyles, {}),
     /* @__PURE__ */ jsxs11(Fragment11, { children: [
@@ -4503,7 +4642,7 @@ function GetPaymentPage(props) {
                                   ] }),
                                   /* @__PURE__ */ jsxs11("div", { className: "form-group", children: [
                                     /* @__PURE__ */ jsx19("label", { children: "CARD NUMBER" }),
-                                    /* @__PURE__ */ jsx19("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx19(
+                                    /* @__PURE__ */ jsx19("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && isTokenizerReady && /* @__PURE__ */ jsx19(
                                       FractalFields_default,
                                       {
                                         fractalStyles,
@@ -4857,6 +4996,7 @@ function PreAuthPayment(_a) {
   const [activeinCard, setActiveinCard] = useState5("form");
   const fractalpayClientKey = props.merchantPublicKey;
   const [selectedReader, setSelectedReader] = useState5(void 0);
+  const [isTokenizerReady, setTokenizerReady] = useState5(false);
   const tokenizerRef = useRef4(null);
   const fractalStyles = {
     input: {
@@ -5393,10 +5533,22 @@ function PreAuthPayment(_a) {
   }, []);
   return /* @__PURE__ */ jsxs12(Fragment12, { children: [
     /* @__PURE__ */ jsx20(DataScript, {}),
-    /* @__PURE__ */ jsx20(FractalTokenizerScript, {}),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx20(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx20(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
     /* @__PURE__ */ jsx20(Chargewidgetstyles, {}),
     /* @__PURE__ */ jsx20(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx20(DataCapScriptLoader, {}),
     /* @__PURE__ */ jsxs12(Fragment12, { children: [
       showButton && /* @__PURE__ */ jsx20(
         "button",
@@ -5549,7 +5701,7 @@ function PreAuthPayment(_a) {
                               ] }),
                               /* @__PURE__ */ jsxs12("div", { className: "form-group", children: [
                                 /* @__PURE__ */ jsx20("label", { children: "CARD NUMBER" }),
-                                /* @__PURE__ */ jsx20("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx20(
+                                /* @__PURE__ */ jsx20("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && isTokenizerReady && /* @__PURE__ */ jsx20(
                                   FractalFields_default,
                                   {
                                     fractalStyles,
@@ -6141,6 +6293,7 @@ function AddCardEasyPay(props) {
   const exp_year_ref = useRef5(null);
   const cvv_ref = useRef5(null);
   const name_ref = useRef5(null);
+  const [isTokenizerReady, setTokenizerReady] = useState6(false);
   const tokenizerRef = useRef5(null);
   const fractalStyles = {
     input: {
@@ -6413,8 +6566,20 @@ function AddCardEasyPay(props) {
   }, []);
   return /* @__PURE__ */ jsxs14(Fragment14, { children: [
     /* @__PURE__ */ jsx24(DataScript, {}),
-    /* @__PURE__ */ jsx24(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx24(DataCapScriptLoader, {}),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx24(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx24(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
     /* @__PURE__ */ jsx24(AddCardStyle, {}),
     /* @__PURE__ */ jsx24(Loader_default, { loading: loading || loadingIframe }),
     error && /* @__PURE__ */ jsx24("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx24(ErrorCardMessage_default, { error, onClose: handleClose }) }),
@@ -6443,7 +6608,7 @@ function AddCardEasyPay(props) {
               /* @__PURE__ */ jsxs14("div", { style: { maxHeight: "350px", minHeight: "0" }, className: "card-scrl", children: [
                 /* @__PURE__ */ jsxs14("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" }, children: [
                   /* @__PURE__ */ jsx24("label", { htmlFor: "cardNumber", children: "Card Number" }),
-                  (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx24(
+                  (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && isTokenizerReady && /* @__PURE__ */ jsx24(
                     FractalFields_default,
                     {
                       fractalStyles,
@@ -6578,18 +6743,6 @@ function AddCardEasyPay(props) {
 import { useEffect as useEffect12, useRef as useRef7, useState as useState7 } from "react";
 import axios6 from "axios";
 
-// src/app/utils/Constant.js
-var PaymentMethodKeys = {
-  PROPAYKEY: "25",
-  PAYARCKEY: "26",
-  STRIPEKEYCC: "27",
-  PAYRIXKEY: "28",
-  SKYFIACHKEY: "29",
-  JUSTIFIKEY: "30",
-  INFINICEPTKEY: "31",
-  FRACTALKEY: "32"
-};
-
 // src/app/components/AddCard/AddCardSkyStyle.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 function AddCardSkyStyle({}) {
@@ -6797,8 +6950,12 @@ import { Fragment as Fragment15, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-
 var FractalFieldsAddCardSky = ({ fractalStyles, tokenizerRef, extraInputs }) => {
   const instanceRef = useRef6(null);
   useEffect11(() => {
-    if (!window.FractalTokenizer) return;
-    const instance = new window.FractalTokenizer({
+    const Tokenizer = window.FractalTokenizer;
+    if (!Tokenizer) {
+      console.error("Tokenizer not available");
+      return;
+    }
+    const instance = new Tokenizer({
       styles: fractalStyles
     });
     instanceRef.current = instance;
@@ -6883,7 +7040,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, customCSS: customCSS2, height }) {
+function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual, customCSS, height }) {
   var _a, _b;
   const [loading, setLoading] = useState7(false);
   const [errorIframe, setErrorIframe] = useState7("");
@@ -6894,10 +7051,11 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
   const [error, setError] = useState7("");
   const showLoader = () => setLoading(true);
   const hideLoader = () => setLoading(false);
-  const [passFee, setPassFee] = useState7(false);
+  const [passFee, setPassFee] = useState7(null);
   const [paymentGateway, setPaymentGateway] = useState7();
   const [dcToken, setDCToken] = useState7();
   const tokenizerRef = useRef7(null);
+  const [isTokenizerReady, setTokenizerReady] = useState7(false);
   const fractalStyles = {
     input: {
       "font-family": "'Inter', sans-serif",
@@ -7160,8 +7318,20 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
   }, []);
   return /* @__PURE__ */ jsxs16(Fragment16, { children: [
     /* @__PURE__ */ jsx27(DataScript, {}),
-    /* @__PURE__ */ jsx27(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx27(DataCapScriptLoader, {}),
+    paymentGateway == 32 && /* @__PURE__ */ jsx27(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    paymentGateway == 31 && /* @__PURE__ */ jsx27(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
     /* @__PURE__ */ jsx27(AddCardSkyStyle, {}),
     /* @__PURE__ */ jsx27(Loader_default, { loading: loading || isloading || loadingIframe }),
     error && /* @__PURE__ */ jsx27("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx27(ErrorCardMessage_default, { error, onClose: handleClose }) }),
@@ -7222,7 +7392,7 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
           (cardError == null ? void 0 : cardError.lastName) && /* @__PURE__ */ jsx27("small", { className: "error", children: cardError == null ? void 0 : cardError.lastName })
         ] })
       ] }),
-      /* @__PURE__ */ jsx27(
+      isTokenizerReady && /* @__PURE__ */ jsx27(
         FractalFieldsAddCardSky_default,
         {
           fractalStyles,
@@ -7254,7 +7424,7 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
             type: "checkbox",
             id: "pass_fee",
             className: "toggle-checkbox",
-            checked: passFee,
+            checked: passFee != null ? passFee : false,
             onChange: (e) => {
               setPassFee(e.target.checked);
             }
@@ -7397,7 +7567,7 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
           isOpen: true,
           tokenKey: dcToken,
           setLoader: setLoadingIframe,
-          customCSS: customCSS2,
+          customCSS,
           height
         }
       ) }),
@@ -7426,7 +7596,7 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
             type: "checkbox",
             id: "pass_fee",
             className: "toggle-checkbox",
-            checked: passFee,
+            checked: passFee != null ? passFee : false,
             onChange: (e) => {
               setPassFee(e.target.checked);
             }
@@ -7571,6 +7741,7 @@ function PartialPayment(props) {
   const [errorBankConsent, setErrorBankConsent] = useState8("");
   const [saveACHConsent1, setSaveACHConsent1] = useState8(false);
   const [errorBankConsentOther, setErrorBankConsentOther] = useState8("");
+  const [isTokenizerReady, setTokenizerReady] = useState8(false);
   const tokenizerRef = useRef8(null);
   const fractalStyles = {
     input: {
@@ -8284,8 +8455,20 @@ function PartialPayment(props) {
     /* @__PURE__ */ jsx28(DataScript, {}),
     /* @__PURE__ */ jsx28(Chargewidgetstyles, {}),
     /* @__PURE__ */ jsx28(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx28(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx28(DataCapScriptLoader, {}),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx28(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    (paymentData == null ? void 0 : paymentData.paymentGateway) === 31 && /* @__PURE__ */ jsx28(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
     /* @__PURE__ */ jsxs17(Fragment17, { children: [
       /* @__PURE__ */ jsx28("button", { ref: buttonRef, style: { display: "none" }, className: "paymentBtn", onClick: handleShow, children: "Pay" }),
       /* @__PURE__ */ jsxs17(
@@ -8492,7 +8675,7 @@ function PartialPayment(props) {
                               ] }),
                               /* @__PURE__ */ jsxs17("div", { className: "form-group", children: [
                                 /* @__PURE__ */ jsx28("label", { children: "CARD NUMBER" }),
-                                /* @__PURE__ */ jsx28("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && /* @__PURE__ */ jsx28(
+                                /* @__PURE__ */ jsx28("div", { className: "toggle-num-wrapper", children: show && (paymentData == null ? void 0 : paymentData.paymentGateway) === 32 && isTokenizerReady && /* @__PURE__ */ jsx28(
                                   FractalFields_default,
                                   {
                                     fractalStyles,
@@ -8800,7 +8983,7 @@ function PartialPayment(props) {
 }
 
 // src/app/components/Skysystemz/PayButtonWithForm.tsx
-import { useEffect as useEffect16, useState as useState11, useMemo } from "react";
+import { useEffect as useEffect17, useState as useState11, useMemo } from "react";
 
 // src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -9646,7 +9829,7 @@ padding:0px !important;
 }
 
 // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
-import { useCallback, useEffect as useEffect15, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback, useEffect as useEffect16, useRef as useRef11, useState as useState10 } from "react";
 import axios9 from "axios";
 import Swal5 from "sweetalert2";
 
@@ -9932,17 +10115,155 @@ var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
 };
 var ErrorCardOverlay_default = ErrorCardOverlay;
 
+// src/app/components/Atoms/Applepay/ApplePayButton.tsx
+import { useEffect as useEffect15, useRef as useRef10 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+function ApplePayButton({
+  applePayMerchantId: applePayMerchantId2,
+  applePayAmount,
+  applePayMerchantName,
+  showLoader,
+  completeFractalFlow
+}) {
+  const applePayRef = useRef10(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
+  };
+  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);
+    }
+  }
+  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");
+    }
+  }
+  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);
+    }
+  }
+  useEffect15(() => {
+    if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
+      console.log("\u2705 Apple Pay is available");
+    } else {
+      console.log("\u274C Apple Pay NOT available");
+    }
+  }, []);
+  useEffect15(() => {
+    const btn = applePayRef.current;
+    if (!btn) return;
+    const handleClick = () => handleApplePayClick();
+    btn.addEventListener("click", handleClick);
+    return () => btn.removeEventListener("click", handleClick);
+  }, [applePayMerchantId2, applePayAmount, applePayMerchantName]);
+  return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
+    "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 Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
-var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount, onSubmit, onLoad = true, customCSS: customCSS2 }) => {
+import { Fragment as Fragment19, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount, onSubmit, onLoad = true, customCSS }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
-  const hasRunRef = useRef10(false);
-  const cardFormRef = useRef10(null);
-  const bankFormRef = useRef10(null);
-  const expiryYearRef = useRef10(null);
-  const expiryMonthRef = useRef10(null);
-  const cardListRunRef = useRef10(false);
-  const threeDSContainerRef = useRef10(null);
+  const hasRunRef = useRef11(false);
+  const cardFormRef = useRef11(null);
+  const bankFormRef = useRef11(null);
+  const expiryYearRef = useRef11(null);
+  const expiryMonthRef = useRef11(null);
+  const cardListRunRef = useRef11(false);
+  const threeDSContainerRef = useRef11(null);
   const [activetab, setActive] = useState10("card");
   const [activeList, setActiveList] = useState10("card");
   const [cardData, setCardData] = useState10();
@@ -9982,6 +10303,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [isBankConsentChecked, setIsBankConsentChecked] = useState10(false);
   const [errorBankConsent, setErrorBankConsent] = useState10("");
   const [errorBankConsentOther, setErrorBankConsentOther] = useState10("");
+  const [isTokenizerReady, setTokenizerReady] = useState10(false);
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
   let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -10009,7 +10331,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const bankFeeAmount = Number(bankSurcharge || 0);
   const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
   const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
-  const tokenizerRef = useRef10(null);
+  const tokenizerRef = useRef11(null);
   const fractalStyles = {
     input: {
       "font-family": "'Inter', sans-serif",
@@ -10189,8 +10511,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     return Object.keys(errors).length > 0;
   };
   const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
     try {
+      console.log({
+        tokenizeData,
+        intentid,
+        typeoftoken
+      });
       if (typeoftoken == "google_pay" || typeoftoken == "apple_pay") {
         handleCharge({
           Token: tokenizeData,
@@ -10198,39 +10525,28 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
           typeoftoken
         });
         return;
-      }
-      let token = tokenizeData;
-      let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
-        token,
-        require3ds,
-        pass_fee,
-        typeoftoken
-      });
-      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
-        };
+      } else {
         if (isPreAuth) {
-          handlePreAuth(respData);
+          handlePreAuth(__spreadValues({
+            Token: tokenizeData,
+            postalCode: cardData == null ? void 0 : cardData.zipCode,
+            typeoftoken: "token"
+          }, intentid && { stripe_3ds_auth_id: intentid }));
         } else {
-          handleCharge(respData);
+          handleCharge(__spreadValues({
+            Token: tokenizeData,
+            postalCode: cardData == null ? void 0 : cardData.zipCode,
+            typeoftoken: "token"
+          }, intentid && { stripe_3ds_auth_id: intentid }));
         }
       }
     } 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!");
+      setError(((_b2 = (_a2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.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
+        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();
     }
@@ -10875,13 +11191,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       setOrderLoader(false);
     }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (!show && !autoTrigger) {
       hasRunRef.current = false;
       cardListRunRef.current = false;
     }
   }, [show, autoTrigger]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
       getPaymentDetails();
       if (isPartial && !partialRef) {
@@ -10889,7 +11205,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       }
     }
   }, [show, autoTrigger, isPartial, onLoad]);
-  useEffect15(() => {
+  useEffect16(() => {
     if ((show || autoTrigger) && pass_fee_amount) {
       let cashdisc = Number(amount) - Number(pass_fee_amount);
       if (cashdisc && !isNaN(cashdisc)) {
@@ -10951,7 +11267,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     console.error("3DS Auth failed \u274C", status);
     setError(`3DS Authentication ${status}`);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (setHandleCloseRef) {
       setHandleCloseRef(() => handleClose);
     }
@@ -10969,18 +11285,18 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       setPartialError("");
     }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (typeof FractalTokenizer === "undefined") return;
     const tokenizer = new FractalTokenizer({
       styles: {}
     });
   }, []);
-  const stateRef = useRef10({
+  const stateRef = useRef11({
     activeinBank,
     activeinCard,
     activetab
   });
-  useEffect15(() => {
+  useEffect16(() => {
     stateRef.current = {
       activeinBank,
       activeinCard,
@@ -11004,7 +11320,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
       }
     }
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     onSubmit == null ? void 0 : onSubmit(submit);
   }, [onSubmit, submit]);
   function detectCardType(cardinput) {
@@ -11030,34 +11346,48 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     const cardType = detectCardType(cardInput);
     switch (cardType) {
       case "visa":
-        return /* @__PURE__ */ jsx34("img", { src: visa2, alt: "visa", width: 33 });
+        return /* @__PURE__ */ jsx35("img", { src: visa2, alt: "visa", width: 33 });
       case "mastercard":
-        return /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "mastercard" });
+        return /* @__PURE__ */ jsx35("img", { src: mastercard2, width: 33, alt: "mastercard" });
       case "amex":
-        return /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "amex", width: 33 });
+        return /* @__PURE__ */ jsx35("img", { src: americanexp2, alt: "amex", width: 33 });
       case "discover":
-        return /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "discover" });
+        return /* @__PURE__ */ jsx35("img", { src: discover2, width: 33, alt: "discover" });
       case "diners":
-        return /* @__PURE__ */ jsx34("img", { src: dinersicon, alt: "Diners Club" });
+        return /* @__PURE__ */ jsx35("img", { src: dinersicon, alt: "Diners Club" });
       case "jcb":
-        return /* @__PURE__ */ jsx34("img", { src: jcbicon, alt: "JCB" });
+        return /* @__PURE__ */ jsx35("img", { src: jcbicon, alt: "JCB" });
       case "unionpay":
-        return /* @__PURE__ */ jsx34("img", { src: unionicon, alt: "UnionPay" });
+        return /* @__PURE__ */ jsx35("img", { src: unionicon, alt: "UnionPay" });
       default:
-        return /* @__PURE__ */ jsx34("img", { src: defualtcardborder, alt: "card" });
+        return /* @__PURE__ */ jsx35("img", { src: defualtcardborder, alt: "card" });
     }
   }
   return /* @__PURE__ */ jsxs20(Fragment19, { children: [
-    (initialLoader || !onLoad) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
-    error && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
-    errorIframe && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
+    (initialLoader || !onLoad) && /* @__PURE__ */ jsx35(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
+    paymentGateway == 32 && /* @__PURE__ */ jsx35(FractalTokenizerScript, { onLoad: () => setTokenizerReady(true) }),
+    paymentGateway == 31 && /* @__PURE__ */ jsx35(
+      DataCapScriptLoader,
+      {
+        onReady: () => {
+          console.log("SDK Ready");
+        },
+        onError: (err) => {
+          setLoading(false);
+          setLoadingIframe(false);
+          setError(DcLoadingError);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
+    errorIframe && /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
       setErrorIframe("");
     }, autoTrigger: onSubmit ? !onSubmit : autoTrigger }) }),
     /* @__PURE__ */ jsxs20(Fragment19, { children: [
-      (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
+      (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx35(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
       /* @__PURE__ */ jsxs20("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
-        /* @__PURE__ */ jsx34("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
-        (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
+        (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx35(
           ThreeDSChallenge,
           {
             containerRef: threeDSContainerRef,
@@ -11068,32 +11398,32 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
             onError: handleError
           }
         ) : /* @__PURE__ */ jsxs20("div", { className: "parent-pay-container", children: [
-          /* @__PURE__ */ jsx34("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-            /* @__PURE__ */ jsx34("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx34("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" }) }),
-            /* @__PURE__ */ jsx34("defs", { children: /* @__PURE__ */ jsx34("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx34("rect", { width: "16", height: "16", fill: "white" }) }) })
+          /* @__PURE__ */ jsx35("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsx35("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx35("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__ */ jsx35("defs", { children: /* @__PURE__ */ jsx35("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx35("rect", { width: "16", height: "16", fill: "white" }) }) })
           ] }) }),
-          /* @__PURE__ */ jsx34("div", { className: "pay-main-logo-res" }),
+          /* @__PURE__ */ jsx35("div", { className: "pay-main-logo-res" }),
           /* @__PURE__ */ jsxs20("div", { className: onSubmit ? "pay-container frac-pay-container " : "pay-container", children: [
             !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "pay-header pay-conatiner-one", children: [
               /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-first", children: [
                 /* @__PURE__ */ jsxs20("div", { className: "pay-logo-container", children: [
-                  /* @__PURE__ */ jsx34("div", { className: "pay-main-logo" }),
-                  /* @__PURE__ */ jsx34("h1", { className: "pay-heading", children: "Pay" }),
+                  /* @__PURE__ */ jsx35("div", { className: "pay-main-logo" }),
+                  /* @__PURE__ */ jsx35("h1", { className: "pay-heading", children: "Pay" }),
                   (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs20("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
                     " ",
-                    /* @__PURE__ */ jsx34(IoArrowBack4, {}),
+                    /* @__PURE__ */ jsx35(IoArrowBack4, {}),
                     " Back"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
-                  /* @__PURE__ */ jsx34("small", { className: "pay-payment-amount", children: "Select payment type" }),
+                /* @__PURE__ */ jsx35("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
+                  /* @__PURE__ */ jsx35("small", { className: "pay-payment-amount", children: "Select payment type" }),
                   /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
-                    /* @__PURE__ */ jsx34(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                    !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+                    /* @__PURE__ */ jsx35(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
+                    !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx35(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
                   ] }),
                   isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
-                    /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx35("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
+                    /* @__PURE__ */ jsx35(
                       NumericFormat2,
                       {
                         prefix: "$",
@@ -11117,25 +11447,25 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                         }
                       }
                     ),
-                    partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
+                    partialError && /* @__PURE__ */ jsx35("span", { className: "error-span", children: partialError })
                   ] })
                 ] }) })
               ] }),
               /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-last", children: [
-                /* @__PURE__ */ jsx34("img", { src: secure2, alt: "" }),
-                /* @__PURE__ */ jsx34("img", { src: pov2, alt: "" }),
+                /* @__PURE__ */ jsx35("img", { src: secure2, alt: "" }),
+                /* @__PURE__ */ jsx35("img", { src: pov2, alt: "" }),
                 "Secure payments powered by Fractal"
               ] })
             ] }),
-            /* @__PURE__ */ jsx34("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx34("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs20("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
-              onSubmit && /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
+            /* @__PURE__ */ jsx35("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx35("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs20("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
+              onSubmit && /* @__PURE__ */ jsx35("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
                 /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
-                  /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                  !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
+                  /* @__PURE__ */ jsx35(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
+                  !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx35(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
                 ] }),
                 isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
-                  /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx35("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
+                  /* @__PURE__ */ jsx35(
                     NumericFormat2,
                     {
                       prefix: "$",
@@ -11152,33 +11482,45 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                       fixedDecimalScale: true
                     }
                   ),
-                  partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
+                  partialError && /* @__PURE__ */ jsx35("span", { className: "error-span", children: partialError })
                 ] })
               ] }) }),
-              is3DSEnable ? clientSecret && /* @__PURE__ */ jsx34(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs20(Fragment19, { children: [
+              is3DSEnable ? clientSecret && /* @__PURE__ */ jsx35(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs20(Fragment19, { children: [
                 /* @__PURE__ */ jsxs20("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
                   !onSubmit && /* @__PURE__ */ jsxs20(Fragment19, { children: [
                     /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
-                      /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
+                      /* @__PURE__ */ jsx35("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
                         " ",
-                        /* @__PURE__ */ jsx34(IoArrowBack4, {})
+                        /* @__PURE__ */ jsx35(IoArrowBack4, {})
                       ] }) }),
-                      /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
+                      /* @__PURE__ */ jsx35("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
                     ] }),
                     /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
-                      /* @__PURE__ */ jsx34("img", { src: visa2, alt: "", width: 33 }),
-                      /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "" }),
-                      /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "", width: 33 }),
-                      /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "" })
+                      /* @__PURE__ */ jsx35("img", { src: visa2, alt: "", width: 33 }),
+                      /* @__PURE__ */ jsx35("img", { src: mastercard2, width: 33, alt: "" }),
+                      /* @__PURE__ */ jsx35("img", { src: americanexp2, alt: "", width: 33 }),
+                      /* @__PURE__ */ jsx35("img", { src: discover2, width: 33, alt: "" })
                     ] })
                   ] }),
                   activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
+                    /* @__PURE__ */ jsx35(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
                       setActiveinCard("form");
                     } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
+                    /* @__PURE__ */ jsx35("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx35("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
                   ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    onSubmit && /* @__PURE__ */ jsx34(Fragment19, {}),
+                    onSubmit && /* @__PURE__ */ jsxs20(Fragment19, { children: [
+                      /* @__PURE__ */ jsx35(
+                        ApplePayButton,
+                        {
+                          applePayAmount: partialAmount ? partialAmount : amount,
+                          applePayMerchantId,
+                          applePayMerchantName: merchantName,
+                          completeFractalFlow,
+                          showLoader
+                        }
+                      ),
+                      /* @__PURE__ */ jsx35("div", { id: "digital-wallet-or", className: "frac-or", children: /* @__PURE__ */ jsx35("span", { children: "or" }) })
+                    ] }),
                     /* @__PURE__ */ jsxs20("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
                       if (e.key === "Enter" && loading) {
                         e.preventDefault();
@@ -11187,18 +11529,18 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                     }, children: [
                       /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
                         /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                          /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                          /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
+                          /* @__PURE__ */ jsx35("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                          /* @__PURE__ */ jsx35("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
                             const value = e.target.value;
                             if (/^[a-zA-Z\s]*$/.test(value)) {
                               handleCardChange("cardName", value);
                             }
                           } }),
-                          (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
+                          (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
                         ] }),
                         /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                          /* @__PURE__ */ jsx34("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
-                          /* @__PURE__ */ jsx34("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx34(
+                          /* @__PURE__ */ jsx35("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
+                          /* @__PURE__ */ jsx35("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && isTokenizerReady && /* @__PURE__ */ jsx35(
                             FractalFields_default,
                             {
                               fractalStyles,
@@ -11208,17 +11550,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           ) })
                         ] }),
                         /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                          /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
-                          /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
-                          (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
+                          /* @__PURE__ */ jsx35("label", { htmlFor: "zip", children: "ZIP" }),
+                          /* @__PURE__ */ jsx35("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__ */ jsx35("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
                           pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
                             "Cards include a fee amount of ",
-                            /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
+                            /* @__PURE__ */ jsx35("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
                             "."
                           ] })
                         ] }),
-                        customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                          /* @__PURE__ */ jsx34(
+                        customerId && /* @__PURE__ */ jsx35("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                          /* @__PURE__ */ jsx35(
                             "input",
                             {
                               type: "checkbox",
@@ -11228,10 +11570,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                               onChange: (e) => setSaveCardInfo(e.target.checked)
                             }
                           ),
-                          /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
-                          /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                          /* @__PURE__ */ jsx35("label", { htmlFor: "save_card", className: "toggle-label" }),
+                          /* @__PURE__ */ jsx35("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
                           /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
-                            /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
+                            /* @__PURE__ */ jsx35("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
                               "svg",
                               {
                                 xmlns: "http://www.w3.org/2000/svg",
@@ -11240,8 +11582,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                                 viewBox: "0 0 20 20",
                                 fill: "none",
                                 children: [
-                                  /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                  /* @__PURE__ */ jsx34(
+                                  /* @__PURE__ */ jsx35("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                                  /* @__PURE__ */ jsx35(
                                     "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",
@@ -11251,15 +11593,15 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                                 ]
                               }
                             ) }),
-                            /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
+                            /* @__PURE__ */ jsx35("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
                               "If checked, I agree to give the ",
-                              /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
+                              /* @__PURE__ */ jsx35("b", { children: merchantName || "merchant" }),
                               " permission to charge this credit card for agreed-upon purchases in the future."
                             ] }) })
                           ] })
                         ] }) })
                       ] }),
-                      /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
+                      /* @__PURE__ */ jsx35("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx35("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
                     ] })
                   ] }) : /* @__PURE__ */ jsxs20("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
                     if (e.key === "Enter" && loading) {
@@ -11269,37 +11611,37 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                   }, children: [
                     /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
+                        /* @__PURE__ */ jsx35("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
                           const value = e.target.value;
                           if (/^[a-zA-Z\s]*$/.test(value)) {
                             handleCardChange("cardName", value);
                           }
                         } }),
-                        (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
+                        (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
                       ] }),
-                      /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx34(
+                      /* @__PURE__ */ jsx35("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx35(
                         DataCapFields,
                         {
                           isOpen: show || autoTrigger,
                           tokenKey: dcToken,
                           setLoader: activeinCard === "form" ? setLoadingIframe : null,
                           isEmbedded: onSubmit ? true : false,
-                          customCSS: customCSS2
+                          customCSS
                         }
                       ) }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
-                        (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "zip", children: "ZIP" }),
+                        /* @__PURE__ */ jsx35("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__ */ jsx35("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
                         pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
                           "Cards include a fee amount of ",
-                          /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
+                          /* @__PURE__ */ jsx35("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
                           "."
                         ] })
                       ] }),
-                      customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
-                        /* @__PURE__ */ jsx34(
+                      customerId && /* @__PURE__ */ jsx35("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "checkbox",
@@ -11309,10 +11651,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: (e) => setSaveCardInfo(e.target.checked)
                           }
                         ),
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "save_card", className: "toggle-label" }),
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "save_card", children: "Save card for future payments  " }),
                         /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
-                          /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
+                          /* @__PURE__ */ jsx35("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
                             "svg",
                             {
                               xmlns: "http://www.w3.org/2000/svg",
@@ -11321,8 +11663,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                               viewBox: "0 0 20 20",
                               fill: "none",
                               children: [
-                                /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
-                                /* @__PURE__ */ jsx34(
+                                /* @__PURE__ */ jsx35("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
+                                /* @__PURE__ */ jsx35(
                                   "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",
@@ -11332,30 +11674,30 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                               ]
                             }
                           ) }),
-                          /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
+                          /* @__PURE__ */ jsx35("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
                             "If checked, I agree to give the ",
-                            /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
+                            /* @__PURE__ */ jsx35("b", { children: merchantName || "merchant" }),
                             " permission to charge this credit card for agreed-upon purchases in the future."
                           ] }) })
                         ] })
                       ] }) })
                     ] }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
+                    /* @__PURE__ */ jsx35("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx35("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx34("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
+                /* @__PURE__ */ jsx35("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
                   !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
-                    /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
+                    /* @__PURE__ */ jsx35("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
                       " ",
-                      /* @__PURE__ */ jsx34(IoArrowBack4, {})
+                      /* @__PURE__ */ jsx35(IoArrowBack4, {})
                     ] }) }),
-                    /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
+                    /* @__PURE__ */ jsx35("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
                   ] }),
                   activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
-                    /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
+                    /* @__PURE__ */ jsx35(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
                       setActiveinBank("form");
                     } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
+                    /* @__PURE__ */ jsx35("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx35("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
                   ] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
                     if (e.key === "Enter" && loading) {
                       e.preventDefault();
@@ -11367,13 +11709,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                       maxHeight: "444px"
                     }, children: [
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "nameonaccount", children: "Name on account" }),
-                        /* @__PURE__ */ jsx34("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_n = achData == null ? void 0 : achData.name) != null ? _n : "", onChange: handleChangeAch }),
-                        (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "nameonaccount", children: "Name on account" }),
+                        /* @__PURE__ */ jsx35("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__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "routingnumber", children: "Routing number" }),
-                        /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "routingnumber", children: "Routing number" }),
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "text",
@@ -11386,11 +11728,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: handleChangeAch
                           }
                         ),
-                        (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
+                        (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "accountnumber", children: "Account number" }),
-                        /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "accountnumber", children: "Account number" }),
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "text",
@@ -11403,11 +11745,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: handleChangeAch
                           }
                         ),
-                        (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
+                        (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
-                        /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "text",
@@ -11420,11 +11762,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: handleChangeAch
                           }
                         ),
-                        (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
+                        (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "bankname", children: "Bank name" }),
-                        /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "bankname", children: "Bank name" }),
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "text",
@@ -11437,11 +11779,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: handleChangeAch
                           }
                         ),
-                        (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
+                        (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
                       ] }),
                       ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "companyName", children: "Company name" }),
-                        /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "companyName", children: "Company name" }),
+                        /* @__PURE__ */ jsx35(
                           "input",
                           {
                             type: "text",
@@ -11454,44 +11796,44 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                             onChange: handleChangeAch
                           }
                         ),
-                        (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
+                        (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx35("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
-                        /* @__PURE__ */ jsx34("label", { htmlFor: "accounttype", children: "Select account type" }),
+                        /* @__PURE__ */ jsx35("label", { htmlFor: "accounttype", children: "Select account type" }),
                         /* @__PURE__ */ jsxs20("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
-                          /* @__PURE__ */ jsx34("option", { value: "", children: "Select account" }),
-                          accountTypes.map((type) => /* @__PURE__ */ jsx34("option", { value: type.value, children: type.label }, type.value))
+                          /* @__PURE__ */ jsx35("option", { value: "", children: "Select account" }),
+                          accountTypes.map((type) => /* @__PURE__ */ jsx35("option", { value: type.value, children: type.label }, type.value))
                         ] }),
                         bankFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
                           "There is a processing fee of ",
-                          /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
+                          /* @__PURE__ */ jsx35("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
                           "."
                         ] }),
                         !saveACHinfo && /* @__PURE__ */ jsxs20(Fragment19, { children: [
                           /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
+                            /* @__PURE__ */ jsx35("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
                               setIsBankConsentChecked(e.target.checked);
                               if (e.target.checked) {
                                 setErrorBankConsent("");
                               }
                             } }),
-                            /* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
+                            /* @__PURE__ */ jsx35("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__ */ jsx34("span", { className: "error-span", children: errorBankConsent })
+                          errorBankConsent && /* @__PURE__ */ jsx35("span", { className: "error-span", children: errorBankConsent })
                         ] }),
                         customerId && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                          /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => {
+                          /* @__PURE__ */ jsx35("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__ */ jsx34("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save for future use" })
+                          /* @__PURE__ */ jsx35("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save for future use" })
                         ] }),
                         saveACHinfo && /* @__PURE__ */ jsxs20(Fragment19, { children: [
                           /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
-                            /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
+                            /* @__PURE__ */ jsx35("input", { type: "checkbox", id: "saveACHConsent1", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHConsent1, onChange: (e) => {
                               setSaveACHConsent1(e.target.checked);
                               if (e.target.checked) {
                                 setErrorBankConsentOther("");
@@ -11503,11 +11845,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                               "  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__ */ jsx34("span", { className: "error-span", children: errorBankConsentOther })
+                          errorBankConsentOther && /* @__PURE__ */ jsx35("span", { className: "error-span", children: errorBankConsentOther })
                         ] })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "20px 0 0", display: onSubmit ? "none" : "block" }, type: "submit", children: formatUSD((_u = Number(bankAmount)) == null ? void 0 : _u.toFixed(2)) }) })
+                    /* @__PURE__ */ jsx35("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx35("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)) }) })
                   ] })
                 ] }) })
               ] })
@@ -11522,7 +11864,7 @@ var ModelContentSky_default = ModelContentSky;
 
 // src/app/components/Skysystemz/PayButtonWithForm.tsx
 import axios10 from "axios";
-import { Fragment as Fragment20, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaymentWidget = ({
   amount,
   bankAmount,
@@ -11543,7 +11885,7 @@ var PaymentWidget = ({
   isPartial,
   bankSurcharge,
   partialRef,
-  customCSS: customCSS2,
+  customCSS,
   disableSubmitBtn = false
 }) => {
   const [show, setShow] = useState11(autoTrigger || false);
@@ -11575,7 +11917,7 @@ var PaymentWidget = ({
       isPartial,
       bankSurcharge,
       partialRef,
-      customCSS: customCSS2,
+      customCSS,
       disableSubmitBtn
     }),
     [
@@ -11602,7 +11944,7 @@ var PaymentWidget = ({
     ]
   );
   const [commonProps, setCommonProps] = useState11(initialCommonProps);
-  useEffect16(() => {
+  useEffect17(() => {
     if (show) {
       setCommonProps(initialCommonProps);
     }
@@ -11633,35 +11975,33 @@ var PaymentWidget = ({
       setLoading(false);
     }
   };
-  useEffect16(() => {
+  useEffect17(() => {
     if (show && isPartial && partialRef) {
       getskyosOrderDetails();
     }
   }, [show, isPartial, partialRef]);
   return /* @__PURE__ */ jsxs21(Fragment20, { children: [
-    /* @__PURE__ */ jsx35("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
-    /* @__PURE__ */ jsx35(DataScript, {}),
-    /* @__PURE__ */ jsx35(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx35(SkyChargewidgetstyles, {}),
-    /* @__PURE__ */ jsx35(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx35(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx35(DataCapScriptLoader, {}),
+    /* @__PURE__ */ jsx36("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
+    /* @__PURE__ */ jsx36(DataScript, {}),
+    /* @__PURE__ */ jsx36(SkyChargewidgetstyles, {}),
+    /* @__PURE__ */ jsx36(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx36(CustomModal2styles_default, {}),
     !autoTrigger && /* @__PURE__ */ jsxs21("button", { className: submitBtnClass || "paymentBtn", disabled: disableSubmitBtn, onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
     ] }),
-    !autoTrigger ? /* @__PURE__ */ jsx35(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
+    !autoTrigger ? /* @__PURE__ */ jsx36(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx36(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx36(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
   ] });
 };
 
 // src/app/components/Skysystemz/EmbeddedCheckout.tsx
-import { useEffect as useEffect18, useState as useState12, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect19, useState as useState12, useMemo as useMemo2 } from "react";
 import axios11 from "axios";
 
 // src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function EmbeddedCheckoutStyles({ extraCustomCSS }) {
-  return /* @__PURE__ */ jsx36("style", { children: `
+  return /* @__PURE__ */ jsx37("style", { children: `
 
             .pay-amount-conatiner{
             margin-top: 20px !important;
@@ -12007,27 +12347,27 @@ padding:0px !important;
 }
 
 // src/app/components/Atoms/Applepay/ApplePayScriptLoader.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 var applePayScriptLoaded = false;
 var ApplePayScriptLoader = () => {
-  useEffect17(() => {
+  useEffect18(() => {
     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 = () => {
+      const script = document.createElement("script");
+      script.src = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js";
+      script.async = true;
+      script.onload = () => {
         console.log("\u2705 Apple Pay script loaded");
         applePayScriptLoaded = true;
         console.log("ApplePaySession:", window.ApplePaySession);
       };
-      script2.onerror = (err) => {
+      script.onerror = (err) => {
         console.error("\u274C Apple Pay script failed", err);
       };
-      document.head.appendChild(script2);
+      document.head.appendChild(script);
     } else {
       applePayScriptLoaded = true;
     }
@@ -12036,7 +12376,7 @@ var ApplePayScriptLoader = () => {
 };
 
 // src/app/components/Skysystemz/EmbeddedCheckout.tsx
-import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var EmbeddedCheckout = ({
   amount,
   bankAmount,
@@ -12059,7 +12399,7 @@ var EmbeddedCheckout = ({
   partialRef,
   onSubmit,
   onLoad,
-  customCSS: customCSS2
+  customCSS
 }) => {
   const [show, setShow] = useState12(false);
   const [loading, setLoading] = useState12(false);
@@ -12067,6 +12407,7 @@ var EmbeddedCheckout = ({
   });
   const [orderGuid, setOrderGuid] = useState12(null);
   const [remainingAmount, setRemainingAmount] = useState12(null);
+  const [isTokenizerReady, setTokenizerReady] = useState12(false);
   const initialCommonProps = useMemo2(
     () => ({
       amount,
@@ -12114,7 +12455,7 @@ var EmbeddedCheckout = ({
     ]
   );
   const [commonProps, setCommonProps] = useState12(initialCommonProps);
-  useEffect18(() => {
+  useEffect19(() => {
     if (show) {
       setCommonProps(initialCommonProps);
     }
@@ -12145,13 +12486,13 @@ var EmbeddedCheckout = ({
       setLoading(false);
     }
   };
-  useEffect18(() => {
-    if (show && isPartial && partialRef) {
+  useEffect19(() => {
+    if (autoTrigger && isPartial && partialRef) {
       getskyosOrderDetails();
     }
-  }, [show, isPartial, partialRef]);
+  }, [autoTrigger, isPartial, partialRef]);
   console.log(onLoad, "onLoad");
-  useEffect18(() => {
+  useEffect19(() => {
     const supported = !!window.ApplePaySession;
     let canPay = false;
     if (supported) {
@@ -12163,20 +12504,18 @@ var EmbeddedCheckout = ({
     console.log(`ApplePaySession: ${supported}, canMakePayments: ${canPay}`);
   }, []);
   return /* @__PURE__ */ jsxs22(Fragment21, { children: [
-    /* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
-    /* @__PURE__ */ jsx37(DataScript, {}),
-    /* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
-    /* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
-    /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
-    /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
-    /* @__PURE__ */ jsx37(ApplePayScriptLoader, {}),
-    /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
+    /* @__PURE__ */ jsx38("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
+    /* @__PURE__ */ jsx38(DataScript, {}),
+    /* @__PURE__ */ jsx38(SkyChargewidgetstyles, {}),
+    /* @__PURE__ */ jsx38(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx38(CustomModal2styles_default, {}),
+    /* @__PURE__ */ jsx38(ApplePayScriptLoader, {}),
+    /* @__PURE__ */ jsx38(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS }),
     !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
     ] }),
-    !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
+    !autoTrigger ? /* @__PURE__ */ jsx38(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx38(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx38(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
   ] });
 };
 export {