Adding Connect with Stripe to a React App
We'll switch over to work in our React application and have it communicate with the server to allow a user to connect with their Stripe account on our platform.
Connecting with Stripe on the Client#
🙋🏽 We're performing Step 1: Create the OAuth link, Step 2: User creates or connects their account, and Step 3: User is redirected back to your site from the steps highlighted in the OAuth connection flow section of using Stripe Connect with Standard accounts.
With the relevant mutations now available in our server to allow the user to connect with Stripe, we'll prepare the client-side functionality to give the user the capability to connect with Stripe through the UI.
Our objective would be to surface a "Connect with Stripe"
button in the user profile of a logged-in user.
When the user clicks the connect button, they're taken to the Stripe login page to be able to log-in as a connected account on our TinyHouse Stripe account platform.

When the user is to log-in, they'll be redirected to the /stripe
route of our app where we'll have a component that will receive the code
query parameter from the URL, run the connectStripe
mutation, and pass the code
value as part of the input
argument of the mutation.

When the connectStripe
mutation on the server resolves successfully, it means we would have been able to store the stripe_user_id
for the viewer who's connected with Stripe which would mean we've successfully connected the user to our Stripe platform. We'll then redirect the user to their /user/:id
page. When a user is successfully connected with Stripe, instead of seeing the "Connect with Stripe"
button in their user profile, they'll see the income they've made within the app.
income
is a value of the user
data object that will be updated when others make bookings and create payments to the host's listings. At this point, there will be a "Disconnect Stripe"
button that when clicked will disconnect the viewer from Stripe by removing the user's stripe_user_id
value in the database.
connectStripe
#
We'll take this step by step. In this lesson, we'll focus on creating and conducting the connectStripe
mutation. The first thing we'll do is create the GraphQL document for the connectStripe
mutation in our client project.
We'll head to our src/lib/graphql/mutations/
folder and create a ConnectStripe/
folder with an index.ts
file.
client/
src/
lib/
graphql/
mutations/
// ...
ConnectStripe/
index.ts
// ...
// ...
// ...
In the src/lib/graphql/mutations/index.ts
file, we'll reexport the soon to be created CONNECT_STRIPE
mutation documents
export * from "./ConnectStripe";
In the src/lib/graphql/mutations/ConnectStripe/index.ts
file, we'll import the gql
tag from apollo-boost
, export a constant labeled CONNECT_STRIPE
, specify the ConnectStripe
mutation and declare that it expects an input
argument of GraphQL type ConnectStripeInput
. We'll also declare the mutation field and pass the input argument along.
import { gql } from "apollo-boost";
export const CONNECT_STRIPE = gql`
mutation ConnectStripe($input: ConnectStripeInput!) {
connectStripe(input: $input) {
}
}
`;
On the server, we've stated that the connectStripe
mutation is to return all details about the viewer
such as the viewer's id
, avatar
, etc. At this moment, we're only going to be needing the hasWallet
field that is to be returned. The hasWallet
field of the viewer
object is a boolean value that detects the presence of the value for the walletId
field of the viewer.
import { gql } from "apollo-boost";
export const CONNECT_STRIPE = gql`
mutation ConnectStripe($input: ConnectStripeInput!) {
connectStripe(input: $input) {
hasWallet
}
}
`;
With our connectStripe
GraphQL mutation document prepared, we'll autogenerate the corresponding TypeScript definitions. We'll head over to the terminal and in our client project first run npm run codegen:schema
to regenerate a schema.json
file:
npm run codegen:schema
We'll then run npm run codegen:generate
to regenerate the TypeScript definitions for our new mutation:
npm run codegen:generate
<UserProfile />
- OAuth Login#
In the <UserProfile />
component, we've already prepared the UI in the user profile section to consist of the "Connect with Stripe"
button that will allow a logged-in user to connect with Stripe. When the user clicks the connect button, we'll want them to be taken to Stripe's OAuth Login page for our TinyHouse Connect account. In the Stripe documentation, they note that the OAuth link a user can be directed to can be created with https://connect.stripe.com/oauth/authorize and appending a few necessary query parameters:
response_type
with a value ofcode
.client_id
with a value of the connected account's client ID with which we've stored as an environment variable in our React application.scope
with a value ofread_write
.
With that said, in our <UserProfile />
component file and outside of our component function, we'll construct a constant called stripeAuthUrl
that will be the OAuth URL we want to create. For the client_id
query parameter, we'll specify the value of the client environment variable we have in our React project called REACT_APP_S_CLIENT_ID
.
const stripeAuthUrl = `
https://connect.stripe.com/oauth/authorize?
response_type=code
&client_id=${process.env.REACT_APP_S_CLIENT_ID}
&scope=read_write
`;
When the user clicks the connect button in their user profile section, we'll want to direct the user to the OAuth url we've established. To achieve this, in our "Connect with Stripe"
<Button />
element we can have an onClick
handler that will call a method labeled redirectToStripe()
.
redirectToStripe()
will be a component method that will use the window
object and set the location
target to the value of the stripeAuthUrl
constant.
// ...
export const UserProfile = ({ user, viewerIsUser }: Props) => {
const redirectToStripe = () => {
window.location.href = stripeAuthUrl;
};
const additionalDetailsSection = viewerIsUser ? (
<Fragment>
<Divider />
<div className="user-profile__details">
{/* ... */}