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 Monite-hosted payment pages to fit your brand guidelines and make the payers feel that they are on your own platform.
The following elements of the payment page can be customized:
- Logo
- Card color
- Background color
- Primary button color
- Secondary button color
- Font family & color
- Button border radius
Logo
By default, the payment page displays the entity logo if available. If no logo was provided for an entity, the payment page displays your partner logo specified by the payments.payment_page_theme.logo_scr
setting.
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: 2024-01-31' \
-H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \
-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"
}
}
}
}'
Notes
The
logo_scr
value should be an absolute URL to an external image.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 about 2 months ago