PlanCard

PlanCard renders a single plan with its price, the lines read from the plan and a button, for when you lay out your pricing page yourself instead of using PricingTable. When to use

A custom pricing grid, carousel or comparison page.
A “recommended plan” box next to other content.
An upgrade prompt that shows the plan the customer would move to.

PlanCard for the Pro plan with its price, three lines and a Get Started button, light theme

Importing PlanCard

import {
  PlanCard,
  type CreateCheckoutInput,
  type PricingPlan,
} from '@nozle-js/react'

Rendering PlanCard

Pass a plan and an onSelect handler; the card calls it with the plan code and return URL when the “Get Started” button is clicked:

components/pro-card.tsx

export function ProCard({ plan, currentPlanCode }: { plan: PricingPlan; currentPlanCode: string }) {
  const select = ({ planCode, returnUrl }: CreateCheckoutInput) => {
    window.location.assign(`/checkout?plan=${planCode}&return=${encodeURIComponent(returnUrl)}`)
  }
  return (
    <PlanCard
      plan={plan}
      isCurrent={currentPlanCode === plan.code}
      returnUrl="https://app.example.com/settings/billing"
      onSelect={select}
    />
  )
}

The card shows the name, description, price with its interval and the plan’s lines from planFeatures. The price is formatted in the plan’s currency, without decimals for whole amounts ($29, $14.99). The interval reads month, year, week, quarter or 6 months; other intervals show as sent. PlanCard does not fetch anything and does not show Powered by Nozle.

Data

The card needs one plan in the PricingPlan shape the public catalog returns:

const pro: PricingPlan = {
  code: 'pro',
  name: 'Pro',
  amount_cents: 2900,
  amount_currency: 'USD',
  interval: 'monthly',
  description: 'For growing teams',
  entitlements: [
    { feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 50000 },
    { feature_type: 'metered', code: 'seats', name: 'Seats', usage_limit: 10 },
  ],
  credit_grant_rules: [{ credit_system_code: 'ai_credits', amount: '500', interval: 'month' }],
}

export function ProCard() {
  return <PlanCard plan={pro} isCurrent={false} />
}

Live data

Read the plans with usePlans inside BillingProvider, and start checkout with useCheckoutSession, which calls the provider’s createCheckout:

import { useState } from 'react'
import { Checkout, useCheckoutSession, usePlans } from '@nozle-js/react'

export function PlanCards({ currentPlanCode }: { currentPlanCode: string }) {
  const { plans } = usePlans()
  const { fetchClientSecret } = useCheckoutSession()
  const [clientSecret, setClientSecret] = useState<string | null>(null)

  if (clientSecret) {
    return <Checkout clientSecret={clientSecret} publishableKey="pk_live_stripe..." />
  }
  return plans.map((plan) => (
    <PlanCard
      key={plan.code}
      plan={plan}
      isCurrent={plan.code === currentPlanCode}
      onSelect={({ planCode, returnUrl }) => void fetchClientSecret(planCode, returnUrl).then(setClientSecret)}
    />
  ))
}

Examples

Current plan

With isCurrent, the card gets a primary-colour border, aria-current="true" and a disabled “Current Plan” button.

export function FreeCard({ plan }: { plan: PricingPlan }) {
  return <PlanCard plan={plan} isCurrent onSelect={() => {}} />
}

Panel layout

The themes nozle and nozleDark use the panel card layout: the name in a header band, with a badge that reads “Active” on the current plan.

import { nozle } from '@nozle-js/react/themes'

export function ProCard({ plan }: { plan: PricingPlan }) {
  return <PlanCard plan={plan} isCurrent={false} onSelect={() => {}} appearance={{ theme: nozle }} />
}

Custom lines

features replaces the lines read from the plan.

export function ProCard({ plan }: { plan: PricingPlan }) {
  return <PlanCard plan={plan} isCurrent={false} features={['Unlimited projects', 'Priority support']} />
}

API reference

PricingPlan

required

The plan to show: code, name, amount_cents, amount_currency, interval, and optional description, entitlements, credit_grant_rules, charges.

boolean

required

Shows the card as the customer’s plan: a primary-colour border, aria-current="true", and a disabled “Current Plan” button.

string[]

Replaces the lines read from the plan. Defaults to the lines from planFeatures(plan).

(input: CreateCheckoutInput) => void

Fires when the “Get Started” button is clicked and receives { planCode, returnUrl }. Without it the card has no button.

string

The returnUrl passed to onSelect. Defaults to the current URL.

Appearance

Theme, variables and element overrides. Defaults to the provider’s. See Appearance.

States

State	What shows
Not current	The “Get Started” button, when `onSelect` is set.
Current plan	A primary-colour border and a disabled “Current Plan” button; in the panel layout, the “Active” badge.
No `onSelect`	The card without a button.

The root has data-testid="plan-card-<code>".

Appearance

Element keys

planCard (root), planCard__name, planCard__description, planCard__price, planCard__features, planCard__feature, planCard__cta. In the panel layout also planCard__header and planCard__badge, which reads “Active” on the current plan.Style them with appearance.elements. See Elements.

PricingTable

All plans with checkout built in.

PlanComparison

The plans side by side, feature by feature.

CheckoutButton

A button that starts checkout for one plan.

PlanBadge

The plan name as a small badge.

Setup

Components

Billing

Entitlements

Importing PlanCard

Rendering PlanCard

Data

Live data

Examples

Current plan

Panel layout

Custom lines

API reference

States

Appearance

PricingTable

PlanComparison

CheckoutButton

PlanBadge

​Importing PlanCard

​Rendering PlanCard

​Data

​Live data

​Examples

​Current plan

​Panel layout

​Custom lines

​API reference

​States

​Appearance

​Related

PricingTable

PlanComparison

CheckoutButton

PlanBadge

Importing PlanCard

Rendering PlanCard

Data

Live data

Examples

Current plan

Panel layout

Custom lines

API reference

States

Appearance

Related