Checkout page: choosing the best type of integration and design for your business

The checkout page is a major online sales tool. It is a vital step in the customer journey, and it has a huge impact on your conversion rates and payment success. This, in turn, determines your revenue.

In this article, we will take a closer look at different examples of checkout pages to see what makes them work. We will also break down the checkout process, discuss the best online checkout practices, and see how it affects your customers. This will help you find the best solution for your ecommerce business.

Here are some of the things we will learn

• Checkout page integration using API
• Integration using your provider’s checkout page
• Integration using an encryption script
• 10 checkout page design rules

How does a typical checkout process look like?

Imagine a typical checkout process. When completing a purchase in the online store, the customer fills out the payment form and clicks the “Pay” button to complete the transaction. User data, such as card number and expiry date, CVV codes and payment amount, are sent to the payment system and verified to complete the transaction. The online shopping website and the payment system are linked by payment gateway: a virtual channel used to route card payments and a wide variety of alternative payment systems. Any business selling its products and services online needs a payment gateway.

The gateway is located on the server of a payment service provider (PSP). The checkout page may also be located on the PSP server, or it can be hosted by the business. The integration method determines where the user data are stored and how they are transferred. It also limits the available checkout page design options. Each method has its own advantages and limitations.

This integration method gives you complete control over your online payment page design and provides enhanced client analytics. Maintaining the checkout page will be more expensive, though, and you will require a PCI DSS certificate.

When integrating using API (Application Programming Interface), your website’s checkout page will communicate directly with the gateway. Payment card data will be collected and stored on the merchant's server and transferred to the PSP server.

Several different apps and systems are involved in the payment process. The API allows them to talk to each other and establish a connection using a specially developed code.

API integration may be a good choice if:

• your company has the PCI DSS certificate;
• you have your own team of developers;
• you can devote time and resources needed to update different payment scenarios and checkout page layout;
• you have a wide variety of customer journeys and interaction.
  

This method of integration does not require a PCI DSS certificate, and connecting a new payment method is easy; your PSP provides it. On the other hand, you cannot change your website’s checkout page design on your own.

With this method of integration, the checkout page is stored by the PSP and hosted on its server. It can be either built in your webpage as an iframe (fig. 1), open in a pop-up window (fig. 2) or open as a separate browser tab (fig. 3). In any case, all customer data are collected, processed, and stored on the PSP side.

Advantages

• A PCI DSS certificate is not necessary, as all user card data is immediately sent to the PSP server.
• A PSP adds any new payment methods as necessary.
• The entire checkout process is entirely within the responsibility of a PSP.
• Little support is needed from your IT developers.
  

Limitations

• The checkout page layout and design can only be changed by your provider’s developers.
  

PSP checkout page integration may be a good choice if:

• your company does not have a PCI DSS certificate;
• you don’t have your own developer team or its resources are limited;
• you are testing a new page layout or changing your existing one.
  

Integration using the PSP checkout page has several subtypes. The choice here depends on whether your page is created using a standard Content Management System toolkit or has its own engine.

Of course, you may integrate the checkout page yourself, but your PSP will offer you two most common types of integration.

1. Integration using CMS plugins

Many websites are built using off-the-shelf CMS platforms such as Magento, OpenCart, osCommerce, PrestaShop, WordPress, and Bitrix. They allow their users to create and manage webpages without any specialised web coding skills.

PSPs have developed checkout page plug-ins for the most popular CMS platforms. They can be easily integrated in the corresponding platform without any additional tweaking and with limited coding skills. You will also get real-time updates on orders and purchases.

2. Integration using SDK libraries

If your online store was coded from scratch, it probably was written in one of the most popular web programming languages: Java, JavaScript, Go, PHP, or Python. All of them have their own SDKs or Software Development Kits which can be used to create the checkout page app and integrate it into your own website.

Your PSP will provide a SDK for your programming language which can then be used to integrate a ready-made checkout page into your website; you do not have to write the code yourself. There’s also a mobile SDK to be used in mobile apps.

Last but not least, there’s integration using an encryption script. This method does not require a PCI DSS certificate, yet still gives you complete control over your checkout page’s design. It is a hybrid integration method which combines two checkout pages: your own and your PSP’s.

The encryption code is provided by your PSP and built in your checkout page. It assigns a unique encrypted token to a customer’s payment card. This process is known as tokenization, and it replaces confidential data with a string of encrypted data. Fraudsters cannot use the encrypted data to access customer data: it has no meaning on its own.

1. The customer enters their card data in the checkout form. They are encrypted and securely transferred to the payment gateway, which, in turn, decrypts and saves the data. It also generates a unique token for that card and sends it back to your checkout page.

2. During the next step, the customer is redirected to the PSP checkout page. As they are redirected they see a preloader, a page that shows data being loaded. The PSP checkout page receives the token from your page. The process takes a couple of seconds, and the customer sees a preloader during that time. The rest of the transaction is processed right on the provider’s checkout page.

3. If the payment requires 3DS2 authentication, the customer is redirected to a page where they have to enter the one-time 3DS code. If it does not require 3DS, the customer is immediately redirected to the final payment page.

When using the encryption script, all the technical steps of the checkout process (including 3DS authentication requests, routing, etc.) are handled by the provider’s checkout page. Tokenization ensures that any communication between your checkout page and the gateway is just as secure as using API integration.

Basically, integration using an encryption code combines the best features from both integration methods we’ve mentioned before.

Advantages

• Complete control over the design and layout of your checkout page, like using API integration.
• Your developers don’t need to consider different payment scenarios.
• Tokenization adds another layer of data security.
• PCI DSS certification is not required.
  

Limitations

• This type of integration is only available for payment cards.
  

Integration using an encryption script may be a good choice if:

• designing your own checkout page is important for you, yet you don’t want to spend the resources needed for API integration and PCI DSS certification. you don’t need to store payment card data on your own website.
  

Now that we’ve learned about checkout page integration, it’s time to look at its design.

Checkout page design and layout is not an afterthought; it’s an integral part of the customer experience. Your online store may be perfect; still, if there’s something about your checkout page your customers do not like, it won’t matter. At this point of the checkout process they can still change their mind; if they’re not convinced, they will abandon their shopping cart or refuse your service. When they do, they seldom come back.

And it’s not a far-fetched scenario. Cart abandonment is a major issue for any online business, and increasing conversion rates is an ongoing challenge. To help with this, the entire checkout process should be user-friendly, simple, and trustworthy.

Let’s consider some basic rules of online payment page design which can help you achieve this.

1) The checkout page and the online store both have the same design. This makes the payment process more trustworthy.

2) Avoid annoying checkout pages that appear out of nowhere or immediately after adding an item to a shopping cart. The customer needs more time to think before completing the purchase. Moving to the checkout page should be their own decision.

3) The payment form must not contain any additional elements such as ads, calls to action, and other distractions. A simple, uncluttered payment form is easier for your customers, decreases cart abandonment, and increases conversion rates.

4) Any mandatory fields should be clearly marked.

5) If there’s a page for entering additional data, consider showing the fields that are easier to fill out first. This includes email and username.

6) The checkout page should be localised for customers from different regions. For example, it should use the local language, provide more payment options, suggest popular payment methods, and accept payments in different currencies.

7) Security is a key factor. To communicate it, display the logos of the payment systems, PCI DSS certificates, Visa Secure and Mastercard ID Check and privacy policy in a visible area.

8) Your customers should be able to correct any mistakes when entering personal and card data without erasing the fields they’ve already filled out.

9) The payment page should be adaptive to different devices and screens.

10) Customer navigation to and from the checkout page should be simple and intuitive.

To learn more about checkout page integration and simple, fast, and secure payments, get in touch with ECOMMPAY! We are always happy to find the best solution for your business.