1. Sign Up For Flowglad
Create a Flowglad account.2. Add Your API Key
Add your Flowglad API key to your environment.env
3. Install Flowglad
4. Server Setup
First, set up a Flowglad server client. Do this in a file that can be imported wherever you need to access billing data, or make calls to Flowglad. Flowglad’s premade backend modules use the Flowglad Server in sessionful contexts to determine who you’re loading billing data for:/api/flowglad/[...path]
. Your app will use this to send and receive data from Flowglad.
You can mount Flowglad’s handler at a different route, but you’ll
need to specify it via the
serverRoute
prop in <FlowgladProvider />
in your React app.5. Set up React
Next, you need to set up the FlowgladProvider component. For the fastest possible demo, make your success route the home page you load once customers sign in.If you are using custom route for your Flowglad handler instead of
/api/flowglad
, set it on FlowgladProvider’s serverRoute
prop,
using /path/to/your/route
.6. Add the Billing Page
Create a/billing
route in your app and mount the BillingPage
component from Flowglad: