Module 10 Summary

[00:00 - 00:23] In this module, we set up our own Stripe Connect account for the tiny house application, and we've given users in our application the capability to sign in with their Stripe account, and hence be a connected Stripe account in our platform. In our GraphQL-type definitions, we've established two root-level mutations, one called connect Stripe and the other called disconnect Stripe.

[00:24 - 00:45] The connect Stripe mutation is to fire after the user has gone through the Stri pe OAuth page and retrieved the code that Stripe actually returns. We obtain this code and pass it as a property within the input variable or argument of our connect Stripe mutation, and when resolved, we return the viewer object.

[00:46 - 00:59] We've constructed the resolver functions for these mutations in the viewer res olver's map. In the connect Stripe resolver function, we simply obtain the code from the input argument.

[01:00 - 01:35] We attempt to authorize the viewer making the request and when that's successful, we simply pass this code into our connect function in our Stripe object to retrieve the wallet information. In our Stripe object in the lib API folder, we have the Stripe client constructed with the help of the Stripe constructor function from the Stripe NPM library, and in our connect function, we simply run the OAuth token function available, pass the code, as well as a grant type of authorization code to return the wallet information of the Stripe connected user account.

[01:36 - 01:58] Of interest to us is primarily the Stripe user ID, and we store the Stripe user ID as the wallet ID field of the user document in the user's collection. This Stripe user ID value is the value we'll use later on to help conduct a charge from the person booking the listing and pay out the person who owns the listing.

[01:59 - 02:14] The disconnect Stripe resolver function is fairly straightforward and would run when the user attempts to disconnect or remove their Stripe information from our application. So with that said, we simply find the user document in question and we set the wallet ID value to null.

[02:15 - 02:32] We'll now move over to the client application and there's a few things we've done here. In the user component page and primarily in the user profile components within the user page, we provided the capability for a user to actually navigate to the Stripe authentication page.

[02:33 - 02:55] And we've done this pretty straightforward and we follow the Stripe documentation to simply provide the URL as is and simply provide the client ID value we get from our Stripe connect accounts. And when the user navigates to the Stripe authentication page, provides the necessary information and when Stripe returns them back to our application, we've declared a redirect URL of slash Stripe.

[02:56 - 03:06] And slash Stripe in our context will now render a Stripe component we've established. In this Stripe component, we retrieve the code that should be available in the URL.

[03:07 - 03:22] And with this code, we conducted the connect Stripe mutation. And this connect Stripe mutation when successful will set the viewer object or state object available in our client and finally redirect the user to their user page now in the connected states.

[03:23 - 03:40] In the user profile components, when the user is already connected with Stripe, they'll see a different UI that basically tells them the income they may have earned as well as a button that gives them the capability to disconnect from Stripe. And this button when triggered or clicked would run the disconnect Stripe mutation we have.

[03:41 - 03:52] And this disconnect Stripe mutation would remove the wallet ID value from the relevant user document. And the viewer object within the client will then be updated to not have any wallet information.

[03:53 - 04:03] And then the user will now be in the disconnected Stripe context. So at this moment, users who have logged into our application will now be able to connect and disconnect with Stripe.

[04:04 - 04:15] However, we haven't done anything around being able to conduct charges or payments just yet. And we'll begin to look into this once we start to build the other pieces of functionality remaining in our tiny house application.