Account & Billing

File Information

• Path: pages/_workspace_id/workspace-settings/account-billing.vue
• Route: /:workspace_id/workspace-settings/account-billing
• Purpose: Subscription and billing management for workspace

Overview

The Account & Billing page manages workspace subscriptions, payment methods, billing history, and plan changes. It integrates with Stripe for payment processing and subscription management.

Key Features

1. Subscription Management

   • Current plan display
   • Plan details and features
   • Subscription status
   • Renewal date

2. Payment Methods

   • Add payment card
   • Update payment method
   • Set default payment method
   • Remove payment methods

3. Billing History

   • Invoice list
   • Download invoices
   • Payment history
   • Billing periods

4. Plan Changes

   • Upgrade/downgrade plans
   • Plan comparison
   • Feature comparison
   • Plan change confirmation

5. Stripe Integration

   • Stripe Elements setup
   • Payment method management
   • Subscription updates
   • Invoice handling

Components Used

• Stripe payment elements
• Plan comparison components
• Invoice list components
• Payment method cards

Data Properties

{
  subscription: null,        // Current subscription object
  plans: [],               // Available plans
  paymentMethods: [],      // Payment methods
  invoices: [],            // Billing invoices
  loading: false,          // Loading state
  showAddCard: false,      // Add card dialog visibility
  stripe: null,            // Stripe instance
  stripeCardElements: null // Stripe Elements instance
}

Computed Properties

currentPlan

Returns current subscription plan

nextBillingDate

Returns next billing date

subscriptionStatus

Returns subscription status (active, cancelled, expired)

canUpgrade

Checks if user can upgrade plan

Methods

loadSubscription()

Loads subscription details:

• Fetches subscription from API
• Updates subscription state
• Handles errors

addCardDialog()

Opens add card dialog:

• Creates Stripe setup intent
• Initializes Stripe Elements
• Shows payment form

addCard()

Saves payment card:

• Confirms Stripe setup
• Updates subscription
• Refreshes payment methods

changePlan(planId)

Changes subscription plan:

• Validates plan change
• Updates subscription via API
• Handles plan change confirmation
• Updates subscription state

downloadInvoice(invoiceId)

Downloads invoice:

• Fetches invoice PDF
• Downloads file
• Handles errors

API Endpoints

Get Subscription

• Endpoint: GET /subscription/workspace
• Query Parameters: workspace_id
• Response: Subscription object

Update Subscription

• Endpoint: PUT /subscription/update
• Request Body: Subscription update data
• Response: Updated subscription

Create Setup Intent

• Endpoint: POST /stripe/init-setup-intent
• Request Body: Customer ID
• Response: Setup intent with client secret

Get Invoices

• Endpoint: GET /subscription/invoices
• Query Parameters: workspace_id
• Response: Array of invoice objects

User Flow

1. User navigates to Account & Billing
2. Page loads subscription details
3. User views current plan and features
4. User adds/updates payment method
5. User views billing history
6. User upgrades/downgrades plan (if needed)
7. Changes are saved
8. Success message displayed

Stripe Integration

• Uses Stripe Elements for payment forms
• Setup intents for payment method saving
• Subscription management via Stripe API
• Invoice generation and download

Environment Variables

• STRIPE_PUBLISHABLE_KEY - Stripe publishable key
• API_BASE_URL - Backend API base URL

Notes for Development

• Page requires workspace admin permissions
• Stripe.js must be loaded
• Payment elements mounted dynamically
• Subscription changes may require confirmation
• Invoice downloads use blob response

Related Documentation

• Subscription Functions Mixin - Stripe integration
• Workspace Settings - Main settings page
• Multi-Workspace Feature - Workspace system