> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.monite.com/v2023-09-01/payments/payment-page-customization/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server. # Payment page customization ## Overview You can customize the user interface elements of Monite-hosted [payment pages](payment-links#share) to fit your brand guidelines and make the payers feel that they are on your own platform. ### Logo By default, the payment page displays the [entity logo](../../entities/index#logo) if available. If no logo was provided for an entity, the payment page displays your partner logo specified by the partner setting [payments.payment\_page\_theme.logo\_src](#how-to). If neither logo is available, the page uses the entity name's initials as the logo. The payment page expects a square logo 44×44 px, with a transparent background. Larger images will be scaled down to fit. ![](/_fern-img/9291b606a21fc0361ece2b9f610d3ba031c677d6909e3826ad460fb81ddef94d.webp) ### "Powered by" logo 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. ![](/_fern-img/96f644f44947cf3a0bdba7dc48fd4dac4324eab8856e5dd707ce4d8a9ae479f1.webp) #### Upload partner logo To upload your logo, use the Partner Portal: 1. Log in to the Partner Portal ([sandbox](https://portal.sandbox.monite.com/), [EU production](https://portal.monite.com), or [US production](https://us.portal.monite.com/), depending on the environment you're using). 2. Click your company name in the navigation. 3. In the **Company details** section, click the logo area to upload your logo. ![](/_fern-img/3b81ee5cb7662da6df2adf58435ea36fdec20257c58d875e7bf24be54a518f9d.webp) 4. Click **Save changes**. #### Specify partner website Provide your website URL in the `website` setting in `PATCH /settings`. It must be an HTTPS URL. ```sh curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \ -H 'X-Monite-Version: 2023-09-01' \ -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \ -H 'Content-Type: application/json' \ -d '{ "website": "https://example.com/" }' ``` ### Card color The background color of the content area within the payment page: ![](/_fern-img/d20f2a728b70eeaeeb8fe82a3c98f8b30edd79d12ad3944a66dd8e8652c440f5.webp) ### Background color The background color of the page itself: ![](/_fern-img/bdbc2ad32e9ff9df762bdb8bfcac47ab875dd24026c12a61dce6ee5659c6b129.webp) ### 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"). ![](/_fern-img/966af4a3c58aa1c1e976b635687100d0edfc2b915e6eeefcbb18e65a512d49c7.webp) ### Font family and color You can customize the font family and color of all text labels on the payment page: ![](/_fern-img/8373f6f4219399260df33d3e317c7f1d0d9f0a46126f3eb240c596fafba7855d.webp) ### Button border radius Buttons, input fields, and blocks can have rounded corners. You can define the radius of these corners: ![](/_fern-img/1f9b7fb6ee1de89993326405ce3689693452fdfd8cc81d6bf59f63a47ab474ff.webp) ## How to customize the payments page \[#how-to] The payment page customization parameters are found in the partner's settings. To modify any of the items, call [`PATCH /settings`](/v2023-09-01/api/partner-settings/patch-settings) passing the parameters you want to update. The values should be in the [CSS format](https://developer.mozilla.org/en-US/docs/Web/CSS): ```sh curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \ -H 'X-Monite-Version: 2023-09-01' \ -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \ -H 'Content-Type: application/json' \ -d '{ "payments": { "payment_page_theme": { "logo_src": "https://static.brandcdn.io/logos/zenfox-tech/logo-full-dark.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" }, "card": { "background_color": "#354f3f" } } } }' ``` * The `logo_src` value should be an absolute URL to an external image. * The field `font_family` can be used for [CSS Web Safe fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#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`](/v2023-09-01/api/partner-settings/get-settings). ## Restore the default theme \[#restore-default-theme] To restore the default colors and styles of the payment page, call `PATCH /settings` and set `payments.payment_page_theme` to `null`: ```sh curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \ -H 'X-Monite-Version: 2023-09-01' \ -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \ -H 'Content-Type: application/json' \ -d '{ "payments": { "payment_page_theme": null } }' ``` 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: ```sh curl -X PATCH 'https://api.sandbox.monite.com/v1/settings' \ -H 'X-Monite-Version: 2023-09-01' \ -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \ -H 'Content-Type: application/json' \ -d '{ "payments": { "payment_page_theme": { "background_color": null, "button": null } } }' ``` > Learn how to customize your payment page with your own brand guidelines and make users feel like they are on your platform.