Billing
Onboarding Billing step: plan cards, billing cycle, Skip trial, and the payment modal.
Where this sits
Route: /projects/:uniqueIdentifier/get-started/billing
This is step 4 of the in-app get-started top bar: Project Setup → Install → Verify → Billing.
Header copy:
- Title: Billing
- Subtitle: Choose a plan for your workspace. Skip to start a free 7-day trial.
After onboarding, plan management lives under Settings → Upgrade plan (see Settings: Billing).
Plan billing cycle
Section heading: Plan, then Pay upfront and save.
| Control | Discount on list price | Note under price |
|---|---|---|
| Monthly | none | billed monthly |
| Quarterly | −10% badge | billed every 3 months |
| Yearly | −20% badge | billed annually |
Default selection when you open the page: Yearly, plan Startups.
Displayed price is the monthly equivalent after the cycle discount:
round(listPrice × (1 − discount)), shown as $…/mo.
Plan cards
Three selectable cards. Selected card shows a Selected ribbon.
| Plan | List price (/mo before cycle discount) | Features (as shown) | Badge |
|---|---|---|---|
| Get Started | $500 | Up to 3 team members; Unlimited replays & dashboards; AI agents that act on your data; Prototype on your real product | — |
| Startups | $1000 | Everything in Get Started; Unlimited team members; SOC 2 & HIPAA compliant; We never train on your data | Recommended |
| Enterprise | $2500 | Everything in Startups; Your own dedicated expert; On-site setup, in person; A real human on Slack 24/7 | — |
Annual gifts (Yearly only)
When the cycle is Yearly, a second section appears: Pick your annual gift.
| Gift | Description shown |
|---|---|
| AirPods Max | Apple over-ear headphones. |
| WHOOP 5.0 | Health & recovery band, year of membership. |
| Apple Watch | The latest Apple Watch. |
| Nintendo Switch | The classic hybrid game console. |
| Oura Ring | Smart ring for sleep & recovery. |
Default gift: AirPods Max (or a previously saved choice from project onboarding settings).
Selecting a gift immediately PATCHes /api/projects/:id/onboarding with the chosen annualGift so the choice persists even if you leave before paying.
Talk to sales
Row: None of these plans work for you? with button Talk to sales → founder Cal.com booking (new tab).
Footer actions
| Control | Behavior |
|---|---|
| Back | Returns to Verify: /get-started/sdk?step=verify |
| Skip and start 7-day trial | Marks installation complete (PATCH with installationComplete: true), then goes to Home |
Continue with {plan} plan | Opens the payment modal for the selected plan |
While skipping, the skip button is disabled (dimmed).
Payment modal
Opened by Continue with … plan. Overlay titled Add payment details.
Important: this modal is a UI stub. It collects card fields in the browser, shows Processing… for a short delay, then navigates to Home. It does not call a payment API or charge a card from this component. The footer line Payments are secure and encrypted. is presentational copy for that stub UI.
| Field | Behavior |
|---|---|
| Name on card | Free text |
| Card number | Digits only, grouped in 4s, max 16 digits |
| Expiry | MM/YY formatting |
| CVC | Digits, max 4 |
| Control | Behavior |
|---|---|
| Submit | Label Pay $… → Processing…, then navigates to Home |
| Close (X) / backdrop | Closes without completing |
For day-to-day plan management after onboarding, use Settings → Upgrade plan when billing is configured for the environment.