Skip to main content

<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 or Organization. It must be wrapped inside a <Show when="signed-in"> component to ensure the user is authenticated.

Important

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

Usage

<SubscriptionDetailsButton /> must be wrapped inside a <Show when="signed-in"> component to ensure the user is authenticated.

<>
  // ❌ This will throw an error
  <SubscriptionDetailsButton />
  // ✅ Correct usage
  <Show when="signed-in">
    <SubscriptionDetailsButton />
  </Show>
</>

<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 { Show } from '@browser/react'
import { SubscriptionDetailsButton } from '@browser/react/experimental'

const BillingSection = () => {
  return (
    <Show when="signed-in">
      {/* 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>
    </Show>
  )
}

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

    A 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?

Last updated on

GitHubEdit on GitHub