Skip to main content
This feature is coming soon. The documentation and API endpoints are subject to change.

​
Server side implementation

To use the embedded component, you need to generate an access token for the sub-merchant’s company. This token grants temporary access to the payout portal for that specific company. 
// lib/get-token.ts
"use server";

import { whop } from "./sdk";

export async function getToken(companyId: string) {
  const tokenResponse = await whop.accessTokens
    .create({
      company_id: companyId,
    })
    .catch(() => {
      return null;
    });
  if (!tokenResponse) {
    return null;
  }
  return tokenResponse.token;
}

Create Access Token API

See the full API reference for generating access tokens and all available parameters

​
Client side setup

npm install @whop/embedded-components-react-js @whop/embedded-components-vanilla-js

​
Client side implementation

"use client";

import type { WhopElementsOptions } from "@whop/embedded-components-vanilla-js/types";

import {
  Elements,
  PayoutsSession,
  WithdrawButtonElement,
} from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";
import { getToken } from "@/lib/get-token";

const elements = loadWhopElements();

const appearance: WhopElementsOptions["appearance"] = {
  classes: {
    ".Button": { height: "40px", "border-radius": "8px" },
    ".Button:disabled": { "background-color": "gray" },
    ".Container": { "border-radius": "12px" },
  },
};

export async function BalancePage({ companyId }: { companyId: string }) {
  return (
    <Elements appearance={appearance} elements={elements}>
	 	// token can be either an actual string, a promise, or a function that resolves to a promise or string
      <PayoutsSession token={() => getToken(companyId)} currency="USD">
        <section
          style={{ display: "flex", flexDirection: "column", gap: "8px" }}
        >
          <div style={{ height: "200px", width: "100%" }}>
            <BalanceElement fallback={<div>Loading...</div>} />
          </div>
          <div style={{ height: "40px", width: "100%", position: "relative" }}>
            <WithdrawButtonElement fallback={<div>Loading...</div>} />
          </div>
        </section>
      </PayoutsSession>
    </Elements>
  );
}

Pay sub-merchants

Transfer funds to sub-merchant accounts

Enroll sub-merchants

Learn how to enroll sub-merchants on your platform