Design better payment experiences
Tips for easing the payment process for your customer
1. Show progress of payment journey
Sometimes making payment can be intimidating and for a new user, it can feel like a long task. To handle this, break the payment journey in steps and show progress with each step. It helps ease the pressure on buyer’s mind and reassures them that they don’t need to do complex things to complete their payment. Make sure the steps are easy to understand and the goal of each step stands out clearly.
2. Show labels for input fields
Sounds obvious, but missed a lot of times in the name of simplification. You want to make sure that the customer is informed of each element on the page. Fields like expiry and security code can lose their meaning without labels.
3. Do not ask for the card type
Some background to this — payment forms used to ask for card types because the technology to identify card type wasn’t there and they needed it to verify card information. In current systems, BIN database is easily available and a simple call can identify the card type from first few digits of a card number. It’s one additional selection that your customer has to make and you can avoid it.
4. Use the right sequence of fields in card input
Majority of the customers have to physically take out their cards and input the details from it. This is where it becomes important — you must not break the flow when the user is entering card details. Most cards have the card number, name, expiry on the front and security code on the back side. Others have all the details upfront. Hence it’s important that you follow the sequence in which the details are published on the card.
Another thing that most people don’t know is that the name on card isn’t required for verifying a card transaction. You can either do away with it, or have the customer enter it before entering the card number. All other information required is in numeric form and it specially helps in mobile payments, because now you don’t have to switch between keyboard modes (numeric and alpha) while filling up the form.
5. Display all payment options upfront
In countries like India, you can have upto 10 types of payment methods. If you’re planning on promoting few and hiding the rest, you should reconsider if you really want those rest of payment methods on your platform. Users may want to switch between payment methods and all of them should be visible at all times. From a visual perspective, one of the ways to achieve this is by using tabs (either horizontal or vertical).
6. Use security marks
It’s not an unknown fact that using security marks has a positive effect on the user and builds trust with your product. The important thing is to not overcrowd the page, be subtle with the colours, but let the marks be visible.
7. Handle errors gracefully
Nothing sucks more than entering information in 10 fields and then seeing them all clear up when you’ve got just one wrong. Handle this very carefully. Validate the card number as soon as it is entered. Use the card type to limit input length for security code (3 digits for Visa, MasterCard, 4 digits for Amex). Take input for expiry through a list, so you don’t end up with invalid values. Most importantly, if the payment fails, clearly tell the user why it failed so they can rectify their mistake (if any) or use a different payment method.
Disclaimer: At the time of writing this article, I work for a payments company, but all the thoughts and words here are solely my own and do not represent the company’s views.
