Using the ClickPay payment page (Hosted Payment Page) doesn't mean that we force you with our theme/UI. ClickPay 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 ClickPay payment page to match your desired design.
In this article you will be going to know about:
- Customized payment page vs Standard payment page
- Menu Item
- PayPage Configurations
- Logo Image Option
- Header Image Option
- Disable Merchant Name Option
- Header Image Repeat Option
- Header Image Position Option
- Header background color option
- Page background color option
- Page background grey transparent option
- PayButton Background color option
- PayButton Hover color option
- PayButton Text color option
- Profile Text color option
- Profile Text Alignment option
- Profile Background color option
- Digital Products Mode option
- ApplePay Button Style option
- Wallet Description option
- Alternative currency option
- Default option
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 ClickPay 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 ClickPay one in the payment page.
Header Image Option
This option allows you to add your own header image instead of the default ClickPay 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 ClickPay color for the header section on the payment page.
Page background color option
This option allows you to change the default ClickPay 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 (customercare@clickpay.sa) 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 themes or not.
