Skip to main content

<PlanDetailsButton /> component

The <PlanDetailsButton /> component renders a button that opens the Plan details drawer.

The <PlanDetailsButton /> component renders a button that opens the Plan details drawer, allowing users to view detailed information about a specific Plan, including pricing, Features, and other Plan-specific details.

Important

Billing regularly introduces new features and UI changes to Clerk's components. If you'd like to remain on a specific version of Clerk's components or SDK, you can follow the steps in the pinning documentation.

Usage

<PlanDetailsButton /> preserves any click handlers attached to custom button elements, while maintaining the Plan details drawer functionality.

<PlanDetailsButton planId="cplan_xxx">
  <button onClick={() => console.log('Button clicked')} className="custom-button">
    View Plan
  </button>
</PlanDetailsButton>

<PlanDetailsButton /> supports rendering the Plan details drawer in a custom portal container.

const portalRoot = document.getElementById('custom-portal')

<PlanDetailsButton
  planId="cplan_xxx"
  planDetailsProps={{
    portalId: 'custom-portal',
    portalRoot: portalRoot,
  }}
/>

Example

src/components/PricingSection.tsx
import { PlanDetailsButton } from '@clerk/react/experimental'

const PricingSection = () => {
  return (
    <div>
      {/* Basic usage with Plan ID */}
      <PlanDetailsButton planId="cplan_xxx" />

      {/* Customizes the appearance of the Plan details drawer */}
      <PlanDetailsButton
        planId="cplan_xxx"
        initialPlanPeriod="month"
        planDetailsProps={{
          appearance: {
            /* custom theme */
          },
        }}
      />

      {/* Custom button */}
      <PlanDetailsButton planId="cplan_xxx">
        <button className="custom-button">
          <Icon name="info" />
          View Plan Features
        </button>
      </PlanDetailsButton>
    </div>
  )
}

export default PricingSection

Properties

  • Name
    children?
    Type
    React.ReactNode
    Description

    Optional custom button element. If not provided, defaults to a button with the text "Plan details".

  • Name
    initialPlanPeriod?
    Type
    'month' | 'annual'
    Description

    Optional prop to set the initial billing period view when the Plan details drawer opens.

  • Name
    plan?
    Type
    BillingPlanResource
    Description

    The Plan to display details for. It is used as initial data until the Plan is fetched from the server.

  • Name
    planDetailsProps?
    Type
    { appearance?: Appearance; portalId?: string; portalRoot?: HTMLElement | null }
    Description

    Options for the Plan details drawer. Accepts the following properties:

    • appearance: an object used to style your components. For example: <PlanDetailsButton planDetailsProps={{ appearance: { ... } }} />.
    • portalId: the ID of the portal element used to render the Plan details drawer.
    • portalRoot: the HTML element in which to render the Plan details drawer.
  • Name
    planId?
    Type
    string
    Description

    The ID of the Plan to display details for. It is required if plan is not provided.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub