> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/engineering-reference-docs/software-testing-overview/ux-ui-checklist/flows/making-a-payment.md).

# Making a payment 💳

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.