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

 



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 in the payment page.





Header Image Option


This option allows you to add your own header image instead of the default PayTabs header color in 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 by 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 in 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 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 ([email protected]) for further details to enable this feature for you.


In case your products/services is 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.




ApplePay Button Style option


The ApplePay button style option allows you to change the style of the ApplePay payment method in 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 thems 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: