How to optimise your checkout process with Saferpay Fields

A user-friendly checkout can drastically reduce terminated purchase processes

Web shop checkout optimisation often leads to double-digit improvements in the conversion rate for merchants. Although there is no single ideal process that can be applied to all shops, industries and customer segments, some general principles can be identified that which we will look at below. With Saferpay Fields, we offer online merchants a simple and secure solution for implementing One-Page Checkouts. Also, thanks to its great flexibility, customer-specific checkout flows can also be implemented. In this blog post, we’ll show you how you can use Saferpay Fields to optimise your checkout flow, reduce abandoned shopping carts and thus achieve a higher conversion rate.

Functionality with safety

Saferpay Fields are a set of ready-to-use and easily integrated form fields that can be used to enter credit card data to create your own payment forms or checkouts. In contrast to the Payment Page Integration, which is a plug-and-play solution, Saferpay Fields offer total freedom in creating and designing your own forms – and thus provide ideal conditions to carry out customer-specific optimisations for the checkout flow. As a merchant, this gives you full control over your checkout flow while Saferpay guarantees the functionality and security of the input fields. And since we ensure that you cannot come into direct contact with sensitive credit card details, the lowest PCI classification – SAQ-A – remains relevant for you. Thus no PCI certification is required on the merchant side.

Good usability creates trust

A common reason for payment cancellations is a lack of trust on the part of the buyer. Good usability and a consistent look & feel throughout the shopping process help build trust and lead to a professional and visually appealing overall impression. In implementing Saferpay Fields, we especially focused on simple and user-friendly usage. The standard design of Saferpay Fields is intentionally kept neutral and can be easily adapted to your company’s corporate identity as well as your web shop’s corporate design (CD).

Here, you can see the four Saferpay Fields: cardholder, card number, expiry date and verification number in the standard layout.

In the field for the card number, the means of payment is automatically recognised during entry and the corresponding logo is displayed: 

When entering the card number, expiry date and verification number, only numbers can be entered. On mobile devices, the numeric on-screen keyboard is automatically displayed for easier data entry.  

Customisable look & feel

A uniform appearance contributes a lot to a positive overall impression. With Saferpay Fields, you now have the opportunity to customise the look & feel of the payment window to suit your individual needs.

With a single line of styling details you get this result, for example:

Try this example out now: https://jsfiddle.net/moLhp54r/

Other layouts can be realized with little additional effort. Here is an example that uses a green frame to show fields with valid content, while fields with invalid entries are framed in red:  

Try this example out now: https://jsfiddle.net/saferpay/o8qb0ghv/

In this way, invalid entries such as an incomplete or incorrect card number or an overdue expiry date become directly visible. Read the chapter on Saferpay Fields in our Integration Guide for more information on technical details. 

The One-Page Checkout: A sample implementation

Another popular method for optimising the checkout process is the One-Page (also known as Single-Page) Checkout, where all customer details required for the entire checkout process are requested on a single page. This eliminates the need for a process flow that’s divided into several steps, where it is often difficult for the customer to maintain a clear overview– especially when previous entries are lost by jumping back and forth. With One-Page Checkout, however, the customer has a clear and complete overview. Thanks to their flexibility, Saferpay Fields are ideal for implementing a One-Page Checkout.

An advanced interactive example

Saferpay Fields also allow special requirements to be implemented. This lets you try out different options to see which solution best suits your needs.

JavaScript Callbacks allow your developers to respond to specific incidents and interact with the user to help them enter the required data.

Here is an example where the card number, expiry date and verification number are visually displayed in a single field. On a credit card icon screen, the area where the corresponding entry is usually found is highlighted.

You can also try out this example in a live setting here: https://jsfiddle.net/saferpay/xt83g4r2/

Choosing the right payment methods

Why not check whether the means of payment you offer are optimally suited to your target markets? We are continually expanding Saferpay’s functionality and regularly adding new means of payment. A list of all the means of payment currently supported by Saferpay can be found here.

Our experts are happy to advise you on the right means of payment to go with for your business.

Next steps for using Saferpay Fields

To use Saferpay Fields, you need a Saferpay Business licence.

Before you can get started with the technical implementation, a Saferpay Fields Access Token is required. This can be quickly and easily created in Saferpay Backoffice. Learn more in our Integration Guide:

If you have questions or difficulties with the integration process, please contact our Integration Support.