Add to Your App

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
3
yarn add @schematichq/schematic-components @stripe/react-stripe-js
4
5
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
    lookup: { companyId }, // The lookup will vary depending on how you have configured your company keys
10
  });
11
12
  return resp.data?.token;
13
}

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
}