Staging · commit 3909169

Checkout Modal Review

The paywall now opens a prepared order sheet instead of the Apple Pay sheet. These are the states on staging, captured on an iPhone simulator at 402 points wide, plus two desktop captures as a UK visitor for the currency.

Where fiftystrong.xyz/quiz#s5-7When 18 Oct 2026, 14:10 HKTStatus staging live, production waiting

The five states

Tap through in order. States 2 to 4 open from the same button; the plan she picked decides the box.

**1 · The paywall**One button under the plans. No wallet overlay, no "or pay with card" line. The modal behind it is already minted and mounted.

**2 · Free-week plan, wallet first**Order box: regular price, the free week as a saving, Total today $0, and what she pays after. "Fast payment · Apple Pay" is pre-selected with Buy with Apple Pay.

**3 · Card option selected**Her own switch: the card form expands under the second row, the trial line and "Start trial now" sit in the fixed footer, and the pay button wakes when the form is complete.

**4 · Pay-today plan**The same box priced as a saving on the full price: $59.99 − $10 = $49.99, "Then $49.99 every 12 weeks". Wallet row pre-selected again; the footer shows the secured line instead of a button.

**5 · Chinese page**Same modal on /zh/quiz. The simulator has no Chinese font, so its glyphs render as boxes here; the served page carries the translated strings (完成結帳, 今日應付, 之後).

The same modal in pounds

Desktop Chrome through a UK geo header on the dev server. The order box redraws from the same table the charge uses, so regular minus saving is always the total.

**Desktop Chrome, UK visitor, free week**Pounds on every line via the geo header. No wallet on this machine, so the card option is selected by default and the wallet row is hidden.

**Desktop Chrome, UK visitor, pay today**£14.99 − £4 = £10.99 on the monthly arm; the button reads "Pay £10.99 today".

How it works

Moment	What happens
She reaches the price step	The page mints the Stripe session for the selected plan and mounts the wallet button and the card form into the sheet while it sits off-screen. Sessions are cached per plan.
She changes plan	The sheet re-prepares for that plan. Switching back reuses the cached session.
She taps the button	The sheet slides up fully drawn. No fetch on the tap. The wallet row is pre-selected when Stripe reports Apple Pay or Google Pay on the device; otherwise the card option is selected and the wallet row is hidden.
She taps Buy with Apple Pay	The native sheet opens; her confirmation runs the existing confirm path and lands on the welcome page.
She closes the Apple Pay sheet	The modal stays open with "Nothing was charged. Your plan starts only when you confirm in the payment sheet, or pay by card below."
She closes the modal	×, backdrop, Escape or the back gesture. Elements stay mounted, so reopening is instant.

Notes for review

The email field shows in the simulator shots.I jumped straight to the paywall, so the quiz had not captured an email. In the real flow it is captured before the price step and the field stays hidden.

Chinese glyphs render as boxes.The slim simulator has no Chinese font. The served page carries the translated strings; the auditor's probe confirmed every order-box label is Chinese.

Apple Pay sheet and the cancel note were not captured.A synthetic tap on Stripe's button did not open the system sheet in the simulator. Your iPhone is the real test: tap Buy with Apple Pay on staging, then close the sheet.

Padlock glyph.The 🔒 before "Payment secured by Stripe" rendered as a missing glyph in the simulator. Real iPhones have the emoji; I can swap it for an inline icon if you want it certain.

What changed in analytics.wallet_cta_* events stop; checkout_method_selected and wallet_sheet_cancelled are new; checkout_screen_viewed now carries preloaded and method.