@fractalpay/fractalpay-next-dev 0.0.236 → 0.0.238

package/dist/index.d.ts

@@ -156,8 +156,8 @@ type Props = {
     partialRef?: string;
     onSubmit?: (submitFn: () => void) => void;
     onLoad: boolean;
-    customeCSS?: string;
+    customCSS?: string;
 };
-declare const EmbeddedCheckout: ({ amount, bankAmount, submitBtnText, session_token, customerId, callback, merchantName, isPreAuth, surcharge, submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds, autoTrigger, isPartial, bankSurcharge, partialRef, onSubmit, onLoad, customeCSS }: Props) => React.JSX.Element;
+declare const EmbeddedCheckout: ({ amount, bankAmount, submitBtnText, session_token, customerId, callback, merchantName, isPreAuth, surcharge, submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds, autoTrigger, isPartial, bankSurcharge, partialRef, onSubmit, onLoad, customCSS }: Props) => React.JSX.Element;
 
 export { AddCardEasyPay as AddCard, CardOnFile, EmbeddedCheckout, GetPaymentPage, PartialPayment, PaymentWidget, PreAuthPayment, RequestPayment, RequestPreAuthPayment };

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.236",
+      version: "0.0.238",
       private: false,
       type: "module",
       scripts: {
@@ -3239,7 +3239,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
       {
         id: "card_number",
         className: "form-control card-number-new",
-        style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
+        style: { height: `${isSky ? "36px" : "46px"}` }
       }
     ),
     /* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
@@ -3248,7 +3248,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_month",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3256,7 +3256,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "exp_year",
           className: "form-control required card-cvv-in",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) }),
       /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3264,7 +3264,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
         {
           id: "cvv",
           className: "form-control card-cvv-in required",
-          style: { height: "36px", display: "inline-block" }
+          style: { height: "36px", display: "block", minHeight: "36px" }
         }
       ) })
     ] }) })
@@ -9383,7 +9383,20 @@ margin:0px !important;
 padding:0px !important;
 }
 
-    
+
+.toggle-num-wrapper-new div#card_number {
+    padding: 0px 10px;
+    display: block !important;
+}
+   .toggle-num-wrapper-new .card-crdi.card-expiry-new {
+    padding: 0px 10px;
+}
+   .toggle-num-wrapper-new .input-main-wrap-frac {
+    height: 36px;
+}
+   .toggle-num-wrapper-new:focus {
+    border: 1px solid #004eab !important;
+}
 
         ` });
 }
@@ -10889,8 +10902,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                     /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
                       setActiveinCard("form");
                     } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
-                  ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs20("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
+                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
+                  ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs20("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
                     if (e.key === "Enter" && loading) {
                       e.preventDefault();
                       e.stopPropagation();
@@ -10909,7 +10922,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                       ] }),
                       /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
                         /* @__PURE__ */ jsx34("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
-                        /* @__PURE__ */ jsx34("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx34(
+                        /* @__PURE__ */ jsx34("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx34(
                           FractalFields_default,
                           {
                             fractalStyles,
@@ -10966,7 +10979,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                       ] }) })
                     ] }),
                     /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
-                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
+                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
                     if (e.key === "Enter" && loading) {
                       e.preventDefault();
                       e.stopPropagation();
@@ -11054,8 +11067,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                     /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
                       setActiveinBank("form");
                     } }),
-                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
-                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
+                    /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
+                  ] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
                     if (e.key === "Enter" && loading) {
                       e.preventDefault();
                       e.stopPropagation();
@@ -11654,6 +11667,8 @@ padding:0px !important;
     border-radius: 15px;
     min-width: 300px;
 }
+
+
     ${extraCustomCSS}
 
             ` });
@@ -11683,7 +11698,7 @@ var EmbeddedCheckout = ({
   partialRef,
   onSubmit,
   onLoad,
-  customeCSS
+  customCSS: customCSS2
 }) => {
   const [show, setShow] = useState12(false);
   const [loading, setLoading] = useState12(false);
@@ -11783,7 +11798,7 @@ var EmbeddedCheckout = ({
     /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
     /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
     /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
-    /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customeCSS }),
+    /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
     !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
       submitBtnText,
       submitBtnIcon