Offer payment methods
Credit card is the most popular method and can be considered the default.
Other methods are welcome, but their success sits on a spectrum. Some can add friction for users, while others can add security and/or convenience.
Request card details
Show all relevant text fields to complete. Consider the size of these fields relative to the details entered.
Note: in a product where the user is revisiting and saved payment methods are available, consider a flow that allows the user to add/remove payment methods.
Submit payment with card details entered
It's also important to consider validation before a user submits their details.
Numbers can be mistyped, the card may have expired - so make sure these numerous error states are addressed.
Show payment processing
A payment may not be triggered instantly, taking a few seconds (or minutes). A loading page is crucial to calm the user’s nerves in regards to what’s happening to their money.
Confirmation payment processed successfully
It’s a success! Clearly indicate to the user that their payment was processed, and the funds was received.
Outline next steps
What now? Does the payment trigger something? If so, let the user know.
Example 1: a physical product has been purchased. Once the payment has processed, tell the user the order is in motion.
Example 2: a user signed up for a subscription. Offer a link to continue to the product to start using it.
Best Practices for Mobile Payment Experiences
A detailed look at some interesting edge cases when a user enters credit card information.
Improve Your Credit Card Form UX
A good look at particular error states that can occur entering credit card details.
7 Tips For Creating A Winning Mobile App Payment Screen
Some great suggestions on what you can do with UX and UI to help your user conversion.
