Fix payment admin page: show masked keys and populate form on load (#272)

The admin payments page had three bugs: form didn't load existing config
values (publishable keys, price, test mode), secret keys were never
displayed even masked, and allowCustomAmount wasn't returned from the
query. Now the query decrypts+masks secret keys for display, the form
populates on load, and each secret field shows its current masked value.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: prazgaitis

apps/web/app/challenges/[id]/admin/payments/page.tsx

@@ -79,12 +79,18 @@ export default function PaymentsAdminPage() {
   const toggleTestMode = useMutation(api.mutations.paymentConfig.toggleTestMode);
   const testConnection = useAction(api.actions.payments.testStripeConnection);
 
-  // Sync allowCustomAmount from paymentConfig when it loads
+  // Populate form with existing config values when they load
   useEffect(() => {
-    if (paymentConfig !== undefined) {
+    if (paymentConfig !== undefined && paymentConfig !== null) {
       setFormData((prev) => ({
         ...prev,
-        allowCustomAmount: paymentConfig?.allowCustomAmount ?? false,
+        stripePublishableKey: paymentConfig.stripePublishableKey ?? "",
+        stripeTestPublishableKey: paymentConfig.stripeTestPublishableKey ?? "",
+        testMode: paymentConfig.testMode ?? true,
+        priceInDollars: paymentConfig.priceInCents > 0
+          ? (paymentConfig.priceInCents / 100).toFixed(2)
+          : "",
+        allowCustomAmount: paymentConfig.allowCustomAmount ?? false,
       }));
     }
   }, [paymentConfig]);
@@ -420,6 +426,9 @@ export default function PaymentsAdminPage() {
                       placeholder={paymentConfig?.hasTestSecretKey ? "••••••••" : "sk_test_..."}
                       className="h-8 border-zinc-600 bg-zinc-700 text-xs text-zinc-200"
                     />
+                    {paymentConfig?.maskedTestSecretKey && (
+                      <p className="text-[10px] font-mono text-zinc-500">Current: {paymentConfig.maskedTestSecretKey}</p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -465,6 +474,9 @@ export default function PaymentsAdminPage() {
                       placeholder={paymentConfig?.hasLiveSecretKey ? "••••••••" : "sk_live_..."}
                       className="h-8 border-zinc-600 bg-zinc-700 text-xs text-zinc-200"
                     />
+                    {paymentConfig?.maskedLiveSecretKey && (
+                      <p className="text-[10px] font-mono text-zinc-500">Current: {paymentConfig.maskedLiveSecretKey}</p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -490,6 +502,9 @@ export default function PaymentsAdminPage() {
                       placeholder={paymentConfig?.hasTestWebhookSecret ? "••••••••" : "whsec_..."}
                       className="h-8 border-zinc-600 bg-zinc-700 text-xs text-zinc-200"
                     />
+                    {paymentConfig?.maskedTestWebhookSecret && (
+                      <p className="text-[10px] font-mono text-zinc-500">Current: {paymentConfig.maskedTestWebhookSecret}</p>
+                    )}
                   </div>
                   <div className="space-y-1">
                     <Label className="text-[10px] text-zinc-500">Live Webhook Secret (whsec_...)</Label>
@@ -505,6 +520,9 @@ export default function PaymentsAdminPage() {
                       placeholder={paymentConfig?.hasWebhookSecret ? "••••••••" : "whsec_..."}
                       className="h-8 border-zinc-600 bg-zinc-700 text-xs text-zinc-200"
                     />
+                    {paymentConfig?.maskedWebhookSecret && (
+                      <p className="text-[10px] font-mono text-zinc-500">Current: {paymentConfig.maskedWebhookSecret}</p>
+                    )}
                   </div>
                 </div>
               </div>

packages/backend/queries/paymentConfig.ts

@@ -1,6 +1,6 @@
 import { query, internalQuery } from "../_generated/server";
 import { v } from "convex/values";
-import { maskKey } from "../lib/stripe";
+import { decryptKey, maskKey } from "../lib/stripe";
 
 /**
  * Get payment configuration for a challenge (admin view with masked keys)
@@ -19,24 +19,40 @@ export const getPaymentConfig = query({
       return null;
     }
 
+    // Helper to safely decrypt and mask a key
+    const maskedDecrypt = (encrypted: string | undefined): string | null => {
+      if (!encrypted) return null;
+      try {
+        return maskKey(decryptKey(encrypted));
+      } catch {
+        return "****";
+      }
+    };
+
     // Return config with masked secret keys
     return {
       id: config._id,
       challengeId: config.challengeId,
-      // Masked keys for display
+      // Boolean flags for quick checks
       hasLiveSecretKey: !!config.stripeSecretKey,
       hasLivePublishableKey: !!config.stripePublishableKey,
       hasTestSecretKey: !!config.stripeTestSecretKey,
       hasTestPublishableKey: !!config.stripeTestPublishableKey,
       hasWebhookSecret: !!config.stripeWebhookSecret,
       hasTestWebhookSecret: !!config.stripeTestWebhookSecret,
+      // Masked secret keys for admin display
+      maskedLiveSecretKey: maskedDecrypt(config.stripeSecretKey),
+      maskedTestSecretKey: maskedDecrypt(config.stripeTestSecretKey),
+      maskedWebhookSecret: maskedDecrypt(config.stripeWebhookSecret),
+      maskedTestWebhookSecret: maskedDecrypt(config.stripeTestWebhookSecret),
       // Publishable keys can be shown (they're public)
       stripePublishableKey: config.stripePublishableKey || null,
       stripeTestPublishableKey: config.stripeTestPublishableKey || null,
       // Settings
       testMode: config.testMode,
       priceInCents: config.priceInCents,
       currency: config.currency,
+      allowCustomAmount: config.allowCustomAmount ?? false,
       createdAt: config.createdAt,
       updatedAt: config.updatedAt,
     };

tasks/fix-payment-admin-page.md

@@ -0,0 +1,16 @@
+# Fix Payment Admin Page
+
+**Date:** 2026-04-02
+
+## Problems
+1. Admin page doesn't populate form with existing payment config values on load
+2. Masked secret keys are never displayed (maskKey exists but isn't used)
+3. `allowCustomAmount` not returned from `getPaymentConfig` query
+4. Saving with empty form can overwrite existing config with zeros
+
+## Implementation
+
+- [x] Update `getPaymentConfig` query to return masked secret keys and `allowCustomAmount`
+- [x] Update admin page `useEffect` to populate all form fields from existing config
+- [x] Show masked key values in the UI when keys exist
+- [x] Set prod Stripe keys for March 2027 challenge via Convex CLI