# Whopdocumentation > To get your plan id, you need to first create a plan in the **Manage Pricing** section on your whop page. - Skill: `hk-vk/whopdocumentation` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add hk-vk/whopdocumentation` - Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/whopdocumentation/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: hk-vk (https://skillmd.com/u/hk-vk) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/hk-vk/whopdocumentation --- # WithdrawalsElement > To get your plan id, you need to first create a plan in the **Manage Pricing** section on your whop page. To get your plan id, you need to first create a plan in the **Manage Pricing** section on your whop page. ## Available Resources ### MCP ### Choose your integration ### Option 1: Create a checkout link ### Option 2: Embedded checkout ### Handle payment webhooks ### Next steps ### How attribution works ### Create an affiliate ### Add commission overrides ### Manage overrides ### Manage affiliates ### Company-level affiliate settings ### Tracking earnings ### Override response fields ### Next steps ### Experience View - **Next.js** - URL: https://github.com/whopio/whop-nextjs-app-template/blob/main/app/experiences/%5BexperienceId%5D/page.tsx - **React Native** - URL: https://github.com/whopio/whop-sdk-ts/blob/main/packages/create-react-native/template/src/views/experience-view.tsx ### Dashboard View - **Next.js** - URL: https://github.com/whopio/whop-nextjs-app-template/blob/main/app/dashboard/%5BcompanyId%5D/page.tsx - **React Native** - URL: https://github.com/whopio/whop-sdk-ts/blob/main/packages/create-react-native/template/src/views/dashboard-view.tsx ### Choosing the right views ### Verify the iframe user token - **"origin rule"** - URL: https://developers.cloudflare.com/rules/origin-rules/features/#dns-record - **rewrite** - URL: https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites ### Local setup ### Check access ### Next steps ### Initialize the SDK ### Send a message ### Read messages ### Manage channels ### React to a message ### Support channels ### Required permissions ### Next steps ### Next steps ### NextJS / Javascript app ### Standalone mode (other frameworks) ### Proxy Command Options ### Initialize the SDK ### Create a post ### Read posts ### Comment on a post ### Like a post ### Advanced features ### Required permissions ### Next steps ### Installation ### Typography ### Colors ### Dark Mode ### Breakpoints ### Icons ### Tailwind Plugin ### Common Components ### Advanced Usage ### Component Library ### Resources - **Radix UI Documentation** - URL: https://www.radix-ui.com/ - **Radix Colors** - URL: https://www.radix-ui.com/colors - **Tailwind CSS** - URL: https://tailwindcss.com/ ### Setup ### Opening External Links ### In-App Purchases ### What you'll build ### Prerequisites - **Install the WhopCheckout SDK** - URL: /developer/guides/ios/installation - **Create an API key** - URL: /developer/guides/ios/installation#step-3-create-an-api-key - **Step 5** - URL: #step-5-set-up-your-plan ### Step 1: Configure the SDK ### Step 2: Add the Apple Pay button ### Step 3: Choose a button label ### Step 4: Handle the purchase result ### Step 5: Set up your plan ### Handle fulfillment with webhooks ### Complete example ### Next steps ### What you'll build ### Prerequisites - **Install the SDK** - URL: /developer/guides/ios/installation - **Create an API key** - URL: /developer/guides/ios/installation#step-3-create-an-api-key ### Step 1: Configure the SDK ### Step 2: Display available plans ### Step 3: Handle the purchase flow ### Complete example ### Next steps ### What you'll learn ### Prerequisites - **Install the SDK** - URL: /developer/guides/ios/installation - **Configure the SDK** - URL: /developer/guides/ios/build-a-paywall#step-1-configure-the-sdk ### Check subscription status ### View active memberships ### User login and logout ### Guest purchases ### Complete example ### Reactive updates ### Next steps ### Checkout ### Types ### Apple Pay Eligibility ### Requirements ### WhopCheckout (In-App Purchases) ### WhopElements (embedded Chat, Payouts...) ### Requirements ### Next steps ### What you can build ### Related iOS SDKs ### Quick example ### Getting started ### Reference ### Requirements ### Sending to specific users ### Sending to specific team members ### Setting up your app path - **developer dashboard** - URL: https://whop.com/dashboard/developer ### Sending notifications with deep links ### Handling the route in your app ### Step 1: Create your OAuth app ### Step 2: Send users to authorize ### Step 3: Handle the callback and exchange the code ### Step 4: Use the tokens ### Step 5: Refresh tokens ### Step 6: Userinfo and revoke ### Error handling ### Request permissions ### Updating your permissions ### FAQ ### How it Works ### Getting Started - **Node.js 22** - URL: https://nodejs.org/ - **pnpm 9.15** - URL: https://pnpm.io/ ### Views ### Fetching Data ### Styling ### Navigation ### Platform-Specific Features ### In-App Purchases ### Using Third-Party Libraries ### Deploying - **app dashboard** - URL: https://whop.com/dashboard/developer ### CLI Reference ### Troubleshooting - **Using Libraries** - URL: #using-third-party-libraries ### Next Steps - **Set up authentication** - URL: /developer/guides/authentication - **Accept payments** - URL: /developer/guides/accept-payments - **Use webhooks** - URL: /developer/guides/webhooks - **SDK reference** - URL: /developer/api/getting-started ### Save a payment method ### Charge a saved payment method ### Save during checkout ### Related resources ### Set up a webhook ### Validating webhooks ### Delivery guarantees ### Available webhooks - **`payment.succeeded`**: a payment is successfully processed. - URL: /api-reference/payments/payment-succeeded - **`membership.activated`**: someone joins your community on a product. - URL: /api-reference/memberships/membership-activated - **`membership.deactivated`**: a membership goes invalid (failed payment, cancellation, or leaving). - URL: /api-reference/memberships/membership-deactivated - **`entry.created`**: someone joins a waitlist. - URL: /api-reference/entries/entry-created - **`refund.created`**: a payment is refunded. - URL: /api-reference/refunds/refund-created - **`dispute.created`**: a buyer opens a chargeback. - URL: /api-reference/disputes/dispute-created ### Next steps ### Related resources ### Direct charges ### Transfers - **Add funds to your balance** - URL: /developer/platforms/add-funds-to-your-balance - **Enroll connected accounts** - URL: /developer/platforms/enroll-connected-accounts ### Which flow should I use? ### API Reference ### Related resources ### Example ### Finish onboarding ### Getting started - **whop.com/dashboard** - URL: https://whop.com/dashboard ### Custom metadata ### API Reference ### Next steps ### API Reference ### Related resources ### Next steps ### Embedded payout portal ### Client side setup ### Client side implementation ### PayoutsSession Props ### Modal methods ### Hosted payout portal ### Related resources ### Prerequisites ### Choose a verification method ### Whop-hosted verification ### Self-hosted verification ### Troubleshooting ### Next steps ### React setup ### Other websites ### Listening for currency changes ### Apple Pay ### Platform-specific guides ### FAQs ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Examples ### Options ### Events ### Methods ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Examples ### Options ### Events ### Methods ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Shared ### Address Form ### Auto Withdraw ### Available Cash ### Balance ### Balances ### Breakdown ### Dialog ### Field ### Fieldset ### Input ### Payout Details ### Payout Method ### Pending ### Phone ### Receipt ### Reserve ### Select ### Status Banner ### Treasury ### Verify ### Withdraw ### Withdrawals ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### EmbeddableElement ### CSSValue ### CSSProps ### Classes ### Variables ### AccentColor ### Theme ### Appearance ### WhopElementsEnvironment ### WhopElementsOptions ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Installation ### Examples ### Options ### Events ### Methods ### Related Types - **WhopElementsOptions** - URL: /sdk/elements/types#whopelementsoptions - **WhopElementsEnvironment** - URL: /sdk/elements/types#whopelementsenvironment - **Appearance** - URL: /sdk/elements/types#appearance - **Theme** - URL: /sdk/elements/types#theme - **AccentColor** - URL: /sdk/elements/types#accentcolor ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ### Overview ### Usage ### Events ### Methods ### Styling ### Types ## How to Use This Skill Reference these resources when working with WithdrawalsElement.