Studio Practice Invoice Prototype
Prototype · branded billing

Live mockup of the Studio Practice invoice + payment system. Static HTML — no real money moves yet — but every interaction below is wired so the flow feels like the real thing.

Admin walkthrough
  1. Admin sign in — any password works.
  2. Dashboard — click any row to open that invoice as the client sees it. Tabs filter by status.
  3. New invoice — load a preset, edit, preview, send. Watch the total recompute.
  4. Reports — EOY tax view. Time-range pills swap the numbers. Export CSV actually downloads.
Payee walkthrough
  1. SP homepage — what your client browses to. Scroll to the footer Work column and tap "Pay an invoice."
  2. Invoice email — or: open the email mock. The pill CTA is a convenience link with an HMAC token that skips the lookup step.
  3. /pay lookup — what the client sees on a cold visit. Enter the SP-XXXX number plus email to load the invoice.
  4. /pay detail — Stripe Payment Element drawer slides up. Card / Apple Pay / Google Pay all supported.

Admin · Owners

running the business 01 · admin

Sign in

/admin-gate

Either owner can enter here. Password-gated. Submitting drops on the dashboard. Opens in a new tab.

Open gate ↗ 02 · admin

Invoices dashboard

/admin

Outstanding, paid, drafts. Click any row to open as the client sees it. Overdue gets a quiet flag.

Open dashboard → 03 · admin

New invoice

/admin/invoice

Compose a branded invoice. Bill-to, line items with presets, due date, optional note. Preview or send.

Open composer → 04 · admin

Reports

/admin/reports

EOY tax + audit. Line-item ledger, best-selling lines + categories, top clients, revenue over time. Export CSV.

Open reports →

Payee · Client

finding and paying their invoice 01 · payee

SP homepage

studiopractice.io

Client lands on the real homepage and finds "Pay an invoice" in the footer Work column. Opens in a new tab.

Open homepage ↗ 02 · payee

Invoice email

studio@studiopractice.io

Mock of the invoice email. CTA pill carries an HMAC token that auto-loads the invoice.

Open email → 03 · payee

Pay an invoice

/pay

Lookup state. Client enters the invoice number plus email. Same generic response on every miss.

Open lookup → 04 · payee

Invoice detail

/pay → loaded

Branded invoice view with line items, total, and an expanding Payment Element drawer.

Open detail → 05 · payee

Receipt email

after payment

Lands within seconds of payment. Triggered by Stripe's invoice.paid webhook. Internal copy also sent to studio@ for the record.

Open receipt →