How to embed Whop checkout
Before beginning, make sure your whop is set up, with products and pricing plan(s) already created.
Watch a step-by-step tutorial of how to embed a whop checkout in the video below:
Step 1 - install the package
Copy the install under the Step 1 header, Install the package:
npm install @whop-sdk/checkout
Step 2 - import the package
Add the import statement to your JavaScript/TypeScript file:
import { WhopCheckout } from '@whop-sdk/checkout';
Step 3 - set up an HTML container
Create an empty div element on the page where you want your checkout to be
<div id="checkout-container"></div>
Step 4 - copy the pricing plan ID you want to embed
Log into your Whop Dashboard
Navigate to Checkout Links (located on the right sidebar)
Click on the checkout link you want to embed
Click Details and copy the Plan ID
Step 5 - add the embed code
Insert the checkout embed code into your container.
Replace YOUR_PLAN_ID in your embed code with the actual Plan ID you copied from your dashboard
WhopCheckout.embed({
element: '#checkout-container',
planId: 'YOUR_PLAN_ID'
});
Make sure to save! Your whop checkout will now appear embedded on your page.
Common website embeds
Watch the video tutorials below for specific instructions to embed a Whop checkout in your GoHighLevel or Clickfunnels page:
GoHighLevel whop checkout embed
On your GoHighLevel page, click Add element and search for the Code element - drag the element to wherever on the page you want your checkout to appear
Paste in the below code
<style>
.whop-checkout-embed {
max-width: 480px;
margin: 40px auto;
padding: 24px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: #ffffff;
}
</style>
<script async defer src="https://js.whop.com/static/checkout/loader.js"></script>
<div data-whop-checkout-plan-id=“PLAN_ID_HERE” class="whop-checkout-embed"></div>Copy your PlanID for the price you want to appear on the checkout page
Find the PlanID on your whop dashboard - see instructions above
Replace the planID in the code with your actual PlanID copied from your dashboard
Save your GHL page
ClickFunnels whop checkout embed
On your ClickFunnels page, click Settings at the top right of the page and click the Code/ Hide Code tab.
Click into the Header Code tab and copy in the header script below:
<script async defer src="https://js.whop.com/static/checkout/loader.js"></script>
3. Click into the element on the page and search for the Code element - drag it onto the page where you want your embedded checkout to appear
4. Once on the page, click into the code element, click Open code editor and copy in the code below:
<div data-whop-checkout-plan-id="plan_yLdCtEhauGWJd" class="whop-checkout-embed"></div>
5. Copy your PlanID for the price you want to appear on the checkout page - see instructions above, it will be located on the individual link on the Checkout links tab
6. Replace the planID in the code with your actual PlanID copied from your dashboard
7. Save your ClickFunnels page
Checkout embed FAQs
Q: Why am I seeing a "Nothing to see here yet" message?
A: Make sure that you correctly replaced the placeholder Plan ID with your actual Plan ID from the Whop dashboard
Q: Why is my checkout not loading?
A: Check that the package is properly installed and imported, and that your container element exists on the page
You can read more about advanced configuration options and API information in Whop's developer documentation here.