Skip to navigation
Components

Components overview

Schematic gives you two ways to put billing UI in your app. Both read one data layer, so you can mix them: a custom portal with a drop-in checkout is a normal setup.

Using an agent? Paste this into Claude Code, Cursor, or Codex and it does the setup on this page:

Add Schematic billing to my app: docs.schematichq.com/components/skill.md
Drop-in components

Import a component and pass a few props. Your fonts and colors go in through CSS variables, and light and dark follow your page’s color-scheme.

Build your own UI

The same data the drop-ins read, as hooks and pure derivations. Copy the reference code into your design system, or point your agent at it.

Which path?

Drop-in componentsBuild your own UI
You wantBilling UI working today, in Schematic’s layout, with your colors and fonts.Your own layout in your own design system, or an agent writing it for you.
You writeA provider, a session, and one tag per card.A hook call, a derivation, and the JSX. Reference code gets you most of the way.
Styling--schematic-* tokens, color-scheme, or your own CSS on stable class names.Anything. The derivations return structured parts, not sentences.
Checkout<Checkout/>, opened through useCheckoutLauncher() from the handlers on Plan Manager, Credit Usage, Metered Features, and Unsubscribe Button.useCheckout on the checkout API. Take payment with Stripe Elements if you like.
FrameworksReact. Vue and Angular are coming soon.React hooks from @schematichq/schematic-react. The billing client in @schematichq/schematic-js is plain TypeScript for any framework.

One setup for both

Install the React SDK and the components package. @stripe/stripe-js and @stripe/react-stripe-js are peers of the components, used by the add-card form in Payment Methods.

npm install @schematichq/schematic-react @schematichq/schematic-components @stripe/stripe-js @stripe/react-stripe-js

Every component and every hook reads from one provider. Your server mints a short-lived access token for the signed-in company with your secret key, so the key never reaches the browser.

import { SchematicProvider } from "@schematichq/schematic-react";
<SchematicProvider
  publishableKey="pk_…"
  // Whose billing is being read: signed in, null for signed out, undefined while auth resolves.
  session={{ company: company.id, user: user.id, token: fetchAccessToken }}
>
  {children}
</SchematicProvider>

The Quickstart walks through the token exchange and the first component, and Add Schematic billing to your app is the same setup written for an agent.

What’s in the box

Each component imports from @schematichq/schematic-components/elements and renders on its own, so a page shows only the cards you place on it.

ComponentHooksShows
<Checkout/>useCatalog, useCompany, useCheckout, useTaxIdsThe purchase: plan, period and currency, quantities, add-ons, credit bundles, then payment, priced by the server on every change
<PlanManager/>useCompany, useFeatureUsage, useCreditBalancesPlan, price, add-ons, usage-based charges, plan credits, and notices like a trial ending or a scheduled downgrade
<PricingTable/>useCatalog, useCompanyPlans and add-ons with a period toggle and currency picker, public or signed in
<IncludedFeatures/>useFeatureUsageEvery entitlement on the plan, with usage against its limit
<MeteredFeatures/>useFeatureUsage, useFeatureUserUsageA meter per metered feature, its price and tiers, and usage by user
<CreditUsage/>useCreditBalances, useCreditUserUsageBalance per credit, the grants behind it, auto top-up, and usage by user
<UpcomingBill/>useUpcomingInvoiceThe next bill’s amount and date, account balance, and discounts
<PaymentMethods/>usePaymentMethods, useSetupIntentThe default method on file and an expiry warning, with an Edit dialog to add, switch, or remove methods
<Invoices/>useInvoicesInvoice history, paged, with a link to each hosted invoice
<UnsubscribeButton/>useCompany, useFeatureUsage, useUnsubscribeA cancel button that confirms, then cancels at the end of the period

Using the component builder? Builder components keep working, and they ship in the same @schematichq/schematic-components package as the drop-ins. The builder pages live under Component builder, and Migrate to drop-in components covers the move when you are ready.