@pinerohit11/testwidget 0.1.33 → 0.1.34

package/dist/index.js

@@ -23,227 +23,15 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 // src/app/components/Greet.tsx
 import axios from "axios";
-import React, { useEffect, useState } from "react";
+import React2, { useEffect, useState } from "react";
 import { Button, Modal } from "react-bootstrap";
 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] = useState("");
-  const [error, setError] = useState({});
-  const [toggleQr, setToggleQr] = useState(false);
-  const [formData, setFormData] = useState({
-    name: "John Doe",
-    card_number: "4761 7310 0000 0043",
-    exp_month: "12",
-    exp_year: "2024",
-    cvv: "201",
-    zip: ""
-  });
-  const [loading, setLoading] = useState(false);
-  const [show, setShow] = 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 axios.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 axios.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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, `
-         
+
+// src/app/components/CustomStyle.tsx
+import React from "react";
+var CustomStyle = (props) => {
+  return /* @__PURE__ */ React.createElement("style", null, `
+          
 
 body {
     background: #d5d5d5;
@@ -928,7 +716,227 @@ body {
     border:0;
     height: 43px;
   }
-        `), /* @__PURE__ */ React.createElement("div", { className: "w-100 text-center" }, /* @__PURE__ */ React.createElement(Button, { onClick: handleOpen }, "Show")), /* @__PURE__ */ React.createElement(
+        `);
+};
+
+// src/app/components/Greet.tsx
+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] = useState("");
+  const [error, setError] = useState({});
+  const [toggleQr, setToggleQr] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "John Doe",
+    card_number: "4761 7310 0000 0043",
+    exp_month: "12",
+    exp_year: "2024",
+    cvv: "201",
+    zip: ""
+  });
+  const [loading, setLoading] = useState(false);
+  const [show, setShow] = 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 axios.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 axios.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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(CustomStyle, null), /* @__PURE__ */ React2.createElement("div", { className: "w-100 text-center" }, /* @__PURE__ */ React2.createElement(Button, { onClick: handleOpen }, "Show")), /* @__PURE__ */ React2.createElement(
     Modal,
     {
       show,
@@ -937,7 +945,7 @@ body {
       keyboard: false,
       size: "lg"
     },
-    /* @__PURE__ */ React.createElement(Modal.Body, null, /* @__PURE__ */ React.createElement("div", { className: "bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "container bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "row bg-light no-gutters" }, /* @__PURE__ */ React.createElement("div", { className: "col-sm-12" }, /* @__PURE__ */ React.createElement("div", { className: "bd-example bd-example-tabs right-tabs mttabs m-3 " }, /* @__PURE__ */ React.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React2.createElement(Modal.Body, null, /* @__PURE__ */ React2.createElement("div", { className: "bg-black" }, /* @__PURE__ */ React2.createElement("div", { className: "container bg-black" }, /* @__PURE__ */ React2.createElement("div", { className: "row bg-light no-gutters" }, /* @__PURE__ */ React2.createElement("div", { className: "col-sm-12" }, /* @__PURE__ */ React2.createElement("div", { className: "bd-example bd-example-tabs right-tabs mttabs m-3 " }, /* @__PURE__ */ React2.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React2.createElement(
       "button",
       {
         className: "close-pop",
@@ -945,7 +953,7 @@ body {
           setShow(false);
         }
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -953,7 +961,7 @@ body {
           height: 37,
           viewBox: "0 0 21 21"
         },
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React2.createElement(
           "path",
           {
             fill: "none",
@@ -964,14 +972,14 @@ body {
           }
         )
       )
-    ), /* @__PURE__ */ React.createElement("div", { className: "row" }, /* @__PURE__ */ React.createElement("div", { className: "comp-name" }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React2.createElement("div", { className: "row" }, /* @__PURE__ */ React2.createElement("div", { className: "comp-name" }, /* @__PURE__ */ React2.createElement(
       "img",
       {
         src: "https://invoicestaging.skysystemz.com/assets/products/65c49a2740ff1.png",
         alt: "",
         className: "client-logo"
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React.createElement("div", { className: "header" }, /* @__PURE__ */ React.createElement("h1", null, "Pay"), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React2.createElement("div", { className: "" }, /* @__PURE__ */ React2.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React2.createElement("div", { className: "header" }, /* @__PURE__ */ React2.createElement("h1", null, "Pay"), /* @__PURE__ */ React2.createElement(
       "i",
       {
         className: "fa fa-qrcode fa-2x",
@@ -979,23 +987,23 @@ body {
         title: "Show QR Code",
         onClick: () => setToggleQr(!toggleQr)
       }
-    )), /* @__PURE__ */ React.createElement("div", { id: "qrCode", style: {
+    )), /* @__PURE__ */ React2.createElement("div", { id: "qrCode", style: {
       display: toggleQr ? "block" : "none"
-    } }, /* @__PURE__ */ React.createElement(
+    } }, /* @__PURE__ */ React2.createElement(
       "img",
       {
         src: "data:image/png;base64,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",
         alt: "QRCode",
         srcSet: ""
       }
-    )), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React2.createElement(
       "form",
       {
         id: "PaymentForm",
         className: "payment-form",
         onSubmit: handleSubmit
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement(
         "input",
         {
           type: "hidden",
@@ -1004,8 +1012,8 @@ body {
           name: "dctoken"
         }
       ),
-      /* @__PURE__ */ React.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React.createElement("div", { className: "amtleft" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "Amount" }, "Payment amount"), /* @__PURE__ */ React.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React.createElement("span", null, "$"), /* @__PURE__ */ React.createElement("span", null, " ", amount || 1, " "))), /* @__PURE__ */ React.createElement("div", { className: "card-row" }, /* @__PURE__ */ React.createElement("span", { className: "visa" }), /* @__PURE__ */ React.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React.createElement("span", { className: "amex" }), /* @__PURE__ */ React.createElement("span", { className: "discover" }))),
-      /* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "NameOnCard" }, "Name on card"), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React2.createElement("div", { className: "amtleft" }, /* @__PURE__ */ React2.createElement("label", { htmlFor: "Amount" }, "Payment amount"), /* @__PURE__ */ React2.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React2.createElement("span", null, "$"), /* @__PURE__ */ React2.createElement("span", null, " ", amount || 1, " "))), /* @__PURE__ */ React2.createElement("div", { className: "card-row" }, /* @__PURE__ */ React2.createElement("span", { className: "visa" }), /* @__PURE__ */ React2.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React2.createElement("span", { className: "amex" }), /* @__PURE__ */ React2.createElement("span", { className: "discover" }))),
+      /* @__PURE__ */ React2.createElement("div", { className: "form-group" }, /* @__PURE__ */ React2.createElement("label", { htmlFor: "NameOnCard" }, "Name on card"), /* @__PURE__ */ React2.createElement(
         "input",
         {
           "data-token": "name",
@@ -1017,14 +1025,14 @@ body {
           value: formData == null ? void 0 : formData.name,
           onChange: handleChange
         }
-      ), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "NameOnCard-error",
           style: { color: "red" }
         }
       )),
-      /* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "form-group" }, /* @__PURE__ */ React2.createElement(
         "input",
         {
           "data-token": "card_number",
@@ -1035,7 +1043,7 @@ body {
           value: handleCardFormat(formData == null ? void 0 : formData.card_number),
           onChange: handleChange
         }
-      ), error.card_number && /* @__PURE__ */ React.createElement(
+      ), error.card_number && /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "card_number-error",
@@ -1043,7 +1051,7 @@ body {
         },
         error.card_number
       )),
-      /* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React2.createElement(
         "input",
         {
           "data-token": "exp_month",
@@ -1054,7 +1062,7 @@ body {
           value: formData == null ? void 0 : formData.exp_month,
           onChange: handleChange
         }
-      ), error.exp_month && /* @__PURE__ */ React.createElement(
+      ), error.exp_month && /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "exp_month-error",
@@ -1062,7 +1070,7 @@ body {
         },
         error.exp_month
       )),
-      /* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React2.createElement(
         "input",
         {
           "data-token": "exp_year",
@@ -1073,7 +1081,7 @@ body {
           value: formData == null ? void 0 : formData.exp_year,
           onChange: handleChange
         }
-      ), error.exp_year && /* @__PURE__ */ React.createElement(
+      ), error.exp_year && /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "exp_year-error",
@@ -1081,7 +1089,7 @@ body {
         },
         error.exp_year
       )),
-      /* @__PURE__ */ React.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React2.createElement("div", { className: "input-container" }, /* @__PURE__ */ React2.createElement(
         "input",
         {
           "data-token": "cvv",
@@ -1092,15 +1100,15 @@ body {
           value: formData == null ? void 0 : formData.cvv,
           onChange: handleChange
         }
-      ), /* @__PURE__ */ React.createElement("i", { id: "cvc", className: "fa fa-question-circle" })), error.cvv && /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React2.createElement("i", { id: "cvc", className: "fa fa-question-circle" })), error.cvv && /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "cvv-error",
           style: { color: "red" }
         },
         error.cvv
-      ), /* @__PURE__ */ React.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React.createElement("div", { className: "visa-mc-dis-cvc-preview" }))),
-      /* @__PURE__ */ React.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "ZIPCode" }, "Postal code"), /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React2.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React2.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React2.createElement("div", { className: "visa-mc-dis-cvc-preview" }))),
+      /* @__PURE__ */ React2.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React2.createElement("label", { htmlFor: "ZIPCode" }, "Postal code"), /* @__PURE__ */ React2.createElement("div", { className: "input-container" }, /* @__PURE__ */ React2.createElement(
         "input",
         {
           id: "ZIPCode",
@@ -1112,7 +1120,7 @@ body {
           value: formData == null ? void 0 : formData.zip,
           onChange: handleChange
         }
-      ), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React2.createElement(
         "a",
         {
           tabIndex: 0,
@@ -1122,8 +1130,8 @@ body {
           "data-placement": "left",
           "data-content": "Enter the ZIP/Postal code for your credit card billing address."
         },
-        /* @__PURE__ */ React.createElement("i", { className: "fa fa-question-circle" })
-      ), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React2.createElement("i", { className: "fa fa-question-circle" })
+      ), /* @__PURE__ */ React2.createElement(
         "span",
         {
           id: "ZIPCode-error",
@@ -1131,24 +1139,24 @@ body {
         },
         "This field is required"
       ))),
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement(
         "button",
         {
           id: "PayButton",
           className: "btn btn-block btn-success submit-button",
           type: "submit"
         },
-        /* @__PURE__ */ React.createElement("span", { className: "submit-button-lock" }),
-        /* @__PURE__ */ React.createElement("span", { className: "align-middle" }, "Pay $", amount || 1)
+        /* @__PURE__ */ React2.createElement("span", { className: "submit-button-lock" }),
+        /* @__PURE__ */ React2.createElement("span", { className: "align-middle" }, "Pay $", amount || 1)
       )
-    ), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part", style: {
+    ), /* @__PURE__ */ React2.createElement("div", { className: "powerd-by-part", style: {
       display: "flex",
       fontSize: "12px",
       textAlign: "center",
       alignItems: "center",
       justifyContent: "center",
       margin: "8px 0 20px 0"
-    } }, /* @__PURE__ */ React.createElement(
+    } }, /* @__PURE__ */ React2.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1156,14 +1164,14 @@ body {
         height: 20,
         viewBox: "0 0 26 26"
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.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__ */ React.createElement(
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ React2.createElement(
       "img",
       {
         src: "https://ui.fractalpay.com/favicon.ico",