> This page is for For Users.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://whop.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://whop.ferndocs.com/_mcp/server.

# Framer checkout

> Embed a Whop checkout on your Framer site with full Apple Pay support.

## Overview

You can embed the Whop checkout on your Framer site so customers can purchase directly from your page. There are two ways to do this, but only one supports Apple Pay.

> **Warning**
>
> **If you need Apple Pay**, you must use the [Custom Code (headers) method](#recommended-custom-code-in-headers). Framer's Embed component runs
> your code inside a sandboxed `srcdoc` iframe, which Safari treats as an
> insecure context. Apple Pay requires every ancestor frame to have a secure
> origin, so it will not appear when the checkout is loaded inside an Embed
> component.

## Recommended: Custom Code in headers

This method loads the Whop checkout SDK directly on your page — no intermediate iframe. Apple Pay, Google Pay, and all payment methods work correctly.

### Step 1 — Add the SDK script to your site headers

1. In Framer, open **Site Settings** (gear icon in the top-right).
2. Go to the **General** section and scroll down to **Custom Code**.
3. In the **End of `<head>` tag** field, paste:

```html
<script
	async
	defer
	src="https://js.whop.com/static/checkout/loader.js"
></script>
```

4. Save your settings.

### Step 2 — Create a Code Component

1. In the Framer editor, go to **Assets** > **Code** and click **+** to create a new code component.
2. Name it something like `WhopCheckout`.
3. Replace the contents with:

```tsx
export default function WhopCheckout() {
	return (
		<div
			data-whop-checkout-plan-id="plan_XXXXXXXXX"
			data-whop-checkout-theme="dark"
			style={{ width: "100%", height: "100%" }}
		/>
	);
}
```

4. Replace `plan_XXXXXXXXX` with your actual Plan ID.
5. Drag the component onto your page and resize it as needed.

> **Tip**
>
> To find your Plan ID: go to your **Whop Dashboard** > **Checkout Links** > click the **three dots (...)** on your pricing option > hover over **Details** > click the ID (starts with `plan_`) to copy it.

### Step 3 — Add any optional attributes

You can add any of the [available data attributes](/manage-your-business/payment-processing/embed-checkout#step-4-optional-configure---available-attributes) to the `div` element. For example:

```tsx
export default function WhopCheckout() {
	return (
		<div
			data-whop-checkout-plan-id="plan_XXXXXXXXX"
			data-whop-checkout-theme="dark"
			data-whop-checkout-return-url="https://yoursite.com/thank-you"
			data-whop-checkout-hide-price="true"
			style={{ width: "100%", height: "100%" }}
		/>
	);
}
```

### Step 4 — Set up Apple Pay (optional)

If you want Apple Pay on your custom domain:

1. Follow the [Apple Pay setup guide](/payments/apple-pay) to verify your domain.
2. Make sure you added your domain in **Dashboard** > **Settings** > **Checkout** > **Apple Pay for embedded checkout** > **Payment domains**.
3. Publish your Framer site — Apple Pay will appear for customers using Safari or iOS.

## Alternative: Embed component (no Apple Pay)

Using Framer's built-in **Embed** component is simpler but does not support Apple Pay. Framer renders Embed content inside a `srcdoc` iframe, which Safari blocks from initiating Apple Pay sessions.

If you don't need Apple Pay, you can use this method:

1. Drag an **Embed** component onto your Framer page.
2. Paste the full HTML embed code:

```html
<script
	async
	defer
	src="https://js.whop.com/static/checkout/loader.js"
></script>
<div
	data-whop-checkout-plan-id="plan_XXXXXXXXX"
	data-whop-checkout-theme="dark"
></div>
```

3. Replace `plan_XXXXXXXXX` with your Plan ID.

> **Note**
>
> Card payments, bank transfers, iDEAL, and other non-Apple Pay methods will
> still work with this method. Only Apple Pay is affected by the `srcdoc` iframe
> restriction.

## Frequently asked questions

#### Why isn't Apple Pay showing on my Framer site?

You are most likely using the Embed component, which wraps your code in a
`srcdoc` iframe. Safari requires all ancestor frames to be secure (HTTPS)
for Apple Pay, and `srcdoc` iframes have a `null` origin which Safari treats
as insecure. Switch to the [Custom Code method](#recommended-custom-code-in-headers) to fix this.

#### How do I know which method I'm using?

Open your Framer site in Safari, right-click the checkout area, and choose
**Inspect Element**. If the checkout iframe is nested inside another iframe
with `srcdoc`, you're using the Embed component method. If it's a direct
child of the page, you're using the Custom Code method.

#### Can I use the Custom Code method on Framer's free plan?

Custom Code in site settings requires a paid Framer plan. If you're on the
free plan, you'll need to upgrade or use the Embed component method (without
Apple Pay).

#### Does Google Pay work with the Embed component?

Google Pay uses a different browser API and may work in Chrome regardless of
the iframe setup. However, the Custom Code method is still recommended for
the most reliable experience across all payment methods.