Skip to main content
Checkout branding lets you customize how your checkout pages look, so they match your brand identity. You can set an accent color, font, and button shape at the company level, and optionally override those settings on individual checkout links.
Checkout branding is currently in early preview. Access is limited while we refine the feature. Reach out to Whop Support if you’re interested in getting early access.

​
What you can customize

SettingDescription
Accent colorSets the primary color used for buttons and interactive elements on your checkout page
FontChoose from a selection of fonts to match your brand
Button shapeControl the roundness of buttons. Choose between sharp, rounded, or pill-shaped

​
Global branding (company-wide defaults)

Global branding applies to all checkout links for your business. Individual checkout links inherit these settings unless they have their own overrides.
  1. Go to your Dashboard > Settings > Checkout Branding
  2. Choose your preferred accent color, font, and button shape
  3. Use the live preview to see how your checkout will look
  4. Click Save to apply your changes
Your branding will take effect on all checkout links immediately after saving. You can override the global branding on a specific checkout link. This is useful when you want a particular product or campaign to have a different look.
  1. Go to your Dashboard > Checkout Links
  2. Edit the checkout link you want to customize
  3. In the Checkout branding section, adjust the accent color, font, or button shape
  4. Save your changes
Any setting you leave on “Global default” will inherit from your company-wide branding. Only the settings you explicitly change will override the global defaults for that link.
Per-link branding takes precedence over global branding. If you update your global settings later, any checkout link with its own overrides will keep its custom branding for the overridden settings.

​
API: Checkout session branding

You can set branding on individual checkout sessions via the API using the checkoutStyling parameter on createCheckoutSession. This is similar to Stripe’s branding_settings parameter. 
mutation {
	createCheckoutSession(
		input: {
			planId: "plan_XXXXXXXXX"
			checkoutStyling: { accentColor: "#FF5733", font: "roboto", shape: "pill" }
		}
	) {
		id
		purchaseUrl
		checkoutStyling {
			accentColor
			font
			shape
		}
	}
}
The resolution order is: checkout session > plan > company. If a checkout session has styling set, it takes priority. Otherwise, the plan’s styling is used. If neither is set, the company-wide defaults apply.
FieldTypeDescription
accentColorStringHex color code (e.g. #FF5733)
fontEnumsystem, roboto, or open_sans
shapeEnumrounded, pill, or rectangular

​
Email field controls

You can control the email field on your checkout pages using URL parameters. This is useful when you already know a customer’s email (e.g., from a landing page form) and want to streamline their checkout experience.
ParameterEffect
?email=customer@example.comPrefills the email field with the specified address
?email.disabled=1Locks the email field so the customer cannot change it (use with email parameter)
?email.hidden=1Hides the email field entirely (use with email parameter)

​
Examples

Prefill and lock the email field: 
https://whop.com/checkout/plan_XXXXXXXXX?email=customer@example.com&email.disabled=1
Prefill and hide the email field: 
https://whop.com/checkout/plan_XXXXXXXXX?email=customer@example.com&email.hidden=1
When email.hidden=1 is used, you must also provide the email parameter. If both email.disabled and email.hidden are set, the email field will be hidden entirely.
These email parameters also work with embedded checkout. In the embedded checkout, you can use the prefill, disableEmail, and hideEmail props instead of URL parameters.