āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/billing/subscription-details-button ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: "<SubscriptionDetailsButton /> component"
description: "Clerk's <SubscriptionDetailsButton /> component renders a button that opens the subscription details drawer."
sdk: react, nextjs, vue
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.
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}
</>
Examples
<If sdk="nextjs"> ```tsx {{ filename: '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>
)
}
</If>
<If sdk="react">
```tsx {{ filename: '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
<!-- 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>
Properties
All props are optional.
<Properties> - `for?` - `'user' | 'organization'`Determines whether to show subscription details for the current user or organization. Defaults to 'user'.
children?React.ReactNode
Optional custom button element. If not provided, defaults to a button with the text "Subscription details".
onSubscriptionCancel?() => void
A callback function that is called when a subscription is cancelled.
subscriptionDetailsProps?{ appearance: Appearance }
Options for the subscription details drawer. Accepts the following properties:
appearance: an object used to style your components. For example:<SubscriptionDetailsButton subscriptionDetailsProps={{ appearance: { ... } }} />. </Properties>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā