Set Up Components

Components are simple to set up and maintain. Once you’ve integrated a component into your application, it will reflect up-to-date data for the given company that is accessing it in your application.

To set up components, you’ll need to do two things:

1. Install the required libraries
2. Generate a short-lived access token to make requests on behalf of a given company
3. Embed the SchematicEmbed component in your React frontend using a Component ID from Schematic

All steps are covered below.

1. Install the required libraries

There are two libraries you’ll need to install:

1
npm install @schematichq/schematic-components @stripe/react-stripe-js
2
yarn add @schematichq/schematic-components @stripe/react-stripe-js
3
pnp add @schematichq/schematic-components @stripe/react-stripe-js

2. Set up your server for token exchange

Schematic components use short-lived, company-scoped temporary access tokens to make requests on behalf of a company. You’ll need to issue these from your server, using a secret access token.

If you haven’t already done so, start by installing the Schematic developer SDK of your choosing. Then, you can implement the token exchange for a specific company using its keys:

1
// Initialize Schematic SDK
2
import { SchematicClient } from "@schematichq/schematic-typescript-node";
3
const apiKey = process.env.SCHEMATIC_API_KEY;
4
const client = new SchematicClient({ apiKey });
5
6
// Get a temporary access token
7
export async function getTemporaryAccessToken(companyId: string) {
8
  const resp = await client.accesstokens.issueTemporaryAccessToken({
9
    resourceType: "company",
10
    lookup: { companyId }, // The lookup will vary depending on how you have configured your company keys
11
  });
12
13
  return resp.data?.token;
14
}

Temporary access tokens are valid for 15 minutes.

3. Use the SchematicEmbed component in your React frontend application

Once you’ve issued a temporary access token and provided it to your frontend React application, you can simply pass it to the SchematicEmbed component along with your Component ID to render it:

1
import { EmbedProvider, SchematicEmbed } from "@schematichq/schematic-components";
2
3
export default function CustomerPortal({ accessToken }: { accessToken: string }) {
4
  const componentId = process.env.NEXT_PUBLIC_SCHEMATIC_COMPONENT_ID;
5
  if (!componentId) {
6
    return <NotFound />;
7
  }
8
9
  return (
10
    <EmbedProvider>
11
      <SchematicEmbed accessToken={accessToken} id={componentId} />
12
    </EmbedProvider>
13
  );
14
}

Standalone components

Some components can be used standalone. If you’d like more customization options or just need a single component, you have the option to render it directly within our provider. The difference with this method is that you no longer need to generate an access token but instead simply provide your Schematic API key.

1
import { EmbedProvider, PricingTable } from "@schematichq/schematic-components";
2
3
export default function CustomerPortal({ accessToken }: { accessToken: string }) {
4
  const apiKey = process.env.NEXT_PUBLIC_SCHEMATIC_API_KEY;
5
  const componentId = process.env.NEXT_PUBLIC_SCHEMATIC_COMPONENT_ID;
6
7
  if (!componentId || !apiKey) {
8
    return <NotFound />;
9
  }
10
11
  return (
12
    <EmbedProvider apiKey={apiKey}>
13
      <PricingTable callToActionUrl="https://your-website.com/sign-up" />
14
    </EmbedProvider>
15
  );
16
}