Saved payment methods in ecommerce

A couple of months ago, I worked on a saved payment methods feature for an ecommerce website.

Saving payment methods is very important for conversion rate optimization.

The end goal was simple — Allow people to save their cards so they can checkout easier.

Working on it ended up being a lot of fun because it required both frontend and backend skills.

Here's what I learned about it from the perspective of business, customers and security.

How saving credit cards online became a thing

54.2% of users have their card stored at one or more ecommerce sites, according to Baymard Institute.

→ How did people become comfortable leaving their credit cards (money!) on all kinds of websites?

Because of many years of marketing and tech improvements.

Going back to the Dot-com bubble era of the late 90s, e-Loyalty was a hot topic.

E-Loyalty is a model that describes how to build an online relationship with customers to increase satisfaction and repurchase intention.

Trust was very important because ecommerce business was in early stages.

Sites were crashing all the time, and customers didn't feel secure to leave their credit card information on the new web.

Although forgotten, e-Loyalty is still relevant because it's based on universal marketing principles.

How saved credit cards increase loyalty in ecommerce

Saved credit cards feature affects e-Loyalty because it touches on:

What will customers see (UX/UI)

There are two key pages to manage saved credit cards:

Saved credit cards feature increases the convenience of the checkout process.

The key goals were to:

Keep the familiar checkout process

In the existing "3 Steps" checkout process, everything stayed the same, except we now replace the input fields with multi-card selection.

Show the primary card

Since customers can have many cards, we need to give them good visuals.

With the crazy number of card providers, it gets very complicated. Luckily, our payment gateway service gives us the card logo, name and last four digits.

Customers get to mark one of their cards as primary. So it always shows on the top and pre-selected.

Show that card will expire soon

Expired credit cards show up on the checkout screen, grayed out and not-selectable.

Even though customers can't use them to checkout, don't hide them. People forget, so showing them grayed out is a good reminder.

To try to avoid the expired scenario, two months before the expiration date, we show the expires soon indicator to remind customers.

Having a place to manage saved credit cards is important because credit cards change often.

23.6% of users get a new credit card at least once a year, and 57.5% at least every couple of years, according to Baymard Institute.

The Account page is the place to add, update and remove saved credit cards.

Fake-swap the card for better UX

Technicalities around updating the credit card are difficult to make sense of in the UI.

When banks reissue cards, for customers it seems like an update of their existing one. But technically, it's a completely new credit card.

Instead of making them delete the old one and add a new one, I decided o use the "fake edit" flow.

If customers update their card with a new expiration date, CVV, or even the card number, we let it go through.

We make it seem like their card is just updated, but in reality we delete their old card and add a new one.

It makes it convenient; they don't have to know about technicalities.

Web Developer's view

Above all, I wanted to bring the most value to the business.

From the coding perspective, working on saved credit cards feature was interesting because I worked on both frontend and backend code.

I had to make sure to correctly wire the backend to the existing payment processor. But also make it convenient for the customers on the website.

The three biggest goals in my mind were to make it:

• secure,
• convenient to checkout with their saved credit cards,
• easy for people to manage (update and remove) their saved credit cards.

How to securely store credit cards as a business

We couldn't risk breaking our PCI compliance.

Behind the scenes, this was the top priority.

Don't store credit cards numbers yourself

We could not save credit card numbers, CVVs, and expiration dates in our database. Even if we could, I would stay away from storing sensitive payment information because of the responsibility it takes.

Someone else had to store cards for us, and we'd just get them on demand.

Since we were already using Braintree to accept credit card payments, using Braintree's Vault was the best approach.

Braintree Vault is a secure data store for payment method information.

They take care of storing sensitive data. We just make use of it through their API.

The Braintree Vault is now a big dependency. But the tradeoff is worth it.

What to store yourself

Keep it minimal.

To reference the stored data in the Braintree Vault, we used two properties:

• Braintree Customer ID - Identifies the customer in the Vault
• Unique Number Identifier - Identifies the credit card number

UniqueNumberIdentifier is a randomly generated string that uniquely identifies a credit card number in the Vault.

If a customer adds the same card twice, UniqueNumberIdentifier would be the same. So it's very useful to identify duplicates without storing the actual credit card number.

Keep your site and Braintree Vault in sync

But what if someone manually removes cards from the Braintree Vault?

How to keep them in sync?

This website had an interesting scenario:

Sometimes, customer service would store credit cards in the Braintree Vault for customers that placed back-orders. Those orders usually get processed in a couple of months, but during that time, we don't want that stored credit card to show as a saved credit card on the site.

The process to solve that was:

1. Get Braintree Customer Id from customer's record in our database
2. Get all cards in the Braintree Vault that belong to that Braintree Customer Id
3. Get all UniqueNumberIdentifier for that customer in our database
4. Filter out cards that are not part of subsets from step 2) and 3)

That way only credit cards that customers explicitly saved will show on the website.