PayTabs Support Portal

Using the PayTabs payment page (Hosted Payment Page) doesn't mean that we force you with our theme/UI. PayTabs always provides you with each convenient way to make your payment pages look like one of your site ones. In this article, we will guide you on how to customize the user interface of the PayTabs payment page to match your desired design. 

Customized payment page vs Standard payment page

Using this feature will enable you to customize the user interface of the payment page to match your designs instead of using our standard design.

Customized Payment Page

Standard Payment Page

Menu Item

To be able to manage your payment page UI, navigate to your merchant Dashboard > Developers > PayPage Settings (Theme).

Then a grid view will be shown containing all of the predefined themes that you have on your profile. You can add multiple themes for different types of uses by clicking the (+) button on the top right corner of the page.

PayPage Configurations

By navigating to the "PayPage Settings" page, you will be able to manage several options that allow you to customize your PayTabs payment page.

The "Expired Session" Payment page message will not be affected by any UI customization made from your side.

Logo Image Option

The logo Image option allows you to add your own business logo instead of the PayTabs one on the payment page.

Header Image Option

This option allows you to add your own header image instead of the default PayTabs header color on the payment page.

Disable Merchant Name Option

The "Disable Merchant Name" option will enable you to hide your profile name (displayed under the logo) from the payment page.

Header Image Repeat Option

The header image repeat option allows you to repeat the header image for the large-scale browser tabs size.

Header Image Position Option

The header image position option enables you to decide if you don't want to repeat the header image in large-scale screens, and where to align your header image on the payment page.

Header background color option

The header background color option allows you to change the default PayTabs color for the header section on the payment page.

Page background color option

This option allows you to change the default PayTabs color of the whole payment page except the header section.

Page background grey transparent option

PayButton Background color option

The PayButton background color option allows you to change the background color of the "Pay Now" submit button on the payment page.

PayButton Hover color option

This option enables you to change the background color of the "Pay Now" submit button when you/your customer hover over it with the mouse pointer.

PayButton Text color option

The PayButton text color option allows you to change the text color of the "Pay Now" submit button itself on the payment page.

Profile Text color option

This option allows you to change the text color of the profile name displayed under the logo on the payment page.

Profile Text Alignment option

The profile text alignment option enables you to control where to align your profile text on your payment page.

Profile Background color option

The profile background color option allows you to change the background color of your profile on the payment page.

Digital Products Mode option

In case your products/services are not physical and need to be shipped to the customers, then showing the customer address or shipping details on the payment page is not required. In this case, you can enable the digital product's mode on your payment page which will hide them.

This feature is subject to further approval from our risk team, so please make sure to contact us at (customercare@paytabs.com) for further details to enable this feature for you.

In case your products/services are indeed physical and yet you want to hide those details, you can check out "How to remove/hide the billing/shipping information?" solution article to know how to perform this.

Apple Pay Button Style option

The Apple Pay button style option allows you to change the style of the Apple Pay payment method on your payment page.

Wallet Description option

This option allows you to whether to display the payment description in the used wallet while your customer paying or not. 

Alternative currency option

The alternative currency option allows you to display the payment amount in a different currency on the payment page but the client will still pay with the sent/configured currency in the request payload.

Default option

This allows you to choose whether this theme should be the default one among your predefined themes or not.

Payment Page Confirmation

This feature allows you to double-check with the customer before submitting his payment and after filling in his payment details, you can enable it by navigating the "PayPage Confirmation Popup" field.

After enabling it and once the customer fills in his payment details and clicks on pay now, he will see the pop-up to confirm the payment before the amount is deducted or follow to the next step (3Ds for example). Below is the pop-up that will be displayed to the customer and NOTE that the underlined part will be the name of your profile: 

Invoice Preview Link

You can also manage to enable or disable the "Invoice preview link" which allows the customer to view the invoice details at the payment page before proceeding with the payment.

If you enabled this button, customers will be able to view the invoice details at the payment page as shown in the below screenshot:

A video Tutorial