Components v1.0 — Standalone Pricing Table + Fixes & Improvements

Introducing Standalone Components (starting with Pricing Table)

With v1.0, components can now be used standalone, no access token required. Just pass your Schematic publishable API key and component ID, and you can drop in a single component like PricingTable directly in your frontend. This gives you full control over how and where it's rendered, without needing to stand up the full customer portal or use embedded auth.

This release starts with the Pricing Table component, making it easy to show accurate, dynamic pricing on your public site with full styling control and minimal setup.

Here’s a simplified usage example:

import { EmbedProvider, PricingTable } from "@schematichq/schematic-components";

...

<EmbedProvider apiKey={apiKey}>
  <PricingTable callToActionUrl="https://your-website.com/sign-up" />
</EmbedProvider>

We’ll expand standalone support to other components soon.

Other Improvements and Fixes

This release also includes several enhancements and bug fixes:

• Fixed: Add-Ons no longer appear in checkout unless marked “Live”

• Fixed: Feature list ordering now respects the configured order across all views

• Fixed: Search bar now consistently displays on the plan entitlements page

• Improved: Initial pricing rule handling is more consistent and predictable

• Improved: Responsive and dark mode support for the Pricing Table

Version 1.0 marks a milestone in flexibility and modularity for teams integrating billing experiences with Schematic. If you’re using components, you now have more options than ever for building the experience you want.

Upgrading to Schematic Components v1.0 (Major Release)

Schematic Components v1.0 introduces a new provider wrapper for its React UI components. Follow this checklist to update your existing Schematic embed implementation to the latest version.

Upgrade Checklist

1. Use React for Schematic Components: Ensure you are integrating Schematic’s UI components in a React (or Next.js) application. The Schematic embed is a React component, so it must run within a React environment.

2. Update Your Imports: In v1.0, you need to import both the context provider and the embed component. Include EmbedProvider alongside SchematicEmbed from the @schematichq/schematic-components package. For example, use either of the following import styles (ESM or CommonJS):

   import { EmbedProvider, SchematicEmbed } from "@schematichq/schematic-components";
   // OR, using CommonJS require:
   const { EmbedProvider, SchematicEmbed } = require("@schematichq/schematic-components");
   

3. Wrap the Embed with <EmbedProvider>: Wrap your SchematicEmbed component with the EmbedProvider in your component tree. This provides the necessary context for the embed to function. For example:

   <EmbedProvider>
     <SchematicEmbed accessToken={YOUR_ACCESS_TOKEN} id={YOUR_COMPONENT_ID} />
   </EmbedProvider>
   

   This wrapper is now required for v1.0. If you omit the provider, the component will throw an error at runtime (e.g. “You forgot to wrap your code with <EmbedProvider>.

4. No Extra Configuration Needed: For a one-to-one upgrade, you don’t need to pass any props to EmbedProvider – simply wrapping the embed component is enough to maintain existing behavior. Default settings will be used unless you choose to customize them. (The EmbedProvider does accept optional props like an apiKey, custom settings, or debug flag, but none are required for basic usage or a direct upgrade.)

5. Verify the Integration: After updating your imports and wrapping with the provider, test your application. The end-user experience should remain unchanged if everything is set up correctly. In other words, your embedded Schematic component (e.g. Customer Portal, Pricing Table, Checkout, etc.) will look and behave as before once wrapped in EmbedProvider. If the component fails to load and you see the error about the missing provider, double-check that you have added the <EmbedProvider> wrapper around your Schematic component. With the provider in place, the upgrade to v1.0 should be seamless for your usersGitHub.

By following this checklist, you’ll ensure your Schematic components are updated to v1.0 with minimal effort and no disruption to your users. All existing functionality will continue to work, and the new provider pattern will set you up for future enhancements in Schematic’s component library.