Making a Payment

According to studies by the Baymard Institute, your website or mobile app should provide as many payment methods as you can if you sell internationally and don't want your users to have any trouble paying for your product/service.^[1] However, it's true that seeing too many unnecessary payment options confuses users and causes choice paralysis. So what's the best solution?

Learn your audience and provide a range of payment options that are relevant to them. For example, credit cards are becoming less dominant in many countries like Germany, Russia, and China. If you don't sell to the UK, there's no point in offering BACS Direct Debit payment options.

When requesting payment information from users, it's important to ensure that all relevant text inputs are provided and that their size is appropriate for the details being entered. Some inputs may require users to provide unfamiliar or unclear information, in which case it's helpful to offer a brief but informative explanation. One effective way to do this is to include an information icon that users can click for more details.

Users are humans, and they make mistakes, especially when entering payment details on mobile and using one hand. It's vital to consider adding validation before users submit their payment details. Users mistype numbers, or the card may have expired — so make sure to address these numerous error states.

To make users' lives a bit easier, consider adding input masks — i.e., constraints on the input text. Masks help ensure that numbers or strings meet the expected format, prevent any unnecessary errors, and reduce friction prior to system validation.

Payments may not be processed instantly and can take a few seconds or even a few minutes. Therefore, it's crucial to add a loading page to reassure users and alleviate any concerns they may have about their payment. By displaying the current status of the system, users are more likely to trust the payment process and feel in control of the transaction. This can help increase credibility and improve the overall user experience.

Once users have submitted their payment, a success message should appear, confirming that the payment has been processed and the funds have been received. This provides a sense of satisfaction and completion to users. To ensure that the success notification is effective, it should be clearly visible and given enough time to be read by users.

After users have made a payment, it's important not to give the impression that your job is done. Instead, take the opportunity to express gratitude and offer information about the next steps if needed. For example, if they have purchased a product, thank them for choosing your brand and provide them with shipping updates. If users have signed up for a subscription, provide them with a link to start using the product or suggest that they check their email to activate the subscription.

This helps build a positive relationship with users and ensures that they are fully informed about their purchase.