Checkout branding

Checkout branding lets you match your checkout pages to your brand. Set a background color, button color, font, and border style at the company level, and optionally override them per checkout link or per checkout session via the API.

Try the checkout playground

Preview background color, button color, font, and border style on a live checkout before you apply them.

What you can customize

Setting	Description
Background color	A hex color code applied to the order summary panel on the checkout page (e.g. `#F4F4F5`)
Button color	A hex color code for the button color (e.g. `#FF5733`)
Font family	`system` (default), `roboto`, or `open_sans`
Border style	`rounded` (default), `pill`, or `rectangular`

Global branding

Global branding applies to every checkout link for your business. Individual links inherit these settings unless they have their own overrides.

Go to Dashboard > Settings > Checkout Branding
Choose your background color, button color, font, and border style
Use the live preview to see how your checkout will look
Click Save

Per-link overrides

Override the global branding on a specific checkout link. Useful when a particular product or campaign needs a different look.

Go to Dashboard > Checkout Links
Edit the checkout link you want to customize
In the Checkout branding section, adjust any setting
Save your changes

Any setting left on Global default inherits from company branding. Only the settings you explicitly change are overridden for that link.

Per-link branding takes precedence over global branding. If you update your global settings later, any link with its own overrides keeps its custom values for the overridden settings.

Per-session branding via API

Set branding on individual checkout sessions using the checkoutStyling parameter when creating a checkout session. Session-level branding takes the highest precedence. The resolution order is: checkout session > checkout link (plan) > company defaults.

mutation {
	createCheckoutSession(
		input: {
			planId: "plan_XXXXXXXXX"
			checkoutStyling: {
				backgroundColor: "#F4F4F5"
				buttonColor: "#FF5733"
				fontFamily: roboto
				borderStyle: pill
			}
		}
	) {
		id
		purchaseUrl
		checkoutStyling {
			backgroundColor
			buttonColor
			fontFamily
			borderStyle
		}
	}
}

Parameters

Field	Type	Description
`backgroundColor`	String	A hex color code (e.g. `#F4F4F5`). `null` to inherit.
`buttonColor`	String	A hex color code (e.g. `#FF5733`). `null` to inherit.
`fontFamily`	Enum	`system`, `roboto`, or `open_sans`. `null` to inherit.
`borderStyle`	Enum	`rounded`, `pill`, or `rectangular`. `null` to inherit.

Pass null for any field to inherit from the next level in the resolution chain.

Prefilling the email field

Control the email field on checkout pages using URL parameters. This is useful when you already know a customer’s email from a landing page or CRM and want to skip that step.

Parameter	Effect
`email`	Prefills the email field
`email.disabled=1`	Locks the email field so the customer can’t edit it
`email.hidden=1`	Hides the email field entirely

Examples

Prefill and lock:

https://whop.com/checkout/plan_XXXXXXXXX?email=customer@example.com&email.disabled=1

Prefill and hide:

https://whop.com/checkout/plan_XXXXXXXXX?email=customer@example.com&email.hidden=1

email.hidden and email.disabled require the email parameter to be set. If both are set, the field is hidden.

These parameters also work with embedded checkout. In the embedded checkout, use the prefill, disableEmail, and hideEmail props instead.

Do more with your money

Products

Growth and marketing

Affiliates

Manage business & team

Set up payment processing

Manage payments

Manage payouts

Try the checkout playground

What you can customize

Global branding

Per-link overrides

Per-session branding via API

Parameters

Prefilling the email field

Examples

Try the checkout playground

​What you can customize

​Global branding

​Per-link overrides

​Per-session branding via API

​Parameters

​Prefilling the email field

​Examples

What you can customize

Global branding

Per-link overrides

Per-session branding via API

Parameters

Prefilling the email field

Examples