Migrate to Drop-in Components

A portal embedded with <SchematicEmbed/> keeps working. When you want props instead of a builder, your own fonts and colors through CSS variables, or a custom card next to the standard ones, move to drop-in components. Both ship in the same @schematichq/schematic-components 2.x package, the embed from the package root and the drop-ins from @schematichq/schematic-components/elements, so a migration needs no version change and is mostly a list of tags.

Before

import { EmbedProvider, SchematicEmbed } from "@schematichq/schematic-components";
<EmbedProvider>
  <SchematicEmbed id="cmpn_…" accessToken={token} />
</EmbedProvider>

After

Install the React SDK and the Stripe peers beside the components package. Payment Methods uses the Stripe packages for its add-card form.

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

import { SchematicProvider } from "@schematichq/schematic-react";
import {
  CheckoutLauncherProvider, CreditUsage, IncludedFeatures, Invoices, MeteredFeatures,
  PaymentMethods, PlanManager, SchematicStyles, UnsubscribeButton, UpcomingBill,
  useCheckoutLauncher,
} from "@schematichq/schematic-components/elements";
export function Billing() {
  return (
    <SchematicProvider publishableKey="pk_…" session={{ company: company.id, token: fetchAccessToken }}>
      <SchematicStyles />
      <CheckoutLauncherProvider>
        <Portal />
      </CheckoutLauncherProvider>
    </SchematicProvider>
  );
}
function Portal() {
  const { open } = useCheckoutLauncher();
  return (
    <>
      <PlanManager onChangePlan={() => open()} />
      <IncludedFeatures />
      <MeteredFeatures onAddMore={() => open({ steps: { initial: "usage" } })} />
      <CreditUsage onBuyMore={() => open({ steps: { initial: "credits" } })} />
      <UpcomingBill />
      <PaymentMethods />
      <Invoices />
      <UnsubscribeButton onManagePlan={() => open()} />
    </>
  );
}

What maps to what

Header text you set in the builder becomes strings on the component, or on the provider for every component at once. The builder’s theme (fonts, colors, card style) becomes a block of --schematic-* overrides in your stylesheet; Styling lists the tokens.

Token exchange

The token endpoint you already run keeps working. The provider takes the token as a string or as a function. Pass a function so it can fetch a fresh token after a 401; it expects { token, expiresAt } back, so map your endpoint’s fields if they differ:

async function fetchAccessToken() {
  const { accessToken, expiredAt } = await (await fetch("/api/accessToken")).json();
  return { token: accessToken, expiresAt: expiredAt };
}

The drop-ins read the company endpoints, which answer 404 for an account that has not enabled them. If a card shows its unavailable message, such as “Your plan is not available for this account.”, or a hook’s error is a 404 reading “Not found”, ask Schematic to enable company context (the company-context-api flag) for your account.

One card at a time

EmbedProvider and SchematicProvider can mount on the same page, so you can replace one element, ship, and continue. Both read the same company’s billing with the same kind of token, so the customer sees the same plan, invoices, and payment methods between steps.