Embeddable Components - Whop

Checkout Embed

Accept payments directly in your app with an embedded checkout form. Supports credit cards, Apple Pay, Google Pay, and more.

Plan ID

Create a Checkout Configuration

Set up a plan with pricing, currency, and product details to preview the embedded checkout in action.

Installation

$ npm install @whop/checkout

Usage

import { WhopCheckoutEmbed } from "@whop/checkout/react";

export default function Checkout() {
  return (
    <WhopCheckoutEmbed
      planId="plan_XXXXXXXXX"
      // Or use a checkout session for custom payment methods:
      // sessionId="ch_XXXXXXXXXXXXXXX"
      theme="light"
      skipRedirect
      onComplete={(planId, receiptId) => {
        console.log("Payment complete!", { planId, receiptId });
      }}
      onStateChange={(state) => {
        console.log("Checkout state:", state);
      }}
    />
  );
}