Your plan
Spec
The plan page ("Your plan", from Your plan in the profile menu): the plans to choose from during the trial and on Free, or the person's subscription and what they can do with it. Choosing and changing happen on Stripe's own pages (Checkout and the customer portal), which bring the person back here. Built from existing pieces.
The page
- "Your plan" (the title style), with the Badge "Trial" beside it during the trial ("Trial · 5 days left" in the last week, as on Road to payday). No badge otherwise.
- Under the title a band: Road to payday's info note across the page (surface-accent-subtle, radius lg); surface-warning for a real problem, its first words in text-warning with ▲.
- One column of cards on phones; the three plan cards side by side from 900px. The page is at most 65rem wide.
The plans to choose from
- The trial's band: "Your free trial of Pro, on one account, ends on Fri, Dec 4. Choosing a plan ends the trial and starts your plan that day. If you don't choose one, you'll be on the free plan after Dec 4. Nothing you entered is deleted."
- Monthly / Yearly (the Segmented control), Yearly chosen to start.
- Three cards, each the app's raised card: Pro, Road to payday, Free. A card: its name (heading), the price (figure style) with "a year" or "a month", the price notes, a lead line, the features, then its button at the full width of the card.
- Yearly price notes at the early member price: "Early member price" (row style, text-accent), then "Regular price $49.99 a year. This price stays yours as long as you stay subscribed." Monthly: "Pay yearly and save $19.89" and "$39.99 a year at the early member price, instead of $59.88 for 12 monthly payments."
- During the trial Pro is outlined in the accent (2px) with the Badge "Trying now"; Free says "Where you'll be after Fri, Dec 4 if you don't choose a plan." and has no button.
- Choose Pro is primary; Choose Road to payday is tertiary (outlined). Either opens Stripe Checkout for that price.
- Free after the trial: "You're on the free plan. Your trial ended on Fri, Dec 4. Nothing you entered was deleted, and you can choose a plan any time." Free is outlined with the Badge "Your plan".
- Came back after cancelling: "Your Pro plan ended on …" and regular prices only: no early member lines on yearly; monthly "Pay yearly and save $9.89" / "$49.99 a year, instead of $59.88 for 12 monthly payments."
- Fine print (row-secondary, text-secondary): "Plans renew automatically until you cancel. Cancel any time and keep your plan until the end of what you paid for." / "Payments are handled by Stripe. We never see your card number." / "What is Stripe?", closed to start: Help's disclosure (the summary in text-accent, underlined), 44px tall.
A subscription
- A summary card: the plan's name with the Badge "Your plan", then rows (label text-secondary, value in the row style at the right, a rule between): Billing ("Yearly, $39.99 (early member price)") and what applies below.
- Subscribed: "You're on Pro. Thanks for supporting Adjustmint. Your early member price stays yours as long as you stay subscribed." Renews. "Change or cancel" (tertiary) and "Card and billing history" (a link), and under the card "These open Stripe's secure page, then bring you back here. We never see or keep your card number."
- A payment that didn't go through (amber): "▲ Your payment didn't go through. Update your card by Sat, Dec 18 to keep Pro. We'll try again in the meantime. Nothing you entered is deleted." with Update your card (primary). Payment: "Didn't go through on Dec 4". The plan stays 14 days from the first failure while Stripe retries.
- Cancelled: "You cancelled. Pro stays on until Sat, Dec 4, 2027, then you'll be on the free plan. Nothing you entered is deleted. Changed your mind? Keep Pro and your early member price stays." with Keep Pro (primary), which undoes it in place. Ends, After that "The free plan", and "Billing history" (a link).
- A downgrade waiting (or a switch to monthly, at the end of the period): "You're on Pro until Sat, Dec 4, 2027, then Road to payday. You keep everything in Pro until then, and nothing you entered is deleted." Pro until, Then "Road to payday, $24.99 a year (early member price)".
- Alpha tester: one card, "Every plan" with the Badge "Alpha tester": "You helped test Adjustmint before anyone else, so you get every plan free, for life: Pro, Road to payday and everything that comes later. Thank you." No prices, never a payment step.
Finishing up
- Back from Checkout before the subscription has reached us. The Loading states rules, on this page only: nothing for 300ms, then the band "Finishing up. We're adding Pro to your plan. This takes a few seconds." over placeholders in the summary's layout.
- After 8 seconds: "Stripe has your choice, but it's taking longer than usual to reach us. Check your connection, then try again. You won't be charged twice." with Try again, which checks again (never a second Checkout).
When Stripe can't be reached
- A button waits for its answer (busy; the others can't be pressed). If the call fails, the toast "We couldn't save that. Check your connection and try again." and nothing changes.
Built 1.0.0
The app itself, version 1.0.0, with made-up data. Taken 2026-10-29.
Changes
- 1.0.0, Oct 29 2026: The plan page and its states: the trial, Free after it, came back after cancelling, subscribed, a payment that didn't go through, cancelled with Keep Pro, a downgrade waiting, Finishing up after Checkout, and the alpha tester. Built from existing pieces. (#150)