Skip to main content
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

SettingDescription
Background colorA hex color code applied to the order summary panel on the checkout page (e.g. #F4F4F5)
Button colorA hex color code for the button color (e.g. #FF5733)
Font familysystem (default), roboto, or open_sans
Border stylerounded (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 background color, button color, font, and border style
  3. Use the live preview to see how your checkout will look
  4. Click Save
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: {
				backgroundColor: "#F4F4F5"
				buttonColor: "#FF5733"
				fontFamily: roboto
				borderStyle: pill
			}
		}
	) {
		id
		purchaseUrl
		checkoutStyling {
			backgroundColor
			buttonColor
			fontFamily
			borderStyle
		}
	}
}

​
Parameters

FieldTypeDescription
backgroundColorStringA hex color code (e.g. #F4F4F5). null to inherit.
buttonColorStringA hex color code (e.g. #FF5733). null to inherit.
fontFamilyEnumsystem, roboto, or open_sans. null to inherit.
borderStyleEnumrounded, 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.
ParameterEffect
emailPrefills the email field
email.disabled=1Locks the email field so the customer can’t edit it
email.hidden=1Hides 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.