How To Build An Amazing Online Checkout Experience (Step-By-Step)

Building a better payment experience is all about getting the details right. Use this guide to convert more customers into revenue today. From conversion, to design, to goals, this guide will help boost sales on your website.

Today's post is all about getting started on the right foot when building your first checkout page, or re-designing your current one. From the very basics of picking a great payment processor, to creating the actual page on your site, today you're going to learn everything you need to know to start collecting payments online - the right way.

Woman choosing option

Selecting an online payment processor

An online payment processor is the first thing you'll need to pick out when starting to collect payments online. If you don't already have one, no worries - today we're going to walk through some of the best options out there and why they matter. I've included 4 of my top options, and what their best use cases are.

Best online payment processors

Paypal

Paypal has been around since the very early days of the internet. Being one of the first companies who competed to process payments when eBay originally came out, Paypal has a robust suite of tools and is excellent at helping individuals get paid. When it comes to processing payments for business, it can have some drawbacks. Most concerning to me is their right to hold any money in your account as they see fit. Traditional processors like Stripe work with your existing bank to manage deposits and refunds.

Square

Square is leading the point-of-sale (POS) market with their friendly, and beautiful point of sale cash register system. Payments can be collected on a mobile device, or an iPad, with great tools like inventory management and more. Square is the perfect solution for small brick and mortar shops looking to collect payments with ease.

Authorize.net

Authorize.net is Visa's answer to online payment processing. While on paper offering much of what Stripe offers, Authorize.net is still a much smaller vendor which could have some unpleasant side effects. Size becomes a big deal when trying to manage refunds and disputes with your processor and the bank of your customer. The ability of your processor to help mitigate these problems can be invaluable, while not having enough support can lead to wasted time and frustrations.

Stripe

Stripe is the number one online payment processor by a long-shot. From being the first developer friendly platform with unmatched customizability, to leading the industry in security best-practices. If you use any online services, chances are they use Stripe behind the scenes to manage their payments. Important to note: SecuraCart is built to run on Stripe exclusively for a seamless connection.

Man with Goals

Goals for a successful checkout page

Make it easy to say yes

The number one factor that determines the success of any checkout page is how easy it makes it for your customers to say "Yes, I want this!". If you think about it, making it easy to say yes to your service or product is the true goal of marketing, outreach, and most growth related activities. You are actively trying to promote your service to the world through education, exposure, and in-depth explanations. All of these things make it easier to say Yes during checkout.

With that in mind, your payment page should be no different. Having a complicated pricing structure, too many plans, or lack of discernable difference between payment plans, can all have disastrous results on the conversion of your page. In fact, SecuraCart was built to address this problem head on. Our simplified user interface makes it easy to complete payment with as little friction as possible.

Make it as secure as possible

One of the number one things most overlooked while creating a payment page is the management of sensitive data and security practices. Whether you have one customer, or 10 million customers, if you are collecting money online you have an obligation to protect the data of your customers - and your own sensitive information.

Best Practices

  • Utilize a SSL Secured Connection
  • Use one-time checkout tokens to prevent forgery requests
  • Use secure HTTP cookies when transmitting data to your server to prevent Cross Site Request Forgery attacks.
  • Offer a 3D Secure payment solution if accepting payments in Europe. This entails an extra confirmation step through the cardholder's bank.

Make it as future proof as possible

As the technology stacks that run our checkout pages change and improve, it's very important that we're following these updates and making the necessary changes. Just last year, the EU mandated that any online payment must be authenticated with 3D Secure. While a great thing for user privacy, this caused many headaches for developers around the world. Any previously built forms required massive reconfiguation and tweaking to work with the new not-so-easy-to-use system.

Talking about being prepared for the future is almost meaningless without some good context. Here's one example of how SecuraCart is looking forward while designing our platform. All SecuraCart forms rely on what Stripe calls "Payment Intents". Payment Intents were designed to make working with 3D Secure transactions as simple as possible. While not mandatory yet in the United States, SecuraCart is ready to go when that happens. We focus on making the best checkout experience possible while you focus on getting more sales.

Reduce clutter and boost conversion rate

Possibly one of the simplest conversion tips in theory and the hardest to put into practice, is the simplification of a web page. Whether you're running ads to a landing page, getting new sign ups for your app, or selling ecommerce products in an online store - having a simpler interface almost always leads to higher conversion. It's no surprise that Google's own homepage consists of nothing more than a logo, search input, and a button. Simpler is better.

Even cooler? We can apply these same concepts to checkout pages very easily. The main goal is to remove everything that is unnecessary or makes a potential customer think twice about clicking "Pay". We're going to Marie Kondo our payment page! We've all been guilty of writing a little too much, making an offer a little too complicated, and more. It's ok. Give all the elements on your checkout page a hard look-through. If you don't absolute LOVE it, or even better: your customers wont absolutely LOVE it, get rid of it.

Make it easy for you and empower your sales team

Another easy to miss goal for your payment page is how easy it is to update. An easy litmus test is to ask yourself this simple question:

"If I wanted to create a simple deal right now, how easy would it be to make that happen?"

  • If you already have a system in place to easily create new offers - you win!.
  • If you need to contact your developer for some quick changes, that's doing pretty good.
  • If you still need to find someone, create a new page, make sure it's tested, rewrite the old code to work..... you're in trouble.

One of the biggest blockers I've witnessed while selling websites specifically, is the ability to allow yourself and/or your sales team to create offers on the fly. You need a simple and manageable way to let someone remove or add items to a proposal. This gets complicated when your payment system lives on your website, and even worse if it only has one checkout option programmed.

The SecuraCart payment platform was designed around this principle. We want you to not think twice about creating another payment form with the exact details you want on it. After it's ready you're clicks away from sending it via email, collecting over the phone, or sending via sms text message.

SecuraCart Devices

Features for Desktop and Mobile

If you've made it this far, we're now on the same page about what's most important when building our checkout pages. We have clear goals in mind, and want to make sure our customers have an excellent experience. We need to create a payment page that looks great on desktop and even better on mobile. Mobile transactions are becoming the norm these days, and we need to make sure we're not offering a less than optimal mobile experience. One good technique to ensure a great mobile optimized website, it to use "mobile-first" design. This means starting any designs and mockups thinking about the mobile experience first, then building that out into a full width view. With that in mind, below are some guidelines for specific features that every payment page should accomplish.

Basic Features

  • Works well with Chrome/Safari autofill
  • Clearly describes payment amount and terms
  • Accept terms and conditions if necessary
  • Follows accessibility best practices
  • Dark mode preferences
  • Seamless data transfer to processor
  • SEO Optimized
  • Optimized social media metadata

Mobile Considerations

  • Mobile + Tablet only view
  • Fast loading
  • Smaller fonts

Nice To Have Features

  • Single page web-app (SPA)
  • Service Worker for offline caching
  • Internet status monitoring
  • Bug monitoring and notification
  • CDN data for faster load times
  • Google Lighthouse Compliant

3D Secure

Optimize with 3D Secure

European markets have started requiring Strong Customer Authentication (SCA) to process payments online. This requires a cardholder to confirm the purchase with their bank before processing. SecuraCart automatically enables 3D Secure for any European credit cards detected. If it sounds a little complicated, that's because it is. By the end of reading this, you should have a firm grasp on it.

How 3D Secure works

This may get a little technical for some, but let's get through this! At the core, 3D Secure is basically a series of checks and balances that occur at the moment a payment is processed. First, a secure token is generated within Stripe to create a unique, trackable, payment session. After the token is successfully generated, our servers will then confirm the amount and product then submit the payment. From here, the payment will be intercepted by Stripe who will then contact the cardholder's bank via API and await the cardholder's confirmation. Finally, the payment will be processed and the valid token is expired.

Why it's important

As more and more transactions happen online every day, the importance of reducing risk and payment fraud increases. Creating one-time use tokens is just another way to help prevent bad guys from doing inappropriate things on your website. It makes it very hard to submit fake information, impersonate your website, or implement any other known forgery techniques. We're happy to say that all SecuraCart forms rely on payment intents to secure your customer's sensitive data

How you can get it on your site

To start using 3D Secure, you will need to select a payment processor that has 3D Secure capabilities. After that, it's a matter of conforming your checkout form to the requirements of the processor. For Stripe, this involves relying on the new Payment Intents API which offers a rich set of tools for testing and configuring your payments. While not the easiest configuation for someone just getting started in development, the benefits of implementing this system far outweigh the cons involved in getting the work done.

Successful Payment

Handling Success and Errors

Think about how excited you feel right after you purchase something awesome. We all get that little "buzz" of excitement when we finally get something that we've been wanting. With that in mind, we need to make sure we're helping facilitate this experience for our customers. Chances are, anyone that buys your product has been following your brand for a while. When they finally make the decision to hit "Buy" and enter their card information - what comes next?

On Success

We need to make a successful payment feel like an event! It's the start of your new relationship with your new customer, more than a good enough reason to celebrate. So make it known! Thank you customer explicitly for choosing your company (and not your many competitors) to fulfill their needs. Show them a big green check letting them know the payment went through ok. Remind them that they have access to their receipt at any time and that you will be in touch soon if you still have deliverables. Little things like this make all the difference, and show your customers that you're thinking about THEIR experience.

On Error

We don't like them, but sometimes errors happen. It could be that the card number was typed incorrectly. It could be that your customer was trying to pay you while riding the subway and lost cell service. There are a number of reasons that can make a payment fail. But what comes next is the important part. After a payment is denied, it's important to describe exactly what went wrong in order to help your customer get back on track. Give clear feedback about the error as well as a way to attempt payment again. Besides handling the experience of your customer, making sure you have internal error reporting set up is a good idea to make sure nothing on your end is broken.

Checkout Experience Cover

Conclusion

While designing your first checkout page, or revamping your existing one can seem a little daunting at first, it is one of the most beneficial things your can do to remove friction from your sales funnel.

📚 TLDR - Summary

  • Select a payment processor that works for you (features/fees)
  • Make it easy to say yes for you customers
  • Create a mobile-first version, then a desktop version
  • Enable 3D Secure to be prepared in the future.
  • Make a successful payment a big deal! (And say thanks)

📢 Big Announcement

We have some exciting news to share with you today!

SecuraCart has entered beta and is officially ready to start helping small business owners like yourself capture payments online with ease. If you'd like to be one of the first to use our new platform, learn how you can start processing payments today with SecuraCart.

That's right, soon you'll be able create beautiful payment forms in just a few clicks - perfect for sending and sharing with your customers.

Thanks for reading

If you enjoyed this post or have any questions, be sure to write a comment down below. Have any special tips you'd like to share with the SecuraCart community? We'd love to hear!

Start collecting payments in 5 minutes.

* No credit card required to sign up.

Join The Discussion!

Read More From The Blog