React setup
Step 1: Install the package
Step 2: Add the checkout element
Keep that Plan ID handy. You’ll need to paste it into your website code, so
save it somewhere you can find it.
Step 3: (optional) Configure - Programmatic controls
To get access to the controls of the checkout embed, you can use theref
prop.
submit
To submit checkout programmatically, you can use the submit
method on the checkout element.
getEmail
To get the email of the user who is checking out, you can use the getEmail
method on the checkout element.
setEmail
To set the email of the user who is checking out, you can use the setEmail
method on the checkout element.
getAddress
To get the address of the user who is checking out, you can use the getAddress
method on the checkout element.
setAddress
To set the address of the user who is checking out, you can use the setAddress
method on the checkout element.
This method will only work if the address form is hidden. You can hide the
address form by setting the
hideAddressForm
prop to true
.Step 4: (optional) Configure - Available properties
planId
Required - The plan id you want to checkout.
theme
Optional - The theme you want to use for the checkout.
Possible values are light
, dark
or system
.
sessionId
Optional - The session id to use for the checkout.
This can be used to attach metadata to a checkout by first creating a session through the API and then passing the session id to the checkout element.
affiliateCode
Optional - The affiliate code to use for the checkout.
hidePrice
Optional - Turn on to hide the price in the embedded checkout form.
Defaults to false
hideTermsAndConditions
Optional - Set to true
to hide the terms and conditions in the embedded checkout form.
Defaults to false
skipRedirect
Optional - Set to true
to skip the final redirect and keep the top frame loaded.
Defaults to false
onComplete
Optional - A callback function that will be called when the checkout is complete.
This option will set
skipRedirect
to true
utm
Optional - The UTM parameters to add to the checkout URL.
Note - The keys must start with utm_
fallback
Optional - The fallback content to show while the checkout is loading.
prefill
Optional - The prefill options to apply to the checkout embed.
Used to prefill the email or address in the embedded checkout form.
This setting can be helpful when integrating the embed into a funnel that collects the email prior to payment already.
hideEmail
Optional - Set to true
to hide the email input in the embedded checkout form. Make sure to display the users email in the parent page when setting this attribute.
Defaults to false
Use this in conjunction with the
prefill
attribute or the setEmail
method
to control the email input.disableEmail
Optional - Set to true
to disable the email input in the embedded checkout form.
Defaults to false
Use this in conjunction with the
prefill
attribute or the setEmail
method
to control the email input.hideAddressForm
Optional - Set to true
to hide the address form in the embedded checkout form.
Defaults to false
Use this in conjunction with the
setAddress
method to control the address
input.onAddressValidationError
Optional - A callback function that will be called when the address validation error occurs.
This method will only work if the address form is hidden. You can hide the
address form by setting the
hideAddressForm
prop to true
.Full example
Other websites
Step 1: Add the script tag
To embed checkout, you need to add the following script tag into the<head>
of your page:
Step 2: Add the checkout element
To create a checkout element, you need to include the following attribute on an element in your page:Step 3: (optional) Configure - Programmatic controls
First, attach anid
to the checkout container:
submit
To submit checkout programmatically, you can use the submit
method on the checkout element.
getEmail
To get the email of the user who is checking out, you can use the getEmail
method on the checkout element.
setEmail
To set the email of the user who is checking out, you can use the setEmail
method on the checkout element.
getAddress
To get the address of the user who is checking out, you can use the getAddress
method on the checkout element.
setAddress
To set the address of the user who is checking out, you can use the setAddress
method on the checkout element.
This method will only work if the address form is hidden. You can hide the
address form by setting the
data-whop-checkout-hide-address
prop to true
.Step 4: (optional) Configure - Available attributes
data-whop-checkout-plan-id
Required - The plan id you want to checkout.
To get your plan id, you need to first create a plan in the Manage Pricing section on your whop page.
data-whop-checkout-theme
Optional - The theme you want to use for the checkout.
Possible values are light
, dark
or system
.
data-whop-checkout-theme-accent-color
Optional - The accent color to apply to the checkout embed
Possible values are
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
cyan
teal
jade
green
grass
brown
blue
orange
indigo
sky
mint
yellow
amber
lime
lemon
magenta
gold
bronze
gray
data-whop-checkout-session
Optional - The session id to use for the checkout.
This can be used to attach metadata to a checkout by first creating a session through the API and then passing the session id to the checkout element.
data-whop-checkout-affiliate-code
Optional - The affiliate code to use for the checkout.
data-whop-checkout-hide-price
Optional - Set to true
to hide the price in the embedded checkout form.
Defaults to false
data-whop-checkout-hide-submit-button
Optional - Set to true
to hide the submit button in the embedded checkout form.
Defaults to false
When using this Option, you will need to programmatically submit
the checkout form.
data-whop-checkout-hide-tos
Optional - Set to true
to hide the terms and conditions in the embedded checkout form.
Defaults to false
data-whop-checkout-skip-redirect
Optional - Set to true
to skip the final redirect and keep the top frame loaded.
Defaults to false
data-whop-checkout-on-complete
Optional - The callback to call when the checkout succeeds
This option will set
data-whop-checkout-skip-redirect
to true
data-whop-checkout-on-state-change
Optional - The callback to call when state of the checkout changes
This can be used when programmatically controlling the submit of the checkout embed.
data-whop-checkout-skip-utm
By default any utm params from the main page will be forwarded to the checkout embed.
Optional - Set to true
to prevent the automatic forwarding of utm parameters
Defaults to false
data-whop-checkout-prefill-*
Used to prefill the email or address in the embedded checkout form. This setting can be helpful when integrating the embed into a funnel that collects the email prior to payment already.
data-whop-checkout-hide-email
Optional - Set to true
to hide the email input in the embedded checkout form. Make sure to display the users email in the parent page when setting this attribute.
Defaults to false
Use this in conjunction with the
data-whop-checkout-prefill-email
attribute
or the setEmail
method to control the email input.data-whop-checkout-disable-email
Optional - Set to true
to disable the email input in the embedded checkout form.
Defaults to false
Use this in conjunction with the
data-whop-checkout-prefill-email
attribute
or the setEmail
method to control the email input.data-whop-checkout-hide-address
Optional - Set to true
to hide the address form in the embedded checkout form.
Defaults to false
This method will only work if the address form is hidden. You can hide the
address form by setting the
data-whop-checkout-hide-address
prop to true
.data-whop-checkout-on-address-validation-error
Optional - The callback to call when the address validation error occurs.
This method will only work if the address form is hidden. You can hide the
address form by setting the
data-whop-checkout-hide-address
prop to true
.Full example
FAQs
Why is my checkout not loading?
Why is my checkout not loading?
Make sure you’ve correctly replaced
plan_XXXXXXXXX
or PLAN_ID_HERE
in the code snippets with your actual Plan ID from the Whop dashboard. Also verify that the script tag is properly loaded in the <head>
section if using HTML/JS.Where do I find my Plan ID?
Where do I find my Plan ID?
Go to your Dashboard > Checkout links > Click the three dots (⋮) on your pricing option > Hover over Details > Click the ID (starts with
plan_
) to copy it.Can I embed multiple checkouts on the same page?
Can I embed multiple checkouts on the same page?
Yes, you can add multiple checkout embeds with different Plan IDs. Each embed operates independently.
How do I change the checkout theme?
How do I change the checkout theme?
For React: add
theme="dark"
or theme="light"
as a property. For HTML: add data-whop-checkout-theme="dark"
to your div element.Can I hide the price in the embedded checkout?
Can I hide the price in the embedded checkout?
Yes, add
hidePrice={true}
in React or data-whop-checkout-hide-price="true"
in HTML to hide the price display.What happens after a customer completes checkout?
What happens after a customer completes checkout?
By default, customers are redirected to your whop. You can customize this by setting a custom redirect URL or skipping the redirect entirely.
How do I prevent the redirect after checkout?
How do I prevent the redirect after checkout?
Use
skipRedirect={true}
in React or data-whop-checkout-skip-redirect="true"
in HTML to keep users on the same page.Is the embedded checkout mobile-responsive?
Is the embedded checkout mobile-responsive?
Yes, the checkout automatically adapts to different screen sizes and devices.
Can I customize the checkout's appearance with CSS?
Can I customize the checkout's appearance with CSS?
You can style the wrapper using the
.whop-checkout-wrapper iframe
CSS class, but the checkout content itself cannot be modified for security reasons.Can I pre-fill customer information?
Can I pre-fill customer information?
Yes, use
prefill={{ email: "customer@example.com" }}
in React or data-whop-checkout-prefill-email="customer@example.com"
in HTML.