Skip to content

prototype: /pro pricing + checkout variants (do not merge)#194

Draft
kilbot wants to merge 6 commits into
mainfrom
worktree-pro-page-prototype
Draft

prototype: /pro pricing + checkout variants (do not merge)#194
kilbot wants to merge 6 commits into
mainfrom
worktree-pro-page-prototype

Conversation

@kilbot

@kilbot kilbot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Prototype — do not merge

Mockups for two complaints about the Pro purchase experience, both as dev-only ?variant= switchers on the real routes (floating bottom bar, ←/→ keys). Production builds render the real pages unchanged.

Part 1 — /pro pricing section

Complaint: the whole yearly/lifetime blocks skeleton while the Medusa catalog loads.

  • /pro?variant=a — Static-first cards: today's design, but cards render instantly; only the price number suspends with an inline skeleton.
  • /pro?variant=b — Comparison panel: features listed once, term differences (updates / billing) side by side.
  • /pro?variant=c — One product, pick a term: single decision panel with a radio term selector and one CTA.
  • /pro — current production design as baseline. ?delay=<ms> tunes simulated Medusa latency (default 1500).

Key finding: only the price text needs Medusa. All card copy is static (OFFER_COPY), and the checkout CTA works with just ?product=<handle> because checkout re-validates against the live catalog. Verified via streaming inspection: full card markup arrives in the first HTML chunk with price-sized skeletons.

Part 2 — /pro/checkout flow

Complaint: boring, too many steps. Constraints: account + billing address are required; everything else should be painless.

  • /pro/checkout?variant=a — One column, express-first: order pill → Apple/Google Pay → email → card → compact address → one Pay button, all on one screen.
  • /pro/checkout?variant=b — Three steps that collapse: Account → Billing → Payment accordion; completed steps collapse to ✓ summaries with Edit; sticky order summary.
  • /pro/checkout?variant=c — Split-screen paywall (Stripe-Checkout style): dark left pane keeps selling, flat boxless form on the right.
  • /pro/checkout — current production checkout as baseline (needs sign-in).

?signedin=1 (or the toggle in the floating bar) previews the signed-in state. Pay buttons fake 1.2s of processing then a success screen. Fully stubbed — no Medusa/Stripe/auth; middleware has a dev-only bypass for ?variant=a|b|c.

Structural ideas all three share (the actual proposals, whatever visual wins):

  1. Kill the /login bounce — create the account inline from the checkout email field; license + sign-in link arrive after purchase. OAuth still possible for existing accounts.
  2. Kill the blocking "Preparing checkout..." spinner — render the form immediately, create the cart in the background.
  3. Lead with wallet payments (Apple/Google Pay) — they supply name, email, and billing address in one tap.
  4. Collect the billing address as one compact block (today the checkout doesn't collect one explicitly at all — just the bare Stripe PaymentElement).

Validation

  • tsc --noEmit clean, eslint clean on touched files
  • Full unit suite: 134 files / 910 tests passing
  • All variants + baselines rendered and interaction-tested in the browser (variant B step flow, variant C signed-in state and fake pay → success)

Next step: pick winners (or combinations) for both surfaces, record in src/components/pro/prototype/NOTES.md, fold into the real components, delete the prototype directory and the middleware bypass.

@kilbot
prototype: /pro pricing variants with static-first rendering
45337a0 
Three ?variant= mockups of the pricing section (dev-only, do not ship):
A static-first cards, B comparison panel, C single-product term chooser.
Only the price text suspends; everything else renders from static copy.
See src/components/pro/prototype/NOTES.md for the question and findings.
@coderabbitai

coderabbitai Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e6874351-5f86-4f20-af9b-14842042dc5a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch worktree-pro-page-prototype

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-cfmcyo86i-wcpos.vercel.app

@kilbot
prototype: checkout flow variants (one-page, stepper, split-screen)
b0e9d72 
Three ?variant= mockups on /pro/checkout (dev-only, fully stubbed):
A one column express-first, B collapsing three-step, C split-screen
paywall. All create the account inline from the email field instead of
bouncing to /login, collect a compact billing address, and lead with
wallet payments. ?signedin=1 previews the signed-in state.

Dev-only middleware bypass lets ?variant=a|b|c through without auth.
Switcher generalized to take a variants list.
@kilbot kilbot changed the title prototype: /pro pricing variants (static-first, do not merge) prototype: /pro pricing + checkout variants (do not merge) Jul 1, 2026
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-mmuipjmza-wcpos.vercel.app

@kilbot
prototype(checkout-b): first-class payment method selector
736879e 
Owner picked variant B. Payment step reworked: wallets on top, then a
radio-accordion — Card default and expanded, PayPal and Bitcoin equally
visible rows that expand with an explanation; pay button label follows
the selection. Verdict recorded in NOTES.md (pricing still TBD).
@kilbot

kilbot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Update: checkout variant B picked by owner. Payment step reworked per feedback: Apple/Google Pay buttons on top, then a radio-accordion payment selector — Card default and expanded, PayPal and Bitcoin as first-class visible rows (no longer a buried text link). Pay button label follows the selection ("Pay $129 now" / "Continue to PayPal" / "Continue to Bitcoin payment").

Preview: /pro/checkout?variant=b (use &signedin=1 to start on step 2). Pricing-section winner still TBD.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-g9mbk2uvv-wcpos.vercel.app

@kilbot
prototype(pricing): research-driven round 2 — variants d/e/f
5f9ab9b 
Round 1 rejected as lacklustre. Researched high-converting license
pages (Sketch, WP Rocket, Tower, conversion-data roundups) and built:
D free-tier-anchored 3-column, E dark zero-column value pitch with
term toggle, F till-receipt pricing. All factual claims sourced from
live pages (5,000+ stores, 14-day refund, yearly-credits-to-lifetime).
Switcher cycles current+d/e/f; a/b/c remain URL-reachable.
@kilbot

kilbot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Pricing round 2 (round 1 a/b/c rejected as lacklustre). Researched high-converting license pages (Sketch's yearly-vs-perpetual framing, WP Rocket's guarantee/social-proof placement, Tower's confident no-urgency premium feel, plus conversion-data roundups) and built three new variants — the switcher on /pro now cycles these:

  • /pro?variant=d — Free anchors Pro: the free plugin becomes the first column (three-tier anchoring), Pro columns list only the delta, proof strip + 14-day guarantee directly under the cards, risk-reversal microcopy at each CTA.
  • /pro?variant=e — The zero column: dark panel anchoring against how cloud POS bills (per register / per transaction / per seat / per site → all $0), one giant flat price behind a Yearly/Lifetime toggle, dollar-framed lifetime math.
  • /pro?variant=f — The receipt: pricing as two till receipts — monospace, perforated edges, dot leaders, red MOST POPULAR stamp, barcode, $0.00 fee lines as the value pitch.

All claims are sourced from live pages (5,000+ stores, open source since 2014, 14-day no-reason refund, yearly credits toward lifetime, no auto-renew), and all three keep the static-first rule — only the price text suspends.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-htx3rve6q-wcpos.vercel.app

@kilbot
prototype(pricing): round 3 — feature list appears once (g/h)
931175a 
Owner rejected d/e/f: no point repeating the same checklist for yearly
and lifetime. G: feature grid (real descriptions, icon tiles) once, then
two compact price tiles with term facts only. H: product-page buy-box
pattern — features left, sticky radio term selector right. Switcher
cycles current/g/h; earlier rounds stay URL-reachable.
@kilbot

kilbot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Pricing round 3 — d/e/f rejected: "no point reproducing the same checklist for yearly and lifetime." New rule applied: the feature list appears once; yearly vs lifetime is price + term facts only.

  • /pro?variant=g — One panel, two prices: feature grid once (real descriptions + icon tiles), then two compact price tiles whose only content is price, term facts, CTA.
  • /pro?variant=h — The buy box: product-page pattern — feature list left, sticky buy box right with radio term rows and one CTA (mirrors the checkout-B payment selector interaction).

Both keep round-2 trust elements (guarantee at CTA, proof strip, dollar-framed lifetime math). Switcher now cycles current/g/h.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-ln9bviu19-wcpos.vercel.app

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

🚀 Preview: https://wcpos-b2fkczgvm-wcpos.vercel.app

@kilbot kilbot mentioned this pull request Jul 1, 2026
Merged
@kilbot

kilbot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

Pricing implementation landed as ready-for-review PR #195 (variant H built production-quality: feature list once, sticky buy box, /pro now partially prerendered — only the buy box suspends). Remaining in this prototype: checkout variant B implementation (bigger lift — inline account creation, background cart init, wallet payments). This prototype PR stays as the checkout design reference until then.

@kilbot kilbot mentioned this pull request Jul 1, 2026
Merged
kilbot added a commit that referenced this pull request Jul 2, 2026
@kilbot
Merge pull request #196 from wcpos/worktree-checkout-v2
fa1b3b1 
feat(checkout): three-step checkout (PR #194 variant B) + payment-flow battle-test harness
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kilbot