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.