Branding

Set your default logo, locale, presets, appearance, colors, and font for every checkout your customers see.

The branding settings page is where you control how XPay's customer-facing surfaces look: the hosted checkout page, payment links, and email receipts. Every checkout session inherits these defaults, so a one-time setup applies to every payment your customers make. Per-session overrides are available through the API for cases where you want a single Checkout Session to look different (see the developer-side Advanced configuration).

This page covers the full branding form: logo, default locale, presets, appearance primitives, semantic colors, font, and the live preview pane that updates as you make changes.

What you can do

Start from a preset

Four one-click presets stamp the full visual identity at once. Default, Minimal, Editorial, Neon. Tweak afterward, then save.

Tune the appearance

Six primitives control color mode, border style, spacing, form layout, input size, and input style.

Customize 12 semantic colors

Edit primary, foreground, background, muted, accent, border, input, and more. Auto-derive contrasting foregrounds with one click.

Pick a default language

Set English or Arabic as your default. Customers see the right language without you having to set it on every session.

Open the branding settings

In the dashboard sidebar, click your account menu and pick Settings, then click Branding. The page splits into two panes: the form on the left, a live preview on the right that updates with every change you make. Nothing is saved until you click Save Changes.

Logo

Click Upload Logo in the Logo section and pick an image. The logo appears on the hosted checkout page, on Payment Link pages, on customer receipts, and on invoices.

Use the Replace button to swap the file or Remove to delete the current logo.

Default locale

Pick the language customers see when they arrive at a hosted checkout. Three options:

Option	What it does
Auto (English)	The default. The checkout uses English unless a Checkout Session sets its own `locale`.
English	Force English on every session that doesn't override.
Arabic	Force Arabic on every session that doesn't override. The checkout layout flips to right-to-left automatically.

For per-session overrides (e.g. a French-speaking customer on an otherwise-English account), use the locale field on the Checkout Session. See Advanced configuration for the developer surface.

Today, the supported customer-facing languages are English and Arabic.

Presets

Four one-click presets give you a starting point. Each one stamps the full visual identity at once: appearance, colors, and font. After you click a preset, every field below updates to match. You can tweak any field afterward; nothing is saved until you click Save Changes.

Preset	When to pick it
Default	A familiar Stripe-ish look. System color mode, moderate rounding, outlined fields. Reads on both light and dark customer devices.
Minimal	A modern, editorial single-pane look. Sharp borders, spacious layout, transparent primary. The checkout's hero gradient is removed so the page reads as one surface.
Editorial	A premium retail look. Light mode, cream surface, sharp edges, serif typography. Forced light because the warm palette is tuned for it.
Neon	A bold, attention-grabbing look for entertainment, gaming, creator tools, and developer products. Forced dark mode, pill borders, filled inputs, neon green primary, magenta accent, monospace type.

The preview pane on the right shows what each preset looks like on a sample order with a couple of products and a price summary, so you can compare before saving.

Appearance

Six primitives control the structural rhythm of the checkout. Every field can be left Unset to fall back to the platform default.

Field	Options	What it controls
Color mode	System, Light, Dark	Whether the checkout follows the customer's OS theme, or always uses light or dark.
Border style	Rounded, Sharp, Pill	The corner radius on cards, buttons, and inputs.
Spacing	Condensed, Normal, Spacious	Vertical rhythm between sections.
Form layout	Compact, Spacious	Whether form fields sit close together or have breathing room.
Input size	Small, Medium, Large	Field height and padding.
Input style	Outlined, Flat, Filled	Whether fields use a visible border, no border, or a tinted fill.

The dashboard hint reads: "Controls the shape and rhythm of the hosted checkout. Unset fields fall back to platform defaults."

Colors

Twelve semantic color tokens, each accepting a hex value (#RRGGBB, #RRGGBBAA, #RGB, or #RGBA). Leaving a token blank falls back to a default that's chosen to read in your selected color mode.

Token	What it paints
Primary	The brand color. Used for the primary button and the checkout's hero gradient.
Primary foreground	Text and icons on top of the primary color (the Pay button label, for example).
Background	The page background.
Foreground	Body text and icons on the background.
Muted	Subtle surfaces (secondary cards, info backgrounds).
Muted foreground	Text on muted surfaces (less prominent labels).
Accent	A secondary brand color used for highlights.
Accent foreground	Text and icons on the accent color.
Border	Borders on cards and dividers.
Input	Borders and fills on form fields.
Ring	The focus ring around inputs and buttons.
Destructive	Red used for error states and destructive actions.

Auto-derive foreground colors

Four foreground tokens (Primary foreground, Foreground, Muted foreground, Accent foreground) carry an auto-derive button. Click it and XPay computes a contrasting value from the matched base color (primary, background, muted, or accent), so labels stay readable without you having to pick a contrast match by hand.

Transparent primary

A primary color with full alpha-zero (#00000000) collapses the hosted checkout's hero gradient. The left pane stops painting its brand-colored background, so the whole page reads as a single neutral surface. Useful for minimalist looks where the brand voice is typography rather than color blocking. The Minimal preset uses this trick.

Font

The Advanced section has a font-family selector with five options:

Option	What it uses
Session default	No override. The platform's default font stack is used (clears the field).
Inter	A clean, modern sans-serif. Pre-loaded across XPay surfaces.
System	The customer's OS font (`system-ui`). Native-feeling on every device.
Helvetica	A classic Helvetica stack. Falls back to Arial on Windows.
Editorial Serif	The OS serif stack (`ui-serif`). New York on macOS, Cambria on Windows. Premium retail vibe.
Monospace	The OS monospace stack. Code-like, technical aesthetic. Used by the Neon preset.

Only system-safe stacks are supported, so the preview always matches what your customers will see.

Save and reset

The bottom of the page has two buttons:

Save Changes writes everything in the form to your account. The button is disabled until you've made at least one change. A "Saved" toast confirms.
Reset Branding opens a confirmation dialog. Confirming wipes the appearance primitives, colors, and font back to "unset" so every checkout falls back to platform defaults. Reset doesn't touch the logo or the default locale, those have their own controls.

If you don't have permission to save, the button is disabled with a tooltip naming the missing permission.