Skip to main content

​
Overview

The Whop embedded checkout lets you place a full Whop payment experience directly on any GoHighLevel site page. Customers can select a plan and complete their purchase without leaving your site. The checkout is designed in the Whop checkout builder at design.whoponboarding.com and embedded into GHL via a simple code element. The embedded checkout responds to the parent element it sits in — GHL’s column, row, and section layout controls determine how the checkout is sized and positioned. Any padding, margins, or layout changes are made in the GHL builder, not inside the checkout itself.

​
Part 1: Build your checkout in the Whop builder

​
Step 1 — Open the checkout builder

  1. Go to design.whoponboarding.com.
  2. Click Design, then open the Builder.
  3. This is where you configure your plan(s), styling, and generate your embed code.

​
Step 2 — Get your Plan ID from Whop

You need the Plan ID for each pricing option you want to show in the checkout.
  1. In your Whop dashboard, go to Checkout Links in the left sidebar.
  2. Find the checkout link for the plan you want to use.
  3. Click the three dots (…) on the right and select Details.
  4. Copy the Plan ID (format: plan_XXXXXXXXX).
If you want to offer multiple pricing options in the same checkout embed, you need the Plan ID for each one. Copy them all before returning to the builder.

​
Step 3 — Add your pricing plan(s)

  1. In the builder, click Add Pricing Option and paste your Plan ID.
  2. To offer multiple plans side by side, click Add Another Pricing Option and paste the next Plan ID.
  3. For each plan, optionally add a display title, price, and description. These are visual labels on your page — actual pricing is always set in your Whop plan settings.
  4. Leave display fields blank if you prefer a clean embed with no extra text overlaid.

​
Step 4 — Style the checkout

Choose from the available color themes to match your brand and page. You can also add a custom call to action if you want. When you’re happy with the look, generate the code.

​
Step 5 — Generate and copy the embed code

  1. Scroll to the bottom of the builder.
  2. Click Generate Embed Code.
  3. Copy the entire code block that appears — this is your iframe code for GHL.

​
Part 2: Embed the checkout in GoHighLevel

​
Step 6 — Add a code element in the GHL site builder

  1. Open your GoHighLevel site builder and go to the page where you want the checkout to appear.
  2. Click Add Element.
  3. Find and select the Code element (under the Code section in the element panel).
  4. Drag the element onto your page where you want it.
  5. Click the element to open the code editor.
  6. Paste your full embed code into the editor.
  7. Save the element.
The code element in GHL is sometimes labeled simply as Code in the element panel. If you don’t see it, look under custom or advanced elements.

​
Step 7 — Preview your page

  1. Save your page and click Preview (or open the published page URL).
  2. The Whop checkout iframe will appear where you placed the code element.
  3. You should see the checkout with the plan(s) you configured.

​
Layout and responsiveness in GoHighLevel

The Whop embedded checkout is an iframe that responds to its parent element in GHL. The checkout fills the width of the column, row, or section it’s in. You control size and position with GHL’s layout tools — not inside the checkout embed.

​
Understanding the parent element

The checkout lives inside a container and fills that container. To change how it looks on the page, adjust the container:
  • Narrower checkout — Place it inside a narrower column.
  • Space around the checkout — Add padding to the parent section or column in GHL.
  • Center the checkout — Center the column it’s in.
  • Spacing, margins, and sizing are set in the GHL builder — not in the embed code.

​
Common layout configurations

Layout optionHow it works
Full-width checkoutPut the code element in a single full-width column inside a section. The checkout stretches edge to edge within that section.
Checkout on right, copy on leftCreate a two-column section. Put your headline, body copy, and supporting content in the left column. Drag the code element into the right column. The checkout uses just that column.
Centered narrow checkoutUse a three-column layout and put the checkout in the middle column. Leave the outer columns empty or use them for decoration.
Checkout with surrounding contentAdd a headline, subheadline, and trust elements above or below the code element in the same section for a complete checkout block.
For the best mobile experience, preview your layout on mobile in GHL after placing the checkout. Columns stack vertically on mobile, so a two-column layout (text left, checkout right) will show copy above checkout on small screens — which is usually the best order.

​
Using multiple plans

If you added more than one Plan ID in the builder, the checkout shows each plan as a selectable option. The customer chooses their plan before entering payment details. Use this for:
  • Monthly vs. annual billing
  • Tiered access (e.g. Basic, Pro, VIP)
  • Paid-in-full vs. installment options
Each plan can have its own label, price display, and description in the builder. The amount charged is always controlled by the plan settings in your Whop account — the builder fields are display-only.

​
Frequently asked questions

The checkout isn’t showing up on my page — just a blank space. What do I do?
  • Confirm the embed code was pasted correctly into the GHL code element with no missing characters. Save the element and try previewing the published page rather than the editor preview; some embeds don’t render in the GHL editor.
  • If it’s still blank, check that the Plan ID in your embed code is correct and active in your Whop account.
How do I control the size of the checkout on the page?
  • The checkout fills its parent element in GHL. To make it smaller, put it in a narrower column. To add space around it, add padding to the section or column that contains the code element. Don’t try to resize the checkout from inside the embed code.
Can I place the checkout next to text or images?
  • Yes. Create a multi-column section in GHL, put your content (text, images, bullets, etc.) in one column, and drag the code element into the next column. A common layout is copy on the left and checkout on the right.
Can I use multiple plan options in the same embed?
  • Yes. In the Whop builder, add each plan’s Plan ID as a separate pricing option. The checkout will show all plans as selectable options before the customer proceeds to payment.
Do I need to update the embed code if I change my Whop plan pricing?
  • No. The embed code uses your Plan ID, and the checkout always pulls live pricing from your Whop account. Regenerate the embed code only if you change which plans are included or update the visual styling.
Where do I find my Plan ID?
  • In your Whop dashboard, go to Checkout Links. Click the three dots next to any checkout link and select Details. Your Plan ID is shown there (format: plan_XXXXXXXXX).

​
Questions?

Contact your Whop account team or visit whop.com and design.whoponboarding.com.