Automattic / Automattic/wp-calypso
Feature Request: Improve the Payments block preview when Stripe is not connected.
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 2k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 552
Description
### What
If the customer adds a Payments block, and hasn't connected Stripe (yet), we don't show anything in the site preview - the button is not there at all.
Payments block - editor view:
Payments block - site preview:

### Why
This gives an impression that something is broken, and makes it hard to properly evaluate the design. I realize that the notice in the editor mentions the button will not be visible to the visitors until it's connected to Stripe, but this notice is very easy to overlook, and doesn't change the fact that the preview is inaccurate.
### How
Could we improve this default empty state by showing a disabled (maybe grayed out) button in the site preview when Stripe is not connected?
Contributor guide
Research direction
Start at the Payments block's site-preview rendering and the state used when Stripe is not connected; the issue does not name a file or test. Confirm the current empty state, then verify that the site preview shows a disabled or grayed-out button without a Stripe connection while the connected case remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, payments
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100