12 Rules of Online Payment Page Design

December 28, 2021
Enter email and subscribe

Thank you for subscribing to our newsletter

One of the influencing factors on how many browsers on your e-commerce website will complete the purchase is directly determined by the design of your payments page. In this article, we will guide you step-by-step on how to make a web payment page that will not only help you gain customer loyalty but will actually increase the conversion rate. Also, we will give you actionable examples based on the ECOMMPAY Payment Page Designer.

Why online payment page is important?

When you sell products or services online, you do not have a physical card to swipe on the point-of-sale terminal. You entirely depend on the customer entering the correct information online - directly on the payment page. The process has to be effortless and user friendly. Besides as the customer is not present and fraud is possible, you also need to think about how to create a secure payment page.

The payment gateway design should resemble the design of your e-commerce platform or a website. This will not only enhance the trust of the customer in the payment process but also will help to build brand loyalty.

Around three-quarters of online shopping carts are abandoned. This is an alarming statistic for online e-commerce websites. A 2021 study by Baymard Institute has revealed that 18% of online shoppers abandoned their cart due to the inconvenient checkout process and 17% didn’t trust the website with their credit card information. This alarming statistic shows the importance of the website payment page. The main aim of the Payment Page customization is to increase the conversion level. Below are the secrets to a payment success page design, but also the showcase of the ECOMMPAY’s Payment Page Designer (PP Designer), the tool allowing to build the bespoke hosted payment page with few clicks.

Customization of the website payment page

1. Fonts and fields

Remember that the customer has to experience your brand until the payment confirmation page. Therefore, you have to choose your corporate fonts. On the other hand, the font size settings have to make sure that the customer clearly sees the information in each field and sees the mistakes right away. Otherwise, the customer might abandon the process if the payment was declined due to misspelling. For that exact reason, the ECOMMPAY Payment Page Designer does not allow you to change fonts in the design process.

2. The background colors

When the payment details page pops out, it is recommended to change the colour of the background. For example, blurring the previous page is one of the options. However, it is not advisable to choose a very specific colour of the checkout page that might impact the visibility of certain elements of the payment form. Otherwise, the fields might not look sharp for the client. We recommend carefully evaluating the readability of the text on the chosen colour of the fields. Choosing the colour palette that resembles the brand and is familiar to the client is the best option. Furthermore, for the better payment page UX, we do not suggest changing the colour of the fields, as information may look blunt to the client and they might not spot the mistake right away. The Ecommpay PP Designer does not allow to change the colour of the fields in order to avoid mistakes, and unwillingly negatively impact the payment conversion rate.

3. Background images

Another vital element of the payment page is the image of the background. The best way to explain the dos and don’ts of the background image is to show some visual examples:

Background images NOT to use

Bad quality images

The low-pixeled images do not look good and they are raising concerns about the trustworthiness of the payment page.

Distracting images

The image has distracting elements such as information about the company, motivating slogans to complete the purchase, and others. The slogans take customers’ attention away from entering the payment details, thus are not recommended.

Irrelevant images

When the image is unrelated to your company, or to the product you provide it is confusing to the customer and also might cause a drop in the conversion rates.

Recommended background images

Image resembling the website

The image that looks like your website does not disturb the customer. The good practice is to use blurred images of the webpage that proceeded the checkout page.

Corporate pattern

If your e-commerce website features the pattern that is associated with your brand it is a good practice to use it as a background image of your payment form.

The Payment Page UX is also depending on its location with regards to the background you have chosen. Keep in mind the payment page will take some space on the screen.

4. Colour palette

If you want to create a seamless checkout process experience for your shoppers and do not want to confuse them when they are transferred to the hosted payment page, it is advisable to apply your brand colours to the form.

What is hosted payment page? The hosted payment page is one of the fastest and easiest ways to start accepting online payments. The hosted payment page is perfect for small and medium businesses. When the customer presses the “buy” button, they are transferred to the payment details page that is “located” at your payment services provider website.

This way you do not store any of the customer credit card details. So, in order to increase trust and brand loyalty, ECOMMPAY PP Designer allows you to change the colour of the buttons, the heading and navigation elements. When the colour palette of the payment details page matches the brand corporate colours, the customer does not even mention that they were transferred to the hosted payment page.

5. Logo

Adding the logo of the company to the website payment page is another way of increasing the trust from the customer’s side. Making the logo distinct and grabbing the attention of the customer is key to a seamless experience. With the PP Designer, you have the option to place the logo on the left, right or centre of the payment page.

6. Security certificates and payment methods logos

The symbols showing the payment is secured as well as the logos of available payment methods should be located in the usual places as the other online payment forms. For customers, this design is intuitive and does not require them to think twice when making a payment. The ECOMMPAY’s PP Designer does not allow to change the location of these logos, in order not to distract the shopper.

Tips on increasing the conversion of the payment page

7. Unified design

It is important to preview and check each step of the payment process that the customer is going through. Make sure all the designs, colours, images are stylized in the same way.

If you are not sure that the design you have chosen works well on your payment page, you should test it in real-time and see how the customer is experiencing it.

The ECOMMPAY PP Designer allows you to save the design you have been working with and preview the payment details page in different formats- iFrame, Popup, redirect and mobile.

Also, there is an opportunity to preview all checkout process steps for all available payment methods without entering any payment data.

8. Highlight the mistakes

It is a bad practice when the customers have to re-enter all fields again when the payment didn’t go through. Often customers misspell something or enter wrong data in one of the fields on the payment details page. To increase the success rate the form should highlight the field, that has wrong financial or other information entered.

9. Managing saved cards

Make it convenient for a returning customer to find the saved cards when landing on the payment page. Also, the payment page UX should make it clear how to add a new card or delete the previously used card. To increase conversion, make a two-step removal of the saved card, this way customer won’t accidentally delete the card.

10. Adopt innovative solutions

An increasing number of purchases are done via mobile phones. Therefore, allowing customers to confirm the payment with Face ID and Touch ID would positively reflect on the payment conversion rate. Additionally, an option to offer pay via QR code is useful when the shopper starts browsing on the desktop version and ends up confirming payment on the mobile device.

Around 81% of the online shopping cart abandonment is done on the mobile version, compared to 74% on the desktop version. Therefore, it is important to make sure that the mobile payment page design is as user-friendly, as possible. With ECOMMPAY Payment Page Designer the merchant has an opportunity to see how the mobile version of the payment page will appear to the customer, as well as the desktop version.

11. Avoid iFrame

iFrame (inline frame) is one of the payment page technologies. It works as follows- the customer presses the “purchase” button and the new webpage with payment details opens on the last webpage that the customer was browsing on. The payment details form can have a different web address and can be hosted on a different server.

The problem with iFrame is that it is a pre-designed frame that is inserted into the payment page template. Sometimes it turns out that the iFrame is not fitting well with the chosen template, and the customer has to scroll down to press the “confirm” button. Many users simply won’t do it, or might assume the page is broken and leave, leading to a higher abandonment level.

Moreover, some banks do not allow to open their web pages in the iFrame format. In that case payment processor have to ask the user if they agree to be forwarded to the Access Conrol Server (ACS). The message usually appears on the screen for less than 30 seconds, leading to the loss of users.

Better alternatives to the iFrame technologies are payment via API, redirection method, or Proxy. You can learn more about it here.

12. Mobile Wallets

Besides the payment page UX, it is important to think about the variety of payment methods you are offering to your customers. The array of different payment options is increasing the probability your customers will complete the payment successfully. Around 7% of shoppers claim that they abandoned their online shopping cart because the merchant didn’t offer the payment option the customer uses.

It is essential to adopt the payment methods to the demographic breakdown of your customers. For example, by offering an option to pay for the order with Apple Pay, you are reaching out to more than 500 million users worldwide. Also, the favourite payments options may differ among counties, in India for instance, the most dominant mobile payment app is Google Pay, with a 65% reach in 2020.

Besides, an option to choose Apple Pay or Google Pay on the payment details page will appeal to Millennial and Generation Z customers. According to the recent report by eMarketer in the U.S. Gen Z users are expected to account for more than 60% of new mobile wallet users every year from 2021 to 2025.

The number of users adopting mobile wallets such as Apple Pay, Google Pay, Samsung Pay, or others are growing yearly further boosted by the COVID-19 pandemic. So, in order to increase the conversion level make sure to accommodate the payments options that are trending and used by the target audience.

How to make a payment page in 30 minutes?

There are various examples online on how to create a payment gateway page design. Merchants have to spend time searching for the most efficient payment page design templates, adjust the settings and appearance of the payment page which can be time-consuming and laborious. The good news is, the clients of ECOMMPAY have access to the PP Designer. The tool is intuitive, easy to use and is a perfect solution for merchants who are aiming to make an online payment page design that will boost trust and payment conversion.

The ECOMMPAY PP Designer does not require any prior training. Literally, anyone can create a winning payment form in less than 30 minutes. The friendly interface will guide you throughout the process starting with the payment page UX and ending with the look of the payment confirmation page.

The best part is, all steps the merchant can do alone, without the need to approach ECOMMPAY specialists. Nonetheless, our specialists will monitor the conversion rate of your e-commerce website and will give you assistance on how to increase the success rate when needed.

Eliminating the chain of command

ECOMMPAY PP Designer is a real game-changer, in the successful payment page design. Previously, the process of designing a website payment page was lengthy and cumbersome, as many players were involved. In-house specialists have to get to know all the specifics that are relevant to the payment page design, which is not their core competency.The merchant had to spend valuable hours in their in-house team- the designer, project manager, who had to be in constant contact with ECOMMPAY key account managers, support, developers and testers. The communication chain was long and required attention from all the parties involved.

With the PP Designer, the merchant can choose the required settings and designs without the involvement of the designer or developers. The best part is the merchant can see the changes right away in real timing. Also, the merchant can simulate the payment process the customer will go through without actual money taken from his/her account or wallet. That way the merchant can make sure there is nothing that might drive customers away.

The tailored payment page design will make customers interact with the merchant’s brand starting with the landing page and finishing with the payment confirmation page. The design consistency will strengthen brand loyalty and enhance the user experience.

Please do not hesitate to contact the ECOMMPAY specialist for more information about our PP Designer and more tips on how to create the payment page that leads to a higher conversion!

Subscribe to ECOMMPAY Newsletter

Thank you for subscribing to our newsletter

Now you are a part of the ECOMMPAY community.

Subscribe to our Newsletter

Sign up to our bi-monthly newsletter to get the latest fintech news, updates and insights.
Business type*
The information you submit to us by filling this contact form will be processed in accordance with ECOMMPAY's Privacy Policy. We kindly encourage you to read our Privacy Policy carefully.
Thank you!
A confirmation message has been sent to your email address. Please click the link in the email to activate your subscription. If you didn't get the email, please check your spam or bulk email folder.

No results found. Please try searching for different keywords.