Components Overview
Schematic’s embeddable UI components are designed to deliver a consumer-grade purchasing experience to all of your end users. That includes the ability to manage subscriptions, view feature-level usage, and customize plans in your app — all without requiring heavy lifting to build from scratch or maintain.
Components are drop-in components for React that can be easily configured and designed within Schematic, and quickly integrated natively into your application.
Component Types
Customer Portal
The Customer Portal is an authenticated, in-app component that gives your customers a self-service billing hub. It handles the full subscription lifecycle:
- Purchasing a plan or add on for the first time
- Upgrading, downgrading, or canceling a subscription
- Managing payment methods
- Viewing upcoming and past invoices
- Checking current usage and entitlements
The Customer Portal integrates fully with Stripe and is scoped to a specific company, so each customer sees their own data. See the Customer Portal page for details.
Standalone Pricing Table
The Standalone Pricing Table is a public-facing component that can be embedded on a marketing or pricing page. It requires no authentication and shows your available plans and pricing to prospective customers. See the Standalone Components page for details.
Component Builder
Components are fully customizable using Schematic’s no-code Component Builder. You can choose which elements appear (e.g. Current Plan, Invoices, Payment Methods, Usage Meters), control colors, fonts, and card styles, and preview how the component looks for any company in your account — all without touching code. Changes publish immediately without a deploy.
Getting Started
To build and embed a component:
- Create a Component — configure your catalog and build the component in Schematic
- Add to Your App — install the library and embed it in your React application
