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.
npm i stripe
We'll then install the community prepared typings.
npm i -D @types/stripe
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.
server/
src/
// ...
lib/
api/
// ...
Stripe.ts
// ...
// ...
In the src/lib/api/index.ts
file, we'll re-export the Stripe object we'll soon create.
export * from "./Stripe";
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.
import stripe from "stripe";
const client = new stripe();
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
.
import stripe from "stripe";
const client = new stripe(`${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.
import stripe from "stripe";
const client = new stripe(`${process.env.S_SECRET_KEY}`);
export const Stripe = {
connect: async (code: string) => {}
};
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.
import stripe from "stripe";
const client = new stripe(`${process.env.S_SECRET_KEY}`);
export const Stripe = {
connect: async (code: string) => {
const response = await client.oauth.token({
/* eslint-disable @typescript-eslint/camelcase */
grant_type: "authorization_code",
code
/* eslint-enable @typescript-eslint/camelcase */
});
return response;
}
};
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two