Web Apps
Learn how to build and deploy a Next.js application that integrates with Whop’s platform
Getting Started
- Head to whop.com/dashboard
- Create a new app in your organization
- Note down your API credentials from the app details page
Set Up Your Next.js Project
- Create a new Next.js project with TypeScript and Tailwind CSS:
- Install the required dependencies:
Configure Environment Variables
Create a .env.local
file with the following variables:
Setting Up the Whop Integration
In your Whop dashboard, set up your app’s configuration:
- Set the “Base Domain” to your production domain (e.g.,
https://your-app.com
) - Configure the “App Path” (e.g.,
/experience/[experienceId]
) - Enable localhost mode for development
Initialize the Whop API Client
Create a new file lib/whop-api.ts
:
Set Up Development Environment
- Add the dev proxy script to your
package.json
:
- Run the development environment:
The whop-proxy
will by default run the npm dev
script with a custom PORT
environment variable.
Ensure your app correctly responds to this env var.
If you need to customise this behaviour, you can use the following options:
proxyPort
: which port the proxy should start onupstreamPort
: which port the upstream server should listen onnpmCommand
: override which npm command to run. Can be"dev"
,"start"
, etc..command
: provide a custom shell command to run instead ofpnpm dev
For example:
Authenticating Users
Get user ID information anywhere you want.
Making API Requests
Here are examples of direct SDK usage:
There are many more (and growing) API methods that are all typed and ready to use.
Charge user
If you want to charge the user custom amounts, follow this payment processing flow.
Upon payment completion by the client, your will receive a webhook. (Only if you configured webhooks in the dashboard).
Set Up Payment Received Webhook
Create a new API route in app/api/webhooks/whop/route.ts
:
Deployment
- Push your code to GitHub
- Set up your environment variables in your hosting platform
- Update your Whop dashboard settings:
- Verify your Base Domain
- Update webhook callback URLs
- Test the production integration
Need Help?
- Join the Developer Whop
- View the template for the above here
- Visit our SDK GitHub repository