Ben shows how to add Schematic's pricing and feature-flagging to a React weather app in five minutes. He sets up the SchematicProvider, uses the identify hook to track users, calls track on searches, and uses useSchematicFlag to show features based on plan. The customer portal uses SchematicEmbed with a backend token from the Schematic Node.js library.
Chapters
Hi, I'm Ben from Schematic, and I'm gonna show you how you can get started with Schematic in under 5 minutes using a simple React app as an example. So to start out, I have a Schematic account already set up. I've connected a Stripe account and I've connected an auth provider, so I have some companies and users already imported. I've also set up some plans and entitlements, so we're using a weather search app as a test here. So we have a basic plan that permits 100 searches per day. And a standard plan all the way up to a pro plan that has a much higher number of searches per day, as well as some additional features. All this powers a component that I've configured inside of Schematic that I can use to show my customers their current plan, their usage against their features, change their plan, and much more. So let's take a look at the test app. So it's just a simple weather search. What we want to do here is we want to track usage of the search, we wanna gate features with entitlements, and we wanna surface a customer portal where the user can manage the plan and account. Let's take a look at the code. So what we have here, the first thing we do here is we use schematic provider, which is just a React provider that's provided by the schematic-react library. We just initialize that with a schematic publishable key, and then we wanna call identify, which is a call from a schematic use events hook that just lets Schematic know who the current logged-in user is so that we can attribute usage to the right user and manage our gates based off of that. Once we have that set up, we can take a look at the weather component. We're going to use a few more hooks here, including— we're going to use the track function which tracks usage, and we're using this useSchematicFlag hook to do feature flags. So here in our weather fetching function, We, at the end, whenever there's a successful search, we go ahead and call this track function to just send that usage information over to Schematic. There's also an empty state here, or sorry, a no access state. So if a user has used all their searches for the day, just based off of this Boolean flag right here, they'll see this no access state. And then finally, we have a few other flags here just for other features, just same thing, humidity flag, wind speed flag. These just toggle off these views based off of whether the user has access to these features given their plan. Now we can take a look at the portal. So what we're doing here is we're using the schematic embed component, which is a component you can just import right out of the schematic React library and give it an access token and a component ID. So you get that component ID out of the app when you build that component we were looking at earlier, and the access tokens are just short-lived temporary access tokens that are scoped to a company, and you'll use your backend to do that token exchange. So this is just an API route where we're using our secret API key with the Schematic Node.js library to do a token exchange, exchanging that secret API key in your backend for a temporary company-scoped access token that can be used on the front end and just passing that up as JSON. So then your embed can request that token and use it to render the component. So now with all those changes, we now have a sophisticated pricing and packaging setup in just a few minutes and we can make whatever changes we want in the future just using the Schematic app without code changes. Thanks.
