Email login integration

If you have an existing SaaS or are building a new one, you can use Whop to direct your customers to pay and let them manage their membership. To integrate, all you have to do is adjust your User table to include the whop_user_id and whop_username columns.
ColumnTypeDescription
whop_user_idstringUnique identifier for the user provided by Whop.
whop_usernamestringThe user’s Whop username, helpful for display and logging.
Note Use the Whop SDK’s access.checkIfUserHasAccessToAccessPass method (shown in Step 6) by passing the whop_user_id and the relevant access pass (product) ID to determine whether the user should be allowed to access your software. If you would prefer to not have manage your own user table or even a database, consider building a Whop app here.

Get your SaaS live on Whop:

1

Create your whop

Head over to whop.com/sell:
  • Choose a name for your SaaS
  • Select your custom URL
  • Complete the basic setup
Your whop is now live and ready to customize.Launch your SaaS
2

Create a product

  • Go to your Dashboard
  • Go to Products
  • Click Add Product
3

Add checkout link to your website

There are two primary ways to send customers to checkout: an embedded checkout or a hosted checkout link.

Embedded checkout

Follow these two steps to embed the checkout on your page. First, include the Whop Checkout loader script:
<!-- Step 1 – Include the Whop Checkout loader -->
<script
  async
  defer
  src="https://js.whop.com/static/checkout/loader.js"
></script>
Then, add the checkout element where you want it to appear. Replace plan_XXXXXXXXX with your actual plan ID from the dashboard.
<!-- Step 2 – Add the checkout element -->
<div data-whop-checkout-plan-id="plan_XXXXXXXXX"></div>
Alternatively, you can link customers to Whop’s hosted checkout page. You can get this link from your dashboard or generate one programmatically and link to the checkoutUrl it returns (as shown in Step 6).
<!-- Hosted checkout link -->
<a href="https://whop.com/checkout/plan_xxxxxxxxx" target="_blank" rel="noopener">
  Buy now
</a>
If you would like to programmatically create a checkout session, you can do so with the following code:
import { whopSdk } from "~/lib/whop-sdk";

export async function createCheckoutSession(experienceId: string) {
  const checkoutSession = await whopSdk.payments.createCheckoutSession({
    planId: process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID!,
    metadata: {
      customKey: "customValue",
    },
  });

  return checkoutSession;
}
4

Add an app and get API keys

Go to your dashboard and add app
5

Subscribe to webhooks

Go to the dashboard section and add a webhook.
6

Check for access programmatically

import { WhopServerSdk } from "@whop/api";

// Instantiate the Whop SDK client.
// 👉 Replace the ENV vars below with the ones from your Whop dashboard.
export const whopSdk = WhopServerSdk({
  // Required: your App ID ("App Settings" → App ID)
  appId: process.env.NEXT_PUBLIC_WHOP_APP_ID!,

  // Required: the API key you generated in "API Keys"
  appApiKey: process.env.WHOP_API_KEY!,
});
7

Give users a way to manage their membership

You can link users here to manage their membership: https://whop.com/@me/settings/memberships/.They can simply login with the same email and they use to access your SaaS without a password.
8

Design your store page and list on marketplace

Your store page is where people can learn about your offer. Click your whop name in the top left, then select Design store page to open the editor. Click Edit details to customize:
  • Choose a clear name and headline: Make it immediately obvious what your community offers and who it’s for. Examples: “Marketing professionals sharing strategies and insights” or “Fitness enthusiasts building accountability and motivation”
  • Write a compelling description: Focus on the value members receive and how your community will help them achieve their goals. Highlight specific benefits like exclusive content, expert guidance, peer connections, and ongoing support
  • Upload a logo: Add a clean, simple logo to your store page
  • Add gallery images or video: Images of events, member success stories, or a brief welcome video help potential members get to know you and what to expect when they join
  • Select the appropriate category: This helps people discover your community when browsing Whop
Community store page

License Key Integration

After purchasing a product, users are granted a unique license key that they can use to access and unlock their purchased product. As a developer, you can integrate this feature into your own software by requiring your users to enter their license key before being granted access to the product, or gate certain features of the application behind validating the current license key.

Getting started

  1. Add the software app to your whop here.
  2. Click configure in new software app you added
  3. Add software name and download link

Validating license keys via API

If the metadata on the license key is empty (for example, the key is not yet bound to a computer), Whop’s API returns a success response with status code 201. This means that the license key is valid and can be used to access the product. Internally, the API sets the metadata of the license key that was passed in the API call.
import axios from "axios";

const setMetadata = async () => {
  try {
    const response = await axios.post(
      `https://api.whop.com/api/v2/memberships/${licenseKey}/validate_license`,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
        body: {
          metadata: {
            key: "value", // This is initially setting the key/value pair if it doesn't already exist
          },
        },
      }
    );
    return response.data;
  } catch (error) {
    throw error;
  }
};

export default setMetadata;

Validating Matching Metadata

If the metadata on the license key is already set, and it matches the metadata that your software sends to Whop’s API, then a success response is returned. This means that the license key is valid and can be used to access the product. Whop’s API checks every key value pair in the metadata, ensuring that all fields contain the same data. Below is example metadata that would return a successful response if you wanted to store the users hardware ID (to only allow one session per user): Client-side
{
  "hwid": "098H52ST479QE053V2"
}
Server-side
{
  "hwid": "098H52ST479QE053V2"
}

Validating Mismatched Metadata

If the metadata on the license key is set, but the metadata fields do not match the metadata that your software sends to Whop’s API, a failure response with status code 400 is returned. This means that the license key is not valid and cannot be used to access the product. Below is example metadata that would return this error. Client-side
{
  "hwid": "30294GLDKJ54F0SLKF"
}
Server-side
{
  "hwid": "098H52ST479QE053V2"
}

Removing Metadata

Users can reset their key’s metadata by going to their orders - but to programatically reset their license, you’ll need to send a POST request to our memberships endpoint with an empty metadata body to reset it.

Next steps

Add apps to your whop

Add apps to let your users learn how to use your software, chat with eachother, and even order merch.