Automattic / Automattic/wp-calypso

Feature Request: Improve the Payments block preview when Stripe is not connected.

Open
#80,593 0 comments 0 reactions 0 assignees View on GitHub
Feature Request Payment Blocks
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:
image

Payments block - site preview:
![image](https://github.com/Automattic/wp-calypso/assets/4550351/81cc13a0-de9d-43ac-9783-d7f903d477be)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.