17

I'm currently working on error message handling for payment failures. A couple of the reasons why a payment may fail is because a card is returned as expired or unauthorised.

If a customers’ default card returns as expired or unauthorised, they will see an error message modal with the following CTAs:

  1. Primary CTA: “Add a new card” (if there is no other payment method on file to replace this card) or “Change payment method” (if they have other payment methods)

  2. Secondary CTA: “Close” (This will close the error message modal and return to payment page)

My question is around the scenario where a user has multiple cards as payment methods. Say the default card is the one that has expired, and a customer selects “Close”. When they are back on the payment page, should -

  • Option A: Payment method defaults to nothing

    • Customer will need to tap on a button to see all payment options, then select from there

  • Option B: Payment method shows the next card on their list

    • The system auto-selects the next card on their list of payment methods
    • Customer is informed via a toast that 'Payment method has been updated'

I did some research looking at other apps and saw that there isn't a best practice that is currently followed (some defaults to nothing, some uses the next card). My opinion is that user should have full control over what card they want to use for a transaction, and Option A seems more aligned to that. Would love to hear other thoughts out there.

Improve this question
3
  • 2
    This is a one-time transaction, not recurring, right? recurring transactions should perhaps use backup payments automatically, so that service is not canceled. But if the user is right there, they can say what they want to do.
    – user253751
    Nov 30, 2022 at 18:34
  • 1
    This sounds like a really good way to get chargebacks or worse unless you made it abundantly clear to the user from the start.
    – R.. GitHub STOP HELPING ICE
    Dec 1, 2022 at 14:29
  • Customer may want to use expired card by modifying expiration and CVV. If the card is expired, there's a good chance they just need to update details to keep using it.
    – Sun
    Dec 8, 2022 at 18:06

4 Answers 4

Reset to default
18

...user should have full control over what card they want to use for a transaction...

Rather than make that decision for users, give them the ability to make that decision beforehand...

Replace default with priority:

If it's important to users' their transactions get settled promptly, then rather than use a "default-card" system, use a "card-priority" system. Provide users an interface to set card priority what order cards ought to be used. Make the purpose clear—first use card Alpha, if there's a problem, use card Beta...

That can be more robust by creating purchase types: work, personal, special project...and allow users to set cards/priorities for each type.

Otherwise, when users simply close the card-invalid notice go with plan B).

Improve this answer
1
  • 1
    This! Both options are viable as long as you communicate clearly. In the payment overview you can even add a little text to the second payment option in the list "This Card will be used as a backup if your primary card fails." And then proceed as this answer suggests
    – Falco
    Dec 2, 2022 at 10:23
50

Don't select a new default card for the user. Usually it's nice for the system to help the user recover from a problem through strong new default, but your instincts are valid in this case. Even if there are multiple cards on the account, the "next in line" to show up at the top of the list might not necessarily be what the user would want to set as a default. Sometimes there's a company card on file that shouldn't be automatically charged if the user is also using the account for personal purposes (Amazon is an example). Sometimes it's a gift credit card with a limited amount that will be depleted soon.

Your primary CTA is "Add a new card". I would guess that in the case of an expired card, what the user wants to do is keep the same primary card number and update its expiration date and verification code so it will work again.

In the case of an unauthorized card, it's good to just let the user see their other options and pick one without suggestion. There are a few reasons why cards become unauthorized - some temporary (like being over a limit), some permanent (like a card being reported stolen). Either way, you could let the user know that the primary card has been declined, and simply offer the other options, and an option to add a new card.

Improve this answer
2
  • 2
    In Europe it's common for banks to replace an expired card by one with a different number. I would be most upset if a charge went to my second card in a different currency because I'd forgotten to enter the replacement for the primary.
    – grahamj42
    Dec 2, 2022 at 21:52
  • Also, if you automatically select a new card to use, the user won't know where to expect the charge to appear. They could see that charge on their next statement, think "I haven't shopped at store X using that card in ages", and dispute the charge as fraudulent.
    – bta
    Dec 3, 2022 at 1:09
1

I think this issue can be avoided altogether by notifying the user well in advance before the card expires and guiding them on what happens in the event they do not respond. E.g. Picking a new card as the default etc.

Having said that, since your question is based on the scenario that the user has many cards, I would recommend checking pout Paypal which first allows the user to pick a different card in order to finish the transaction, and then thereafter recommends setting the working card as the default option.

Improve this answer
1
  • What is the time frame where expiring card and new card are both active and working? That could be the time period where the gentle nudge (maybe 2 months prior to expiration) is useful.
    – Sun
    Dec 8, 2022 at 18:08
1

Don't use a separate error message modal and don't return them to the payment page where "Customer will need to tap on a button to see all payment options". Take them directly to the list of payment options, which presumably already has an "Add a new card" action.

The error message should then appear above that list, and none of the options should be pre-selected.

Actually since your list of payment options probably already sorts the prior selection to the top, that prior selection which just failed can still occupy the top place in the list but be set unselectable aka "enabled=false" and styled to indicate the error (red border / pink shading / note beneath with any detail you choose to show). That provides a seamless way to identify the failed card to the user, and avoids the user with a long list attempting to search for an entry that isn't there.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.