Everything you need to know about ecommerce payments

12th May 2014

Ecommerce payments are one of the most over looked and underappreciated parts of your online shop. If you think about it from a customer point of view, they are about to out some of the most protected information (credit card, bank details, PayPal details) into a website. This can cause the payments section of your checkout to become a massive barrier for your potential customer. To have a truly successful ecommerce website, the payment section of your site needs to be optimised to convert. Make it as easy as possible, whilst also giving all the options that your customers expect, have your customers feel secure, without confusing them or being too eager. It's a lot of work.

This blog is aimed to give you some ideas to improve your customers’ experience of payments, from what everyone should be doing, to more edge cases and 'nice-to-haves'.

Things everyone should be doing now

This list is something for every website owner to check that their website has or is doing. If not you could be missing out on sales through poor conversion.

SSL (Green padlock/bar)

SSL is a way of establishing a secure connection between the client (customer) and the server (your website). For technical reasons this is hugely important to stop personal information being sent across networks without being secured properly. This is so important for security that some websites such as Facebook only use an SSL encrypted connection, and more websites are following.

But that is the technical side, what is your customer going to see, that will make them feel secure? There are a few different options for SSL certificates, and your developers can help you choose, but they each show a different style of Padlock + Green Bar combination.

Multiple Payment Options

There are so many different ways of paying for products and services online, that there isn't much reason to limit yourself (and your customers) to one payment system. Although if you're splitting payments through multiple channels which can lead to slightly higher fees per transaction, depending on your Payment Gateway, from a customer’s prospective they would rather be able to use the payment option they have. This leads to the question, would your company prefer to have a customer checkout with their preferred payment method, or leave to another site which has that option?

That's not to say that you should have every possible payment option on the site. This can lead to a confusing user experience for the customer, which can be equally detrimental. Ideally you need to pick 3-4 payment methods, which will keep the majority of your customers happy.

Choose a good Payment Gateway

A Payment Gateway handles processing of credit card and debit card information. When the customer submits the details, they are securely sent to your Payment Gateway who then returns saying if the payment was accepted, or rejected. The Payment Gateway will then do any money transfer to your account, or Merchant Bank Account.

A good Payment Gateway doesn't charge a lot per transaction, gives you tools to manage the account online, and has good documentation. The main thing to check when selecting a payment gateway is what ecommerce platforms can be used 'out of the box'. It's worth asking your developer about each one if you're thinking of switching, they'll be able to help say which will cost less to implement.

We generally suggest SagePay as a Payment Merchant. They are very well established in the market, and have a lot of tools (and ecommerce platforms) that integrate directly into it. It also offers 'on site' options which means it is fully customisable to match your website, and doesn't forward the customer to their site (although this is also an option).

If you're creating a new site start this process as early as you can. It might involve you creating a holding page with certain information to get through the approval process. If you already have a website, this process should be pretty straight forward.

Remove any surcharges

Nobody likes surcharges. It's understandable that as a company you'd prefer not to pay more for the customer using a credit card over a debit card, however surcharges are a massive barrier to customers completing a transaction. This also goes for excessive shipping or extra 'pick & pack' charges. Ebay has clamped down on users charging, 99p for a product, and then putting inflated shipping rates to make up the cost of the product.

Ecommerce payment Tracking and Analytics

Make sure that you're keeping records and using Google Analytics (or any other web analytics tool) to gain insight into which payment gateway is working, and which ones are causing customers to bounce. The best way to do this is using trigger events and see which lead to a higher conversion. It might be that PayPal doesn't get used often, but when it does it has a much higher conversion rate.

Test, test, test

Payments are tricky. Problems that you haven't thought of can arise at any stage. It's great to test information you know will work, but by testing information that won't work and attempting to break the system is where you’ll find all the edge cases.

Once you've got each payment method working correctly, try optimising using A-B testing and web analytics to improve your conversion rate.

Future improvements

The following is a few items that are starting to be included across more sites. They are either new techniques or services that may give you the edge over your competition, or just help you improve conversion in your checkout.

Stripe Payments

Stripe is a new credit and debit card Payment Gateway. It's really simple to manage and maintain, and the best bit is it's incredibly simple to add to almost any application. From mobile apps to websites, it's got code snippets for most programming languages, and makes it really easy. It is fully functional, allowing for everything you'd expect, such as 3D secure checks and online and offline refunds.

The processing charges for Stripe are what is really going to make this Payment Gateway work for businesses. Below is a comparison table for processing credit cards on PayPal and Stripe:




Charge cards from your website

$30 / month





American Express


Same flat rate


Transaction fee


International cards



Authorize card



PayPal Options

PayPal has been expanding rapidly recently. It now offers in store 'offline' payments and a slightly creepy face recognition verification system.

At its core, PayPal is an online payment method, and it has a huge range of options for payments. Customers can use the traditional 'PayPal Account' payment. Or, by using PayPal as a Payment Gateway to process Credit and Debit Cards, you can process cards inside your website, or through PayPal.

PayPal has seen a boost in use especially on mobile, where customers sometimes prefer to type in an email address and password, than find their card and enter all the details in using their phones keyboard.

Pay on Account

Paying on account has been around forever, however it has had a slow adaptation on the web. This is mainly down to integrating multiple systems within the business to sync the account balance and details.

The ability to pay on account means that orders can be made quickly and conveniently for the customer, and processing these through a website means reduced costs and sales staff have more time to chase leads.

Credit/Debit Card Simplified

There have been a few attempts to simplify the process of entering credit and debit card information. Most of these have been created by UX professionals and/or designers. It is important to note that a lot of customers are used to the current credit card form, and so may be put off by or not trust a radically different entry form.

Changes to consider:

Styled form elements (adding rounded corners or simple styling)

Intelligent validation

Auto select the card type by the card number

Make sure the card number is valid

The expiry date is in the future

Only show required boxes for each card type

Descriptive error messages

Live validation (don't make the customer submit the form, before you tell them it's wrong)

Simplify the form by using placeholders

Store Card for Quick Checkout

Store cards is a bit tricky, you have to meet certain requirements, but any good developer or agency will be able to help you with this. However, once you jump the first few hurdles it makes a huge difference to your customers. They are able to check out quickly (usually they would have a stored address as well) using just a few mouse clicks. This is great if you have a large amount of repeat business. The key things to remember are to reassure your customers of their security, and require the customer to confirm something like the security code for the stored card.

Pre order online or through your phone, Pick up in store

There are some great examples of this being applied using mobile apps, such as the Starbucks app. This will soon allow you to pre-order your coffee using your prepaid card, walk into your local Starbucks and pick up your coffee. A massive benefit of this is that the barista will always get your name right, plus you get your coffee fix without having to queue.

This is also starting to make its way to the web, with stores such as Argos and Curries offering same day 'in store' pickup for free instead of waiting for delivery. They are able to do this through a lot of system integration, and data management, but in return the website is actively driving people to the bricks-and-mortar store, whereas in the past it might have been detracting from the store.

Want us to help grow your business?

Give us a call, jump on a chat or come by our office in London. Our door is always open.