Branding

Set your brand once and every checkout for your application wears it: the hosted page and the embedded component alike.

In the dashboard

Open Settings → Branding. Upload a logo, pick a colour from the presets or enter any hex value, and watch the live preview update before you save. Labels on your colour switch between white and dark automatically so they stay readable.

With the SDK

import { readFile } from "node:fs/promises";

await useroutr.applications.update(applicationId, { brand_color: "#1d4ed8" });

const application = await useroutr.applications.setLogo(
  applicationId,
  await readFile("logo.png"),
  "image/png",
);

application.branding; // { brand_color: "#1d4ed8", logo_url: "https://..." }

brand_color accepts #rgb or #rrggbb and is returned as lower-case #rrggbb. Send null to go back to the Useroutr default. Remove a logo with useroutr.applications.removeLogo(id).

Logo rules

Rule	Limit
Format	PNG, JPEG or WebP, read from the file itself. SVG is not accepted.
Size	Up to 256 KB
Dimensions	64 to 1024 pixels on each side. Square reads best.

A renamed file is refused with LOGO_FORMAT_UNSUPPORTED, and one outside the size limits with LOGO_DIMENSIONS_INVALID. Uploading the logo you already have changes nothing, and a new logo gets a new URL, so an old cached logo is never shown in its place.

For one embedded checkout

appearance on the React checkout overrides your saved branding for that checkout only. Each option replaces just its own part, so passing only radius keeps your colour and logo.

<UseroutrCheckout
  token={token}
  appearance={{
    brandColor: "#1d4ed8",
    logoUrl: "https://cdn.example.com/logo.png",
    radius: "round",
    fontFamily: "Inter",
  }}
/>

Option	Accepts	Changes
`brandColor`	`#rgb` or `#rrggbb`	Buttons, selection, focus, links and progress
`logoUrl`	an `https:` or `data:image/` URL	The mark in the header
`radius`	`"sharp"`, `"default"` or `"round"`	Corners of the panel, cards, rows and buttons
`fontFamily`	a font family name	Text. Load the font on your page; the checkout never downloads one

A value the checkout cannot use is ignored, so a mistake keeps the default instead of breaking the payment screen.

Success, failure and warning colours never follow your brand. A user should never read a pending or failed payment as complete because your colour happens to be green.

Get started

Accept payments

Concepts

After a payment

Integrate

In the dashboard

With the SDK

Logo rules

For one embedded checkout

​In the dashboard

​With the SDK

​Logo rules

​For one embedded checkout

In the dashboard

With the SDK

Logo rules

For one embedded checkout