coinley-checkout 0.1.9 → 0.2.1

package/dist/coinley-checkout.es.js

@@ -1110,109 +1110,30 @@ const QRCode = ({
   walletAddress,
   amount,
   currency,
-  theme = "light",
-  size = 200
+  theme = "light"
 }) => {
-  const [qrCodeSvg, setQrCodeSvg] = useState("");
-  const getQRCodeData = () => {
-    if (!walletAddress)
-      return "";
-    const schemes = {
-      "USDT": "ethereum",
-      "USDC": "ethereum",
-      "BNB": "binance",
-      "SOL": "solana",
-      "USDC_SOL": "solana"
-    };
-    const scheme = schemes[currency] || "ethereum";
-    return `${scheme}:${walletAddress}?amount=${amount}&currency=${currency}`;
-  };
-  useEffect(() => {
-    const generateQRCode = async () => {
-      try {
-        const qrcode = await Promise.resolve().then(() => qrcodeGenerator);
-        const data = getQRCodeData();
-        if (data) {
-          const svg = qrcode.generateQR(data, size, theme === "dark");
-          setQrCodeSvg(svg);
-        }
-      } catch (error) {
-        console.error("Failed to generate QR code:", error);
-        setQrCodeSvg(generateFallbackQR());
-      }
-    };
-    generateQRCode();
-  }, [walletAddress, amount, currency, theme, size]);
-  const generateFallbackQR = () => {
-    const darkMode = theme === "dark";
-    const cellSize = Math.floor(size / 25);
-    const svgSize = size;
-    let svg = `
-      <svg 
-        xmlns="http://www.w3.org/2000/svg" 
-        width="${svgSize}" 
-        height="${svgSize}"
-        viewBox="0 0 ${svgSize} ${svgSize}"
-      >
-    `;
-    svg += `<rect width="${svgSize}" height="${svgSize}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
-    svg += `<rect x="0" y="0" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
-    svg += `<rect x="${cellSize}" y="${cellSize}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
-    svg += `<rect x="${cellSize * 2}" y="${cellSize * 2}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
-    svg += `<rect x="${svgSize - cellSize * 7}" y="0" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
-    svg += `<rect x="${svgSize - cellSize * 6}" y="${cellSize}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
-    svg += `<rect x="${svgSize - cellSize * 5}" y="${cellSize * 2}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
-    svg += `<rect x="0" y="${svgSize - cellSize * 7}" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
-    svg += `<rect x="${cellSize}" y="${svgSize - cellSize * 6}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
-    svg += `<rect x="${cellSize * 2}" y="${svgSize - cellSize * 5}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
-    for (let i = 0; i < 10; i++) {
-      for (let j = 0; j < 10; j++) {
-        if (i < 3 && j < 3 || i < 3 && j > 6 || i > 6 && j < 3)
-          continue;
-        if (Math.random() > 0.5) {
-          const x = cellSize * (i * 2 + 3);
-          const y = cellSize * (j * 2 + 3);
-          svg += `<rect x="${x}" y="${y}" width="${cellSize * 2}" height="${cellSize * 2}" fill="${darkMode ? "white" : "black"}"/>`;
-        }
-      }
-    }
-    svg += "</svg>";
-    return svg;
-  };
+  const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(`${currency}:${walletAddress}?amount=${amount}`)}&choe=UTF-8`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-white mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
       {
-        className: `p-4 rounded-lg ${theme === "dark" ? "bg-gray-700" : "bg-white"} mb-3`,
-        dangerouslySetInnerHTML: { __html: qrCodeSvg }
+        src: qrCodeUrl,
+        alt: `QR Code for ${currency} payment`,
+        width: "200",
+        height: "200"
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-center text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Scan with your wallet app to pay" }),
-    walletAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 w-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"} mb-1`, children: [
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-sm text-gray-700", children: "Scan with your wallet app to pay" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 mb-1", children: [
         "Send ",
         amount,
         " ",
         currency,
         " to:"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs font-mono p-2 rounded overflow-auto break-all ${theme === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-100 text-gray-700"}`, children: walletAddress })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `text-sm font-medium mb-2 ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Payment Instructions" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: `text-xs space-y-2 ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "1. Open your crypto wallet app" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "2. Scan the QR code above" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-          "3. Confirm the payment amount (",
-          amount,
-          " ",
-          currency,
-          ")"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: '4. Click "Pay Now" button below after sending the payment' })
-      ] })
-    ] }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-mono p-2 rounded overflow-auto break-all bg-gray-100 text-gray-700", children: walletAddress })
+    ] })
   ] });
 };
 const PaymentStatus = ({ status, message, theme = "light" }) => {
@@ -1348,6 +1269,7 @@ const PaymentMethods = ({ onSelect, selected, theme = "light" }) => {
     )) })
   ] });
 };
+const Logo = "data:image/png;base64,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";
 const CoinleyModal = (props) => {
   const {
     isOpen,
@@ -1384,17 +1306,252 @@ const CoinleyModal = (props) => {
       setStep("select-currency");
     }
   }, [paymentStatus, payment]);
+  const handleCurrencySelect = (currency) => {
+    onCurrencySelect(currency);
+    setStep("confirm");
+  };
+  const handlePaymentConfirm = () => {
+    onPayment(paymentMethod === "qrcode");
+  };
+  const handleBack = () => {
+    if (step === "confirm") {
+      setStep("select-currency");
+    }
+  };
+  const togglePaymentMethod = (method) => {
+    setPaymentMethod(method);
+  };
+  const formatAmount = (amount) => {
+    return parseFloat(amount).toFixed(2);
+  };
+  const formatTransactionHash = (hash) => {
+    if (!hash)
+      return "";
+    if (hash.length <= 14)
+      return hash;
+    return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
+  };
   if (!isOpen)
     return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-900/75" : "bg-black/50", style: { position: "fixed", inset: 0, zIndex: 50 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: "16px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-gray-800", style: { position: "relative", padding: "24px", width: "100%", maxWidth: "28rem", borderRadius: "8px", boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1)" }, children: step === "confirm" && payment && paymentMethod === "qrcode" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    QRCode,
-    {
-      walletAddress: payment.walletAddress || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
-      amount: payment.totalAmount || payment.amount,
-      currency: selectedCurrency,
-      theme
-    }
-  ) }) }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative p-6 w-full max-w-md mx-auto rounded-lg shadow-xl bg-white text-gray-800", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: Logo, alt: "Coinley Logo", className: "h-8 mr-2" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Coinley Pay" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700 focus:outline-none",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
+      payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 p-4 rounded-lg bg-gray-100", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: merchantName }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mt-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-700", children: "Amount:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold text-xl", children: [
+            "$",
+            formatAmount(payment.totalAmount || payment.amount)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs mt-1 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
+          "Payment ID: ",
+          payment.id ? payment.id.slice(0, 8) : "",
+          "..."
+        ] }) })
+      ] }),
+      step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PaymentMethods,
+        {
+          onSelect: handleCurrencySelect,
+          selected: selectedCurrency,
+          theme
+        }
+      ),
+      step === "confirm" && payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-lg mb-4 bg-gray-100", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2 text-gray-800", children: "Payment Details" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: "Currency:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedCurrency })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: "Network:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedCurrency === "SOL" || selectedCurrency === "USDC_SOL" ? "Solana" : "Ethereum" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: "Fee:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "1.75%" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => togglePaymentMethod("wallet"),
+              className: `py-2 px-4 text-sm font-medium ${paymentMethod === "wallet" ? "bg-gray-100 text-gray-800 rounded-t-md" : "text-gray-500 hover:text-gray-700"}`,
+              children: "Connect Wallet"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => togglePaymentMethod("qrcode"),
+              className: `py-2 px-4 text-sm font-medium ${paymentMethod === "qrcode" ? "bg-gray-100 text-gray-800 rounded-t-md" : "text-gray-500 hover:text-gray-700"}`,
+              children: "QR Code"
+            }
+          )
+        ] }) }),
+        testMode ? (
+          // Test mode payment option
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-500 rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "Test Mode Payment" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: 'Click "Pay Now" to simulate a successful payment' })
+            ] })
+          ] }) })
+        ) : paymentMethod === "qrcode" ? (
+          // QR Code payment option
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            QRCode,
+            {
+              walletAddress: payment.walletAddress || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
+              amount: payment.totalAmount || payment.amount,
+              currency: selectedCurrency,
+              theme
+            }
+          ) })
+        ) : isMetaMaskAvailable ? (
+          // MetaMask available option
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: "https://metamask.io/images/metamask-fox.svg",
+                  alt: "MetaMask",
+                  className: "w-8 h-8 mr-2"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "Pay with MetaMask" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: walletConnected ? "Your wallet is connected. Click 'Pay Now' to proceed." : "Click 'Connect Wallet' to proceed with payment." })
+              ] })
+            ] }),
+            !walletConnected && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: onConnectWallet,
+                className: "mt-3 w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md",
+                children: "Connect Wallet"
+              }
+            )
+          ] })
+        ) : (
+          // MetaMask not available warning
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-lg mb-4 bg-yellow-50", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-yellow-500 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "MetaMask Not Detected" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: "Please install MetaMask extension to make payments" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "a",
+              {
+                href: "https://metamask.io/download/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "block mt-3 text-center w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md",
+                children: "Install MetaMask"
+              }
+            )
+          ] })
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleBack,
+              className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-md",
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handlePaymentConfirm,
+              className: "w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md",
+              disabled: !testMode && paymentMethod === "wallet" && isMetaMaskAvailable && !walletConnected,
+              children: "Pay Now"
+            }
+          )
+        ] })
+      ] }),
+      step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PaymentStatus,
+        {
+          status: "processing",
+          theme,
+          message: "Processing your payment..."
+        }
+      ),
+      step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PaymentStatus,
+          {
+            status: "success",
+            theme,
+            message: "Payment successful!"
+          }
+        ),
+        transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 p-3 rounded-lg bg-gray-100", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 mb-1", children: "Transaction Hash:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-mono break-all text-gray-800", children: formatTransactionHash(transactionHash) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "a",
+            {
+              href: `https://etherscan.io/tx/${transactionHash}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-xs text-blue-600 mt-2 inline-block",
+              children: "View on Etherscan →"
+            }
+          )
+        ] })
+      ] }),
+      step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PaymentStatus,
+          {
+            status: "error",
+            theme,
+            message: error || "An error occurred while processing your payment."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleBack,
+            className: "mt-4 w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-md",
+            children: "Try Again"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-xs text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Powered by Coinley - Secure Cryptocurrency Payments" }) })
+  ] }) }) });
 };
 const CoinleyCheckout = forwardRef(({
   apiKey,
@@ -1618,77 +1775,7 @@ const DEFAULT_CONFIG = {
   testMode: false,
   theme: "light"
 };
-const VERSION = "1.0.9";
-const hashString = (str) => {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return Math.abs(hash);
-};
-const generateQR = (data, size = 200, darkMode = false) => {
-  const dataHash = hashString(data);
-  const moduleCount = 25;
-  const moduleSize = Math.floor(size / moduleCount);
-  const quietZone = moduleSize * 2;
-  const svgSize = size + quietZone * 2;
-  const darkColor = darkMode ? "#FFFFFF" : "#000000";
-  const lightColor = darkMode ? "#1F2937" : "#FFFFFF";
-  let svg = `
-      <svg 
-        xmlns="http://www.w3.org/2000/svg" 
-        width="${svgSize}" 
-        height="${svgSize}"
-        viewBox="0 0 ${svgSize} ${svgSize}"
-      >
-    `;
-  svg += `<rect width="${svgSize}" height="${svgSize}" fill="${lightColor}"/>`;
-  svg += createPositionPattern(quietZone, quietZone, moduleSize, darkColor, lightColor);
-  svg += createPositionPattern(svgSize - quietZone - moduleSize * 7, quietZone, moduleSize, darkColor, lightColor);
-  svg += createPositionPattern(quietZone, svgSize - quietZone - moduleSize * 7, moduleSize, darkColor, lightColor);
-  for (let row = 0; row < moduleCount; row++) {
-    for (let col = 0; col < moduleCount; col++) {
-      if (row < 7 && col < 7 || // Top left
-      row < 7 && col >= moduleCount - 7 || // Top right
-      row >= moduleCount - 7 && col < 7) {
-        continue;
-      }
-      const shouldFill = (dataHash + row * 37 + col * 17) % 3 === 0;
-      if (shouldFill) {
-        const x = quietZone + col * moduleSize;
-        const y = quietZone + row * moduleSize;
-        svg += `<rect x="${x}" y="${y}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
-      }
-    }
-  }
-  for (let i = 8; i < moduleCount - 8; i++) {
-    if (i % 2 === 0) {
-      svg += `<rect x="${quietZone + i * moduleSize}" y="${quietZone + 6 * moduleSize}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
-    }
-  }
-  for (let i = 8; i < moduleCount - 8; i++) {
-    if (i % 2 === 0) {
-      svg += `<rect x="${quietZone + 6 * moduleSize}" y="${quietZone + i * moduleSize}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
-    }
-  }
-  svg += `<rect x="${quietZone + moduleSize * 12}" y="${quietZone + moduleSize * 12}" width="${moduleSize * 3}" height="${moduleSize * 3}" fill="${darkColor}"/>`;
-  svg += `<rect x="${quietZone + moduleSize * 13}" y="${quietZone + moduleSize * 13}" width="${moduleSize}" height="${moduleSize}" fill="${lightColor}"/>`;
-  svg += "</svg>";
-  return svg;
-};
-const createPositionPattern = (x, y, size, darkColor, lightColor) => {
-  let pattern = "";
-  pattern += `<rect x="${x}" y="${y}" width="${size * 7}" height="${size * 7}" fill="${darkColor}"/>`;
-  pattern += `<rect x="${x + size}" y="${y + size}" width="${size * 5}" height="${size * 5}" fill="${lightColor}"/>`;
-  pattern += `<rect x="${x + size * 2}" y="${y + size * 2}" width="${size * 3}" height="${size * 3}" fill="${darkColor}"/>`;
-  return pattern;
-};
-const qrcodeGenerator = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  generateQR
-}, Symbol.toStringTag, { value: "Module" }));
+const VERSION = "0.2.0";
 export {
   CoinleyCheckout,
   CoinleyModal,