Support

Help and documentation

Checkout & hosted pages

White-label checkout: customizing the design

Overview

In the checkout, your customers should see your brand, not Kyvento's. Under Settings → "Hosted Pages" you fully design the colors, typography, and behavior of the checkout – and with your own domain (separate article), the Kyvento address disappears from the browser bar as well.

Color scheme

The "Color scheme" section controls seven colors for buttons, backgrounds, and text in the checkout and on the hosted pages:

  • "Primary" and "Secondary" – your brand colors for buttons and accents
  • "Accent" – highlights
  • "Background" and "Surface" – page and card backgrounds
  • "Text" and "Border" – text and line colors

Make sure there is sufficient contrast between text and background colors – checkouts that are hard to read cost conversions.

Hosted pages settings with color scheme and typography
Color scheme and typography: the checkout in your brand colors

Typography and layout

Under "Typography & Layout" you choose the font, the corner radius (from square to heavily rounded), and the button style – "Filled" (solid buttons in a contrasting color) or "Outline" (a colored border without fill). This lets the checkout match the style of your website.

Custom CSS for the finer details

If the standard options are not enough, you can add your own CSS – for example, for custom spacing or to hide individual elements. For security reasons, your own JavaScript is only possible if it has been enabled for your account on the platform side.

Logo and company name

You maintain your company logo centrally in the account settings – it appears, among other places, in your system emails, which also adopt your primary color. In the checkout, your company is presented under its company name (including in the browser's page title).

Not to be confused: the customer portal

The customer portal (self-service for existing customers) has its own appearance under Settings → "Branding" (the "Customer portal" group): primary and secondary color, welcome text, and custom CSS. Checkout design and portal branding are independent – maintain both if you want a consistent brand presence.

Recommendations

  1. Primary color = your brand color, the rest used sparingly – a calm checkout looks more trustworthy than a colorful one.
  2. After every change, open the checkout link in a private window and review all five steps.
  3. Round it off with your own domain – see "Using your own checkout domain".

Next steps

  • Sales process settings – see "Setting up hosted pages"
  • Activate your own domain – see "Using your own checkout domain"