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

This API is experimental and subject to change while Clerk Billing is under Beta. To mitigate potential disruptions, we recommend pinning your SDK and clerk-js package versions.

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: { ... } }} />.

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 active organization is set.

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

import { SignedIn } from '@clerk/nextjs'
import { SubscriptionDetailsButton } from '@clerk/nextjs/experimental'

export default function BillingPage() {
  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>
  )
}
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
billing.vue
<script setup lang="ts">
import { SignedIn } from '@clerk/vue'
import { SubscriptionDetailsButton } from '@clerk/vue/experimental'
</script>

<template>
  <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 class="custom-button">Manage Subscription</button>
    </SubscriptionDetailsButton>
  </SignedIn>
</template>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on