Make your mobile payment page “conversion-friendly” (13 UX hacks)

In 2020, mobile payments in eCommerce stores grew by 29% in the US. 

Mobile phones were previously limited to just the initial stages of the shopping journey — browsing and discovery. However, more and more customers are covering all stages of the buying journey through mobile devices. 

Hence, the key focus lies in offering a frictionless mobile checkout experience to help close the sale. One of the most important aspects of that is the mobile payments page. The more user-friendly the mobile payments page, the more likely it will be for sales to close. 

The good news? Mobile payments are growing in popularity. In fact, the market value of mobile payments is anticipated to reach $12.6 trillion by 2027.

In this post, we talk about 13 ideas that can help resolve common mobile payment page problems and land more successful checkouts. 

1. Always offer a single-click alternative (and prevent drop-offs)

The problem

It’s common knowledge that shoppers browse a lot of products on the go. However, many of them don’t purchase until they’re back at their desktops or in a more secure location to finally place their orders. 

Why is that? They face these problems: 

• They may not always have the details at hand to complete the checkout 
• They may also make errors while trying to feed the data on the small screen
• They may be hesitant about entering their personal information while being connected to a public Wi-Fi
• There can be too many authentications to pass before the checkout can be completed. For example, in Europe, all EU payments have to run through an additional layer of security. 

The solution

Mobile site checkouts should be fast and convenient. Single-click payments help offer users a seamless payment experience as well as drive more conversions and keep buying in the future as well. 

By allowing shoppers to pay with a single click, you can optimize their shopping journey incredibly. It also leaves room for impulse purchases—a common trend among fashion products. 

Since in this process, payment details are already stored, shoppers don’t need to worry about having the details on them. 

All-in-all, a smart and innovative way to help customers purchase even while on the go. 

Amazon has been the pioneer of the 1-click buy option. 

Presently, Apple Pay, PayPal, and the likes have also joined to use this option. 

Perhaps, the greatest inspiration, in this case, is Shopify’s one-click purchase service Shop Pay. It has helped Shopify retail brands achieve a 70% faster checkout rate, reduced abandoned carts, and a 1.72x boost in conversion rates. 

2. Incorporate intelligent account verification (and make them feel safe) 

The problem

The biggest reason for any potential shopper to go the mCommerce route is the ease of transaction. However, this experience gets ruined when their cards get declined or payments fail. 

This can happen when retailers are catering to a large number of clients across multiple countries. It’s sure to cause a lot of payment clutter and confusion. 

Many shoppers want to save their payment details so that they can purchase with a single click. However, if retailers aren’t able to achieve maximum acceptance by authorizing the payments with a zero or nominal amount, then it’s bound to leave the shoppers frustrated and anxious. 

The solution

Intelligent account verification (IAV) instantly helps in verifying a customer’s payment details. Retailers use this system to ensure automatic authorization with a zero or nominal amount and achieve a maximum acceptance rate—all this in real-time. 

In this process, the card details are not only saved at lightning speed but are also saved for good, paving the way for higher repeat sales in the long run. 

The process requires you to charge a nominal value to the card to see if it’s in working condition. Once the verification process is through, the customer’s account is securely set up. 

Putting IAV in place will ensure the following benefits for your retail business: 

• Authenticate payment details promptly
• Detect Non-sufficient Funds (NSFs) right away
• Enable the use of auto-fill forms that will automatically throw up the user’s card data when the account is linked. 
• Checkout faster with minimum hassle 

3. Reduce redirects (and checkout abandonment) with hosted payment pages

The problem

Shoppers today have too many payment options to choose from. This means they’ll always go for the ones that are fast, convenient, and secure. 

However, if your site doesn’t have their preferred payment mode and it has to redirect them too many times to complete a payment, they’ll soon lose interest and drop off. 

In fact, 52% of customers confirm that they won’t purchase from brands that redirect them during purchase. So customers prefer a seamless payment experience where the transactions don’t have to pass through multiple service providers. 

The solution

There are 2 mobile payment page UX changes you can make to solve this: 

• ‍Create a hosted payment page. Also known as a hosted payment gateway, these can be integrated with multiple payment modes—reducing the need for redirects. When the customer clicks “Buy Now” or “Proceed to Checkout”, they are briefly redirected to the hosted payment page where they can input their data. Their data does not pass through the merchant mobile site and hence is secure. The whole payment process is over in a matter of a few seconds, giving the impression of a fast and efficient checkout to the customer.
  
  Moreover, since these hosted payment pages remain on the server of the payment service provider, the entire process is PCI compliant as well. 

• ‍Allow auto redirects to only mobile-optimized pages. Mobile-optimized pages are essentially web pages predicting when a user on a mobile device is accessing them. The moment these pages detect a mobile user, they display the optimized version of the original web page, which comes with automatic reformatting, larger navigation buttons, and optimized images. This offers the customer a frictionless checkout experience.

4. Make the payment process secure for customers with biometric identification

The problem

For most shoppers, their smartphones are equivalent to a wallet since everything from contacts to credit card numbers are stored in them. 

Hence, ensuring the security of this information is critical, especially when shoppers use it to pay for products they purchase. 

Security as well as the perception of security is important too. If the customers don’t feel the payment process is secure, then they won’t purchase even if your mobile payment page meets all the requirements. 

In fact, as per the research by Pew Charitable Trusts, around 38% of US shoppers felt mobile payments to be poorly protected than credit or debit cards. 

The solution

More and more retailers are veering towards designing customer-focused mobile payment experiences. 

By showing users how your mobile payment design and process are secure for them, you can ensure that they feel confident about using it to purchase. 

Some of the strategies you can use to make your payment page design more secure are: 

• Route payments through payment arbiters. With the presence of arbiters like ApplePay and PayPal, customers can easily purchase products without having to re-enter their card details every single time. They help make the payment process more efficient and less risky. Moreover, they offer customers greater control over their data and identity. 
• Use biometric identification to offer another layer of security. This helps shoppers access their payment information securely and rapidly. They also reduce unnecessary friction during the payment process. 

• Use customized keypads when entering sensitive information. Instead of the usual system keyboard, using a customized one for entering authorization codes, passcodes, or patterns keeps the process more secure. This deters fraudulent programs from accessing your touch coordinates. 

5. Offer timely customer support with AI-based payment chatbots

The problem

Businesses are gradually realizing how important it is for customers to get timely clarifications and support. The failure to do so can result in many more missed opportunities in converting a customer, even if they were genuinely interested in what you were selling. 

In fact, Microsoft’s research found that 58% of US customers will switch brands due to a lack of proper customer service. 

Many customers may find it hard to complete the payment process since they’re not well-versed with the process. Shoppers like these will benefit a lot from AI payment-based chatbots. Efficient and timely customer support can be a sign that you care for your customer’s shopping journey and experience. 

The solution

There’s a lot of scope for chatbots to guide customers throughout the payment process. It can help close more successful customer checkouts. 

From a retailer's point of view, it’s going to help save a lot of unnecessary costs around payment processes. Juniper Research finds out that AI chatbots can help save around USD 7.3 billion by 2023. 

Here are the ways store owners can use AI chatbots to simplify payment page transactions: 

• Create a conversational payment experience. 24/7 active chatbots can help customers in the payment stage of purchase. Natural Language Understanding (NLU) chatbots can emulate human behavior and the experience can closely resemble a human interaction. It can also offer personalized payment support. 
• Accept payments on behalf of the client. Chatbots shouldn’t just need to solve customer doubts and offer guidance. They can also help customers complete payment steps. When the customer requests and gives AI chatbots permission to handle payments for them. 
• Keep payment processes secure. The great part about chatbots handling payments for you is that the privacy and security of the transactions will be intact. Since chatbots run encrypted transactions, ensuring they’re completely secure. Moreover, chatbots can also send transaction notifications to customers which adds another layer of security. 
• Offer omnichannel support. You can integrate AI-based chatbots for multiple channels such as chat or call. This way, customers can choose the platform that’s convenient for them. 

6. Avoid manual data entry with autocompletion and autosaving

The problem

Manual data entry for mobile commerce has several disadvantages including slow turnaround time and higher error rates. Slow turnaround time can bear heavily on a business because it simply means the business will convert a lesser number of customers within a certain timeframe. High error rates mean that there are more failed transactions and fewer sales. 

As a retailer, you must see how you can save the shoppers’ time and make the checkout process easy for them. Many store owners make the mistake of asking for the same information again and again which makes users frustrated. 

Moreover, it’s easy to get swayed by emerging technologies and adds lots of fancy UI and UX elements to your payment forms. However, you should value user experience over everything else. If it doesn’t offer value to your users, it shouldn’t be there. 

The solution

Some of the payment page best practices that help avoid the painstaking task of adding easily available or repetitive information by shoppers are: 

• Offer an autocomplete option. Even if users need to fill out a long payment form, ensure they just have to do it once. 

• ‍Avoid a manual data entry with a card scan method. Since most customers use mobile to complete their payments, you can offer an option to scan their card and automatically update the details through character recognition. 

• ‍Avoid a separate field for the card type. This is because the first 6 digits of the credit card usually encode the card type. 

• ‍Auto-detect their geographical location and address. You can do this by asking for their pin code and then pulling up the city and state through API. 

• Make form completion simpler and faster with clickable images. There’s a higher chance for users to check a box than select options from a dropdown menu. You can use interactive graphics to your advantage and make your payment forms more engaging. 

7. Save the hassle of recurring payments with a membership-based payment model

The problem

Unless effectively automated, recurring payments can take up a lot of time and effort. In fact, 23% of customers don’t complete payment if they have to put in all their details again. 

For retailers, recurring transactions mean they have to pay exorbitant amounts for a high number of transactions or for high price-point goods. 

If you’ve chosen a payment model that runs on a flat rate, then the charges can be steep. This is because they charge a percentage for each sale you make. 

The solution

Membership-based payment models help customers by reducing their need to indulge in day-to-day purchases—instead offering them an option to go for an annual or a monthly fee. 

eCommerce retailers can also drive this by offering product bundling or subscription box options. McKinsey & Company’s report finds out that around 15% of online shoppers have shown interest in recurring product purchases by signing up for 1 or more subscription boxes. 

For retailers like you, it offers huge benefits. You won’t have to spend huge amounts for high quantity of transactions or high-price items. You can simply pay a monthly fee for all your transactions. 

Here are a few reasons why they can be beneficial for your business:

• Lead to a higher customer retention ratio. You can earn more repeat customers with this model as well as boost your average order value (AOV). 
• Adoption of a membership model leads to more business predictability. It removes the lack of clarity about inventory replenishment needs. 
• Generates consistent revenue. Once you secure a fixed number of subscribers, you can predict a fixed consistent revenue.  

8. Offer diverse payment options to boost on the go purchases

The problem

Not every customer prefers to pay the same way. If they don’t find their preferred payment method on your site, they’d lose interest in checking out. 

Moreover, if customers have to enter their payment details every time they shop on your site, that’s definitely a lot of hassle. 

Finally, many customers nowadays like to shop while on the go. Sharing critical payment information outside may not be something most customers feel comfortable with. 

The solution

Offer a wide range of payment options so that customers can choose what works for them. 

Also, helping them set up a default payment method can save a lot of future time and effort. 

These also help in reducing the need for customers having to enter their sensitive payment details and encouraging more on-the-go purchases. 

Some of the different payment options you can opt for are: 

• Slide to pay - Customers can easily pay from the homepage in one swipe. 
• QR codes - These are a popular option among many customers. In fact, 66.5% of customers prefer to use QR codes if the cash option isn’t available. 

• ‍Fingerprint payment confirmation - In the age of touch, you can help customers pay with a single tap of their finger. It’s also a secure method of paying, something customers will appreciate. 

• eWallets - 66% of US shoppers prefer eWallets over cash or credit cards because it’s a convenient method of payment and 14.8% do so because of greater security. All shoppers need to opt for this is to add their bank details and maintain a budget. 

To ensure shoppers are aware of the payment choices you offer, do highlight them on your mobile payment page. 

This is how Emma Bridgewater displays its diverse payment options on the page. 

9. Reduce payment form abandonment by arranging fields from easiest to hardest

The problem

67% of visitors on your eCommerce site will abandon a form if they find it too complex.

When customers are checking out, the most important thing on their minds is getting the product. Every action they take is driven by that rush. 

Anything that delays the gratification of purchasing the product is going to make them drop off. So, if you bore them or make them impatient with unnecessary payment details, then they’re likely to not complete it. 

Perception is also important here. If they perceive the form to be too complex, they won’t even attempt it. 

The solution

You should make the form look really easy to fill up—a minor hurdle to cross to get the gratification. 

Hence, you should start with easy questions such as name or email address. Then, you should move on to the long and time-consuming ones such as billing and payment details. 

Adding a progress bar improves your mobile form UX immensely since it helps shoppers to estimate how much time it’ll take for them to complete. They’ll also feel less frustrated about sharing the details as they have an end goal in sight. 

Do check out: eCommerce Mobile UX: 27 Ways to Get More Conversions

This is how Mayson breaks down its payment form into 4 parts, ranging from easiest to hardest. 

10. Guide users to payment completion with contextual microcopy

The problem

Retailers like you, who may be dealing with checkout forms and website payment processes, will know what you want from each form field. Customers, who are just there to buy the product, may not always know what data to provide for each field. 

Should the billing address be the same as the one on their credit card? Which one is the CVV on the card? Which are the mandatory fields? 

If the customer doesn’t get these answers from the form itself, then the form will show error messages. This means it’ll take more time for the customers to complete the form. This will make them frustrated and eventually drop off. 

The solution

Field labels, inline hints, and error messages go a log way in making filling the form a breeze for our customers. It hugely increases their chance of completing the form as well. 

All these are examples of microcopy. They are simply small blocks of text that help users complete an action or offer context to help them perform a task. 

A clear and concise microcopy on your mobile payment forms can help users get an overview of what data you need and how to complete filling them. This makes the form far less overwhelming to them. 

For example, House of Fraser leaves no doubts for the customer about what data is required and how to fill it in its payment form. 

Microcopy is also extremely helpful in highlighting error messages while filling out the form. 

Finally, they can instill trust by clarifying why you’re asking for certain information and also assuring them that you won’t be misusing them. 

Wiltshire Farm Foods adds a note of guarantee at the end of its form to instill credibility in its payment process. 

11. Personalize the payment process through tokenization

The problem

It’s anticipated that by 2023, 1.31 billion people will be depending on mobile payments for cashless transactions. 

So, it’s safe to say that increasingly customers will be looking for more options that are tailored to their needs. They will be expecting businesses to use their data to create more personalized payment experiences. 

As retailers, if you don’t offer personalized payment options, customers are going to walk over to your competitors. 

Think about it. If a customer is buying from you for the second time, they won’t want to go for a guest checkout anymore or add their details again. They’ll expect a faster payment process. 

The solution

When it comes to gaining repeat customers, it’s absolutely essential that you aim for payment personalization. 

A great way to achieve that? Tokenization.

Tokenization ensures customer data is saved through an encrypted token. This ensures you don’t have to bear the responsibility of saving sensitive data or applying for PCI compliance. You could also find out if there are local methods that you can use to initiate a one-click payment after data has been recorded through an elaborate first payment. 

12. Offer a payment review option to increase transparency

The problem

Payment is a sensitive issue for customers. They’d always want to justify their spending. 

Hence, any sort of anxiety or hesitation at this stage is going to make them retrace their steps and not checkout. 

Many customers feel the need to review their transaction, check how much they saved, the shipping benefit they received, and then place the order. 

In case they don't find this option, they may be in two minds about whether to go ahead with the purchase or not. 

The solution

Offer customers an option to review their purchase/transaction history on the payment page before they place their order. 

Ideally, billing information, how many customers have already purchased it, and total estimated costs can encourage customers to complete the transaction. 

This UX designer researched 50 eCommerce websites and found out how many of them designed their order review sections. Here are the findings: 

• 74% (the majority) always displayed total cost throughout the checkout process
• 26% of sites displayed their order review section only at the end

As a standard, it’s always a good idea to reflect the total price at all stages of checkout. At the final stage, you can display a complete order summary. 

L.L.Bean offers a detailed order summary after all steps are completed before customers can finally place their order. 

13. Add a cross-sell nudge and a sign-up option to re-engage customers

The problem

No retailers want their users to be one-time customers. However, unless you prompt them with an option to repurchase in the future, you may lose them forever.

This is how so many brands fail to generate repeat purchases from their visitors. 

The solution

There are 2 ways you can solve this problem. 

The first is by offering them a cross-sell nudge. 

After the customer has finished purchasing, they move to the order confirmation page. Here, you can display a message like people who bought this also bought. This will encourage your customers to go for another purchase after they made one. 

In case they don’t want to go ahead with a purchase right away, they’ll still see your product recommendations. This will give them ideas for their next purchase. 

This also works as social proof. Since most of us are driven by what our peers do, so showing them what others have bought will also make them want to buy those products. 

You can also slide in your cross-sells in your confirmation emails like Yoga Accessories does. 

To do that, you need to ask them to sign up with their email address before checking out. 

Of course, offering a guest checkout option is a good practice. However, it should always be the second option. 

This is because once they sign up, you can still reach out to them with post-purchase emails. These are great for sending them promotional offers, product ideas, or simply stay connected. 

Verve Coffee offers an option for customers checking out to sign up and share their details. 

But it does so only after offering an express checkout option first.