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 of code.

• 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 of read_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">

        {/* ... */}