@fractalpay/fractalpay-next 0.0.43 → 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.43",
+      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,
@@ -10072,7 +10255,7 @@ function ApplePayButton({
 
 // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
 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: customCSS2 }) => {
+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 = useRef11(false);
   const cardFormRef = useRef11(null);
@@ -10120,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";
@@ -10327,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,
@@ -10336,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();
     }
@@ -11187,6 +11365,20 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   }
   return /* @__PURE__ */ jsxs20(Fragment19, { children: [
     (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("");
@@ -11348,7 +11540,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                         ] }),
                         /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
                           /* @__PURE__ */ jsx35("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
-                          /* @__PURE__ */ jsx35("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx35(
+                          /* @__PURE__ */ jsx35("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && isTokenizerReady && /* @__PURE__ */ jsx35(
                             FractalFields_default,
                             {
                               fractalStyles,
@@ -11435,7 +11627,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           tokenKey: dcToken,
                           setLoader: activeinCard === "form" ? setLoadingIframe : null,
                           isEmbedded: onSubmit ? true : false,
-                          customCSS: customCSS2
+                          customCSS
                         }
                       ) }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
@@ -11693,7 +11885,7 @@ var PaymentWidget = ({
   isPartial,
   bankSurcharge,
   partialRef,
-  customCSS: customCSS2,
+  customCSS,
   disableSubmitBtn = false
 }) => {
   const [show, setShow] = useState11(autoTrigger || false);
@@ -11725,7 +11917,7 @@ var PaymentWidget = ({
       isPartial,
       bankSurcharge,
       partialRef,
-      customCSS: customCSS2,
+      customCSS,
       disableSubmitBtn
     }),
     [
@@ -11791,11 +11983,9 @@ var PaymentWidget = ({
   return /* @__PURE__ */ jsxs21(Fragment20, { children: [
     /* @__PURE__ */ jsx36("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
     /* @__PURE__ */ jsx36(DataScript, {}),
-    /* @__PURE__ */ jsx36(FractalTokenizerScript, {}),
     /* @__PURE__ */ jsx36(SkyChargewidgetstyles, {}),
     /* @__PURE__ */ jsx36(CardBankRadioStyles, {}),
     /* @__PURE__ */ jsx36(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx36(DataCapScriptLoader, {}),
     !autoTrigger && /* @__PURE__ */ jsxs21("button", { className: submitBtnClass || "paymentBtn", disabled: disableSubmitBtn, onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon
@@ -12166,18 +12356,18 @@ var ApplePayScriptLoader = () => {
       `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;
     }
@@ -12209,7 +12399,7 @@ var EmbeddedCheckout = ({
   partialRef,
   onSubmit,
   onLoad,
-  customCSS: customCSS2
+  customCSS
 }) => {
   const [show, setShow] = useState12(false);
   const [loading, setLoading] = useState12(false);
@@ -12217,6 +12407,7 @@ var EmbeddedCheckout = ({
   });
   const [orderGuid, setOrderGuid] = useState12(null);
   const [remainingAmount, setRemainingAmount] = useState12(null);
+  const [isTokenizerReady, setTokenizerReady] = useState12(false);
   const initialCommonProps = useMemo2(
     () => ({
       amount,
@@ -12296,10 +12487,10 @@ var EmbeddedCheckout = ({
     }
   };
   useEffect19(() => {
-    if (show && isPartial && partialRef) {
+    if (autoTrigger && isPartial && partialRef) {
       getskyosOrderDetails();
     }
-  }, [show, isPartial, partialRef]);
+  }, [autoTrigger, isPartial, partialRef]);
   console.log(onLoad, "onLoad");
   useEffect19(() => {
     const supported = !!window.ApplePaySession;
@@ -12315,13 +12506,11 @@ var EmbeddedCheckout = ({
   return /* @__PURE__ */ jsxs22(Fragment21, { children: [
     /* @__PURE__ */ jsx38("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
     /* @__PURE__ */ jsx38(DataScript, {}),
-    /* @__PURE__ */ jsx38(FractalTokenizerScript, {}),
     /* @__PURE__ */ jsx38(SkyChargewidgetstyles, {}),
     /* @__PURE__ */ jsx38(CardBankRadioStyles, {}),
     /* @__PURE__ */ jsx38(CustomModal2styles_default, {}),
-    /* @__PURE__ */ jsx38(DataCapScriptLoader, {}),
     /* @__PURE__ */ jsx38(ApplePayScriptLoader, {}),
-    /* @__PURE__ */ jsx38(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
+    /* @__PURE__ */ jsx38(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS }),
     !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon