Customize payment page
Learn how to customize your payment page with your own brand guidelines and make users feel like they are on your platform.
Overview
You can customize the user interface elements of your payment page to fit your brand guidelines and make the payers feel that they are on your own platform.
These are the elements available for customization on the payment page:
- Logo
- Card color
- Background color
- Primary button color
- Secondary button color
- Font family & color
- Button border radius
Logo
You can brand the page with your corporate symbol. The value should be an absolute URL to an external image.
The logo will be shrunk to 24px in height and the width will be scaled proportionally:

Card color
The cards are the boxes in which all the content of the payment page is placed. You can customize its background color:

Background color
The background color of the page itself:

Primary button color
The primary button represents the main action on the page and is ideally highlighted with the most active color. You can define its background color:

You can define the color of the primary button when you mouse over it in the primary_hover_color
field.
Secondary button color
Secondary buttons allow additional actions on the page, like previewing or downloading the invoice. You can define its background colors:

You can define the color of the secondary button when you mouse over it in the secondary_hover_color
field.
Font family & color
You can customize the font type and color of all the textual information on the page:

Button border radius
Buttons, text fields, and cards can have round corners. You can define the radius of these corners:

How to customize the payments page
The payment page customization parameters are found in the partner's settings. To modify any of the items, call PATCH /settings
passing the parameters you want to update. The values should be in the CSS format:
curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \
-H 'X-Monite-Version: 2023-06-04' \
-H 'Content-Type: application/json' \
-d '{
"payments": {
"payment_page_theme": {
"logo_src": "https://monite.com/wp-content/uploads/2022/12/logo-dark-1.svg",
"font_family": "Poppins",
"font_link_href": "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap",
"font_color": "#00f",
"border_radius": "5px",
"background_color": "#fff",
"button": {
"primary_color": "#00f",
"secondary_color": "#0ff",
"primary_hover_color": "red",
"secondary_hover_color": "purple",
},
"card": {
"background_color": "#354f3f"
}
}
}
}'
The field
font_family
can be used for CSS Web Safe fonts. In this case,font_link_href
can be set asnull
.For other fonts, use the
font_link_href
field, which is a string that contains the font resource and parameters (in our code example,https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap
). In this case, you must also specify the parameterfont_family
with the same font family.
The successful response returns all the partner settings, including the customization parameters updated. To check the current style of the payment page, call GET /settings
.
Updated 19 days ago