Drop-in billing components
Schematic gives you drop-in React billing components, so customers can purchase on their own and your engineers can get back to building product.
Schematic components cover plans, usage, credits, invoices and checkout, and run on Stripe payments, methods and tax.
Add Schematic billing to my app: docs.schematichq.com/components/skill.mdSample billing UI. The plans and prices are examples.
Swipe through the library
The library
Set up your plans in Schematic, connect Stripe, and add the component to your app. Teams go live in days.
PlanManager
The current plan, its price, add-ons, usage charges and credits, with notices like a trial ending or a scheduled downgrade.
PricingTable
Plans and add-ons with a period toggle and a currency picker.
Checkout
Covers every step of checkout: plan, period, currency, quantities, add-ons, credit bundles, and payment.
CreditUsage
Manage credit balances, grants, and usage all from one place. Supports quickly jumping into checkout to buy more when needed.
MeteredFeatures
Price and usage against each metered limit, with per-user breakdowns where enabled.
IncludedFeatures
Plan entitlements with their current usage and limits.
UpcomingBill
List the next bill, its date, the account balance and any discounts applied.
PaymentMethods
Add, switch, and remove payment methods.
Invoices
Current and past invoices, each one downloadable.
UnsubscribeButton
Cancels at the end of the period, with a confirmation step.
More coming soon
“If we had to build it ourselves, it might be a 3–4 month project. Now it becomes config, not code.”
Schematic versus Stripe alone
Payment, methods and tax stay on Stripe either way. Schematic replaces the portal and checkout, which is where teams outgrow Stripe once they add seats, usage or credits.
What your customer gets | Stripe alone | Schematic + Stripe |
|---|---|---|
Manage billing without leaving your product | Stripe aloneA redirect to billing.stripe.com | Schematic + StripeHosted directly in your app |
Match the rest of your product | Stripe aloneA logo, two colors, a font and a corner shape | Schematic + StripeStyle directly with your CSS |
Switch to any plan in your catalog | Stripe aloneUp to 10 products in the portal | Schematic + StripeEvery plan the company may move to |
See usage against plan limits | Stripe aloneNot shown in the portal | Schematic + StripeA meter per feature, and per user where it applies |
Buy credits and bundles | Stripe aloneNot in the portal or Checkout | Schematic + StripeBalance, bundles and auto top-up, from the portal or Checkout |
See a change the moment it happens | Stripe aloneOn the next page load | Schematic + StripeAlways kept up to date in realtime |
Add seats, add-ons and credits in one checkout | Stripe aloneOne upsell and optional items on the hosted page | Schematic + StripeControl plan, quantities, add-ons and credit bundles in one flow |
Buy more seats from inside the product | Stripe aloneA quantity change in the portal, when you allow it | Schematic + StripeAdd seats from the plan, or any quantity in Checkout |
Schedule a downgrade and see it coming | Stripe aloneAt period end, when you allow it | Schematic + StripeAt period end, with a notice on the plan |
Read billing in their own language | Stripe aloneDetected from the browser | Schematic + StripeThe locale you set, with your own strings |
Choose how to build
Drop our components into your app and style them to match, or build your own billing page on the same data.
Drop in and combine
Import the components you need. Style and configure them to match your brand.
Build your own UI
Pull billing state from the API and build the experience in your own design system.
Frequently asked questions
More on billing components
Ship billing today
Start free with the components on every plan and up to 10 monetized subscriptions. Your customers serve themselves, and your engineers go back to the product.