The Anatomy Of An Online Payment Form

No two online payment forms are the same. Paying for products and services online involve the same sequence of actions: find the right credit or debit card, enter those and other details into a web form, click ‘buy now,’ redirect to verification page, before getting to the order confirmation payment form

It sounds simple enough, but compared to paying in person – with a tap, swipe or using a card reader (to enter a PIN number) – online forms can offer a clunky user-experience.

Payment forms that are overly complex, load slowly, are not mobile compatible or don’t seem secure, contribute to the high – 68.63% – cart abandonment rate. The trick with online forms is to ensure the experience is smooth enough for customers to make that first purchase, and then keep coming back.

Essential Features Of An Online Payment Form

  1. Guest checkout options,
  2. Time-saving functions: auto-complete, automatically detect the type of card,
  3. Payment options,
  4. Final price, including shipping, plus a visual reminder of the cart contents,
  5. Clear input descriptions,
  6. Visible security,
  7. Make errors easy to fix.

Let’s take a look at each in more detail.

  1. Guest checkout options

Not everyone who goes through your checkout needs to come back. Some are there for one purchase, therefore asking them to register is a barrier that will immediately make them consider going elsewhere. Make registering an option, but only after a purchase is complete: a simple, ’Save your details for next time’, is encouraging without being pushy.

  1. Time-saving functions

Browsers and web designers are making autocomplete more of a standard feature for payment forms. HTML specifications now include that for credit cards. Chrome and Safari also support credit card autofill. Soon it will be the norm across the web. Security codes – usually on the back of a card – still need to be filled in manually.

It also saves the customer time if you visually display the card/payment options, then have the form detect it automatically once the first few digits have been entered.

  1. Payment options

Not every customer pays using a card. At a minimum, Visa, MasterCard, and American Express should be an option. PayPal is practically a basic requirement, with 179 million active PayPal accounts and One Touch proving popular on smartphones. Apple and Android Pay, along with other mobile wallet services, such as Barclays Pingit, depending on what’s popular in your region/country, could also be worth considering.

  1. Final price and visual reminders

Customers do not like surprises when the final bill comes. They also don’t want to forget the contents of their baskets. Show them. Include shorter versions of the descriptions and give them to the ability to edit the basket until the final stage. Also, don’t hide costs, such as shipping and taxes. Make everything visible.

  1. Clear input descriptions

Every time you make a customer stop and think is another chance for them to abandon a basket. Make input descriptions clear. For example, ‘Name on card’ is the easiest way to ensure customers only enter the name as it appears on the card, not their name as it may appear on other documents, forms or cards. Consider these details carefully, and always from the user-experience perspective.

  1. Visible security

Studies show that although consumers don’t always know online security brands in the same way they recognise card logos, they know when to walk away from a payment form if it appears insecure.

Security logos, padlock symbols and short descriptions (e.g. mention if it uses a 256-bit encryption or tokenisation) all provide the reassurance that customers need.

  1. Make errors easy to fix

Error messages are worthless if they don’t tell customers what, exactly, needs fixing. These are frustrating enough in web forms, but according to research, generic messages (“invalid [phone/email/security code/..]”) are still common across 92% of mobile websites.

Once a customer has corrected the error, they can complete the purchase. Don’t put any further barriers in place.