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?
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:
- 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!