Skip to main content

​
Overview

You can customize the user interface elements of Tesouro-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 organization logo if available. If no logo was provided for an organization, the payment page displays your partner logo. If neither logo is available, the page uses the organization 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.
Payment page logo area
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. Reach out to your account manager at Tesouro to get these setup.
Powered by logo on the payment page

​
Card color

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

​
Background color

The background color of the page itself:
Page background color on the payment page

​
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”).
Button color on the payment page
You can define the color of the secondary button when you mouse over it in the secondary_hover_colorfield. **/}

​
Font family and color

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

​
Button border radius

Buttons, input fields, and blocks can have rounded corners. You can define the radius of these corners:
Button border radius on the payment page

​
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.tesouro.com/v1/settings' \
     -H 'X-Finops-Version: 2025-06-23' \
     -H 'Authorization: Bearer YOUR_APP_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. 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: 
curl -X PATCH 'https://api.sandbox.tesouro.com/v1/settings' \
     -H 'X-Finops-Version: 2025-06-23' \
     -H 'Authorization: Bearer YOUR_APP_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: 
curl -X PATCH 'https://api.sandbox.tesouro.com/v1/settings' \
     -H 'X-Finops-Version: 2025-06-23' \
     -H 'Authorization: Bearer YOUR_APP_TOKEN' \
     -H 'Content-Type: application/json' \
     -d '{
       "payments": {
         "payment_page_theme": {
           "background_color": null,
           "button": null
         }
       }
     }'