coinley-checkout 0.7.0 → 0.7.2

package/dist/coinley-checkout.es.js

@@ -21118,13 +21118,12 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
           "button",
           {
             onClick: () => handleSelectPaymentMethod(method),
-            className: `group flex items-center justify-between w-full px-2 py-2 rounded-2xl border text-left transition-all duration-200 font-medium text-base
-                  ${isSelected ? "bg-[#E9DDFC] border-transparent shadow-none" : "bg-white border-gray-200 hover:bg-[#F6F2FF] hover:border-[#E9DDFC]"}
-                `,
-            style: { minHeight: "56px", padding: "0.5rem" },
+            className: `group relative flex items-center w-full px-2.5 py-3 rounded-xl border transition-all duration-200
+          ${isSelected ? "bg-[#E9DDFC]" : "bg-white border-gray-200 hover:bg-gray-50 hover:border-gray-300"}
+        `,
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-x-2", children: [
-                typeof method.logo === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx(method.logo, { size: 24 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+                typeof method.logo === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx(method.logo, { size: 24 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6 object-contain" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-sm text-gray-900", children: [
                   method.description,
                   " (",
@@ -21132,20 +21131,12 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
                   ")"
                 ] })
               ] }),
-              isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 flex items-center justify-center w-6 h-6 rounded-full bg-[#7042D2]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 8.5L7 11.5L12 6.5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+              isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-[#7042D2] ml-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 8.5L7 11.5L12 6.5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
             ]
           },
           `${method.id}-${method.network}`
         );
-      }) }),
-      availableMethods.length > 4 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: () => setShowMore(!showMore),
-          className: `w-full py-2 px-4 rounded-lg text-sm font-medium transition-colors ${theme2 === "dark" ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
-          children: showMore ? "Show Less" : `Show More (${availableMethods.length - 4} more)`
-        }
-      )
+      }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-3 rounded-lg text-sm mb-6 ${theme2 === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-50 text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-2 h-2 rounded-full mr-2 ${availableWallets[getRequiredWallet(selectedNetwork)] ? "bg-green-500" : "bg-red-500"}` }),
@@ -21242,248 +21233,261 @@ const CoinleyModal = ({
   };
   if (!isOpen)
     return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: "coinley-modal relative py-6 px-2 w-full max-w-md mx-auto shadow-xl bg-gray-100 rounded-3xl",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex justify-between items-center mb-6 mr-3 ml-3 py-4 px-2 rounded-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex items-center gap-2 px-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-auto h-auto", alt: "Coinley Logo" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
-          ] }),
-          step !== "success" && step !== "processing" && /* @__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 mr-2", 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" }) })
-            }
-          )
-        ] }),
-        payment && step !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Total amount" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-amount-display text-2xl md:text-4xl lg:text-6xl font-bold text-[#7042D2] mt-2 leading-tight tracking-tight", children: [
-            "$",
-            formatAmount(payment.totalAmount || payment.amount)
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "coinley-merchant-name text-base font-semibold mt-1", children: merchantName })
-        ] }) }),
-        step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-6 pt-6 px-6 bg-white rounded-t-2xl blockchain-network", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PaymentMethods,
-          {
-            onSelect: onPaymentMethodSelect,
-            selected: selectedPaymentMethod,
-            theme: theme2,
-            supportedNetworks
-          }
-        ) }),
-        step === "confirm" && selectedPaymentMethod && 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-purple-600 font-semibold", children: "Currency:" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Network:" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", 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: () => setPaymentType("wallet"),
-                className: `py-2 px-4 text-sm font-medium ${paymentType === "wallet" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
-                children: "Connect Wallet"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "coinley-modal relative w-full shadow-xl bg-gray-100 rounded-3xl",
+        style: {
+          maxWidth: "534px",
+          aspectRatio: "534 / 800"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-6 px-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex justify-between items-center mb-6 mr-3 ml-3 py-4 px-2 rounded-full", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex items-center gap-2 px-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-auto h-auto", alt: "Coinley Logo" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
+            ] }),
+            step !== "success" && step !== "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
-                onClick: () => setPaymentType("qrcode"),
-                className: `py-2 px-4 text-sm font-medium ${paymentType === "qrcode" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
-                children: "QR Code"
+                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 mr-2", 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" }) })
               }
             )
+          ] }),
+          payment && step !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Total amount" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[50px] md:text-[60px] lg:text-[70px] font-bold leading-[100%] tracking-[0] text-center text-[#7042D2] mt-2", children: [
+              "$",
+              formatAmount(payment.totalAmount || payment.amount)
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-merchant-name text-base font-semibold mt-1 flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "14", viewBox: "0 0 16 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.3 4.50065L13.8 7.00065H2.2L2.7 4.50065H13.3ZM14.6667 0.333984H1.33333V2.00065H14.6667V0.333984ZM14.6667 2.83398H1.33333L0.5 7.00065V8.66732H1.33333V13.6673H9.66667V8.66732H13V13.6673H14.6667V8.66732H15.5V7.00065L14.6667 2.83398ZM3 12.0007V8.66732H8V12.0007H3Z", fill: "#7042D2" }) }),
+              merchantName
+            ] })
           ] }) }),
-          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-purple-600 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' })
-              ] })
-            ] }) })
-          ) : paymentType === "qrcode" ? (
-            // QR Code payment option
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              QRCode,
+          step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white rounded-t-[24px] pb-6 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              PaymentMethods,
               {
-                walletAddress: getWalletAddressForNetwork(),
-                amount: payment.totalAmount || payment.amount,
-                currency: selectedPaymentMethod.currency,
-                network: selectedPaymentMethod.network,
-                theme: theme2
+                onSelect: onPaymentMethodSelect,
+                selected: selectedPaymentMethod,
+                theme: theme2,
+                supportedNetworks
               }
-            ) })
-          ) : (
-            // Wallet connection option
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mb-4", children: [
-              supportedWallets.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg 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.jsx("div", { className: "bg-white px-6 pb-6 rounded-b-2xl", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", children: [
+              "Powered by ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2] font-medium", children: "Coinley" }),
+              " - Secure Cryptocurrency Payments",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "inline-block ml-1 w-4 h-4", width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.82975 1.7534C0.625 2.04482 0.625 2.91148 0.625 4.64319V5.49578C0.625 8.54969 2.92113 10.0322 4.36196 10.6611C4.7525 10.8317 4.94804 10.9173 5.5 10.9173C6.0525 10.9173 6.2475 10.8317 6.63804 10.6611C8.07888 10.0317 10.375 8.55023 10.375 5.49578V4.64319C10.375 2.91094 10.375 2.04482 10.1702 1.7534C9.96604 1.46253 9.15192 1.18357 7.52313 0.626193L7.21275 0.520026C6.36396 0.229151 5.93983 0.0839844 5.5 0.0839844C5.06017 0.0839844 4.63604 0.229151 3.78725 0.520026L3.47688 0.625651C1.84808 1.18357 1.03396 1.46253 0.82975 1.7534ZM7.1575 4.68815C7.19303 4.64832 7.22037 4.60187 7.23795 4.55148C7.25553 4.50108 7.26302 4.44771 7.25997 4.39442C7.25693 4.34113 7.24342 4.28896 7.22021 4.24089C7.19701 4.19282 7.16456 4.14979 7.12473 4.11426C7.0849 4.07872 7.03845 4.05139 6.98805 4.03381C6.93765 4.01622 6.88429 4.00874 6.83099 4.01178C6.7777 4.01483 6.72553 4.02834 6.67746 4.05154C6.62939 4.07475 6.58636 4.10719 6.55083 4.14703L4.91988 5.97461L4.44863 5.44703C4.3766 5.36744 4.27601 5.31959 4.16883 5.31393C4.06164 5.30828 3.95657 5.34526 3.87657 5.41682C3.79657 5.48838 3.74814 5.58869 3.74185 5.69584C3.73557 5.80299 3.77195 5.90828 3.84304 5.98869L4.61654 6.85536C4.65465 6.89805 4.70135 6.93221 4.75357 6.95559C4.8058 6.97898 4.86238 6.99107 4.9196 6.99107C4.97683 6.99107 5.03341 6.97898 5.08563 6.95559C5.13786 6.93221 5.18456 6.89805 5.22267 6.85536L7.1575 4.68815Z", fill: "#0D9A22" }) })
+            ] }) }) })
+          ] }),
+          step === "confirm" && selectedPaymentMethod && 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-purple-600 font-semibold", children: "Currency:" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Network:" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", 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: () => setPaymentType("wallet"),
+                  className: `py-2 px-4 text-sm font-medium ${paymentType === "wallet" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                  children: "Connect Wallet"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setPaymentType("qrcode"),
+                  className: `py-2 px-4 text-sm font-medium ${paymentType === "qrcode" ? "border-b-2 border-purple-600 text-purple-600" : "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-purple-600 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: "No Compatible Wallets" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
-                    "No wallets detected for ",
-                    getNetworkDisplayName(selectedPaymentMethod.network),
-                    " network"
-                  ] })
+                  /* @__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' })
                 ] })
-              ] }) }) : supportedWallets.map((walletType) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "img",
-                    {
-                      src: getWalletIcon(walletType),
-                      alt: getWalletDisplayName(walletType),
-                      className: "w-8 h-8 mr-3",
-                      onError: (e) => {
-                        e.target.style.display = "none";
-                      }
-                    }
-                  ),
+              ] }) })
+            ) : paymentType === "qrcode" ? (
+              // QR Code payment option
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                QRCode,
+                {
+                  walletAddress: getWalletAddressForNetwork(),
+                  amount: payment.totalAmount || payment.amount,
+                  currency: selectedPaymentMethod.currency,
+                  network: selectedPaymentMethod.network,
+                  theme: theme2
+                }
+              ) })
+            ) : (
+              // Wallet connection option
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mb-4", children: [
+                supportedWallets.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg 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: getWalletDisplayName(walletType) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "No Compatible Wallets" }),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
-                      "Pay with ",
-                      getWalletDisplayName(walletType)
+                      "No wallets detected for ",
+                      getNetworkDisplayName(selectedPaymentMethod.network),
+                      " network"
                     ] })
                   ] })
-                ] }),
-                (walletConnection == null ? void 0 : walletConnection.walletType) === walletType ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-green-600", children: "Connected" })
-                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: () => {
-                      console.log("Connect wallet button clicked for:", walletType);
-                      onConnectWallet(walletType);
-                    },
-                    className: "coinley-button-primary py-2 px-4 font-medium rounded-md text-sm",
-                    children: "Connect"
-                  }
-                )
-              ] }) }, walletType)),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(availableWallets).filter(([walletType, isAvailable]) => !isAvailable).map(([walletType]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
-                  getWalletDisplayName(walletType),
-                  " not detected"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "a",
-                  {
-                    href: getWalletInstallUrl(walletType),
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "text-sm text-purple-600 hover:underline",
-                    children: "Install"
-                  }
-                )
-              ] }) }, walletType)) })
+                ] }) }) : supportedWallets.map((walletType) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "img",
+                      {
+                        src: getWalletIcon(walletType),
+                        alt: getWalletDisplayName(walletType),
+                        className: "w-8 h-8 mr-3",
+                        onError: (e) => {
+                          e.target.style.display = "none";
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: getWalletDisplayName(walletType) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
+                        "Pay with ",
+                        getWalletDisplayName(walletType)
+                      ] })
+                    ] })
+                  ] }),
+                  (walletConnection == null ? void 0 : walletConnection.walletType) === walletType ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-green-600", children: "Connected" })
+                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        console.log("Connect wallet button clicked for:", walletType);
+                        onConnectWallet(walletType);
+                      },
+                      className: "coinley-button-primary py-2 px-4 font-medium rounded-md text-sm",
+                      children: "Connect"
+                    }
+                  )
+                ] }) }, walletType)),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(availableWallets).filter(([walletType, isAvailable]) => !isAvailable).map(([walletType]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                    getWalletDisplayName(walletType),
+                    " not detected"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "a",
+                    {
+                      href: getWalletInstallUrl(walletType),
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "text-sm text-purple-600 hover:underline",
+                      children: "Install"
+                    }
+                  )
+                ] }) }, walletType)) })
+              ] })
+            ),
+            error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-red-50 mb-4 text-red-600 text-sm", children: error }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onBack,
+                  className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-purple-600 font-medium rounded-md",
+                  children: "Back"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onPayment(paymentType === "qrcode"),
+                  className: "coinley-button-primary w-full py-2 px-4 font-medium rounded-md",
+                  disabled: !testMode && paymentType === "wallet" && !walletConnection,
+                  children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
+                }
+              )
             ] })
+          ] }),
+          step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PaymentStatus,
+            {
+              status: "processing",
+              theme: theme2,
+              message: "Processing your payment...",
+              processingStartTime,
+              paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
+              transactionHash
+            }
           ),
-          error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-red-50 mb-4 text-red-600 text-sm", children: error }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
+          step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PaymentStatus,
+            {
+              status: "success",
+              theme: theme2,
+              message: "Payment successful!",
+              payment,
+              transactionHash,
+              selectedPaymentMethod,
+              merchantName,
+              onClose: handleSuccessClose,
+              pendingBackendConfirmation
+            }
+          ),
+          step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
+              PaymentStatus,
               {
-                type: "button",
-                onClick: onBack,
-                className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-purple-600 font-medium rounded-md",
-                children: "Back"
+                status: "error",
+                theme: theme2,
+                message: error || "An error occurred while processing your payment."
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 type: "button",
-                onClick: () => onPayment(paymentType === "qrcode"),
-                className: "coinley-button-primary w-full py-2 px-4 font-medium rounded-md",
-                disabled: !testMode && paymentType === "wallet" && !walletConnection,
-                children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
+                onClick: onBack,
+                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"
               }
             )
           ] })
-        ] }),
-        step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PaymentStatus,
-          {
-            status: "processing",
-            theme: theme2,
-            message: "Processing your payment...",
-            processingStartTime,
-            paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
-            transactionHash
-          }
-        ),
-        step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PaymentStatus,
-          {
-            status: "success",
-            theme: theme2,
-            message: "Payment successful!",
-            payment,
-            transactionHash,
-            selectedPaymentMethod,
-            merchantName,
-            onClose: handleSuccessClose,
-            pendingBackendConfirmation
-          }
-        ),
-        step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            PaymentStatus,
-            {
-              status: "error",
-              theme: theme2,
-              message: error || "An error occurred while processing your payment."
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onBack,
-              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"
-            }
-          )
-        ] }),
-        step !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-xs text-gray-500 flex items-center justify-center gap-1 py-6 bg-white rounded-b-[12px] ", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
-            "Powered by ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600", children: "Coinley" }),
-            " - Secure Cryptocurrency Payments"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "inline w-4 h-4 text-green-500 ml-1", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-          ] })
         ] })
-      ]
-    }
-  ) }) });
+      }
+    ) })
+  ] });
 };
 const CoinleyCheckout = forwardRef(({
   apiKey,