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:

1npm install @schematichq/schematic-components @stripe/react-stripe-js
2yarn add @schematichq/schematic-components @stripe/react-stripe-js
3pnp add @schematichq/schematic-components @stripe/react-stripe-js
The Stripe library is required for the Schematic checkout components. If you know you won’t be using checkout components, you can omit it.

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
2import { SchematicClient } from "@schematichq/schematic-typescript-node";
3const apiKey = process.env.SCHEMATIC_API_KEY;
4const client = new SchematicClient({ apiKey });
5
6// Get a temporary access token
7export 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:

1import { SchematicEmbed } from "@schematichq/schematic-components";
2
3export 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 <SchematicEmbed accessToken={accessToken} id={componentId} />
11 );
12}