@wopr-network/platform-ui-core 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/__tests__/buy-crypto-credits-panel.test.tsx

@@ -1,14 +1,19 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl } = vi.hoisted(() => ({
-  mockCreateCryptoCheckout: vi.fn(),
-  mockIsAllowedRedirectUrl: vi.fn(),
-}));
+const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl, mockGetSupportedPaymentMethods } =
+  vi.hoisted(() => ({
+    mockCreateCryptoCheckout: vi.fn(),
+    mockIsAllowedRedirectUrl: vi.fn(),
+    mockGetSupportedPaymentMethods: vi.fn(),
+  }));
 
 vi.mock("@/lib/api", () => ({
   createCryptoCheckout: (...args: unknown[]) => mockCreateCryptoCheckout(...args),
+  createEthCheckout: vi.fn(),
+  createStablecoinCheckout: vi.fn(),
+  getSupportedPaymentMethods: (...args: unknown[]) => mockGetSupportedPaymentMethods(...args),
 }));
 
 vi.mock("@/lib/validate-redirect-url", () => ({
@@ -44,6 +49,9 @@ vi.mock("next/navigation", () => ({
 vi.mock("better-auth/react", () => ({
   createAuthClient: () => ({
     useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
   }),
 }));
 
@@ -55,14 +63,31 @@ vi.mock("lucide-react", async (importOriginal) => {
   };
 });
 
+const MOCK_USDC_METHOD = {
+  id: "usdc:base",
+  type: "stablecoin",
+  label: "USDC on Base",
+  token: "USDC",
+  chain: "base",
+};
+const MOCK_BTC_METHOD = {
+  id: "btc:btcpay",
+  type: "btc",
+  label: "BTC",
+  token: "BTC",
+  chain: "bitcoin",
+};
+
 afterEach(() => {
   vi.restoreAllMocks();
   mockIsAllowedRedirectUrl.mockReset();
   mockCreateCryptoCheckout.mockReset();
+  mockGetSupportedPaymentMethods.mockReset();
 });
 
 describe("BuyCryptoCreditPanel", () => {
   it("renders crypto amount buttons ($10, $25, $50, $100)", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
@@ -74,23 +99,35 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("Pay button is disabled when no amount selected", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
-    const payBtn = screen.getByRole("button", { name: "Pay with crypto" });
+    // Wait for methods to load
+    await waitFor(() => {
+      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+    });
+
+    const payBtn = screen.getByRole("button", { name: "Pay with USDC" });
     expect(payBtn).toBeDisabled();
   });
 
   it("Pay button is enabled after selecting an amount", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+    });
+
     await user.click(screen.getByText("$25"));
-    expect(screen.getByRole("button", { name: "Pay with crypto" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Pay with USDC" })).toBeEnabled();
   });
 
   it("calls createCryptoCheckout with selected amount and redirects", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const hrefSetter = vi.fn();
     Object.defineProperty(window, "location", {
       value: { ...window.location, href: "" },
@@ -112,8 +149,14 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    // Switch to BTC tab
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$50"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(mockCreateCryptoCheckout).toHaveBeenCalledWith(50);
     expect(mockIsAllowedRedirectUrl).toHaveBeenCalledWith("https://btcpay.example.com/i/abc123");
@@ -121,6 +164,7 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("shows error when redirect URL is not allowed", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockResolvedValue({
       url: "https://evil.com/steal",
       referenceId: "ref-evil",
@@ -131,15 +175,21 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$10"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(
       await screen.findByText("Unexpected checkout URL. Please contact support."),
     ).toBeInTheDocument();
   });
 
-  it("shows Opening checkout... while checkout is in progress", async () => {
+  it("shows Creating checkout... while checkout is in progress", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockReturnValue(
       new Promise(() => {
         /* intentionally pending */
@@ -150,29 +200,33 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$100"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
-    expect(await screen.findByText("Opening checkout...")).toBeInTheDocument();
+    expect(await screen.findByText("Creating checkout...")).toBeInTheDocument();
   });
 
   it("shows error when crypto checkout API call fails", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockRejectedValue(new Error("API down"));
 
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$25"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(await screen.findByText("Checkout failed. Please try again.")).toBeInTheDocument();
   });
-
-  it("displays minimum amount note", async () => {
-    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
-    render(<BuyCryptoCreditPanel />);
-
-    expect(screen.getByText(/Minimum \$10/)).toBeInTheDocument();
-  });
 });

package/src/__tests__/settings.test.tsx

@@ -19,10 +19,17 @@ vi.mock("next/navigation", () => ({
   usePathname: () => "/settings/profile",
 }));
 
-// Mock better-auth/react
+// Mock better-auth/react — session with user-001 (Alice) so role-gated org UI renders admin view
 vi.mock("better-auth/react", () => ({
   createAuthClient: () => ({
-    useSession: () => ({ data: null, isPending: false, error: null }),
+    useSession: () => ({
+      data: {
+        user: { id: "user-001", name: "Alice Johnson", email: "alice@example.com" },
+        session: { id: "sess-1", userId: "user-001", expiresAt: new Date(Date.now() + 86400000) },
+      },
+      isPending: false,
+      error: null,
+    }),
     signIn: { email: vi.fn(), social: vi.fn() },
     signUp: { email: vi.fn() },
     signOut: vi.fn(),

package/src/app/admin/payment-methods/page.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  adminListPaymentMethods,
+  adminTogglePaymentMethod,
+  adminUpsertPaymentMethod,
+  type PaymentMethodAdmin,
+} from "@/lib/api";
+
+function AddMethodForm({ onSaved }: { onSaved: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [form, setForm] = useState({
+    token: "",
+    chain: "",
+    type: "erc20",
+    contractAddress: "",
+    decimals: 18,
+    displayName: "",
+    displayOrder: 0,
+    confirmations: 1,
+    rpcUrl: "",
+  });
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    const id = `${form.token}:${form.chain}`;
+    await adminUpsertPaymentMethod({
+      id,
+      type: form.type,
+      token: form.token,
+      chain: form.chain,
+      contractAddress: form.contractAddress || null,
+      decimals: form.decimals,
+      displayName: form.displayName || `${form.token} on ${form.chain}`,
+      enabled: true,
+      displayOrder: form.displayOrder,
+      rpcUrl: form.rpcUrl || null,
+      confirmations: form.confirmations,
+    });
+    setSaving(false);
+    setOpen(false);
+    setForm({
+      token: "",
+      chain: "",
+      type: "erc20",
+      contractAddress: "",
+      decimals: 18,
+      displayName: "",
+      displayOrder: 0,
+      confirmations: 1,
+      rpcUrl: "",
+    });
+    onSaved();
+  }
+
+  if (!open) {
+    return (
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        Add Payment Method
+      </Button>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="rounded-md border p-4 space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Token</span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            placeholder="USDC"
+            value={form.token}
+            onChange={(e) => setForm({ ...form, token: e.target.value })}
+            required
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Chain</span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            placeholder="base"
+            value={form.chain}
+            onChange={(e) => setForm({ ...form, chain: e.target.value })}
+            required
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Type</span>
+          <select
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            value={form.type}
+            onChange={(e) => setForm({ ...form, type: e.target.value })}
+          >
+            <option value="erc20">ERC-20</option>
+            <option value="native">Native</option>
+          </select>
+        </label>
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Decimals</span>
+          <input
+            type="number"
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            value={form.decimals}
+            onChange={(e) => setForm({ ...form, decimals: Number(e.target.value) })}
+          />
+        </label>
+        <label className="col-span-2 space-y-1">
+          <span className="text-xs text-muted-foreground">Contract Address (empty for native)</span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm font-mono"
+            placeholder="0x..."
+            value={form.contractAddress}
+            onChange={(e) => setForm({ ...form, contractAddress: e.target.value })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Display Order</span>
+          <input
+            type="number"
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            value={form.displayOrder}
+            onChange={(e) => setForm({ ...form, displayOrder: Number(e.target.value) })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-xs text-muted-foreground">Confirmations</span>
+          <input
+            type="number"
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            value={form.confirmations}
+            onChange={(e) => setForm({ ...form, confirmations: Number(e.target.value) })}
+          />
+        </label>
+      </div>
+      <div className="flex gap-2">
+        <Button type="submit" size="sm" disabled={saving}>
+          {saving ? "Saving..." : "Save"}
+        </Button>
+        <Button type="button" variant="ghost" size="sm" onClick={() => setOpen(false)}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default function AdminPaymentMethodsPage() {
+  const [methods, setMethods] = useState<PaymentMethodAdmin[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const m = await adminListPaymentMethods();
+      setMethods(m);
+    } catch {
+      // Failed to load
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function handleToggle(id: string, enabled: boolean) {
+    await adminTogglePaymentMethod(id, enabled);
+    load();
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Payment Methods</h1>
+        <AddMethodForm onSaved={load} />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Configured Methods</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading...</p>
+          ) : methods.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No payment methods configured.</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b text-left text-muted-foreground">
+                    <th className="pb-2 pr-4">Token</th>
+                    <th className="pb-2 pr-4">Chain</th>
+                    <th className="pb-2 pr-4">Type</th>
+                    <th className="pb-2 pr-4">Contract</th>
+                    <th className="pb-2 pr-4">Decimals</th>
+                    <th className="pb-2 pr-4">Order</th>
+                    <th className="pb-2 pr-4">Status</th>
+                    <th className="pb-2">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {methods.map((m) => (
+                    <tr key={m.id} className="border-b last:border-0">
+                      <td className="py-2 pr-4 font-medium">{m.token}</td>
+                      <td className="py-2 pr-4">{m.chain}</td>
+                      <td className="py-2 pr-4">{m.type}</td>
+                      <td className="py-2 pr-4 font-mono text-xs">
+                        {m.contractAddress ? `${m.contractAddress.slice(0, 10)}...` : "—"}
+                      </td>
+                      <td className="py-2 pr-4">{m.decimals}</td>
+                      <td className="py-2 pr-4">{m.displayOrder}</td>
+                      <td className="py-2 pr-4">
+                        <span
+                          className={
+                            m.enabled
+                              ? "text-xs font-medium text-green-500"
+                              : "text-xs font-medium text-red-500"
+                          }
+                        >
+                          {m.enabled ? "Enabled" : "Disabled"}
+                        </span>
+                      </td>
+                      <td className="py-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleToggle(m.id, !m.enabled)}
+                        >
+                          {m.enabled ? "Disable" : "Enable"}
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/billing/buy-crypto-credits-panel.tsx

@@ -1,49 +1,28 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Bitcoin, Check, CircleDollarSign, Copy } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Check, CircleDollarSign, Copy } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  createCryptoCheckout,
-  createEthCheckout,
-  createStablecoinCheckout,
-  type EthCheckoutResult,
-  type StablecoinCheckoutResult,
+  type CheckoutResult,
+  createCheckout,
+  getSupportedPaymentMethods,
+  type SupportedPaymentMethod,
 } from "@/lib/api";
 import { cn } from "@/lib/utils";
-import { isAllowedRedirectUrl } from "@/lib/validate-redirect-url";
 
-const CRYPTO_AMOUNTS = [
+const AMOUNTS = [
   { value: 10, label: "$10" },
   { value: 25, label: "$25" },
   { value: 50, label: "$50" },
   { value: 100, label: "$100" },
 ];
 
-const STABLECOIN_TOKENS = [
-  { token: "USDC", label: "USDC", chain: "base", chainLabel: "Base" },
-  { token: "USDT", label: "USDT", chain: "base", chainLabel: "Base" },
-  { token: "DAI", label: "DAI", chain: "base", chainLabel: "Base" },
-];
-
-type PaymentMethod = "btc" | "stablecoin" | "eth";
-
-/** Format wei (BigInt string) to ETH string without Number precision loss. */
-function formatWeiToEth(weiStr: string): string {
-  const wei = BigInt(weiStr);
-  const divisor = BigInt("1000000000000000000");
-  const whole = wei / divisor;
-  const frac = wei % divisor;
-  const fracStr = frac.toString().padStart(18, "0").slice(0, 6);
-  return `${whole}.${fracStr}`;
-}
-
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
-
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -57,128 +36,35 @@ function CopyButton({ text }: { text: string }) {
   );
 }
 
-function StablecoinDeposit({
-  checkout,
-  onReset,
-}: {
-  checkout: StablecoinCheckoutResult;
-  onReset: () => void;
-}) {
-  const [confirmed, _setConfirmed] = useState(false);
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  useEffect(() => {
-    // TODO: poll charge status via tRPC query when backend endpoint exists
-    // For now, show the deposit address and let the user confirm manually
-    return () => {
-      if (pollRef.current) clearInterval(pollRef.current);
-    };
-  }, []);
-
-  const displayAmount = `${checkout.amountUsd} ${checkout.token}`;
-
-  if (confirmed) {
-    return (
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        className="rounded-md border border-primary/25 bg-primary/5 p-4 text-center"
-      >
-        <Check className="mx-auto h-8 w-8 text-primary" />
-        <p className="mt-2 text-sm font-medium">Payment detected. Credits will appear shortly.</p>
-      </motion.div>
-    );
-  }
-
-  return (
-    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="space-y-4">
-      <div className="rounded-md border p-4 space-y-3">
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">
-            Send exactly{" "}
-            <span className="font-mono font-bold text-foreground">{displayAmount}</span> to:
-          </p>
-          <Badge variant="outline" className="text-xs">
-            {checkout.token} on {checkout.chain}
-          </Badge>
-        </div>
-
-        <div className="flex items-center gap-2 rounded-md bg-muted/50 px-3 py-2">
-          <code className="flex-1 text-xs font-mono break-all text-foreground">
-            {checkout.depositAddress}
-          </code>
-          <CopyButton text={checkout.depositAddress} />
-        </div>
-
-        <p className="text-xs text-muted-foreground">
-          Only send {checkout.token} on the {checkout.chain} network. Other tokens or chains will be
-          lost.
-        </p>
-      </div>
-
-      <div className="flex gap-2">
-        <Button variant="ghost" size="sm" onClick={onReset}>
-          Cancel
-        </Button>
-      </div>
-    </motion.div>
-  );
-}
-
 export function BuyCryptoCreditPanel() {
-  const [method, setMethod] = useState<PaymentMethod>("stablecoin");
-  const [selected, setSelected] = useState<number | null>(null);
-  const [selectedToken, setSelectedToken] = useState(STABLECOIN_TOKENS[0]);
+  const [methods, setMethods] = useState<SupportedPaymentMethod[]>([]);
+  const [selectedMethod, setSelectedMethod] = useState<SupportedPaymentMethod | null>(null);
+  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [stablecoinCheckout, setStablecoinCheckout] = useState<StablecoinCheckoutResult | null>(
-    null,
-  );
-  const [ethCheckout, setEthCheckout] = useState<EthCheckoutResult | null>(null);
-
-  async function handleEthCheckout() {
-    if (selected === null) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await createEthCheckout(selected, "base");
-      setEthCheckout(result);
-    } catch {
-      setError("Checkout failed. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }
+  const [checkout, setCheckout] = useState<CheckoutResult | null>(null);
 
-  async function handleBtcCheckout() {
-    if (selected === null) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const { url } = await createCryptoCheckout(selected);
-      if (!isAllowedRedirectUrl(url)) {
-        setError("Unexpected checkout URL. Please contact support.");
-        setLoading(false);
-        return;
-      }
-      window.location.href = url;
-    } catch {
-      setError("Checkout failed. Please try again.");
-      setLoading(false);
-    }
-  }
+  // Fetch available payment methods from backend on mount
+  useEffect(() => {
+    getSupportedPaymentMethods()
+      .then((m) => {
+        if (m.length > 0) {
+          setMethods(m);
+          setSelectedMethod(m[0]);
+        }
+      })
+      .catch(() => {
+        // Backend unavailable — panel stays empty
+      });
+  }, []);
 
-  async function handleStablecoinCheckout() {
-    if (selected === null) return;
+  async function handleCheckout() {
+    if (selectedAmount === null || !selectedMethod) return;
     setLoading(true);
     setError(null);
     try {
-      const result = await createStablecoinCheckout(
-        selected,
-        selectedToken.token,
-        selectedToken.chain,
-      );
-      setStablecoinCheckout(result);
+      const result = await createCheckout(selectedMethod.id, selectedAmount);
+      setCheckout(result);
     } catch {
       setError("Checkout failed. Please try again.");
     } finally {
@@ -187,12 +73,13 @@ export function BuyCryptoCreditPanel() {
   }
 
   function handleReset() {
-    setStablecoinCheckout(null);
-    setEthCheckout(null);
-    setSelected(null);
+    setCheckout(null);
+    setSelectedAmount(null);
     setError(null);
   }
 
+  if (methods.length === 0) return null;
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 8 }}
@@ -202,65 +89,32 @@ export function BuyCryptoCreditPanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            {method === "btc" ? (
-              <Bitcoin className="h-4 w-4 text-amber-500" />
-            ) : method === "eth" ? (
-              <CircleDollarSign className="h-4 w-4 text-indigo-500" />
-            ) : (
-              <CircleDollarSign className="h-4 w-4 text-blue-500" />
-            )}
+            <CircleDollarSign className="h-4 w-4 text-primary" />
             Pay with Crypto
           </CardTitle>
-          <div className="flex gap-2 pt-1">
-            <button
-              type="button"
-              onClick={() => {
-                setMethod("stablecoin");
-                handleReset();
-              }}
-              className={cn(
-                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
-                method === "stablecoin"
-                  ? "bg-primary/10 text-primary"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              Stablecoin
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setMethod("eth");
-                handleReset();
-              }}
-              className={cn(
-                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
-                method === "eth"
-                  ? "bg-indigo-500/10 text-indigo-500"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              ETH
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setMethod("btc");
-                handleReset();
-              }}
-              className={cn(
-                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
-                method === "btc"
-                  ? "bg-amber-500/10 text-amber-500"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              BTC
-            </button>
+          <div className="flex flex-wrap gap-2 pt-1">
+            {methods.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                onClick={() => {
+                  setSelectedMethod(m);
+                  handleReset();
+                }}
+                className={cn(
+                  "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+                  selectedMethod?.id === m.id
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {m.token}
+              </button>
+            ))}
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          {ethCheckout ? (
+          {checkout ? (
             <motion.div
               initial={{ opacity: 0, y: 8 }}
               animate={{ opacity: 1, y: 0 }}
@@ -269,67 +123,50 @@ export function BuyCryptoCreditPanel() {
               <div className="rounded-md border p-4 space-y-3">
                 <div className="flex items-center justify-between">
                   <p className="text-sm text-muted-foreground">
-                    Send approximately{" "}
+                    Send{" "}
                     <span className="font-mono font-bold text-foreground">
-                      {formatWeiToEth(ethCheckout.expectedWei)} ETH
+                      {checkout.displayAmount}
                     </span>{" "}
-                    (${ethCheckout.amountUsd}) to:
+                    to:
                   </p>
                   <Badge variant="outline" className="text-xs">
-                    ETH on {ethCheckout.chain}
+                    {checkout.token} on {checkout.chain}
                   </Badge>
                 </div>
                 <div className="flex items-center gap-2 rounded-md bg-muted/50 px-3 py-2">
                   <code className="flex-1 text-xs font-mono break-all text-foreground">
-                    {ethCheckout.depositAddress}
+                    {checkout.depositAddress}
                   </code>
-                  <CopyButton text={ethCheckout.depositAddress} />
+                  <CopyButton text={checkout.depositAddress} />
                 </div>
+                {checkout.priceCents && (
+                  <p className="text-xs text-muted-foreground">
+                    Price at checkout: ${(checkout.priceCents / 100).toFixed(2)} per{" "}
+                    {checkout.token}
+                  </p>
+                )}
                 <p className="text-xs text-muted-foreground">
-                  ETH price at checkout: ${(ethCheckout.priceCents / 100).toFixed(2)}. Only send ETH
-                  on the {ethCheckout.chain} network.
+                  Only send {checkout.token} on the {checkout.chain} network.
                 </p>
               </div>
               <Button variant="ghost" size="sm" onClick={handleReset}>
                 Cancel
               </Button>
             </motion.div>
-          ) : stablecoinCheckout ? (
-            <StablecoinDeposit checkout={stablecoinCheckout} onReset={handleReset} />
           ) : (
             <>
-              {method === "stablecoin" && (
-                <div className="flex gap-2">
-                  {STABLECOIN_TOKENS.map((t) => (
-                    <button
-                      key={`${t.token}:${t.chain}`}
-                      type="button"
-                      onClick={() => setSelectedToken(t)}
-                      className={cn(
-                        "rounded-md border px-3 py-1.5 text-xs font-medium transition-colors",
-                        selectedToken.token === t.token && selectedToken.chain === t.chain
-                          ? "border-primary bg-primary/5 text-primary"
-                          : "border-border text-muted-foreground hover:text-foreground",
-                      )}
-                    >
-                      {t.label}
-                    </button>
-                  ))}
-                </div>
-              )}
-
               <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                {CRYPTO_AMOUNTS.map((amt) => (
+                {AMOUNTS.map((amt) => (
                   <motion.button
                     key={amt.value}
                     type="button"
-                    onClick={() => setSelected(amt.value)}
+                    onClick={() => setSelectedAmount(amt.value)}
                     whileHover={{ scale: 1.03 }}
                     whileTap={{ scale: 0.98 }}
                     transition={{ type: "spring", stiffness: 400, damping: 25 }}
                     className={cn(
                       "flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
-                      selected === amt.value
+                      selectedAmount === amt.value
                         ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
                         : "border-border",
                     )}
@@ -342,24 +179,12 @@ export function BuyCryptoCreditPanel() {
               {error && <p className="text-sm text-destructive">{error}</p>}
 
               <Button
-                onClick={
-                  method === "btc"
-                    ? handleBtcCheckout
-                    : method === "eth"
-                      ? handleEthCheckout
-                      : handleStablecoinCheckout
-                }
-                disabled={selected === null || loading}
+                onClick={handleCheckout}
+                disabled={selectedAmount === null || !selectedMethod || loading}
                 variant="outline"
                 className="w-full sm:w-auto"
               >
-                {loading
-                  ? "Creating checkout..."
-                  : method === "btc"
-                    ? "Pay with BTC"
-                    : method === "eth"
-                      ? "Pay with ETH"
-                      : `Pay with ${selectedToken.label}`}
+                {loading ? "Creating checkout..." : `Pay with ${selectedMethod?.token ?? "Crypto"}`}
               </Button>
             </>
           )}

package/src/lib/api.ts

@@ -1369,6 +1369,71 @@ export async function createEthCheckout(
   return trpcVanilla.billing.ethCheckout.mutate({ amountUsd, chain });
 }
 
+// --- Supported payment methods (runtime-configured) ---
+
+export interface SupportedPaymentMethod {
+  id: string;
+  type: string;
+  token: string;
+  chain: string;
+  displayName: string;
+  decimals: number;
+  displayOrder: number;
+}
+
+export async function getSupportedPaymentMethods(): Promise<SupportedPaymentMethod[]> {
+  return trpcVanilla.billing.supportedPaymentMethods.query(undefined);
+}
+
+// --- Unified checkout (replaces stablecoin/eth/btc-specific endpoints) ---
+
+export interface CheckoutResult {
+  depositAddress: string;
+  displayAmount: string;
+  amountUsd: number;
+  token: string;
+  chain: string;
+  referenceId: string;
+  priceCents?: number;
+}
+
+export async function createCheckout(methodId: string, amountUsd: number): Promise<CheckoutResult> {
+  return trpcVanilla.billing.checkout.mutate({ methodId, amountUsd });
+}
+
+// --- Admin payment method management ---
+
+export interface PaymentMethodAdmin {
+  id: string;
+  type: string;
+  token: string;
+  chain: string;
+  contractAddress: string | null;
+  decimals: number;
+  displayName: string;
+  enabled: boolean;
+  displayOrder: number;
+  rpcUrl: string | null;
+  confirmations: number;
+}
+
+export async function adminListPaymentMethods(): Promise<PaymentMethodAdmin[]> {
+  return trpcVanilla.billing.adminListPaymentMethods.query(undefined);
+}
+
+export async function adminUpsertPaymentMethod(
+  method: PaymentMethodAdmin,
+): Promise<{ ok: boolean }> {
+  return trpcVanilla.billing.adminUpsertPaymentMethod.mutate(method);
+}
+
+export async function adminTogglePaymentMethod(
+  id: string,
+  enabled: boolean,
+): Promise<{ ok: boolean }> {
+  return trpcVanilla.billing.adminTogglePaymentMethod.mutate({ id, enabled });
+}
+
 // --- Dividend types ---
 
 export interface DividendWalletStats {

package/src/lib/trpc-types.ts

@@ -115,6 +115,11 @@ type AppRouterRecord = {
     cryptoCheckout: AnyTRPCMutationProcedure;
     stablecoinCheckout: AnyTRPCMutationProcedure;
     ethCheckout: AnyTRPCMutationProcedure;
+    checkout: AnyTRPCMutationProcedure;
+    supportedPaymentMethods: AnyTRPCQueryProcedure;
+    adminListPaymentMethods: AnyTRPCQueryProcedure;
+    adminUpsertPaymentMethod: AnyTRPCMutationProcedure;
+    adminTogglePaymentMethod: AnyTRPCMutationProcedure;
     autoTopupSettings: AnyTRPCQueryProcedure;
     updateAutoTopupSettings: AnyTRPCMutationProcedure;
     accountStatus: AnyTRPCQueryProcedure;