Payment page customization

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.

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 payment page expects a square logo 44×44 px, with a transparent background. Larger images will be scaled down to fit.

Partners must provide their own logo to be displayed in the “Powered by” badge at the bottom of the payment page. Partners must also specify their website that the logo will link to.

Card color

The background color of the content area within the payment page:

Background color

The background color of the page itself:

Button color

The button color refers to the background color of action buttons, as well as the text color of radio buttons (used to switch between payment methods) and text buttons (such as “Invoice details”).

Font family and color

You can customize the font family and color of all text labels on the payment page:

Button border radius

Buttons, input fields, and blocks can have rounded 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:

1curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \
2     -H 'X-Monite-Version: 2024-01-31' \
3     -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \
4     -H 'Content-Type: application/json' \
5     -d '{
6       "payments": {
7         "payment_page_theme": {
8           "logo_src": "https://monite.com/wp-content/uploads/2022/12/logo-dark-1.svg",
9           "font_family": "Poppins",
10           "font_link_href": "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap",
11           "font_color": "#00f",
12           "border_radius": "5px",
13           "background_color": "#fff",
14           "button": {
15             "primary_color": "#00f"
16           },
17           "card": {
18             "background_color": "#354f3f"
19           } 
20         }
21       }
22     }'

  • 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 as null.

  • 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 parameter font_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.

Restore the default theme

To restore the default colors and styles of the payment page, call PATCH /settings and set payments.payment_page_theme to null:

1curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \
2     -H 'X-Monite-Version: 2024-01-31' \
3     -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \
4     -H 'Content-Type: application/json' \
5     -d '{
6       "payments": {
7         "payment_page_theme": null
8       }
9     }'

You can also restore individual theming settings while keeping other settings unchanged. To do this, assign null to the specific settings you want to restore. The following example restores the default background color and button color:

1curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \
2     -H 'X-Monite-Version: 2024-01-31' \
3     -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \
4     -H 'Content-Type: application/json' \
5     -d '{
6       "payments": {
7         "payment_page_theme": {
8           "background_color": null,
9           "button": null
10         }
11       }
12     }'