> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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. Choose a background color, button color, font, and border style at the account level, and optionally override them per checkout link or per checkout session via the API.

<Card title="Try the checkout playground" icon="sliders" href="https://whop.com/checkout-playground">
  Preview background color, button color, font, and border style on a live checkout before you apply them.
</Card>

## 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.

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. Select **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 account branding. Only the settings you explicitly change are overridden for that link.

<Note>
  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.
</Note>

## Customize individual checkout sessions

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)** > **account defaults**.

```graphql theme={null}
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.

## Add a known email address

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 customer relationship management system. You can skip collecting the email address again.

| Parameter | Effect |
| - | - |
| `email` | Fills in 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
```

<Note>
  Provide the `email` parameter to use `email.hidden` or `email.disabled`. If you enable
  both options, checkout hides the field.
</Note>

When you mount the [Checkout element](/elements/latest/checkout/checkout) on your own site, pass `buyerEmail` to prefill the address and `lockBuyerEmail` to keep the buyer from editing it.

## Add a known phone number and address

Fill in the customer's phone number, billing details, and shipping address with URL parameters. The customer can still edit every prefilled field.

| Parameter | Effect |
| - | - |
| `phone` | Fills in the phone number, including the billing phone for payment methods that need one |
| `name` | Fills in the billing name |
| `address.line1`, `address.line2`, `address.city` | Fill in the billing address |
| `address.state`, `address.postal_code`, `address.country` | Fill in the billing address |
| `shipping.name` | Fills in the shipping recipient's name |
| `shipping.address.line1`, `shipping.address.city`, … | Fill in the shipping address, with the same fields as the billing address |

Include the country code in `phone` and encode the plus sign as `%2B`, for example `phone=%2B14155552671`. Use a two-letter country code for `country`, such as `US`.

### Example

```
https://whop.com/checkout/plan_XXXXXXXXX?email=customer@example.com&phone=%2B14155552671&name=Ada+Lovelace&address.country=US&address.postal_code=94107
```


## Related topics

- [Create a Checkout Link](/payments/create-checkout-link.md)
- [Access Higher Checkout Links](/manage-your-business/payment-processing/access-higher-checkout-links.md)
- [Team Management](/manage-your-business/team-management/manage-team-roles.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.