When paying for something online, two thoughts will come to mind for the user: is this safe, and is this clear? A well-designed payment experience covers these by communicating what's happening with a user's money, and that it's all happening securely.
[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.
Last updated 2 months ago
