Skip to navigation
Embedded checkouts

Framer checkout

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.

If you need Apple Pay, you must use the Custom Code (headers) method. 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.

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:
<script
	async
	defer
	src="https://js.whop.com/static/checkout/loader.js"
></script>
  1. 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:
export default function WhopCheckout() {
	return (
		<div
			data-whop-checkout-plan-id="plan_XXXXXXXXX"
			data-whop-checkout-theme="dark"
			style={{ width: "100%", height: "100%" }}
		/>
	);
}
  1. Replace plan_XXXXXXXXX with your actual Plan ID.
  2. Drag the component onto your page and resize it as needed.

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 to the div element. For example:

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 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:
<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>
  1. Replace plan_XXXXXXXXX with your Plan ID.

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

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 to fix this.

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.

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

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.