Checkout branding

Customize the look and feel of your checkout pages with button colors, fonts, and border styles

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

What you can customize

Setting	Description
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.

1. Go to Dashboard > Settings > Checkout Branding
2. Choose your button color, font, and border style
3. Use the live preview to see how your checkout will look
4. 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.

1. Go to Dashboard > Checkout Links
2. Edit the checkout link you want to customize
3. In the Checkout branding section, adjust any setting
4. 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: {
				buttonColor: "#FF5733"
				fontFamily: roboto
				borderStyle: pill
			}
		}
	) {
		id
		purchaseUrl
		checkoutStyling {
			buttonColor
			fontFamily
			borderStyle
		}
	}
}

Parameters

Field	Type	Description
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=[e-mail]&email.disabled=1

Prefill and hide:

https://whop.com/checkout/plan_XXXXXXXXX?email=[e-mail]&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.