GRO-607: Replace mock payment flow with real Stripe Elements

- Install @stripe/stripe-js and @stripe/react-stripe-js
- Replace BillingPayments mock delay with real Stripe Elements:
  - Fetch publishableKey from GET /api/portal/config
  - Lazy load Stripe via loadStripe()
  - Wrap payment modal in <Elements> with PaymentElement
  - Use stripe.confirmPayment() with clientSecret from pay/pay-multiple endpoints
  - Support multi-invoice selection and single invoice payment
- Add "Save card for future payments" checkbox (setup_future_usage)
- Add payment method management: list saved cards, delete via DELETE endpoint
- Proper error handling for payment failures
- Autopay toggle (UI-only, Phase 2 backend pending)

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/api/src/routes/portal.ts

@@ -35,12 +35,6 @@ portalRouter.get("/me", async (c) => {
   return c.json({ id: client.id, name: client.name, email: client.email, phone: client.phone });
 });
 
-portalRouter.get("/config", async (c) => {
-  return c.json({
-    stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY ?? "",
-  });
-});
-
 portalRouter.get("/services", async (c) => {
   const db = getDb();
   const allServices = await db.select().from(services).where(eq(services.active, true));
@@ -129,7 +123,7 @@ portalRouter.get("/invoices", async (c) => {
     id: inv.id,
     status: inv.status,
     totalCents: inv.totalCents,
-    date: inv.createdAt,
+    createdAt: inv.createdAt,
     lineItems: (itemsByInvoice[inv.id] || []).map(li => ({ id: li.id, description: li.description, quantity: li.quantity, unitPriceCents: li.unitPriceCents, totalCents: li.totalCents })),
   })));
 });
@@ -459,6 +453,7 @@ portalRouter.delete("/waitlist/:id", async (c) => {
 import {
   createPaymentIntent,
   listPaymentMethods,
+  attachPaymentMethod,
   detachPaymentMethod,
   createSetupIntent,
   getOrCreateStripeCustomer,

apps/web/src/portal/sections/BillingPayments.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { loadStripe } from "@stripe/stripe-js";
+import { loadStripe, type Stripe } from "@stripe/stripe-js";
 import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
 import { CreditCard, DollarSign, Package, Zap } from "lucide-react";
 
@@ -27,7 +27,7 @@ interface BillingPaymentsProps {
 function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
-  const [packages] = useState<{ name: string; remaining: number }[]>([]);
+  const [packages, setPackages] = useState<{ name: string; remaining: number }[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [tab, setTab] = useState<"invoices" | "payment" | "packages">("invoices");
@@ -398,10 +398,7 @@ function PaymentModal({ sessionId, pending, onClose, onSuccess }: PaymentModalPr
       const { error: stripeError } = await stripe.confirmPayment({
         elements,
         clientSecret,
-        confirmParams: {
-          return_url: `${window.location.origin}/portal/billing`,
-          ...(saveCard ? { setup_future_usage: "off_session" } : {}),
-        },
+        confirmParams: saveCard ? { setup_future_usage: "off_session" } : undefined,
       });
 
       if (stripeError) {