This video is available to students only

Integrating the Stripe NPM Library With React and GraphQL

We'll continue to update the GraphQL resolver functions we've prepared to allow users to connect & disconnect from Stripe in our application.

Building the Stripe Connect Resolvers#

🙋🏽‍ We're performing Step 4: Fetch the user's credentials from Stripe from the steps highlighted in the OAuth connection flow section of using Stripe Connect with Standard accounts. This can be seen - here.
📣 The Stripe API library for Node.js applications now has first class TypeScript support. Find details on some minor changes that can be made - here.

In this lesson, we'll establish the resolver functions for the connectStripe and disconnectStripe mutations. We'll be installing a new dependency in our server application and the accompanying type definitions. We're going to install the official Stripe API library for Node.js applications. The stripe Node.js library will allow us to make requests to Stripe from our Node server.

With that said, we'll head to the terminal and install the stripe library.

We'll then install the community prepared typings.

Interacting with Stripe API#

Just like how we have a Google.ts file kept within our src/lib/api/ folder responsible in setting up the functions necessary to interact with Google APIs, we'll create a Stripe.ts file in the src/lib/api/ folder to consolidate all the functionalities we are to have to interact with the Stripe API.

In the src/lib/api/index.ts file, we'll re-export the Stripe object we'll soon create.

In the newly created Stripe.ts file, we'll import the stripe constructor from the installed stripe library. We'll create a constant function called client that will be the result of the stripe() constructor function.

The stripe() constructor expects us to pass in the API Secret key of our platform Stripe account. We have this secret key kept as an environment variable in our server project so we'll reference it and pass it into the stripe() function with process.env.S_SECRET_KEY.

We'll construct an object called Stripe that at this moment will only have a connect() function property that is to accept a code parameter of type string. This code will be the authorization code received from the client and used to make an authorization request to Stripe's server.

In our connect() function, we'll use the oauth.token() function available to us within our constructed Stripe client. This oauth.token() function takes an options object and returns the connected user's information. We'll need to specify the code that is to be passed into this function to successfully connect the user to our Stripe Connect platform and retrieve the users connected stripe_user_id. In addition, the documentation tells us to specify a grant_type option with a value of "authorization" with which we'll do as well.

Our TypeScript ESLint set-up will warn us and tell us that the options properties in the function should be in camelCase format. We agree but we can't change the format of the grant_type property it so we'll simply disable the @typescript-eslint/camelcase rule around our options.

Start a new discussion. All notification go to the author.