209 ‘Stored Credit Cards’ Design Examples

At the same time our qualitative research reveals that managing credit cards and payment methods is second-most important account feature for users, with 24% saying that they update their credit card at least once a year.

And yet our large-scale usability testing shows that, for example, 84% of sites fail to provide an editing flow for managing credit cards that aligns with how users expect to actually manage their credit cards. In particular when attempting to edit payment method details, many users struggled to understand that the interfaces would not allow them to “edit” their credit card number. While there are strict policies for storing card data we observe that sites can with a few simpler changes “emulate” a “editing flow” for stored credit cards, while still reamingn fully PCI compliant.

Learn More: Besides exploring the 209 “Stored Credit Cards” design examples below, you may also want to read our related articles on “Use a Fake ‘Editing’ Flow When Users Try to Update Their Stored Credit Card - 84% of Sites Don’t”, “New Research Findings on ‘Accounts & Self-Service’ UX”, “Format the ‘Expiration Date’ Fields Exactly the Same as the Physical Credit Card ”, “The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces”, “Visually Reinforce Your Credit Card Fields”. You may also want to explore our related collection of design examples for Payment Method steps during the checkout.

Get Full Access: To see all of Baymard’s design guidelines on Accounts & Self-Service pages and features you’ll need Baymard Premium access. (Premium also provides you full access to 130,000 hours of UX research findings, 750+ e-commerce UX guidelines, and 77,800+ UX performance scores.)