Skip to main content

​
Overview

The Whop embedded checkout can be pre-filled with customer data collected in a previous step of your funnel. Customers enter their information once on a form; by the time they reach the checkout page, their email, name, and optionally their address are already populated. They only need to enter payment details and complete the purchase. This works with any web builder or CRM — including GoHighLevel (GHL), ClickFunnels, or custom HTML pages. The setup requires two pages and a small JavaScript snippet.

​
How it works

  • Page 1: A form page where the customer fills in their details (name, email, etc.).
  • On form submission, the customer is redirected to Page 2 with their data passed as URL parameters (e.g. ?email=...&name=...).
  • Page 2: The Whop embedded checkout reads those URL parameters and pre-fills the checkout fields automatically.
  • The customer arrives at checkout with their info already filled in — they only need to enter their card details.

​
Step 1: Get your embedded checkout code

Before setting up the pre-fill, generate the embed code for your Whop checkout.
  1. Go to design.whoponboarding.com to build your embedded checkout.
  2. You need your Plan ID. To find it: in your Whop dashboard, go to Checkout Links, open the three-dot menu on any checkout link, and click Details. Copy the Plan ID.
  3. Paste your Plan ID into design.whoponboarding.com, customize the design (colors, styling), and click Generate Code.
  4. Copy the generated embed code — you’ll paste this into your checkout page in the next steps.
You can also find your Plan ID on any existing checkout link in your Whop dashboard under Checkout Links.

​
Step 2: Set up your two pages

You need two separate pages in your web builder (GoHighLevel, ClickFunnels, or other).

​
Page 1 — The form page

  • This is where your prospect fills out their information.
  • Add a form that collects at minimum: Email and Name.
  • You can optionally collect address fields; see the tip below before deciding.
  • Set the form’s redirect/confirmation URL to your checkout page URL, with URL parameters appended (covered in Step 3).
Billing address vs. mailing address: Whop always asks for billing address at checkout. If you pre-fill an address from the form, it will populate the billing address field — but this may not match what your customer intends to use as billing. We recommend only pre-filling email and name, and letting the customer enter their billing address at checkout.

​
Page 2 — The checkout page

  • This is where the Whop embedded checkout lives.
  • Paste your embed code (from Step 1) into an HTML/code element on this page.
  • Paste the JavaScript pre-fill snippet (provided below) immediately after the embed code.

​
Step 3: Configure the form redirect

The key to pre-filling the checkout is passing the customer’s data as URL parameters in the redirect URL. When your form submits, it must redirect the customer to your checkout page with their details in the URL.

​
GoHighLevel — Redirect URL format

In your GHL form settings, set the redirect URL to your checkout page and append the following URL parameters. GHL will substitute the contact’s values using merge fields: 
https://yourcheckoutpage.com/?email={{contact.email}}&name={{contact.name}}
Replace yourcheckoutpage.com with your actual checkout page domain/path. The {{contact.email}} and {{contact.name}} tokens are GHL merge fields that get replaced with the real values at submission time.
This same approach works in ClickFunnels, Webflow, and other builders — use their respective merge field or variable syntax instead of {{contact.email}}. The URL parameter names (email= and name=) must stay exactly as shown.

​
Step 4: Add the checkout embed and pre-fill script

On your checkout page, add two things in your HTML embed block: the Whop checkout embed code, and the pre-fill JavaScript snippet. The script must appear directly after the embed code. This setup pre-fills email and name from the URL parameters passed by your form. Checkout embed code Paste your generated embed code. It should look similar to this, with your actual Plan ID: 
<div
  data-whop-checkout-prefill-email="example@domain.com"
  data-whop-checkout-plan-id="plan_XXXXXXXXX"
></div>
Pre-fill script Paste this script directly below the embed code in the same HTML block. It reads the URL parameters and injects them into the checkout embed: 
<script>
  const params = new URLSearchParams(location.search);
  const email = params.get('email');
  const name = params.get('name');
  const checkout = document.querySelector('.whop-checkout-embed');
  if (email) checkout.setAttribute('data-whop-checkout-prefill-email', email);
  if (name) checkout.setAttribute('data-whop-checkout-prefill-name', name);
</script>
The script reads ?email= and ?name= from the URL, finds the checkout embed element, and sets the pre-fill attributes dynamically. This runs before the checkout renders, so the fields appear pre-filled to the customer.

​
Pre-fill attribute reference

The Whop checkout embed supports the following data attributes for pre-filling customer information. All attributes are set on the main checkout div element.
AttributeRequiredDescription
data-whop-checkout-plan-idRequiredYour Whop Plan ID (e.g. plan_XXXXXXXXX). Required on every embed.
data-whop-checkout-prefill-emailRecommendedCustomer’s email address.
data-whop-checkout-prefill-nameRecommendedCustomer’s full name.
data-whop-checkout-prefill-address-line1OptionalStreet address line 1.
data-whop-checkout-prefill-address-line2OptionalStreet address line 2 (apartment, suite, etc.).
data-whop-checkout-prefill-address-cityOptionalCity.
data-whop-checkout-prefill-address-stateOptionalState (2-letter code, e.g. CA).
data-whop-checkout-prefill-address-postal-codeOptionalZIP or postal code.
data-whop-checkout-prefill-address-countryOptionalCountry (2-letter code, e.g. US).

​
Full embed example — with address pre-fill

If you want to pre-fill address fields (e.g. when billing and shipping match), use the full attribute set: 
<div
  data-whop-checkout-prefill-name="John Doe"
  data-whop-checkout-prefill-email="john@example.com"
  data-whop-checkout-prefill-address-country="US"
  data-whop-checkout-prefill-address-line1="123 Main St"
  data-whop-checkout-prefill-address-line2=""
  data-whop-checkout-prefill-address-city="Any Town"
  data-whop-checkout-prefill-address-state="CA"
  data-whop-checkout-prefill-address-postal-code="12345"
  data-whop-checkout-plan-id="plan_XXXXXXXXX"
></div>

​
Frequently asked questions

Does this work with platforms other than GoHighLevel?
  • Yes. This works with any platform that can embed custom HTML/JavaScript — ClickFunnels, Webflow, WordPress, custom pages, and more.
  • The only difference is how you pass the URL parameters from your form. Use your platform’s merge fields or variables to append ?email=...&name=... to the redirect URL.
What if the URL parameters aren’t being read?
  • Make sure the script is placed directly after the embed code in the same HTML block.
  • Verify that your form redirect URL is correctly appending the parameters — submit the form and check the URL on the checkout page to confirm ?email= and ?name= are present.
Should I pre-fill the billing address?
  • Generally, no. Whop always collects billing address at checkout, and your customer’s mailing address from a previous form step may differ from their billing address.
  • Pre-filling this field can cause confusion or checkout friction. Stick to email and name for the smoothest experience.
Where do I find my Plan ID?
  • In your Whop dashboard, go to Checkout Links.
  • Find the checkout link you want to use, click the three-dot menu, and select Details.
  • Your Plan ID is displayed there (format: plan_XXXXXXXXX).
Can I test this before publishing?
  • Yes. After setting up both pages, visit your checkout page URL with test parameters appended, for example: https://yourcheckoutpage.com/?email=test@test.com&name=Test+User.
  • The checkout should render with those fields pre-filled.

​
Questions?

Contact your Whop account team or visit whop.com.