select

app.js

@@ -872,7 +872,7 @@ function renderKeys(keys) {
             </div>
             <button type="button" class="btn btn-ghost btn-sm"
                     style="align-self:center"
-                    onclick="buyCredits('${escAttr(k.name)}', this)">
+                    onclick="buyCredits('${escAttr(k.name)}')">
                 Buy Credits
             </button>
         </div>`;
@@ -880,9 +880,31 @@ function renderKeys(keys) {
     .join("");
 }
 
-function buyCredits(keyName, btn) {
-  btnLoad(btn, "Redirecting\u2026");
+function buyCredits(keyName) {
+  const backdrop = document.getElementById("credits-backdrop");
+  backdrop._keyName = keyName;
+  document.getElementById("credits-key-name").textContent = keyName;
+  // default to first option
+  const radios = backdrop.querySelectorAll('input[name="credits-amount"]');
+  radios.forEach((r, i) => (r.checked = i === 0));
+  backdrop.classList.add("open");
+}
 
+function buyCreditsClose() {
+  document.getElementById("credits-backdrop").classList.remove("open");
+}
+
+function buyCreditsSubmit() {
+  const backdrop = document.getElementById("credits-backdrop");
+  const selected = backdrop.querySelector(
+    'input[name="credits-amount"]:checked',
+  );
+  if (!selected) {
+    toast("Please select an amount.", "warning");
+    return;
+  }
+
+  const keyName = backdrop._keyName;
   const params = new URLSearchParams(window.location.search);
   const activeAgent = agents.find((a) => a.UUID === activeUUID);
   const couponInput = document.getElementById("coupon-input");
@@ -891,6 +913,7 @@ function buyCredits(keyName, btn) {
   const fields = {
     product: "prod_Ufj2wCf4rhemT8",
     key: keyName || "",
+    value: selected.value,
     agent: activeUUID || "",
     period: "",
     location: activeAgent?.server || "",
@@ -908,11 +931,11 @@ function buyCredits(keyName, btn) {
   form.action = CREDITS_URL;
   form.target = "_self";
 
-  for (const [name, value] of Object.entries(fields)) {
+  for (const [name, val] of Object.entries(fields)) {
     const inp = document.createElement("input");
     inp.type = "hidden";
     inp.name = name;
-    inp.value = value;
+    inp.value = val;
     form.appendChild(inp);
   }