@fractalpay/fractalpay-next-dev 0.0.304 → 0.0.306

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-dev",
-      version: "0.0.304",
+      version: "0.0.306",
       private: false,
       type: "module",
       scripts: {
@@ -287,7 +287,7 @@ if (name === "@fractalpay/fractalpay-next-dev") {
   applePayMerchantId = "fractal";
   googlePayMerchantId = "BCR2DN4T6OC2TCQH";
   googlePayEnvironment = "PRODUCTION";
-  googlePayGatewayMerchantId = "fractal";
+  googlePayGatewayMerchantId = "skysystemz";
 } else if (name === "@fractalpay/fractalpay-next") {
   masterBaseUrl = "https://api.fractalpay.com/";
   baseUrl = "https://widget.fractalpay.com/";
@@ -297,7 +297,7 @@ if (name === "@fractalpay/fractalpay-next-dev") {
   applePayMerchantId = "fractal";
   googlePayMerchantId = "BCR2DN4T6OC2TCQH";
   googlePayEnvironment = "PRODUCTION";
-  googlePayGatewayMerchantId = "fractal";
+  googlePayGatewayMerchantId = "skysystemz";
 } else {
   baseUrl = "http://localhost:8082/";
   masterBaseUrl = "http://localhost:8081/";
@@ -3481,8 +3481,6 @@ var baseCSS = `
     }
 
   `;
-var datacapInitializing = false;
-var datacapInitialized = false;
 var DataCapFields = ({
   isOpen,
   tokenKey,
@@ -3490,11 +3488,15 @@ var DataCapFields = ({
   isAddCard,
   isEmbedded,
   customCSS: extraCss,
-  height
+  height,
+  onError
 }) => {
   const iframeId = "datacap-iframe";
   const resolverRef = useRef2(null);
   const [iframeReady, setIframeReady] = useState3(false);
+  const [mountKey, setMountKey] = useState3(0);
+  const initGenRef = useRef2(0);
+  const initTimeoutRef = useRef2(null);
   let customCSS = baseCSS;
   useEffect7(() => {
     if (!isOpen || !tokenKey) return;
@@ -3534,6 +3536,8 @@ var DataCapFields = ({
     if (extraCss) {
       customCSS += extraCss;
     }
+    const myGen = ++initGenRef.current;
+    setMountKey(myGen);
     const initialize = async () => {
       setLoader == null ? void 0 : setLoader(true);
       setIframeReady(false);
@@ -3552,18 +3556,39 @@ var DataCapFields = ({
           }
         }, 100);
       });
-      await waitForSDK();
-      const sdk = window.DatacapHostedWebToken;
-      if (datacapInitializing || datacapInitialized) {
-        console.log("\u{1F7E1} Datacap already initializing/initialized");
+      const waitForIframe = () => new Promise((resolve, reject) => {
+        let attempts = 0;
+        const interval = setInterval(() => {
+          attempts++;
+          if (document.getElementById(iframeId)) {
+            clearInterval(interval);
+            resolve();
+          }
+          if (attempts > 100) {
+            clearInterval(interval);
+            reject("Datacap iframe not found");
+          }
+        }, 50);
+      });
+      try {
+        await waitForSDK();
+        await waitForIframe();
+      } catch (err) {
+        if (initGenRef.current !== myGen) return;
+        console.error("\u274C Datacap failed to become ready:", err);
+        setLoader == null ? void 0 : setLoader(false);
+        onError == null ? void 0 : onError("Unable to load payment form. Please try again.");
         return;
       }
-      datacapInitializing = true;
-      const initTimeout = setTimeout(() => {
+      if (initGenRef.current !== myGen) return;
+      const sdk = window.DatacapHostedWebToken;
+      initTimeoutRef.current = setTimeout(() => {
         var _a, _b;
+        if (initGenRef.current !== myGen) return;
         console.error("\u274C Datacap iframe load timeout");
-        datacapInitializing = false;
+        initTimeoutRef.current = null;
         setLoader == null ? void 0 : setLoader(false);
+        onError == null ? void 0 : onError("Unable to load payment form. Please try again.");
         (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
           _a,
           "Unable to load payment form"
@@ -3573,9 +3598,7 @@ var DataCapFields = ({
         tokenKey,
         iframeId,
         (response) => {
-          clearTimeout(initTimeout);
-          datacapInitializing = false;
-          datacapInitialized = true;
+          if (initGenRef.current !== myGen) return;
           setLoader == null ? void 0 : setLoader(false);
           if (!resolverRef.current) return;
           if ((response == null ? void 0 : response.Error) || (response == null ? void 0 : response.Errors)) {
@@ -3615,12 +3638,6 @@ var DataCapFields = ({
       delete window.requestDcToken;
     };
   }, []);
-  useEffect7(() => {
-    return () => {
-      datacapInitializing = false;
-      datacapInitialized = false;
-    };
-  }, []);
   return (
     // <iframe
     //   id={iframeId}
@@ -3643,13 +3660,22 @@ var DataCapFields = ({
         id: iframeId,
         onLoad: () => {
           console.log("\u{1F7E2} Iframe visually loaded");
+          if (initTimeoutRef.current) {
+            clearTimeout(initTimeoutRef.current);
+            initTimeoutRef.current = null;
+          }
           setIframeReady(true);
           setLoader == null ? void 0 : setLoader(false);
         },
         onError: () => {
           var _a, _b;
           console.error("\u274C iframe failed");
+          if (initTimeoutRef.current) {
+            clearTimeout(initTimeoutRef.current);
+            initTimeoutRef.current = null;
+          }
           setLoader == null ? void 0 : setLoader(false);
+          onError == null ? void 0 : onError("Payment form failed to load");
           (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
             _a,
             "Payment form failed to load"
@@ -3662,7 +3688,8 @@ var DataCapFields = ({
           opacity: iframeReady ? 1 : 0,
           transition: "opacity 0.3s ease"
         }
-      }
+      },
+      mountKey
     )
   );
 };
@@ -4257,6 +4284,7 @@ function GetPaymentPage(props) {
   const [loading, setLoading] = useState4(false);
   const [loadingIframe, setLoadingIframe] = useState4(false);
   const [loading2, setLoading2] = useState4(false);
+  const [surchargeLookupLoading, setSurchargeLookupLoading] = useState4(false);
   const [error, setError] = useState4("");
   const [errorIframe, setErrorIframe] = useState4("");
   const [success, setSuccess] = useState4(false);
@@ -4354,6 +4382,47 @@ function GetPaymentPage(props) {
       cardholder_billing_zip: (cardData == null ? void 0 : cardData.zipCode) || void 0
     };
   };
+  const runCofSurchargeLookup = async (cardId) => {
+    var _a2, _b2;
+    try {
+      const res = await axios3.post(`${baseUrl}surcharge-lookup-cof`, {
+        fractalpayPublicKey: fractalpayClientKey,
+        customer_id: props == null ? void 0 : props.customerId,
+        card_id: cardId,
+        amount: Number((_a2 = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _a2 : 0),
+        cardholder_billing_zip: (cardData == null ? void 0 : cardData.zipCode) || void 0
+      });
+      const data = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data;
+      if (!data) return null;
+      return {
+        card_brand: data.card_brand,
+        card_issue_type: data.card_issue_type,
+        surcharge_allowed: data.surcharge_allowed,
+        max_surcharge_percent: data.max_surcharge_percent,
+        max_surcharge_amount: data.max_surcharge_amount
+      };
+    } catch (err) {
+      console.error("COF surcharge lookup failed", err);
+      return null;
+    }
+  };
+  useEffect8(() => {
+    const surchargingOn = Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1 && !!(props == null ? void 0 : props.pass_fee);
+    if (!surchargingOn || !(selectedCard == null ? void 0 : selectedCard.id) || selectedCard.card_type === "Bank") {
+      setSurchargeResult(null);
+      return;
+    }
+    let cancelled = false;
+    setSurchargeLookupLoading(true);
+    runCofSurchargeLookup(selectedCard.id).then((result) => {
+      if (cancelled) return;
+      setSurchargeResult(result);
+      setSurchargeLookupLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedCard == null ? void 0 : selectedCard.id, selectedCard == null ? void 0 : selectedCard.card_type, paymentData == null ? void 0 : paymentData.surchargeProgram, props == null ? void 0 : props.pass_fee]);
   useEffect8(() => {
     if (show) {
       let cash_discount = CalculateCashDiscount(props == null ? void 0 : props.amount, (props == null ? void 0 : props.surcharge) || 0);
@@ -4685,7 +4754,7 @@ function GetPaymentPage(props) {
     const customer_id = props == null ? void 0 : props.customerId;
     const fractalpayPublicKey = props == null ? void 0 : props.merchantPublicKey;
     const order_id = props == null ? void 0 : props.orderID;
-    const amount = props == null ? void 0 : props.amount;
+    const amount = leftTotal;
     const card_id = selectedCard == null ? void 0 : selectedCard.id;
     const card_type = selectedCard == null ? void 0 : selectedCard.card_type;
     const preAuth_id = (props == null ? void 0 : props.preauthId) || "";
@@ -4755,7 +4824,7 @@ function GetPaymentPage(props) {
           try {
             const formData = {
               // amount: `${props.amount || 0}`,
-              amount: `${leftTotal}`,
+              amount: `${orderAmount}`,
               fractalpayPublicKey: fractalpayClientKey,
               orderId: props == null ? void 0 : props.orderID,
               customer_id: props == null ? void 0 : props.customerId,
@@ -4828,8 +4897,8 @@ function GetPaymentPage(props) {
                     return;
                   }
                   const card_issue_type = ((_i2 = tokenizeData == null ? void 0 : tokenizeData.bin_lookup_result) == null ? void 0 : _i2.card_issue_type) || null;
-                  const feeExempt = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
-                  if (feeExempt && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
+                  const feeExempt2 = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
+                  if (feeExempt2 && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
                     setLoderText(`Processing ${card_issue_type} card without fee`);
                   }
                   console.log(tokenizeData, "tokenizeData");
@@ -4951,7 +5020,7 @@ function GetPaymentPage(props) {
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
     showLoader();
     try {
       const data = {
@@ -4966,12 +5035,14 @@ function GetPaymentPage(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      let willShowCardForm = true;
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         let banklists = (_k = (_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list) == null ? void 0 : _k.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
         let cardlists = (_n = (_m = (_l = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l.data) == null ? void 0 : _m.card_list) == null ? void 0 : _n.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
         if ((cardlists == null ? void 0 : cardlists.length) > 0 || (banklists == null ? void 0 : banklists.length) > 0) {
           setActiveinCard("list");
           setActiveinBank("list");
+          willShowCardForm = false;
         }
         setCardList(cardlists);
         setBankList(banklists);
@@ -4981,11 +5052,14 @@ function GetPaymentPage(props) {
       if (((_p = (_o = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o.data) == null ? void 0 : _p.paymentDeviceList) && ((_s = (_r = (_q = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q.data) == null ? void 0 : _r.paymentDeviceList) == null ? void 0 : _s.length) > 0) {
         setSelectedReader((_u = (_t = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t.data) == null ? void 0 : _u.paymentDeviceList[0]);
       }
+      if (willShowCardForm && ((_w = (_v = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v.data) == null ? void 0 : _w.paymentGateway) === 31 && ((_y = (_x = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x.data) == null ? void 0 : _y.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
-      setError(((_w = (_v = err == null ? void 0 : err.response) == null ? void 0 : _v.data) == null ? void 0 : _w.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+      setError(((_A = (_z = err == null ? void 0 : err.response) == null ? void 0 : _z.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async (e) => {
@@ -5009,15 +5083,15 @@ function GetPaymentPage(props) {
       if (customer_id) {
         if (card_id) {
           setLoading2(true);
-          const feeExempt = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
-          if (feeExempt && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
+          const feeExempt2 = ["debit", "prepaid"].includes(String(card_issue_type || "").toLowerCase());
+          if (feeExempt2 && (props == null ? void 0 : props.pass_fee) && (paymentData == null ? void 0 : paymentData.surchargeProgram) == 1) {
             setLoderText(`Processing ${card_issue_type} card without fee`);
           }
           let resultofOrderCreate;
           if (!(card_type === "Bank")) {
             const formData = {
               // amount: `${props.amount || 0}`,
-              amount: `${leftTotal}`,
+              amount: `${orderAmount}`,
               fractalpayPublicKey: fractalpayClientKey,
               orderId: props == null ? void 0 : props.orderID,
               customer_id: props == null ? void 0 : props.customerId,
@@ -5032,7 +5106,7 @@ function GetPaymentPage(props) {
             console.log(resultofOrderCreate, "vfndsjkfvhg", resultofOrderCreate == null ? void 0 : resultofOrderCreate.data.data.posSalesIdEncode);
           }
           let chargeobj = __spreadValues(__spreadValues({
-            amount: card_type === "Bank" ? `${bankAmount}` : amount,
+            amount: `${leftTotal}`,
             order_id,
             customer_id,
             card_id,
@@ -5219,18 +5293,24 @@ function GetPaymentPage(props) {
   const merchantName = (paymentData == null ? void 0 : paymentData.bname) || (paymentData == null ? void 0 : paymentData.customer_name) || "the merchant";
   const invoiceNo = String((props == null ? void 0 : props.orderID) || "").replace(/^\s*invoice\s*#?\s*/i, "").trim();
   const invoiceLabel = invoiceNo ? `Invoice #${invoiceNo}` : "Invoice";
+  const isSurchargeProgram = Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1;
   const baseAmount = Number((_a = cashDiscount != null ? cashDiscount : props == null ? void 0 : props.amount) != null ? _a : 0);
   const fundingType = (_b = surchargeResult == null ? void 0 : surchargeResult.card_issue_type) == null ? void 0 : _b.toLowerCase();
-  const surchargeBlocked = surchargeResult && (fundingType !== "debit" && fundingType !== "prepaid");
-  const cardTotal = !surchargeBlocked ? baseAmount : Number((props == null ? void 0 : props.amount) || 0);
+  const feeExempt = fundingType === "debit" || fundingType === "prepaid";
+  let cardTotal;
+  if (isSurchargeProgram) {
+    cardTotal = feeExempt ? baseAmount : parseFloat((baseAmount * (1 + Number((props == null ? void 0 : props.surcharge) || 0) / 100)).toFixed(2));
+  } else {
+    cardTotal = Number((props == null ? void 0 : props.amount) || 0);
+  }
   const surchargeFee = Math.max(cardTotal - baseAmount, 0);
   const isBankView = activetab === "ach";
   const discountNum = Number((props == null ? void 0 : props.discount) || 0);
   const taxNum = Number((props == null ? void 0 : props.tax) || 0);
   const leftTotal = isBankView ? Number(bankAmount || 0) : cardTotal;
+  const orderAmount = isSurchargeProgram ? baseAmount : Number((props == null ? void 0 : props.amount) || 0);
   const fmtNum = (n) => Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
   const hasFee = surchargeFee > 0 && !!(props == null ? void 0 : props.pass_fee);
-  const isSurchargeProgram = Number(paymentData == null ? void 0 : paymentData.surchargeProgram) === 1;
   const showSurchargeLine = isSurchargeProgram && !isBankView && hasFee;
   const summarySubtotal = isSurchargeProgram || isBankView ? baseAmount : cardTotal;
   const savedMethods = [...cardList || [], ...bankList || []];
@@ -5353,7 +5433,7 @@ function GetPaymentPage(props) {
             } }) }),
             success && /* @__PURE__ */ jsx18(SuccessMsz, { onClose: handleClose, tranId, isDebitAdjusted }),
             !error && !errorIframe && !success && /* @__PURE__ */ jsxs9(Fragment9, { children: [
-              (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx18(Loader_default, { loading: loading || loading2 || loadingIframe, loaderText }),
+              (loading || loading2 || loadingIframe || surchargeLookupLoading) && /* @__PURE__ */ jsx18(Loader_default, { loading: loading || loading2 || loadingIframe || surchargeLookupLoading, loaderText }),
               /* @__PURE__ */ jsxs9("div", { className: "fps-modal", children: [
                 LeftSummary,
                 /* @__PURE__ */ jsxs9("section", { className: "fps-content", children: [
@@ -5391,7 +5471,7 @@ function GetPaymentPage(props) {
                       FractalFooter,
                       {
                         authText: AuthText,
-                        disabled: loading2 || !(selectedCard == null ? void 0 : selectedCard.id),
+                        disabled: loading2 || !(selectedCard == null ? void 0 : selectedCard.id) || surchargeLookupLoading,
                         onPay: handlechargeCustomer,
                         buttonLabel: isPreAuth ? `Authorize ${formatUSD(cardTotal.toFixed(2))}` : `Pay ${formatUSD(((selectedCard == null ? void 0 : selectedCard.card_type) === "Bank" ? Number(bankAmount || 0) : cardTotal).toFixed(2))} to ${merchantName}`
                       }
@@ -5537,7 +5617,7 @@ function GetPaymentPage(props) {
                                 getSurchargeOptions,
                                 onSurchargeResult: setSurchargeResult
                               }
-                            ) : /* @__PURE__ */ jsx18(DataCapFields, { isOpen: show, tokenKey: paymentData == null ? void 0 : paymentData.dctoken, setLoader: setLoadingIframe }) }) }),
+                            ) : /* @__PURE__ */ jsx18(DataCapFields, { isOpen: show, tokenKey: paymentData == null ? void 0 : paymentData.dctoken, setLoader: setLoadingIframe, onError: (msg) => setError(msg || DcLoadingError) }) }) }),
                             /* @__PURE__ */ jsx18(FractalField, { label: "Zip", htmlFor: "zip", error: cardError == null ? void 0 : cardError.zipCode, children: /* @__PURE__ */ jsx18("input", { id: "zip", className: "fps-input", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }) }),
                             (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs9(FractalCheckbox, { id: "save_card", checked: saveCardInfo, onChange: (v) => setSaveCardInfo(v), children: [
                               "Save this card. ",
@@ -6110,7 +6190,7 @@ function AddCardEasyPay(props) {
     return Object.keys(errors).length > 0;
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c, _d, _e, _f, _g;
     showLoader();
     try {
       const data = {
@@ -6124,6 +6204,9 @@ function AddCardEasyPay(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      if (((_e = (_d = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d.data) == null ? void 0 : _e.paymentGateway) === 31 && ((_g = (_f = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f.data) == null ? void 0 : _g.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
@@ -6381,7 +6464,8 @@ function AddCardEasyPay(props) {
                 isOpen: true,
                 tokenKey: paymentData == null ? void 0 : paymentData.dctoken,
                 setLoader: setLoadingIframe,
-                isAddCard: true
+                isAddCard: true,
+                onError: (msg) => setError(msg || DcLoadingError)
               }
             ) }),
             /* @__PURE__ */ jsxs11("div", { className: "form-group", style: { marginTop: "0" }, children: [
@@ -6988,21 +7072,24 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
     onCancel();
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     try {
       showLoader();
       const res = await axios5.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`);
       if ((res == null ? void 0 : res.status) == 200) {
         setPaymentGateway((_b2 = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.paymentGateway);
         setDCToken((_d = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
+        if (((_f = (_e = res == null ? void 0 : res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.paymentGateway) === 31 && ((_h = (_g = res == null ? void 0 : res.data) == null ? void 0 : _g.data) == null ? void 0 : _h.dctoken)) {
+          setLoadingIframe(true);
+        }
         hideLoader();
       }
     } catch (error2) {
-      console.log((_f = (_e = error2 == null ? void 0 : error2.response) == null ? void 0 : _e.data) == null ? void 0 : _f.result, "error while getting payment details");
+      console.log((_j = (_i = error2 == null ? void 0 : error2.response) == null ? void 0 : _i.data) == null ? void 0 : _j.result, "error while getting payment details");
       callback({
-        error: ((_h = (_g = error2 == null ? void 0 : error2.response) == null ? void 0 : _g.data) == null ? void 0 : _h.message) || "Something went wrong!",
-        result: (_j = (_i = error2 == null ? void 0 : error2.response) == null ? void 0 : _i.data) == null ? void 0 : _j.result,
-        statusCode: (_k = error2 == null ? void 0 : error2.response) == null ? void 0 : _k.status
+        error: ((_l = (_k = error2 == null ? void 0 : error2.response) == null ? void 0 : _k.data) == null ? void 0 : _l.message) || "Something went wrong!",
+        result: (_n = (_m = error2 == null ? void 0 : error2.response) == null ? void 0 : _m.data) == null ? void 0 : _n.result,
+        statusCode: (_o = error2 == null ? void 0 : error2.response) == null ? void 0 : _o.status
       });
       hideLoader();
     }
@@ -7268,7 +7355,8 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
           tokenKey: dcToken,
           setLoader: setLoadingIframe,
           customCSS,
-          height
+          height,
+          onError: (msg) => setError(msg || DcLoadingError)
         }
       ) }),
       /* @__PURE__ */ jsxs13("div", { className: "form-group", children: [
@@ -7958,7 +8046,7 @@ function PartialPayment(props) {
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A;
     showLoader();
     try {
       const data = {
@@ -7973,11 +8061,13 @@ function PartialPayment(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      let willShowCardForm = true;
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         let banklists = (_k2 = (_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list) == null ? void 0 : _k2.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
         let cardlists = (_n2 = (_m2 = (_l2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l2.data) == null ? void 0 : _m2.card_list) == null ? void 0 : _n2.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
         if ((cardlists == null ? void 0 : cardlists.length) > 0) {
           setActiveinCard("list");
+          willShowCardForm = false;
         }
         if ((banklists == null ? void 0 : banklists.length) > 0) {
           setActiveinBank("list");
@@ -7990,11 +8080,14 @@ function PartialPayment(props) {
       if (((_p2 = (_o2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o2.data) == null ? void 0 : _p2.paymentDeviceList) && ((_s2 = (_r2 = (_q2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q2.data) == null ? void 0 : _r2.paymentDeviceList) == null ? void 0 : _s2.length) > 0) {
         setSelectedReader((_u2 = (_t2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t2.data) == null ? void 0 : _u2.paymentDeviceList[0]);
       }
+      if (willShowCardForm && ((_w2 = (_v2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v2.data) == null ? void 0 : _w2.paymentGateway) === 31 && ((_y2 = (_x2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x2.data) == null ? void 0 : _y2.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
-      setError(((_w2 = (_v2 = err == null ? void 0 : err.response) == null ? void 0 : _v2.data) == null ? void 0 : _w2.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+      setError(((_A = (_z2 = err == null ? void 0 : err.response) == null ? void 0 : _z2.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async (e) => {
@@ -8568,7 +8661,8 @@ function PartialPayment(props) {
                             {
                               isOpen: show,
                               tokenKey: paymentData == null ? void 0 : paymentData.dctoken,
-                              setLoader: setLoadingIframe
+                              setLoader: setLoadingIframe,
+                              onError: (msg) => setError(msg || DcLoadingError)
                             }
                           ) }),
                           /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
@@ -10118,6 +10212,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [errorBankConsent, setErrorBankConsent] = useState9("");
   const [errorBankConsentOther, setErrorBankConsentOther] = useState9("");
   const [isTokenizerReady, setTokenizerReady] = useState9(false);
+  console.log(loadingIframe, "loadingIframe");
+  console.log(loading, "loader");
+  console.log(loading2, "loading2");
+  console.log(loadingPrev, "loadingPrev");
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
   let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -10326,6 +10424,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   };
   const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    showLoader();
     try {
       console.log({
         tokenizeData,
@@ -10951,7 +11050,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2;
     try {
       showLoader();
       const res = await axios8.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`, {
@@ -10965,16 +11064,19 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
         setProcessingFee(Number((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.fee) || 0);
         setPaymentGateway((_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.paymentGateway);
         setDCToken((_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.data) == null ? void 0 : _h2.dctoken);
+        if (((_j2 = (_i2 = res == null ? void 0 : res.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.paymentGateway) === 31 && ((_l2 = (_k2 = res == null ? void 0 : res.data) == null ? void 0 : _k2.data) == null ? void 0 : _l2.dctoken)) {
+          setLoadingIframe(true);
+        }
         hideLoader();
       }
     } catch (error2) {
-      console.log((_j2 = (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.data) == null ? void 0 : _j2.result, "error while getting payment details");
+      console.log((_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result, "error while getting payment details");
       callback({
-        error: ((_l2 = (_k2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || "Something went wrong!",
-        result: (_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result,
-        statusCode: (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.status
+        error: ((_p2 = (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.data) == null ? void 0 : _p2.message) || "Something went wrong!",
+        result: (_r2 = (_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) == null ? void 0 : _r2.result,
+        statusCode: (_s2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _s2.status
       });
-      setError(((_q2 = (_p2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _p2.data) == null ? void 0 : _q2.message) || (error2 == null ? void 0 : error2.message) || "Something went wrong");
+      setError(((_u2 = (_t2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _t2.data) == null ? void 0 : _u2.message) || (error2 == null ? void 0 : error2.message) || "Something went wrong");
       hideLoader();
     }
   };
@@ -11441,7 +11543,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           tokenKey: dcToken,
                           setLoader: activeinCard === "form" ? setLoadingIframe : null,
                           isEmbedded: onSubmit ? true : false,
-                          customCSS
+                          customCSS,
+                          onError: (msg) => setError(msg || DcLoadingError)
                         }
                       ) }),
                       /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [