Adding Payment to your mobile app? Beware


With shopping and e-commerce sites taking tech and business world by the storm, web and mobile payments are the new models of monetary transaction. If we talk in terms of mobile payments alone, then it is predicted that by 2019, mobile payments (for a variety of businesses ranging from multinationals to small sized ones) will more than double. Which means people will be paying for their purchase on small screens in their hands, while on the go. Whew!! This will definitely require a lot of patience.

Thanks to NFC technology and things like “tap to pay”, over the counter payments are getting more simpler as people do not need to carry cash with them. However, when one makes an online purchase, and they are using cards, they still have to type their 16-20 digit card numbers. Now imagine doing that on a phone, with an impatient customer who is on the move. Too much, ain’t it??? A time lag as short as 5 seconds can make a customer abandon their cart. Indeed, this has been found to be one of the prime reasons for cart abandonment.

The prime point in such scenarios to put forth is that the payment process has to be smooth and intuitive in order for customer ease. We explore the end to end process, from design to implementation of adding payments into your web or mobile applications.

UX Design : Small details matter in payment form UX

Attention to details is a must in order to meet all the necessary UX criteria for a payment form. This is the prime aspect in every do’s and dont’s list of UX forms. The flow, from adding an item in a cart or entering a credit card number should be optimized in order to give the best experience to customers.

Automated formatting

A bad formatting can be enough to make credit cards a headache. Things like “Do I have to enter spaces in the credit card number, is it a slash or a hyphen that has to be put in the expiry date? are common questions amongst users. The easiest and the most foolproof way, to help a user solve this issue is to automate the formatting. An example would be cases where as soon as a person types in four digits in the credit card number text box, a space pops up automatically. Also, this makes one less field for a user to fill in.

Another aspect where automation can be used to simplify indecision is by distinguishing the type of card by recognizing it through the first four digits. As a very good practise, each type of card, Visa- Mastercard-Amex has a unique pattern in the first four digits. When a user types these first four digits, there can be an automated icon for this particular card type. This assures the customer mid-way that you are accepting the card. That’s real time verification benefit for the customer.

Convince your user

As your customer discloses their personal account information, it is a good measure to add the payment amount on screen so that they know how much money they are signing for, beforehand. This holds true even if they have seen the amount in the preceding screen. Even on actual completion touch/click, this clarity and transparency is a must have. The word “Pay” has to be clearly used if money is taken from a customer’s account. The purpose of this is to let the user know that this is the time they make the purchase and there is no screen succeeding it. It ensures the “finalization” in the mind of the customer.

Errors and deviations must ALWAYS give options

MIstakes happen. It can be at the user end, the bank or the server. And it is not nice to ask the customer to re-enter the information or make the purchase at a later time. You must convey the issue in such a manner that they can fix it either themselves or call up their bank. Failure recovery is an aspect that is always overlooked. If a transaction is failed, it gets in as a negativity in the user’s head. The designer’s job is to stop them from abandonment and inform them of the issue in such a way that lets them fix it or make them want to try again. When you highlight the issue in red, or explain technical issues in a lucid manner, the user is reassured that it is not their fault.

Gaining the trust of the customer

Security measures like SSL certificates and HTTPs have already been taken care of, in case you are using a third party service. However, small icons of assurance can add a great deal in putting people at ease. Green locks and security seals are some of the things can change the game completely in winning the customer’s trust. As the customers are more informed these days, they are actually looking for these things. And if they do not find it on your payment page, the cart abandonment rate might go up.

Never have too much simplicity

Sometimes too much simplicity or lack of some sophistication can cause the customer to think as if they were hoodwinked. The payment process should be simple, but as we are talking about something as acute as a customer’s hard earned money, it should never be too simple to make him think it’s a child’s play. Setting the right amount of comfortability is the key. A good example is Apple pay, which lets a customer pay without handing their credit cards out.

Let’s have a case study here : of Stripe

It is a perfect example of cases when payment got too easy. They brought in a version of their “Checkout tool” that could, as an option, save a user’s credit card details for use across various sites. The customers did not like it, got confused while using it and even upset when they found out that the site they had been using was already too-much-intelligent with having their credit card number. To top it all, this is the first time purchase on a particular site we are talking about. Therefore, it stood as an example against over automation.


A good UX role does not end when the user hits, the “pay” button. An email receipt is another channel to increase user engagement.

Let them know about you

Receipts are an excellent way to let users remember your brand and let it stick in their brains. A very good example of this approach is KIndful, which develops software solutions for non profit organizations. Their donors feel happy about being associated with a great cause as they receive a receipt, it leaves a lasting and positive effect on the relationship. Which ultimately gets more donations. A cherry on the cake would be if you had short videos, testimonials and blog posts along with receipts.

Leveraging the power of social media

A call to action button placed strategically on your transactional email receipt can make the user follow you on their social media accounts. If this following gives you leads on discounts and sales, it is a brownie point for you. Your customers can invite their friends to share the same for additional perks.

Feedback is mandatory

When you give a direct email address, and get them to respond to the one transactional email that they received, a relationship continuity is obtained. Some lines to follow in order to get them to respond will be : “How are you doing” or “Please leave a review for the product”. A customer feels like a productive part of the brand when they give useful suggestions and also further path for engagement is constructed.

In short: Your only mission should be to make the payment process easy for your user

As we have mentioned multiple times in this article, the design and technical details of any payment platform is of primary importance. Businesses should not miss out on a deal just because their UX was bad or some technical glitch happened.

Leave A Comment