Businesses invest a lot of resources in getting consumers to click on ads and drawing visitors to websites or mobile apps. They create amazing product displays to make people like and engage with their product catalog. They even offer irresistible discounts to finally get their products added to the shopping cart.
But even if these efforts are successful in attracting clicks and visitors, they don’t necessarily lead to results. A common challenge is the issue of “cart abandonment,” which means potential customers abandon a website or app once they are in the middle of the process of selecting items or paying for them. On average, an online store loses 75%-83.6% of sales to cart abandonment.
Why do customers abandon their digital carts? There could be lots of reasons, of course, but poor user interface or user experience are chief among them, which are both issues that developers can help address.
Toward that end, here’s a list of five tips for preventing cart abandonment by improving the mobile flow checkout for their apps.
Thirty percent of users abandon the cart if they’re asked to register upfront. Niche players face this challenge more than the Amazons of the world. Customers don't like registering unless it is tied to a benefit (say a coupon code). Sometimes, even existing customers don’t prefer signing in. This is especially true when they forget their passwords and have to go through the password reset flow. These are key reasons why cart abandonment rates are lower with sites that allow users to check out as a guest.
While some users might like to provide information to get personalized suggestions, others might not like spending time filling out registration forms. So, always give them three options: sign up, sign in, and check out as a guest. This should not be a problem with fulfillment, as you can always add email and contact number fields in the delivery information form.
Most people avoid signing up just because they are too lazy to enter their details. Even when you allow users to check out as a guest, they will have to fill out the delivery form. So keep the forms precise and less boring. You can create a great user experience if you can fill out some of the fields in the delivery form by requesting certain permissions. For example, by requesting access to a user’s Google+ profile, you can fill out the fields like first name, last name, email, etc. Getting access to the user’s device location will help you get fields like state, city, locality, etc, automatically filled. This way, you can dramatically reduce the time your users would otherwise have to spend on a frustrating data entry process.
Avoid clearing all fields if there is an error in one (or several) fields. Shoppers get frustrated with having to re-enter the whole thing. Save all the valid information and highlight the invalid information along with an error message. Additionally, display error messages clearly and avoid using generic messages like “invalid information.” The form you get while signing up for a Google account is a great example of a good user interface (UI) design. The form tells you exactly what went wrong and how it should be corrected.
Not having a particular type of card or mobile wallet should not stop customers from checking out. Give them a lot of payment options. In addition, some customers are concerned about the security of their credit cards. Their fears are sometimes justified by the increasing number of cyber attacks. So always display security badges and make users feel secure about their payment. If possible, provide a delivery (COD) option for customers who don't know enough about security badges and aren’t comfortable with the online world.
One mistake that most online stores make is promoting other products on their checkout pages. This makes room for a lot of distraction. Customers tend to navigate to other pages hunting for better and better deals. They eventually end up confused looking at the myriad of options. Buyer’s dilemma sets in and results in cart abandonment.
You should cross-sell your products, but the checkout page is just not the right platform. Amazon recommends other products on the product page itself, but with a checkbox. This way, the user can buy the recommended products without leaving the main product page.
Keep designs simple, remove unnecessary links, and encourage a closed promo code field. Once a customer has added a product to the cart, your only goal should be getting the product checked out.
Don’t make the checkout page too long. Avoid less necessary conventional steps like asking “Are you sure about the details entered?” Break up the checkout process into multiple steps and deploy one step per page. Have a prominent progress bar to guide users through the checkout process. The load time of your site directly affects user experience. Fifty-seven percent of visitors abandon their carts if the load time exceeds three seconds. The faster your pages load, the more products you will sell.
Forty-nine percent of people operate their phones using one hand. So design the user interface in such a way that the user can complete the checkout process using one thumb. Make sure that the design works for tablet users as well. Enrich your app with all possible luxuries, and make the checkout flow as convenient as possible. Ensure that customer assistance is readily available. Add an iconic CTA button to call customer support. And offer useful links to FAQs so that users will not have to look for solutions across the Web when they have a problem with checkout. A good user experience is created only when you really care about the comfort of your customer.
Worldpay hosted payment pages provide websites with a simple and secure way to integrate payments into a site without the additional overhead of PCI compliance and the benefit of access to a multitude of payment types.
In this article, we’re going to look at this solution and walk through some tips for troubleshooting when test payments fail. We’ll be using the C# example which is available on GitHub and offers users a demo application that they can configure to use with a test account. We’ll cover setting up a test account below (if you haven’t already set up an account).
If you can navigate to the checkout page, but are unable to view the Payment iframe, then it is likely that you haven’t configured the account credentials, there is an error in the configuration, or there was a problem setting up the transaction. If you are using the example application, and view the page source, you may observe an error indicating that iframes are disabled. The disabled iframe message is the default message which is displayed if the page is unable to set up the transaction, or retrieve the iframe from the payment processor.
We’ll walk through each of these problems in detail and discuss symptoms and how to resolve them.
Setting Up a Test Account
Requests to the Hosted Payments Service need to have the following information included:
Application Name and Version are required, but these fields are for you to add information about your application. The remaining values require you to sign up for a Worldpay test account.
Validating Your Configuration
When you create your test account, you’ll receive an email similar to the one below that has all the required values for your new account. The email also contains test URLs for your test hosted payments and links to documentation for hosted payments and other services that you’ll use with your test account.
If you’re using the C# example, the Web.config file in the root folder of the project contains the Account Configuration. Validate that you have configured all six elements in your project and that values match those for your test account. If Worldpay can’t verify your account, then the iframe cannot be displayed.
The Anatomy of a Transaction
A complete transaction is a series of steps, which begin before the customer is prompted to enter their information. The first call sets up the transaction. The TransactionSetup is a POST request which includes the account credentials, terminal information, style information for the iframe, and the return URL. The call is handled by the server to prevent account information from being exposed to the end-user. Once the transaction is set up, the browser can request the iframe.
Figure 3. XML Request to Set Up a Transaction
In response to the request above, the processor returns the following, which includes a transaction number. This number is used by the client or browser to request the iframe.
Figure 4. XML Response with Transaction ID
If you enable debugging on your local server and step through the code, you should be able to see the response coming back from the processor. I was able to create a couple of different errors by changing aspects of the request I sent.
Figure 5. Example of a Response for an Invalid Request
In the case above, this was due to not setting the correct headers on the request. For XML requests to the payment processor, the required headers are:
Figure 6. Another Example of a Response for an Invalid Request
In the case shown in Figure 6, the namespace was incorrectly set. The XML namespace is set on the parent element and should take the following format.
Troubleshooting Client Payment Submission Errors
The request from the iframe is synchronous and returns the results of the transaction, and redirects the browser on a successful transaction to the URL which you specified when you set up the transaction. The processor parses user information completeness and validity. Below are some of the results which appear in the browser for missing or invalid data.
Figure 7. Missing Information on the Payment Information Form
Figure 8. Invalid Card Information on the Payment Information Form
If you are still experiencing problems with your test payments, you can visit the Vantiv Developer Portal to see if other developers have experienced similar problems and posted their solutions. You can also reach out to a Worldpay representative here.