Surface Studio Code payment-method requirement before the first prompt

[sejas]

Related issues

• Related to STU-2178: Surface credit card requirement before first Studio Code prompt
• Supersedes the visual prototype in Prototype Studio Code access requirements #4407

How AI was used in this PR

The visual design, copy, and illustration come from the human-reviewed prototype in #4407. This PR ports that design onto the real account checks; the result was reviewed and tested manually in both apps, in light and dark mode.

Proposed Changes

• Add gate screen when the user has no payment method added to their WPcom account.

Agentic UI	Classic

Testing Instructions

1. Log in with a WordPress.com account without a saved payment method.
2. Desktop classic tab: run npm start, open Studio Code — the payment requirement should replace the composer.
3. Agentic UI: run npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open, open http://localhost:8081 — opening a chat should show the same requirement instead of the composer.
4. Select Add payment method — the browser opens at https://my.wordpress.com/me/billing/payment-methods/add and Studio shows the waiting state.
5. Add a card, return to Studio, and select Check again — the chat should unlock into the normal conversation view.
6. With an entitled account, verify both chats load straight into the composer as before.
7. Go offline (or block the quota request) and verify the chats still open normally (fail-open).
8. Confirm layout and contrast in both light and dark mode.

The transition from the no-card state to the card state is immediate. Removing the card has a 5-minute cache.

Pre-merge Checklist

• Unit tests pass (npm test): gate, fail-open, hand-off, and re-check covered in both apps
• Type checks pass (npm run typecheck)
• Lint passes on modified files
• Verified visually in light and dark mode (classic tab and agentic UI)

[wpmobilebot]

📊 Performance Test Results

Comparing b263d89 vs trunk

app-size

Metric	trunk	b263d89	Diff	Change
App Size (Mac)	1402.86 MB	1402.85 MB	0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	b263d89	Diff	Change
load	1067 ms	1037 ms	30 ms	⚪ 0.0%

site-startup

Metric	trunk	b263d89	Diff	Change
siteCreation	7539 ms	7540 ms	+1 ms	⚪ 0.0%
siteStartup	2867 ms	2871 ms	+4 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[shaunandrews]

Instead of blocking the pixel W, lets have the message overlap just the bottom portion, with a progressive blur (it starts not blurred, and gets more blurry as it goes down). Generally try to match the empty chat design:

The line-heights are wonky, especially with the smaller paragraph spacing. Could we use shorter copy, like:

Studio Code Beta
To enroll in our free beta you must add a valid payment method to your WordPress.com account.
You won't bet charged during the beta.

Basically, not mentioning the credits (which we're not sure if we're going to call them credits) and I think the "free beta" implies that you'll be able to use the AI.

Also, the "Add payment method" button seems like it needs more padding on the left/right; the label is too close to the edges.

[sejas]

@shaun, thanks for the feedback 🙌. Here you go:

[bcotrim]

I see the composer flashing before the payment method message, we might need a loading state @shaunandrews

Screen.Recording.2026-08-05.at.13.05.09.mov

[sejas]

Good catch! Let me see what I can do 🤔 .

[sejas]

I think the loading is fast enough that we can avoid showing any loading. I just added a fade in of the elements. That fade in only appears the when Studio starts.

card-ok-fade-in.mp4

card-required.mp4

[sejas]

@bcotrim , could you take another look.

[bcotrim]

LGTM, thanks for making the changes 👍

[nightnei]

@sejas, it works as expected for new accounts, but I tried to use an account with payment methods, then remove those payment methods, and after opening Studio, I don't see the expected screen.
However, it's not critical, since I get a 403 error when I try to send a message. So not a critical thing, but nice to fix to communicate clearly to the user about this case.

[sejas]

Thanks for sharing that case. There is a 5 min cache in the backend when you have a valid payment and remove the credit card, so after 5 mins the user will see the lock screen.