Skip to main content
Docs

<SubscriptionDetailsButton /> component

The <SubscriptionDetailsButton /> component renders a button that opens the subscription details drawer.

The <SubscriptionDetailsButton /> component renders a button that opens the subscription details drawer when selected, allowing users to view and manage their subscription details, whether for their personal account or organization. It must be wrapped inside a <SignedIn /> component to ensure the user is authenticated.

Warning

Billing is currently in Beta and its APIs are experimental and may undergo breaking changes. To mitigate potential disruptions, we recommend pinning your SDK and clerk-js package versions.

Usage

<SubscriptionDetailsButton /> must be wrapped inside a <SignedIn /> component to ensure the user is authenticated.

<>
  // ❌ This will throw an error
  <SubscriptionDetailsButton />
  // ✅ Correct usage
  <SignedIn>
    <SubscriptionDetailsButton />
  </SignedIn>
</>

<SubscriptionDetailsButton /> will throw an error if the for prop is set to 'organization' and no is set.

<>
  // ❌ This will throw an error if no organization is active
  <SubscriptionDetailsButton for="organization" />
  // ✅ Correct usage
  {auth.orgId ? <SubscriptionDetailsButton for="organization" /> : null}
</>

Examples

src/components/BillingSection.tsx
import { SignedIn } from '@clerk/clerk-react'
import { SubscriptionDetailsButton } from '@clerk/clerk-react/experimental'

const BillingSection = () => {
  return (
    <SignedIn>
      {/* Basic usage */}
      <SubscriptionDetailsButton />

      {/* Customizes the appearance of the subscription details drawer */}
      <SubscriptionDetailsButton
        subscriptionDetailsProps={{
          appearance: {
            /* custom theme */
          },
        }}
      />

      {/* Custom button */}
      <SubscriptionDetailsButton onSubscriptionCancel={() => console.log('Subscription canceled')}>
        <button className="custom-button">
          <Icon name="subscription" />
          Manage Subscription
        </button>
      </SubscriptionDetailsButton>
    </SignedIn>
  )
}

export default BillingSection

Properties

All props are optional.

  • Name
    for?
    Type
    'user' | 'organization'
    Description

    Determines whether to show subscription details for the current user or organization. Defaults to 'user'.

  • Name
    children?
    Type
    React.ReactNode
    Description

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

  • Name
    onSubscriptionCancel?
    Type
    () => void
    Description

    A callback function that is called when a subscription is cancelled.

  • Name
    subscriptionDetailsProps?
    Type
    { appearance: Appearance }
    Description

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

    • appearance: an object used to style your components. For example: <SubscriptionDetailsButton subscriptionDetailsProps={{ appearance: { ... } }} />.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on