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:
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)
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.