Payments & Checkout

What's Included

• Stripe Checkout session creation
• Plan listing with pricing display
• Success and cancel payment pages
• Support for both authenticated and guest checkout

Checkout Composable (useCheckout)

const {
  createCheckoutSession, // (planId, interval?) → redirects to Stripe
  isProcessing,          // Ref<boolean>
  error                  // Ref<string | null>
} = useCheckout()

The composable creates a Stripe Checkout session via the backend API and redirects the user to Stripe's hosted checkout page.

Plans Composable (usePlans)

const {
  plans,          // Ref<Plan[]> — all plans from backend
  oneTimePlans,   // Computed — filtered for one-time payment plans
  isLoading,      // boolean
  error           // Error | null
} = usePlans()

Plans are fetched from /api/v1/plans with SSR caching. The pricing section on the landing page uses this composable.

Checkout Flow

1. User views pricing plans on the landing page (PricingSection.vue)
2. User clicks "Get Started" on a paid plan
3. useCheckout.createCheckoutSession() calls the backend
4. Backend creates a Stripe Checkout session and returns the URL
5. User is redirected to Stripe's hosted checkout
6. After payment, Stripe redirects to /payment/success or /payment/cancel

Authenticated vs Guest Checkout

• Authenticated — email is pre-filled, user_id is included in the session metadata
• Guest — Stripe collects the email, user account is created via webhook

Payment Pages

Success Page (/payment/success)

Displayed after a successful Stripe payment. Shows a confirmation message and extracts the session_id from the URL query parameters.

Cancel Page (/payment/cancel)

Displayed when the user cancels the Stripe checkout. Shows a message with a link back to the pricing section.

Pricing Section

The PricingSection component on the landing page:

1. Fetches plans via usePlans()
2. Renders pricing cards with plan details
3. Maps backend plans to Stripe price IDs
4. Handles checkout button clicks
5. Shows loading skeletons while plans are loading