Stored Credit Cards

48 design examples manually annotated by Baymard researchers

What’s this? Here you’ll find 48 annotated “Stored Credit Cards” design examples from Baymard’s UX benchmark of 80 major e-commerce sites. (Note: this is less than 1% of the full research catalog.)

Payment methods are somewhat unique when it comes to account features, because while users can manage their stored payment methods via their e-commerce account settings, most users in practice add their stored payment methods during the checkout flow when placing an order. In our large-scale usability research of how users manage their e-commerce accounts, we’ve observed that this unique context set strict design and flow requirements for how the credit card–updating process should unfold, if it’s to align with user’s expectations and behaviors.

More Insights on ‘Stored Credit Cards’ Pages

Our quantitative study of how often e-commerce shoppers in the US change their credit card.

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 48 “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 65 design guidelines on Accounts & Self-Service pages and features you’ll need Baymard Premium access. (Premium also provides you full access to 67,000+ hours of UX research findings, 750+ e-commerce UX guidelines, and 77,800+ UX performance scores.)