Checkout / Feature

Refreshed payment method design in checkout
Four or fewer? Tile layout

When payment methods meet certain display conditions (such as having four or fewer), payment selection in checkout appears in a tiled layout. Setups that don't meet the conditions keep the standard list layout as before.

On this page
  1. What's changing (30-second overview)
  2. Diagram: Which layout appears
  3. Tile layout vs. standard list layout
  4. What the article says / doesn't say
  5. 5 key points for developers
  6. 3 practical use cases
  7. One-line summary for proposals

1What's changing

In checkout, the way payment methods are presented has been redesigned.
When payment methods meet certain display conditions (includinghaving four or fewer ), they're shown in a tiled layout instead of a vertical list.

Conditions met: Tile layout

When payment methods meet the display conditions (such as having four or fewer), the new tiled layout appears.

Otherwise: Standard list layout

All other setups continue to use the standard list layout as before.

2Diagram: Which layout appears

Store's payment methods Methods shown in checkout Meets display conditions? (four or fewer, etc.) YES NO Tile layout (new design) Standard list layout (unchanged) ...
"Four or fewer" is listed only as one of the display conditions ("including").Other conditions aren't specified.

3Tile layout vs. standard list layout

ItemTile layout (new)Standard list view
Layout Tile layout List layout
When it appears When display conditions are met (e.g., 4 or fewer payment methods) Any other configuration
Role The newly refreshed design Continues to appear (unchanged)
Merchant settings Not stated The article doesn't say how to switch layouts or whether you can opt in or out

4What the article does and doesn't say

Stated

What it says

The payment method design in checkout has been refreshed
Under certain display conditions, a tile layout is used
One condition is "4 or fewer payment methods"
Otherwise, the standard list view remains
Category: Feature / Checkout

Not stated

What it doesn't say

Display conditions other than "4 or fewer"
Eligible plans or countries
How to configure or switch layouts in the admin
Impact on Checkout UI Extensions or APIs
Rollout timing details

55 key points for developers

≤4

1. The layout depends on the number of payment methods

Adding or removing payment methods can cross the threshold of 4 and switch the layout. Changing your payment method setup can change how checkout looks.

?

2. "4 or fewer" isn't the only condition

The article says "including," so there are other conditions. Even with 4 or fewer methods, the tile layout may not appear, so verify on the actual checkout.

3. Two display patterns coexist

Tile and standard list views can appear depending on your setup. Plan checkout QA and screenshot documentation for both patterns.

API ?

4. No mention of impact on extensions or APIs

The article doesn't cover how this interacts with Checkout UI Extensions or branding settings. Customized stores should check the display in a staging environment.

5. No setup steps or opt-out option mentioned

The article doesn't say whether merchants can choose between tiles and lists themselves. Read it only as appearing automatically when display conditions are met, and avoid giving definitive guidance.

63 practical use cases for your work

USE CASE 1

Add a "Will the display change?" check before adding or removing payment methods

Challenge
Adding just one payment method could switch the checkout layout between tiles and a list.
Action
Add "number of payment methods before and after the change" and "verify the layout on the live screen" to the runbook for payment method changes.
Impact
Prevents post-release "the checkout looks different" inquiries and rework.
Tech note
"Four or fewer" is one rough threshold. Other conditions aren't documented, so don't rely on the count alone—verify on the live screen.
USE CASE 2

Update checkout QA and manuals to cover both layouts

Challenge
Test criteria, operation manuals, and CS screenshots still assume the old list layout.
Action
Replace them with test checklists and screenshots that cover both the tile and list layouts.
Impact
Reduces "my screen looks different" mismatches in CS support and internal explanations.
Tech note
Setting up test stores with different numbers of payment methods makes it easier to reproduce both layouts.
USE CASE 3

Check how customized checkouts display

Challenge
For stores with checkout branding or extensions, it's unclear whether the new design will look as expected.
Action
Prioritize stores whose payment methods are likely to meet the display conditions, and check the live screen on desktop and mobile.
Impact
Catch layout breakage or visual oddities early and report them to clients proactively.
Tech note
Impact on extensions and branding isn't documented. Confirm it by testing on real devices.

7One-line summary for proposals

"Checkout's payment selection has been refreshed:when conditions such as having four or fewer payment methods are met, it shows a tile layout.
Otherwise, it keeps the familiar list layout.When adding or removing payment methods, check for visual changes too."