Customize payment page

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_colorfield.

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_colorfield.

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 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.