@pinerohit11/testwidget 0.1.37 → 0.1.38

package/dist/index.cjs

@@ -47,7 +47,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/app/index.ts
 var app_exports = {};
 __export(app_exports, {
-  PaywithFractal: () => PaywithFractal,
   RequestPayment: () => RequestPayment
 });
 module.exports = __toCommonJS(app_exports);
@@ -223,7 +222,8 @@ var RequestPaymentstyles = (props) => {
   /* background: #fff; */
   border-radius: 20px !important;
   position: relative;
-  width: 430px;
+   width: 100%;
+max-width: 100%;
   margin: 30px auto;
   overflow: inherit !important;
 }
@@ -532,10 +532,10 @@ th {
   margin: 0 auto;
 }
 
-.modal-content {
-  max-width: 420px;
-  margin-top: 5%;
-}
+// .modal-content {
+//   max-width: 420px;
+//   margin-top: 5%;
+// }
 @media (max-width: 460px) {
   .payment-popup {
     padding: 35px 25px;
@@ -976,15 +976,39 @@ input {
     background-color: #acc6db !important;
 } */
 
+    input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
         `);
 };
 var RequestPaymentstyles_default = RequestPaymentstyles;
 
+// src/app/components/baseurl.ts
+var baseUrl = "https://staging-widget.fractalpay.com/";
+
+// src/app/components/Errortext.ts
+var ErrorText = {
+  namerequired: "Full Name is required",
+  amountrequired: "Amount is required",
+  amountpositive: "Amount should be positive",
+  amountzero: "Amount should not be zero",
+  phoneoremailrequired: "Phone or Email is required",
+  invalidemail: "Invalid email",
+  invalidemailformat: "Invalid email format",
+  onlylettersallowed: "Only letters are allowed",
+  phonenumberlength: "Phone number should be 10 digits"
+};
+
 // src/app/components/RequestPayment/RequestPayment.tsx
 function RequestPayment(props) {
   const fractalpayClientKey = props.fractalpayClientKey;
-  const masterBaseUrl = "https://testapi.fractalpay.com/";
-  const baseUrl = "https://staging-widget.fractalpay.com/";
   const [show, setShow] = (0, import_react4.useState)(false);
   const [loading, setLoading] = (0, import_react4.useState)(false);
   const [errors, setErrors] = (0, import_react4.useState)({});
@@ -998,7 +1022,8 @@ function RequestPayment(props) {
   });
   const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
   const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
-  const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
   const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
   const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
   const handleClose = () => {
@@ -1019,7 +1044,7 @@ function RequestPayment(props) {
     });
   };
   const handleSubmit = (event) => {
-    const message = {
+    let message = {
       type: "preview.compiledcheck",
       other: __spreadProps(__spreadValues({}, event), { status: true })
     };
@@ -1062,28 +1087,45 @@ function RequestPayment(props) {
       setLoading(false);
     }
   };
-  const validateAmount = (amount) => {
-    return amountRegex.test(amount);
-  };
+  const validateAmount = (amount) => amoutRegex.test(amount);
+  const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
   const handleChange = (e) => {
     const { value } = e.target;
     const token = e.target.dataset.token;
     setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
     if (token === "name" && !isAlpha(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        [token]: "Only letters are allowed"
+        [token]: ErrorText.onlylettersallowed
       }));
       return;
     }
     if (token === "phone_number" && !phoneNumberRegex(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        [token]: "Phone number should be 10 digits"
+        [token]: ErrorText.phonenumberlength
       }));
       return;
     }
     if (token === "email" && !isValidEmail(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        email: "Invalid email format"
+        email: ErrorText.invalidemailformat
+      }));
+      return;
+    }
+    if (token === "amount" && !value) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountrequired
+      }));
+      return;
+    }
+    if (token === "amount" && !PositiveAmount(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountpositive
+      }));
+      return;
+    }
+    if (token === "amount" && parseFloat(value) === 0) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountzero
       }));
       return;
     }
@@ -1101,95 +1143,121 @@ function RequestPayment(props) {
   };
   const validateForm = () => {
     let newErrors = {};
-    if (!requestDetails.name) newErrors.name = "Full Name is required";
-    if (!requestDetails.amount) newErrors.amount = "Amount is required";
-    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
-    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
-    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
+    if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
+    if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
+    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
+    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Full Name",
-      "data-token": "name",
-      onChange: handleChange
+  (0, import_react4.useEffect)(() => {
+    if (props.amount) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
     }
-  ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    {
-      maxLength: 10,
-      className: "form-control",
-      onChange: (e) => {
-        handleChange(e);
-      },
-      placeholder: "Phone Number",
-      type: "text",
-      "data-token": "phone_number"
+  }, [props.amount]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
     }
-  ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Email",
-      onChange: handleChange,
-      "data-token": "email"
-    }
-  ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    {
-      "data-token": "amount",
-      type: "number",
-      className: "form-control",
-      value: requestDetails.amount,
-      onChange: handleChange,
-      onBlur: handleAmountBlur
-    }
-  )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Order Id",
-      onChange: handleChange,
-      "data-token": "order_id"
-    }
-  ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
-    import_react_bootstrap.Button,
-    {
-      type: "button",
-      className: "PayButton",
-      onClick: sendRequestPayment,
-      disabled: loading
-    },
-    loading ? "Loading..." : "Send Request"
-  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
-    "svg",
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(
+    import_react_bootstrap.Modal,
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "20",
-      height: "20",
-      viewBox: "0 0 26 26"
+      show,
+      onHide: handleClose,
+      size: "lg",
+      backdrop: "static",
+      keyboard: false
     },
-    /* @__PURE__ */ import_react4.default.createElement(
-      "path",
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
       {
-        fill: "currentColor",
-        d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        className: "form-control",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange
       }
-    )
-  ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
-    "img",
-    {
-      src: "https://ui.fractalpay.com/favicon.ico",
-      alt: "Fractal logo",
-      className: "powered-logo"
-    }
-  )))), /* @__PURE__ */ import_react4.default.createElement(
+    ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        maxLength: 10,
+        className: "form-control",
+        onChange: (e) => {
+          handleChange(e);
+        },
+        placeholder: "Phone Number",
+        type: "text",
+        "data-token": "phone_number"
+      }
+    ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email"
+      }
+    ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        "data-token": "amount",
+        min: 0,
+        type: "number",
+        className: "form-control",
+        value: requestDetails.amount,
+        onChange: handleChange,
+        onBlur: handleAmountBlur,
+        onKeyDown: handleKeyDown,
+        onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
+          e2.preventDefault();
+        }, { passive: false })
+      }
+    )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Order Id",
+        onChange: handleChange,
+        "data-token": "order_id"
+      }
+    ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
+      import_react_bootstrap.Button,
+      {
+        type: "button",
+        className: "PayButton",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        }
+      )
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))
+  ), /* @__PURE__ */ import_react4.default.createElement(
     import_react_bootstrap.Modal,
     {
       className: "payment-suc",
@@ -1234,233 +1302,9 @@ function RequestPayment(props) {
         }
       )))
     ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
-  ));
-}
-
-// src/app/components/Greet.tsx
-var import_axios2 = __toESM(require("axios"), 1);
-var import_react5 = __toESM(require("react"), 1);
-var import_bootstrap_min = require("bootstrap/dist/css/bootstrap.min.css");
-function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
-  const baseUrl = "http://192.168.1.52:8082/";
-  const masterBaseUrl = "http://192.168.1.52:8081/";
-  console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
-  const [dcToken, setDcToken] = (0, import_react5.useState)("");
-  const [error, setError] = (0, import_react5.useState)({});
-  const [toggleQr, setToggleQr] = (0, import_react5.useState)(false);
-  const [formData, setFormData] = (0, import_react5.useState)({
-    name: "John Doe",
-    card_number: "4761 7310 0000 0043",
-    exp_month: "12",
-    exp_year: "2024",
-    cvv: "201",
-    zip: ""
-  });
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [show, setShow] = (0, import_react5.useState)(false);
-  const handleSubmit = async (e) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    e.preventDefault();
-    const data = {
-      description: "widget payment",
-      amount: amount || "1.00",
-      phone_number: "1234567908",
-      zip: formData.zip,
-      orderId: orderId || "",
-      fractalpayPublicKey: fractalPayClientKey
-    };
-    if (Object.keys(error).length < 1) {
-      try {
-        setLoading(true);
-        const res = await import_axios2.default.post(`${baseUrl}create-widget-order`, data, {
-          headers: {
-            "Content-Type": "application/json"
-          }
-        });
-        if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
-          console.log("token", (_b = res.data) == null ? void 0 : _b.data);
-          setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
-          const tokenCallback = async (response) => {
-            var _a2, _b2, _c2;
-            console.log("response for token call back", response);
-            if (response.Error) {
-              alert("if");
-              console.log("Error: ", response);
-              setLoading(false);
-            } else {
-              const headers = {
-                "Content-Type": "application/x-www-form-urlencoded"
-              };
-              const quickData = __spreadValues({
-                name: formData.name,
-                postal_code: formData.zip
-              }, response);
-              try {
-                const resp = await import_axios2.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
-                  headers
-                });
-                setLoading(false);
-                console.log("quick response", resp);
-                if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
-                  console.log("Payment success!", resp == null ? void 0 : resp.data);
-                  setFormData({
-                    name: "John Doe",
-                    card_number: "4761 7310 0000 0043",
-                    exp_month: "12",
-                    exp_year: "2024",
-                    cvv: "201",
-                    zip: ""
-                  });
-                } else {
-                  console.log("Payment failed!", resp == null ? void 0 : resp.data);
-                }
-              } catch (error2) {
-                console.log("Error: ", error2);
-                setLoading(false);
-              }
-            }
-          };
-          window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
-        } else {
-          setLoading(false);
-          console.log("res", (_g = res.data) == null ? void 0 : _g.data);
-        }
-      } catch (error2) {
-        setLoading(false);
-        console.log(error2);
-      }
-    }
-  };
-  const handleCardFormat = (numericValue) => {
-    const cleaned = ("" + numericValue).replace(/\D/g, "");
-    const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
-    if (match) {
-      return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
-    }
-    return numericValue;
-  };
-  const handleCardNumberChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
-    if (value && value.match(/[a-zA-Z]/)) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Invalid input. Please enter only numbers."
-      }));
-    } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Invalid Card Number"
-      }));
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Card Number required"
-      }));
-    } else {
-      setError({});
-    }
-  };
-  const handleMonthChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
-    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_month: "Month is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_month: "Value should be between 1 and 12"
-      }));
-    }
-  };
-  const handleYearChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
-    if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_year: "Year is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_year: "Invalid Expiration Date."
-      }));
-    }
-  };
-  const handleCVVChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
-    if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        cvv: "CVV is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        cvv: "Invalid CVV."
-      }));
-    }
-  };
-  const handleChange = (e) => {
-    const token = e.target.getAttribute("data-token") || "";
-    const value = e.target.value;
-    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
-    if (token === "card_number") {
-      handleCardNumberChange(value);
-    }
-    if (token === "exp_month") {
-      handleMonthChange(value);
-    }
-    if (token === "exp_year") {
-      handleYearChange(value);
-    }
-    if (token === "cvv") {
-      handleCVVChange(value);
-    }
-  };
-  (0, import_react5.useEffect)(() => {
-    const scriptId = "my-script";
-    const existingScript = document.getElementById(scriptId);
-    if (!existingScript) {
-      const script = document.createElement("script");
-      script.src = "https://token-cert.dcap.com/v1/client";
-      script.id = scriptId;
-      script.async = true;
-      script.onload = () => {
-        if (typeof window !== "undefined" && window.DatacapWebToken) {
-          console.log("DatacapWebToken", window.DatacapWebToken);
-        } else {
-          console.log("DatacapWebToken is not loaded yet.");
-        }
-      };
-      document.head.appendChild(script);
-    }
-    return () => {
-      const script = document.getElementById(scriptId);
-      if (script) {
-        document.head.removeChild(script);
-      }
-    };
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
-    document.head.appendChild(link);
-    return () => {
-      document.head.removeChild(link);
-    };
-  }, []);
-  const handleClose = () => {
-    setShow(false);
-  };
-  const handleOpen = () => {
-    console.log("open");
-    setShow(true);
-  };
-  console.log(show, "open");
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading: true }));
+  )));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PaywithFractal,
   RequestPayment
 });

package/dist/index.d.cts

@@ -2,14 +2,8 @@ import React from 'react';
 
 interface Props {
     fractalpayClientKey: string;
+    amount?: any;
 }
 declare function RequestPayment(props: Props): React.JSX.Element;
 
-declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
-    name: string;
-    amount: number;
-    orderId: string;
-    fractalPayClientKey: string;
-}): React.JSX.Element;
-
-export { PaywithFractal, RequestPayment };
+export { RequestPayment };

package/dist/index.d.ts

@@ -2,14 +2,8 @@ import React from 'react';
 
 interface Props {
     fractalpayClientKey: string;
+    amount?: any;
 }
 declare function RequestPayment(props: Props): React.JSX.Element;
 
-declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
-    name: string;
-    amount: number;
-    orderId: string;
-    fractalPayClientKey: string;
-}): React.JSX.Element;
-
-export { PaywithFractal, RequestPayment };
+export { RequestPayment };

package/dist/index.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/app/components/RequestPayment/RequestPayment.tsx
-import React4, { useState } from "react";
+import React4, { useState, useEffect } from "react";
 import axios from "axios";
 
 // src/app/components/Loader/Loader.tsx
@@ -189,7 +189,8 @@ var RequestPaymentstyles = (props) => {
   /* background: #fff; */
   border-radius: 20px !important;
   position: relative;
-  width: 430px;
+   width: 100%;
+max-width: 100%;
   margin: 30px auto;
   overflow: inherit !important;
 }
@@ -498,10 +499,10 @@ th {
   margin: 0 auto;
 }
 
-.modal-content {
-  max-width: 420px;
-  margin-top: 5%;
-}
+// .modal-content {
+//   max-width: 420px;
+//   margin-top: 5%;
+// }
 @media (max-width: 460px) {
   .payment-popup {
     padding: 35px 25px;
@@ -942,15 +943,39 @@ input {
     background-color: #acc6db !important;
 } */
 
+    input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
         `);
 };
 var RequestPaymentstyles_default = RequestPaymentstyles;
 
+// src/app/components/baseurl.ts
+var baseUrl = "https://staging-widget.fractalpay.com/";
+
+// src/app/components/Errortext.ts
+var ErrorText = {
+  namerequired: "Full Name is required",
+  amountrequired: "Amount is required",
+  amountpositive: "Amount should be positive",
+  amountzero: "Amount should not be zero",
+  phoneoremailrequired: "Phone or Email is required",
+  invalidemail: "Invalid email",
+  invalidemailformat: "Invalid email format",
+  onlylettersallowed: "Only letters are allowed",
+  phonenumberlength: "Phone number should be 10 digits"
+};
+
 // src/app/components/RequestPayment/RequestPayment.tsx
 function RequestPayment(props) {
   const fractalpayClientKey = props.fractalpayClientKey;
-  const masterBaseUrl = "https://testapi.fractalpay.com/";
-  const baseUrl = "https://staging-widget.fractalpay.com/";
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
@@ -964,7 +989,8 @@ function RequestPayment(props) {
   });
   const [showConfirmationModal, setShowConfirmationModal] = useState(false);
   const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
-  const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
   const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
   const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
   const handleClose = () => {
@@ -985,7 +1011,7 @@ function RequestPayment(props) {
     });
   };
   const handleSubmit = (event) => {
-    const message = {
+    let message = {
       type: "preview.compiledcheck",
       other: __spreadProps(__spreadValues({}, event), { status: true })
     };
@@ -1028,28 +1054,45 @@ function RequestPayment(props) {
       setLoading(false);
     }
   };
-  const validateAmount = (amount) => {
-    return amountRegex.test(amount);
-  };
+  const validateAmount = (amount) => amoutRegex.test(amount);
+  const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
   const handleChange = (e) => {
     const { value } = e.target;
     const token = e.target.dataset.token;
     setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
     if (token === "name" && !isAlpha(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        [token]: "Only letters are allowed"
+        [token]: ErrorText.onlylettersallowed
       }));
       return;
     }
     if (token === "phone_number" && !phoneNumberRegex(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        [token]: "Phone number should be 10 digits"
+        [token]: ErrorText.phonenumberlength
       }));
       return;
     }
     if (token === "email" && !isValidEmail(value)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        email: "Invalid email format"
+        email: ErrorText.invalidemailformat
+      }));
+      return;
+    }
+    if (token === "amount" && !value) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountrequired
+      }));
+      return;
+    }
+    if (token === "amount" && !PositiveAmount(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountpositive
+      }));
+      return;
+    }
+    if (token === "amount" && parseFloat(value) === 0) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountzero
       }));
       return;
     }
@@ -1067,95 +1110,121 @@ function RequestPayment(props) {
   };
   const validateForm = () => {
     let newErrors = {};
-    if (!requestDetails.name) newErrors.name = "Full Name is required";
-    if (!requestDetails.amount) newErrors.amount = "Amount is required";
-    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
-    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
-    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
+    if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
+    if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
+    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
+    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(Modal, { show, onHide: handleClose }, /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")), /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Full Name",
-      "data-token": "name",
-      onChange: handleChange
-    }
-  ), errors.name && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      maxLength: 10,
-      className: "form-control",
-      onChange: (e) => {
-        handleChange(e);
-      },
-      placeholder: "Phone Number",
-      type: "text",
-      "data-token": "phone_number"
-    }
-  ), errors.phone_number && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Email",
-      onChange: handleChange,
-      "data-token": "email"
-    }
-  ), errors.email && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React4.createElement("div", { className: "input-group" }, /* @__PURE__ */ React4.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      "data-token": "amount",
-      type: "number",
-      className: "form-control",
-      value: requestDetails.amount,
-      onChange: handleChange,
-      onBlur: handleAmountBlur
+  useEffect(() => {
+    if (props.amount) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
     }
-  )), errors.amount && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      className: "form-control",
-      type: "text",
-      placeholder: "Order Id",
-      onChange: handleChange,
-      "data-token": "order_id"
+  }, [props.amount]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
     }
-  ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
-    Button,
-    {
-      type: "button",
-      className: "PayButton",
-      onClick: sendRequestPayment,
-      disabled: loading
-    },
-    loading ? "Loading..." : "Send Request"
-  )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
-    "svg",
+  };
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(
+    Modal,
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "20",
-      height: "20",
-      viewBox: "0 0 26 26"
+      show,
+      onHide: handleClose,
+      size: "lg",
+      backdrop: "static",
+      keyboard: false
     },
-    /* @__PURE__ */ React4.createElement(
-      "path",
+    /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")),
+    /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
+      "input",
       {
-        fill: "currentColor",
-        d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        className: "form-control",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange
       }
-    )
-  ), "Secure payments powered by Fractal", /* @__PURE__ */ React4.createElement(
-    "img",
-    {
-      src: "https://ui.fractalpay.com/favicon.ico",
-      alt: "Fractal logo",
-      className: "powered-logo"
-    }
-  )))), /* @__PURE__ */ React4.createElement(
+    ), errors.name && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        maxLength: 10,
+        className: "form-control",
+        onChange: (e) => {
+          handleChange(e);
+        },
+        placeholder: "Phone Number",
+        type: "text",
+        "data-token": "phone_number"
+      }
+    ), errors.phone_number && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email"
+      }
+    ), errors.email && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React4.createElement("div", { className: "input-group" }, /* @__PURE__ */ React4.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        "data-token": "amount",
+        min: 0,
+        type: "number",
+        className: "form-control",
+        value: requestDetails.amount,
+        onChange: handleChange,
+        onBlur: handleAmountBlur,
+        onKeyDown: handleKeyDown,
+        onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
+          e2.preventDefault();
+        }, { passive: false })
+      }
+    )), errors.amount && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Order Id",
+        onChange: handleChange,
+        "data-token": "order_id"
+      }
+    ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
+      Button,
+      {
+        type: "button",
+        className: "PayButton",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ React4.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        }
+      )
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ React4.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))
+  ), /* @__PURE__ */ React4.createElement(
     Modal,
     {
       className: "payment-suc",
@@ -1200,232 +1269,8 @@ function RequestPayment(props) {
         }
       )))
     ), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.createElement("br", null), " sent successfully"))
-  ));
-}
-
-// src/app/components/Greet.tsx
-import axios2 from "axios";
-import React5, { useEffect, useState as useState2 } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
-  const baseUrl = "http://192.168.1.52:8082/";
-  const masterBaseUrl = "http://192.168.1.52:8081/";
-  console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
-  const [dcToken, setDcToken] = useState2("");
-  const [error, setError] = useState2({});
-  const [toggleQr, setToggleQr] = useState2(false);
-  const [formData, setFormData] = useState2({
-    name: "John Doe",
-    card_number: "4761 7310 0000 0043",
-    exp_month: "12",
-    exp_year: "2024",
-    cvv: "201",
-    zip: ""
-  });
-  const [loading, setLoading] = useState2(false);
-  const [show, setShow] = useState2(false);
-  const handleSubmit = async (e) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    e.preventDefault();
-    const data = {
-      description: "widget payment",
-      amount: amount || "1.00",
-      phone_number: "1234567908",
-      zip: formData.zip,
-      orderId: orderId || "",
-      fractalpayPublicKey: fractalPayClientKey
-    };
-    if (Object.keys(error).length < 1) {
-      try {
-        setLoading(true);
-        const res = await axios2.post(`${baseUrl}create-widget-order`, data, {
-          headers: {
-            "Content-Type": "application/json"
-          }
-        });
-        if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
-          console.log("token", (_b = res.data) == null ? void 0 : _b.data);
-          setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
-          const tokenCallback = async (response) => {
-            var _a2, _b2, _c2;
-            console.log("response for token call back", response);
-            if (response.Error) {
-              alert("if");
-              console.log("Error: ", response);
-              setLoading(false);
-            } else {
-              const headers = {
-                "Content-Type": "application/x-www-form-urlencoded"
-              };
-              const quickData = __spreadValues({
-                name: formData.name,
-                postal_code: formData.zip
-              }, response);
-              try {
-                const resp = await axios2.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
-                  headers
-                });
-                setLoading(false);
-                console.log("quick response", resp);
-                if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
-                  console.log("Payment success!", resp == null ? void 0 : resp.data);
-                  setFormData({
-                    name: "John Doe",
-                    card_number: "4761 7310 0000 0043",
-                    exp_month: "12",
-                    exp_year: "2024",
-                    cvv: "201",
-                    zip: ""
-                  });
-                } else {
-                  console.log("Payment failed!", resp == null ? void 0 : resp.data);
-                }
-              } catch (error2) {
-                console.log("Error: ", error2);
-                setLoading(false);
-              }
-            }
-          };
-          window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
-        } else {
-          setLoading(false);
-          console.log("res", (_g = res.data) == null ? void 0 : _g.data);
-        }
-      } catch (error2) {
-        setLoading(false);
-        console.log(error2);
-      }
-    }
-  };
-  const handleCardFormat = (numericValue) => {
-    const cleaned = ("" + numericValue).replace(/\D/g, "");
-    const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
-    if (match) {
-      return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
-    }
-    return numericValue;
-  };
-  const handleCardNumberChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
-    if (value && value.match(/[a-zA-Z]/)) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Invalid input. Please enter only numbers."
-      }));
-    } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Invalid Card Number"
-      }));
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        card_number: "Card Number required"
-      }));
-    } else {
-      setError({});
-    }
-  };
-  const handleMonthChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
-    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_month: "Month is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_month: "Value should be between 1 and 12"
-      }));
-    }
-  };
-  const handleYearChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
-    if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_year: "Year is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        exp_year: "Invalid Expiration Date."
-      }));
-    }
-  };
-  const handleCVVChange = (value) => {
-    setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
-    if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
-      setError({});
-    } else if (!value.length) {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        cvv: "CVV is required"
-      }));
-    } else {
-      setError((prev) => __spreadProps(__spreadValues({}, prev), {
-        cvv: "Invalid CVV."
-      }));
-    }
-  };
-  const handleChange = (e) => {
-    const token = e.target.getAttribute("data-token") || "";
-    const value = e.target.value;
-    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
-    if (token === "card_number") {
-      handleCardNumberChange(value);
-    }
-    if (token === "exp_month") {
-      handleMonthChange(value);
-    }
-    if (token === "exp_year") {
-      handleYearChange(value);
-    }
-    if (token === "cvv") {
-      handleCVVChange(value);
-    }
-  };
-  useEffect(() => {
-    const scriptId = "my-script";
-    const existingScript = document.getElementById(scriptId);
-    if (!existingScript) {
-      const script = document.createElement("script");
-      script.src = "https://token-cert.dcap.com/v1/client";
-      script.id = scriptId;
-      script.async = true;
-      script.onload = () => {
-        if (typeof window !== "undefined" && window.DatacapWebToken) {
-          console.log("DatacapWebToken", window.DatacapWebToken);
-        } else {
-          console.log("DatacapWebToken is not loaded yet.");
-        }
-      };
-      document.head.appendChild(script);
-    }
-    return () => {
-      const script = document.getElementById(scriptId);
-      if (script) {
-        document.head.removeChild(script);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
-    document.head.appendChild(link);
-    return () => {
-      document.head.removeChild(link);
-    };
-  }, []);
-  const handleClose = () => {
-    setShow(false);
-  };
-  const handleOpen = () => {
-    console.log("open");
-    setShow(true);
-  };
-  console.log(show, "open");
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Loader_default, { loading: true }));
+  )));
 }
 export {
-  PaywithFractal,
   RequestPayment
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinerohit11/testwidget",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -28,6 +28,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
+    "react-toastify": "^10.0.6",
     "tsup": "^8.3.5",
     "typescript": "^5"
   },