Billing information is accessible in account settings

A subscription product with no billing page in account settings signals to users that the product is unfinished or abandoned — they cannot see their current plan, next charge date, or payment method, so they have no way to verify they are being billed correctly. This drives trust-based churn and triggers chargebacks from users who forgot they were subscribed because the product never surfaced their billing state in context.

Add a billing page at app/settings/billing/page.tsx that renders the user's current plan, subscription status, and a form that POSTs to the Customer Portal route. Link it from the main settings navigation so users can reach it without knowing the URL:

export default async function BillingPage() {
  const user = await getCurrentUser()
  return (<form action="/api/billing/portal" method="POST"><button>Manage Billing</button></form>)
}

• ID: saas-billing.financial-data.billing-page-accessible

• Severity: info

• What to look for: Check whether a billing or subscription settings page exists in the application's account settings area. Look for routes like settings/billing, account/billing, dashboard/billing, or similar. Verify the page exists and is linked from the main settings navigation. Check that the page shows the user's current plan, next billing date, and payment method information (or links to the Customer Portal where this is available).

• Pass criteria: Count every billing-related page or route. At least 1 billing settings page or equivalent exists, is reachable from the main settings navigation, and shows meaningful billing information or links to the Customer Portal.

• Fail criteria: No billing settings page exists. The billing page exists but is not linked from settings navigation (unreachable without knowing the URL). The billing page is a dead route that renders an error.

• Skip (N/A) when: No subscription billing detected.

• Cross-reference: For frontend accessibility and navigation patterns for settings pages, the Accessibility Fundamentals audit covers keyboard navigation and ARIA patterns.

• Detail on fail: "No billing settings page found in app/settings/ or account/ routes" or "Billing page route exists but is not linked in settings navigation" or "Billing settings page throws an error when visited"

• Remediation: Create a billing settings page that shows the current plan and links to the Customer Portal:

  // app/settings/billing/page.tsx
  export default async function BillingPage() {
    const user = await getCurrentUser()
  
    return (
      <div>
        <h2>Billing</h2>
        <p>Current plan: {user.plan}</p>
        <p>Status: {user.subscription_status}</p>
        <form action="/api/billing/portal" method="POST">
          <button type="submit">Manage Billing</button>
        </form>
      </div>
    )
  }