Page Designs

1164 ‘Payment’ Design Examples

Also referred to as: Payment Methods, Credit Card

What’s this? Here you’ll find 1164 “Payment” full-page screenshots annotated with research-based UX insights, sourced from Baymard’s UX benchmark of 256 e-commerce sites. (Note: this is less than 1% of the full research catalog.)

The Payment step during checkout is often dominated by credit card form fields. Yet, 3rd-party payment methods are becoming more widespread, and we’ve found that 8% of users have abandoned a checkout solely because the site didn’t offer the desired 3rd-party option. Besides exploring the 1164 “Payment Method” design examples below, you may also want to read our related UX research articles The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces”, “Visually Reinforce Your Credit Card Fields, and 5 ‘Credit Card Form’ Implementations That Make L.L. Bean Best-in-Class“.

1164 ‘Payment’ Page Designs
Filter by:

User Experience Research, Delivered Weekly

Join 60,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter
See all 1164 designs

User Experience Research, Delivered Weekly

Join 60,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter

Explore Other Research Content

300+ free UX articles based on large-scale research.

256 top sites ranked by UX performance.

Code samples, demos, and key stats for usability.

Add UX Best Practice Cards to your Figma projects.