Components

@nozle-js/react has ready-made components for pricing pages, checkout, plan changes, billing settings, usage, credits and feature gates. Each component page lists every option, shows the component in all six themes, and explains how to feed it live data.

Where components get their data

Source	What it gives	Components
Props you pass	Anything you already have	All components; most take their data only from props
`BillingProvider` with `publishableKey`	The public plan catalog and the “Powered by Nozle” answer	`PricingTable` without `plans`, `PlanChangeControl` plan details, `CurrentPlan` limits
`BillingProvider` with `createCheckout`	Checkout through your merchant route	`PricingTable`, `CheckoutButton`, `UpgradeButton`, `UpgradeModal`
`BillingProvider` with `billingEndpoint`	The signed-in customer’s subscription, entitlements, credits and usage, served by `createBillingHandler`	`CurrentPlan` without `subscription`, and the customer hooks you pass into the other components
Your merchant callbacks	Plan changes, cancellation and the portal session	`PlanChangeControl`, `CancellationControl`, `BillingPortal`

The browser never holds a secret key. Customer data reaches the components through your backend: createBillingHandler, your merchant routes, or the customer-scoped portal session. See Installation and Provider and hooks.

Pricing

Component	Use it for
`PricingTable`	Plan cards from your catalog with checkout on each card.
`PlanCard`	One plan card in your own layout.
`PlanComparison`	Plans side by side, one row per entitlement and credit grant.

Checkout

Component	Use it for
`CheckoutButton`	Starting checkout for one plan.
`Checkout`	The payment step for a Stripe client secret or a checkout result.

Plan change

Component	Use it for
`UpgradeButton`	A button that confirms and starts one plan change.
`UpgradeModal`	The confirmation dialog, with your open state or your own action.
`PlanChangeControl`	A plan picker with exact quotes, paid upgrades and scheduled downgrades.
`CancellationControl`	Cancel at the end of the period, or keep the subscription.

Billing display

Component	Use it for
`CurrentPlan`	The customer’s plan, status, scheduled change and usage.
`PlanBadge`	The plan name as a pill.
`PaymentMethodDisplay`	The saved card and an update button.
`BillingPortal`	A full customer billing page: subscriptions, wallets, details and invoices.
`PoweredByNozle`	The “Powered by Nozle” badge for UI you build from the hooks.

Usage

Component	Use it for
`UsageMeter`	One limit as a progress bar.
`UsageDashboard`	Several meters in one card.
`UsageAlert`	Warnings for limits that are nearly used.
`UsageBreakdown`	This period’s units and amounts per feature.
`UsageTrend`	Past periods as bars.

Credits

Component	Use it for
`CreditBalance`	Credits available and where they come from.
`CreditHistory`	Credit operations with paging.

Access control

Component	Use it for
`FeatureGate`	Content only when a feature is included.
`PlanGate`	Content only on some plans.
`UsageGate`	Content only below a limit.
`UpgradePrompt`	An upgrade message and button.
`LockedOverlay`	A blurred preview with an upgrade prompt.

See Feature gates for combining gates with your backend’s state.

Loading, empty and error states

Components that show customer data take isLoading (or loading), error and emptyMessage, and render a placeholder, a role="alert" message, or a role="status" message instead of their content. Pass the matching fields of the hook result, for example isLoading={query.isPending} and error={query.error}. Each component page lists its states.

Powered by Nozle

PricingTable, PlanComparison, CurrentPlan, Checkout, UpgradeModal and BillingPortal show “Powered by” and the Nozle logo below their content, linking to nozle.dev. Nozle decides this on the server: the publishable-key plan catalog returns meta.nozle_branding, and the billing portal reads it from its session. When one of these components renders another, for example a modal inside the portal, only the outer one shows the badge. Without a BillingProvider, only BillingPortal can show it. The badge shows by default. If your Nozle plan removes the branding, turn off Show “Powered by Nozle” under Developers > Customize SDK > Global settings > Branding. The setting is saved for your organization (hideBranding: true) and applies to every component and the customer portal. On other plans the switch stays off-limits and the badge keeps showing. Organizations whose plan already removed the branding before the badge became the default, and that never saved a choice, keep it hidden; turn the switch back on to show it. Invoice, credit note and payment receipt PDFs always show “Powered by Nozle”, whatever your plan and this setting. If you build your own billing UI from the hooks, useNozleBranding() returns the same answer and <PoweredByNozle /> renders the badge.

Appearance

Every component with a look takes appearance, and inherits the one on BillingProvider. Each component page lists the element keys it exposes for class names and styles. See Appearance.

Setup

Components

Billing

Entitlements

Components

Where components get their data

Components

Pricing

Checkout

Plan change

Billing display

Usage

Credits

Access control

Loading, empty and error states

Powered by Nozle

Appearance

​Where components get their data

​Components

​Pricing

​Checkout

​Plan change

​Billing display

​Usage

​Credits

​Access control

​Loading, empty and error states

​Powered by Nozle

​Appearance

Where components get their data

Components

Pricing

Checkout

Plan change

Billing display

Usage

Credits

Access control

Loading, empty and error states

Powered by Nozle

Appearance