Checkout UX: Can't include "Save card" checkbox in credit card form. I can, however, include it elsewhere in the flow. What's the better choice?

Question

I'm working on the payment flow of an app. During checkout, users can choose to use any credit card they have stored or enter a new one. If going with a new one, process is split in the following screens:

1. Credit card form --> 2. Billing Address form --> 3. Purchase summary + Pay button --> Success screen.

Up until now, "Save this card for future payments" checkbox was included in the (1) Credit Card Form screen. For reasons that don't make sense to explain, that can't done, so we have to include it in one of the other screens.

My options:

Purchase summary + Pay button screen

The purchase summary includes a "Paying with Visa ending 1234" text. We could take advantage of that mention and incluce checkbox below it. I do not like having extra interactions on the "Pay" screen though.

Success screen

Option to have a "Paid with Visa 1234" + Save this card checkbox here, below the payment success message. I've never seen this handled this way myself.

What would be the pros and cons of either option? Are there any alternatives?

Any help is greatly appreciated!

Answer 1

I would suggest to keep it in the purchase summary screen as a small checkbox without highlighting much. Because after paying for the order no one prefers to stay on the same screen and will not explore other options. You can add it on the top billing address too as it got continuous flow from previous screen(as screen changes people might get confused too).

Answer 2

When you are on the summary screen, the users intent is to complete the flow and get it done with. The management of the card for future purchases is a secondary intent. Finish the first intent and then once the purchase is confirmed, ask if the user wants to save the card, the positive confirmation will reinforce the secondary action. The conversation should sound like: card added, Thanks the payment went through, now would you like to save it?

Imagine this:- card added, would you like to save it for future purchases? ok saved, sorry payment didn't go through

Answer 3

Working in a big company, these situations come up every now and then. My reaction today (after many years of arguing, mostly unsuccessfully) is to let the person who decided that the "correct" UI cannot be implement decide on which other alternative design should be implemented. And then properly document that. Sometimes, this will make the person think again (depending on the reasons you did not explain).