From the user’s perspective, one of the benefits of ecommerce-site registration is being able to store credit card information for simpler and faster checkout on return visits. The saved payment information allows users to easily proceed through the purchase. When the payment information is accurate and up-to-date, the flow works well. But when a payment detail needs to change, some sites force long-time users to go through a redundant, tedious process.

While many sites support the addition of a new credit card number, making a change or removing a card is far less frequently supported. Some offer the option only in the Account section of the site, and not directly in the checkout flow. This detour causes additional work for the user and is not expected: users realize that they need to change their payment method while trying to use it, not as a separate account-related step.

Wine.com did not provide a way to edit or delete a payment option within the checkout flow. Users had to go into their account information in order to edit or delete a card.

When a user’s credit card expires, many banks reissue a card with the same number, but an updated expiration date. Allowing the user to update only this information rather than create a new entry, is simpler for the user and better for the site. Out-of-date information is removed, and the update is quick and easy. (And less error-prone, especially on mobile devices where it’s a royal pain to enter a full credit card number supplemented with the owner’s name and other info that the site already knows, curse it.)

To support updates, provide links to Edit or Delete next to saved payment types. These links should lead to an area where users can update card information or confirm the removal of an old card. The credit card number itself should not be fully revealed, but enough information should be visible to allow the user to easily identify the card. Displayed information may include the last four digits of the card number together with the card type, or a name that the user has saved for the card, (e.g., “Amy’s Visa”).

Sephora presented users with payment options, together with edit and delete links. The links made it easy to update and manage payment methods. Their presence also helped users understand that these options are available. When options such as these are hidden in My Account information, users are unlikely to realize that they exist.

Editable fields should allow a quick update of information. Users should not have to reenter the existing credit card information, but should be able to make a change to payment details in editable fields. This action should result in a newly accurate record, rather than a duplicate of a past record.

Sephora displayed the payment details associated with the card in editable fields where users could easily change the expiration date, the name on the card, or even the billing address.

When sites don’t support edits to payment information, such as updating expiration dates, they create usability problems. Not only do users have to work harder to create a new entry rather than simply update an expiration date, but the system will also end up with two virtually identical entries, differing only in their expiration date. Even if the expiration date is displayed next to the payment option, users must now work harder to distinguish between several similar choices.

ParkWhiz.com did not let users edit existing cards. This resulted in two identical payment options “Pay with my saved Visa ending in 6159.” There was no option to delete old payment methods. (Also note that the use of light blue text on a white background makes the selected payment type extremely hard to read. This doesn’t just violate basic legibility guidelines, it adds insult to injury by making the most important information the least prominent.)

Shoppers also need to be able to delete old and unused payment options easily. Without such a spring-cleaning feature, over time, users will be left with accounts and interfaces that are cluttered with out-of-date information. The backend systems will also be polluted with unneeded information.

In the checkout flow on Zappos.com, the user was presented with 6 payment options, out of which 4 were expired. Outdated cards could not be deleted at checkout. To remove these options from the list of payment types, users needed to go to the My Account section.

In This Article:

Summary

Users need to be able to update payment information as part of the checkout flow. When sites fail to make these changes possible, they force people to go through extra steps and make the task unnecessarily complex. They also clutter the interface and the site’s backend data with information that is out-of-date and unnecessary. While it’s never a good idea to frustrate any user, your long-time customers are not the ones you want to frustrate. Repeat sales are the most profitable, but too many hurdles to updating information can easily lose these sales. And too many frustrations caused by a confusing interface for selecting payment types can easily lose a customer — or at least turn them into less-frequent shoppers on your site. For more on supporting shoppers, see our E-Commerce User Experience report series.