> ## Documentation Index > Fetch the complete documentation index at: https://docs.whop.com/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Embed payout components in your application in minutes export const code = { backend: { nextjs: [{ code: `import type { NextRequest } from "next/server"; // [step:1.1:start] import Whop from "@whop/sdk"; const whop = new Whop({ apiKey: process.env.WHOP_API_KEY, }); // [step:1.1:end] export async function GET(request: NextRequest) { const companyId = request.nextUrl.searchParams.get("companyId"); if (!companyId) { return new Response(null, { status: 400 }); } // [step:1.2:start] const tokenResponse = await whop.accessTokens.create({ company_id: companyId, }); // [step:1.2:end] return Response.json({ token: tokenResponse.token }); } `, filename: "route.ts", language: "typescript" }], express: [{ code: `// [step:1.1] import Whop from "@whop/sdk"; import express from "express"; const app = express(); app.use(express.json()); // [step:1.1:start] const whop = new Whop({ apiKey: process.env.WHOP_API_KEY, }); // [step:1.1:end] app.get("/api/token", async (req, res) => { const companyId = req.query.companyId; if (!companyId) { return res.status(400).json({ error: "companyId is required" }); } // [step:1.2:start] const tokenResponse = await whop.accessTokens.create({ company_id: companyId, }); // [step:1.2:end] res.json({ token: tokenResponse.token }); }); app.listen(3000, () => console.log("Server running on port 3000")); `, filename: "server.ts", language: "typescript" }], python: [{ code: `# [step:1.1] from whop_sdk import Whop from flask import Flask, request, jsonify app = Flask(__name__) # [step:1.1] client = Whop(api_key="Company API Key") @app.route('/api/access-token', methods=['POST']) def create_access_token(): data = request.get_json() company_id = data.get('companyId') # [step:1.2:start] access_token = client.access_tokens.create( company_id=company_id ) # [step:1.2:end] return jsonify({'token': access_token.token}) `, filename: "server.py", language: "python" }] }, frontend: { react: [{ code: `// [step:2.1:start] import { BalanceElement, Elements, PayoutsSession, WithdrawButtonElement, WithdrawalsElement, } from "@whop/embedded-components-react-js"; import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.1:end] const elements = loadWhopElements(); export function PayoutPortal({ companyId }: { companyId: string }) { return ( // [step:2.2:start] fetch(\`/api/token?companyId=\${companyId}\`) .then((res) => res.json()) .then((data) => data.token) } companyId={companyId} redirectUrl="https://yourapp.com/verification-complete" > {/* [step:2.2:end] */} {/* [step:2.3] */} Loading...} /> {/* [step:2.4] */} Loading...} /> {/* [step:2.5] */} Loading...} /> ); } `, filename: "PayoutPortal.tsx", language: "tsx" }], html: [{ code: `
`, filename: "index.html", language: "html" }] } }; export const QuickStart = ({children, code, steps, title, description, platformGroups, conditionalCategories}) => { const CATEGORY_CONFIG = { frontend: { label: "Client", languages: { react: { label: "React" }, html: { label: "HTML" } } }, client: { label: "Client", languages: { react: { label: "React" }, html: { label: "Vanilla" }, swift: { label: "Swift" } } }, backend: { label: "Server", languages: { express: { label: "Express" }, nextjs: { label: "Next.js" }, python: { label: "Python" }, ruby: { label: "Ruby" }, go: { label: "Go" } } }, auth: { label: "Auth", languages: { token: { label: "Token" }, "better-auth": { label: "Better Auth" }, authjs: { label: "Auth.js" } } } }; const allCategories = Object.keys(code); const [activePlatformGroupId, setActivePlatformGroupId] = React.useState(() => platformGroups?.[0]?.id ?? null); const [selectedLanguages, setSelectedLanguages] = React.useState(() => Object.entries(code).reduce((acc, [category, languages]) => { acc[category] = Object.keys(languages)[0]; return acc; }, {})); const activePlatformGroup = platformGroups?.find(g => g.id === activePlatformGroupId); const conditionalCatNames = new Set(conditionalCategories ? Object.keys(conditionalCategories) : []); const platformCategories = activePlatformGroup ? allCategories.filter(c => activePlatformGroup.categories.includes(c)) : allCategories.filter(c => !conditionalCatNames.has(c)); const activeConditionalCats = []; const hiddenByConditional = new Set(); if (conditionalCategories) { const matchesShowWhen = cond => Object.entries(cond).every(([key, value]) => { if (!allCategories.includes(key)) return false; if (Array.isArray(value)) return value.includes(selectedLanguages[key]); return selectedLanguages[key] === value; }); for (const [cat, config] of Object.entries(conditionalCategories)) { if (!allCategories.includes(cat)) continue; const isActive = Array.isArray(config.showWhen) ? config.showWhen.some(matchesShowWhen) : matchesShowWhen(config.showWhen); if (isActive) { activeConditionalCats.push(cat); for (const hidden of config.hides || []) { hiddenByConditional.add(hidden); } } } } const selectorCategories = [...platformCategories, ...activeConditionalCats]; const matchableCategories = [...new Set([...selectorCategories, ...hiddenByConditional])]; const fileCategories = selectorCategories.filter(c => !hiddenByConditional.has(c)); const categories = fileCategories; const [selectedFileIndex, setSelectedFileIndex] = React.useState(0); const [activeSubStepKey, setActiveSubStepKey] = React.useState(null); const [isCodeContentHovered, setIsCodeContentHovered] = React.useState(false); const subStepRefs = React.useRef({}); const stepsContainerRef = React.useRef(null); const codePanelRef = React.useRef(null); const lastAutoSwitchedStep = React.useRef(null); const isClickScrolling = React.useRef(false); React.useEffect(() => { const container = stepsContainerRef.current; if (!container) return; const handleScroll = () => { if (isClickScrolling.current) return; const scrollTop = container.scrollTop; let newActiveKey = null; const keys = Object.keys(subStepRefs.current).sort((a, b) => { const [aStep, aSub] = a.split("-").map(Number); const [bStep, bSub] = b.split("-").map(Number); return aStep - bStep || aSub - bSub; }); for (let i = 0; i < keys.length; i++) { const key = keys[i]; const el = subStepRefs.current[key]; if (!el) continue; const elTop = el.offsetTop - container.offsetTop; const elHeight = el.offsetHeight; const scrollPastThreshold = elHeight * 0.15; if (scrollTop < elTop + scrollPastThreshold) { newActiveKey = key; break; } } setActiveSubStepKey(newActiveKey); }; container.addEventListener("scroll", handleScroll); return () => container.removeEventListener("scroll", handleScroll); }, [steps]); const handlePlatformGroupSelect = groupId => { setActivePlatformGroupId(groupId); setSelectedFileIndex(0); lastAutoSwitchedStep.current = null; }; const handleLanguageSelect = (category, language) => { setSelectedLanguages(prev => ({ ...prev, [category]: language })); lastAutoSwitchedStep.current = null; }; const getFiles = (category, language) => { const langCode = code[category]?.[language]; if (!langCode) return []; return Array.isArray(langCode) ? langCode : [langCode]; }; const allFiles = (() => { const raw = categories.flatMap(category => { const language = selectedLanguages[category]; return getFiles(category, language).filter(file => { if (!file.conditions) return true; return file.conditions.every(c => { if (Array.isArray(c.value)) { return c.value.includes(selectedLanguages[c.category]); } return selectedLanguages[c.category] === c.value; }); }).map(file => ({ ...file, category })); }); if (activeConditionalCats.length === 0) return raw; const result = []; const seen = new Set(); for (let i = raw.length - 1; i >= 0; i--) { if (!seen.has(raw[i].filename)) { seen.add(raw[i].filename); result.unshift(raw[i]); } } return result; })(); React.useEffect(() => { if (selectedFileIndex >= allFiles.length) { setSelectedFileIndex(0); } }, [allFiles.length]); const processedFiles = allFiles.map(file => { const code = file.code; const lines = code.split("\n"); let lineOffset = 0; const markers = []; let openMarkers = []; const filteredLines = []; const singleLinePattern = /(?:\/\/|#|\/\*|)?/; const multiLineStartPattern = /(?:\/\/|#|\/\*|)?/; const multiLineEndPattern = /(?:\/\/|#|\/\*|)?/; for (const lineIdx in lines) { const line = lines[lineIdx]; const matchesSingleLine = line.match(singleLinePattern); if (matchesSingleLine) { const currentLine = parseInt(lineIdx) - lineOffset + 1; markers.push({ step: matchesSingleLine[1], range: [currentLine, currentLine] }); lineOffset += 1; continue; } const matchesMultiLineStart = line.match(multiLineStartPattern); if (matchesMultiLineStart) { openMarkers.push({ step: matchesMultiLineStart[1], start: parseInt(lineIdx) - lineOffset + 1 }); lineOffset += 1; continue; } const matchesMultiLineEnd = line.match(multiLineEndPattern); if (matchesMultiLineEnd) { const start = [...openMarkers].reverse().find(marker => marker.step === matchesMultiLineEnd[1]); if (start) { openMarkers = openMarkers.filter(marker => marker !== start); markers.push({ step: matchesMultiLineEnd[1], range: [start.start, parseInt(lineIdx) - lineOffset] }); lineOffset += 1; continue; } } filteredLines.push(line); } return { ...file, code: filteredLines.join("\n"), markers }; }); const getActiveStepMarkerId = () => { if (!activeSubStepKey) return null; const [stepIdx, subStepIdx] = activeSubStepKey.split("-").map(Number); return `${stepIdx + 1}.${subStepIdx + 1}`; }; React.useEffect(() => { if (!activeSubStepKey || lastAutoSwitchedStep.current === activeSubStepKey) return; const stepMarkerId = getActiveStepMarkerId(); if (!stepMarkerId) return; const fileIndex = processedFiles.findIndex(file => file.markers.some(m => m.step === stepMarkerId)); if (fileIndex !== -1) { lastAutoSwitchedStep.current = activeSubStepKey; setSelectedFileIndex(fileIndex); } }, [activeSubStepKey, selectedLanguages]); React.useEffect(() => { const timer = setTimeout(() => { const container = codePanelRef.current?.querySelector('[data-component-part="code-block-root"]'); const highlightedLine = container?.querySelector(".line-highlight, .line-focus"); if (container && highlightedLine) { const lineTop = highlightedLine.offsetTop; const containerHeight = container.clientHeight; const lineHeight = highlightedLine.offsetHeight; container.scrollTo({ top: lineTop - containerHeight / 2 + lineHeight / 2, behavior: "smooth" }); } }, 50); return () => clearTimeout(timer); }, [activeSubStepKey, selectedFileIndex]); const currentFile = processedFiles[selectedFileIndex] || processedFiles[0]; const getHighlightLines = () => { if (!currentFile || !activeSubStepKey) return null; const stepMarkerId = getActiveStepMarkerId(); const stepMarkers = currentFile.markers.filter(m => m.step === stepMarkerId); if (stepMarkers.length === 0) return null; const lines = []; for (const marker of stepMarkers) { for (let i = marker.range[0]; i <= marker.range[1]; i++) { lines.push(i); } } return JSON.stringify(lines); }; const highlightLines = getHighlightLines(); const focusLines = isCodeContentHovered ? null : highlightLines; return
{platformGroups &&
Platform
{platformGroups.map(group => )}
} {selectorCategories.map(category => { const config = CATEGORY_CONFIG[category] || ({ label: category, languages: {} }); const languages = code[category]; const languageKeys = Object.keys(languages); const selectedLanguage = selectedLanguages[category]; if (languageKeys.length <= 1) return null; return
{config.label}
{languageKeys.map(language => { const langConfig = config.languages[language] || ({ label: language }); const isSelected = selectedLanguage === language; return ; })}
; })}

{title}

{description}
{(() => { let stepNumber = 0; return steps.map((step, idx) => { const resolvedSubSteps = step.subSteps.map(subStep => { if (!Array.isArray(subStep)) return subStep; return subStep.find(s => Object.entries(s.match).every(([key, value]) => matchableCategories.includes(key) && (Array.isArray(value) ? value.includes(selectedLanguages[key]) : selectedLanguages[key] === value))); }).filter(Boolean); if (resolvedSubSteps.length === 0) return null; stepNumber++; const displayNumber = stepNumber; return
{displayNumber}

{step.title}

{step.subSteps.map((subStep, subIdx) => { const subStepKey = `${idx}-${subIdx}`; const isSubStepActive = activeSubStepKey === subStepKey; const resolvedSubStep = Array.isArray(subStep) ? subStep.find(s => Object.entries(s.match).every(([key, value]) => matchableCategories.includes(key) && (Array.isArray(value) ? value.includes(selectedLanguages[key]) : selectedLanguages[key] === value))) : subStep; if (!resolvedSubStep) return null; const handleStepClick = () => { if (isSubStepActive) return; setActiveSubStepKey(subStepKey); isClickScrolling.current = true; const el = subStepRefs.current[subStepKey]; const container = stepsContainerRef.current; if (el && container) { const elTop = el.offsetTop - container.offsetTop; container.scrollTo({ top: elTop, behavior: "smooth" }); } setTimeout(() => { isClickScrolling.current = false; }, 500); }; return
subStepRefs.current[subStepKey] = el} onClick={handleStepClick} style={{ cursor: isSubStepActive ? "default" : "pointer" }}>

{resolvedSubStep.title}

{resolvedSubStep.content}
; })}
; }); })()}
{children}
{allFiles.length > 1 ?
{allFiles.map((file, index) => )}
: {currentFile?.filename || "No files"} }
setIsCodeContentHovered(true)} onMouseLeave={() => setIsCodeContentHovered(false)}> {currentFile ? {currentFile.code} : "Select a language"}
; }; export const ExamplesLink = ({href}) =>
✨ Build this with AI

Copy and paste our templates using your favorite editor

+ more
; Install the Whop SDK and initialize the client with your API key. npm install @whop/sdk express pnpm add @whop/sdk express yarn add @whop/sdk express }, { match: { backend: "nextjs" }, title: "Install the Whop SDK", content: <> Install the Whop SDK and initialize the client with your API key. npm install @whop/sdk pnpm add @whop/sdk yarn add @whop/sdk }, { match: { backend: "python" }, title: "Install the Whop SDK", content: <> Install the Whop SDK and initialize the client with your API key. pip install whop-sdk poetry add whop-sdk } ], { title: "Create an access token endpoint", content: <>

Create an API endpoint that generates access tokens for your connected accounts. This token grants temporary access to the payout portal.

The endpoint should:

}] }, { title: "Build a payouts portal on the client", subSteps: [[ { match: { frontend: "react" }, title: "Install the embedded components", content: <> Install the Whop embedded components packages for React. npm install @whop/embedded-components-react-js @whop/embedded-components-vanilla-js pnpm add @whop/embedded-components-react-js @whop/embedded-components-vanilla-js }, { match: { frontend: "html" }, title: "Add the script tag", content: <> Include the Whop Elements script in your HTML page. {``} } ], [{ match: { frontend: "react" }, title: "Create the PayoutsSession", content: <>

Wrap your payout components with Elements and PayoutsSession. The session handles authentication using the token from your server endpoint.

}, { match: { frontend: "html" }, title: "Create the PayoutsSession", content: <>

Initialize the elements and create a payout session. The session authenticates using the token from your server endpoint.

} ], { title: "Add the BalanceElement", content: <> Display the connected account's current balance. This shows how much money is available for withdrawal. }, { title: "Add the WithdrawButtonElement", content: <> Add a button that allows users to initiate withdrawals. This opens a modal where users can enter the amount and confirm the withdrawal. }, { title: "Add the WithdrawalsElement", content: <> Display a list of past withdrawals with their status. This helps users track their payout history. }] }]} title="Embed payout components" description={<> Allow your connected accounts to manage their own payouts through an embedded portal. This guide shows you how to set up the server-side token generation and client-side components. } > ### Congratulations! You've successfully embedded the payout components in your application. ## Next steps Customize the payout portal with additional configuration options like custom styling and event callbacks. Skip embedding entirely and redirect users to a Whop-hosted payout portal. Programmatically trigger payouts, manage KYC verification, and control payout methods via the API. Learn how to create and manage Company objects for your connected accounts.