Building a Payment Platform With Stripe and Stripe Connect

It's finally time we talk about payments! The business model of TinyHouse is an online marketplace where users can host and book listings. In this lesson, we'll learn about how we intend to have TinyHouse be a marketplace by using the third-party payment platform - Stripe.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

It's finally time we talk about payments. The business model of the Tiny House platform is an online marketplace where users can host and book listings. When a booking is made, the user that is doing the booking, in other words the tenant, needs to pay the owner of the listing, in other words the host, a sum of money. And Tiny House, or us, will take a percentage of that transaction as revenue. This can be known as the platform fee. Building and integrating a payment infrastructure on top of an app is extremely complex. Do we want our users to be able to pay by debit card? Well, we'll pretty much need to work with numerous different banks in the country that we want our platform to operate in. Do we want our users to be able to pay by credit card? Again, we'll need to work with all the tools provided to us from credit card companies that we would want to support. Visa, MasterCard, AMEX? Do we want to accept international payments? Going international is another whole avenue of difficulty. If we were to go with this approach to build our own custom payment infrastructure, we'll literally need to work with all these different parties. This will be extremely time consuming and probably more complex than the actual app we're building. And not to mention, depending where our app is going to operate, there are strict laws and regulations on services that deal with the transfer of money. This is where a third-party payments processor comes in. Companies like Stripe and PayPal specializes in payment. This is their business model, and in this course, we'll be using Stripe to facilitate payments in our tiny house application. Stripe is a technology company that builds infrastructure where online businesses like Tinyhouse, for example, can accept payments online. Stripe removes the complexity of dealing with finances and payments by working with various financial institutions, regulators, payment networks, and banks so businesses like ourselves don't have to. A remarkable number of companies use and utilize Stripe. Millions, in fact, over 120 countries. And this consists of small businesses as well as million to billion dollar organizations like Amazon, Google, Shopify, Microsoft, and so on. So what does it take to use Stripe within an application? Well, there's the simple-to-understand pricing plan that Stripe expects from us . There's the integrated or basic plan that essentially charges 2.9% plus 30 cents extra for every successful charge with a card. There's also the Customize plan where organizations and businesses can design a custom package by contacting the sales team with Stripe. Now, do keep in mind, depending on what tool you use from Stripe, there is maybe smaller additional charges, whether an international card is going to be used, whether there are tools like Alipay or WeChat Pay are going to be used, but for the most part, the payment plan or the basic payment plan follows a similar process of essentially charging a small percentage like 2.9% in a few additional cents. With that said, Stripe provides many different tools depending on the use case that one might want to use. There's their payments platform, their billing utility, their analytics tool, and a lot of other capabilities. We're interested in leveraging one in particular called Stripe Connect. Stripe Connect is the solution intended for marketplaces and platforms since it allows applications to accept money and pay out to third parties. Stripe Connect supports many different business models, on-demand businesses, e -commerce, crowdfunding, and so forth and so on. Stripe Connect provides many different customizations for how we want payments to be routed within an application. Here are some great diagrams and examples obtained from the Stripe Connect documentation. There's the one-to-one model where one customer is charged and one recipient is paid out with a one-to-one relationship between charge and transfer. This is a valid use case for an application that can be a ride-sharing service. There's the one-to-many model where one customer is charged and the funds are split between multiple recipients. A valid use case for this would be a retail marketplace where a consumer can purchase from multiple online stores within a single application. And there's the many-to-many model where multiple customers are charged and the funds are split out across multiple different recipients. A valid use case for this could be building a SaaS or software-as-a-service platform that charges customers a monthly fee for access to fitness classes at various different studios. There's also other more complicated scenarios that Stripe Connect allows for, such as the capability for the platform to hold funds before paying out to recipients, the capability is simply charged recipients a fee on a semi-frequent basis, and so on. Our application use case is going to be one of the simple scenarios and will just be a one-to-one relationship model. We'll have a single customer that is to say a tenant that pays out to a single recipient that is to say the host of the listing, and us, Tinyhouse, will leverage Stripe Connect to have the customer pay us a small percentage to use our application. There exists different account types within the Stripe Connect utility tool. There's the standard, express, and custom account types within Stripe Connect. And there are many different factors that go into choosing the best type of Stripe Connect platform to use. This table from the Stripe documentation lists many of these factors, but for us, integration efforts and the user experience portions are particularly important. For example, if you don't want to spend a lot of time building the actual onboarding flows for payments, standard or the express account types might be easier to implement. However, if you need more control over the connected user's experience, express or the custom account type might fit your needs. Now note that the custom option of Stripe Connect is API only, while the standard and express options provide integration through OAuth. We'll be using the standard account type for Stripe Connect. It is by far the easiest to integrate and the user would be responsible in dis puting any liability, not the platform. In other words, not us. In addition, the express account itself can only be created for individuals and businesses based in the United States and Canada, and the custom account requires us to take care and build the infrastructure to collect user information, create a user dashboard, handle support and so on. It's even noted that it's ideal for users that are able to dedicate significant engineering resources, so we're not going to handle that. In the next coming lessons, we're going to create our Stripe Connect account, retrieve the necessary credentials that we might need, and build out the capability to have users in our application connect with Stripe, and be part of our Stripe Connect platform. In the lesson manuscript, we're going to list the many different official Stri pe documentation links if you're interested in reading more and getting more details. You