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.

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.

Embedding your own JavaScript

Under "Custom JavaScript" you can embed an external script into the checkout and hosted pages – a chat widget or an analytics snippet, for instance. The same setting exists for the customer portal in the branding area. Each area has an enable switch of its own: you release the script separately for checkout and portal, and without that switch it is not loaded even when the details are complete. Two entries are mandatory:

• Custom JS URL – absolute HTTPS addresses only. Kyvento rejects http:, javascript: and data:.
• Subresource integrity hash in the form sha384-…. Without a valid hash the script is not served, and saving reports the missing value.

The hash is not a formality: on a payment page, a script swapped out after the fact could read along with what customers type. The browser loads the script only when its checksum matches the hash you stored – if the provider changes the file, it stays unloaded until you update the hash. So embed only scripts whose origin you know, and prefer versioned URLs.

Kyvento can block custom JavaScript for individual accounts; in that case a notice appears in place, pointing to a support ticket.

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