How To Process Marketplace Payouts With Stripe Connect In Bubble.io

and then you can select the payments menu on the left and you'll be able to see a list of all of the transactions as i've shown you before as well as all of the payouts hello my name is lachlan kirkwood and today i'll be teaching you how to integrate a stripe connect marketplace experience within your own bubble application after completing this full course you'll have an understanding of how you can process payments across a marketplace then take a percentage of each transaction for those of you who don't know me i've spent the past year working with the bubble team to write their how to build blog series this series took a list of the top products out there on the market like uber airbnb and instagram and explained how you could rebuild them entirely out of no code using bubbles tool since then i've been creating my own bubble video tutorials to help share insights in a more engaging way if you're using bubble to process payments you're more than likely familiar with the default stripe integration through a plugin when you're using this plugin it's a great way to charge a user for a one-time payment across your application however this doesn't cover the use case of if you're running a marketplace you see within a marketplace there's not just two parties within a transaction but there's three if you include yourself there's the consumer looking to purchase a product there is the merchant looking to sell a product and then there is you as the marketplace owner who will take a percentage of each transaction using bubble's default plugin you're unable to process these transactions between two parties and take a percentage of each transaction however strive connect is a product that has been built to do exactly this and throughout today's tutorial i'll be explaining how you can integrate your own strike connect experience entirely out of no code within your bubble marketplace application throughout this full course i'll be explaining how you can register your own stripe account and then integrate the stripe connect product as well as how you can register users as merchants across your platform that can list their products for sale then i'll also be running you through how you can store a user's credit card information on their account in order to process payments after that i'll be sharing in detail how you can build the workflows to process transactions and then take a percentage of every sale and then finally we'll be creating a dashboard in our marketplace that allows merchants so the sellers on our platform to view a list of all the transactions and payouts they've received from your application so grab your bubble editor and let's get started so the first feature of our build today that i wanted to cover was actually just taking the time to set up and configure our own stripe account as the person who is the administrator of our application and then also integrate the stripe connect marketplace plug-in within bubble and just configure the api keys that we'll be using to make this functional but throughout this process there will be a few tedious things that i'm going to cover so i'd recommend watching with as much detail as possible and of course if you find it difficult at any time to keep up i'd recommend you rewind the video pause it re-watch it again so you can get a complete understanding of everything i'm walking through now for the sake of our tutorial today i've added in a list of all the key features i'd like to add within a notion dock here i'd also recommend if you wanted to follow along to create something similar what i love about notion is that i can just tick off every feature as i add it along it just helps me keep a better track on my build another thing i'd like to note is that if you are using the stripe marketplace connect plug-in it is a paid plug-in by zero code so you will need to of course pay for the plug-in to begin with it has a monthly subscription or you can buy it with a one-off payment but because it is a paid plug-in you will also need to have a paid bubble account so at the moment i'm just paying for their personal tier and this account type will be able to give you all the functionality you need for today's build so the first thing i'd like to do is jump over into our bubble editor and then head over to the plugins menu here and you'll need to install the stripe marketplace express plugin so you can just search to add a plugin just type in marketplace and then just select to install the first plugin which is the stripe marketplace express plugin and this is a pay plugin as i mentioned from zero code so i've already got that installed and then once you have installed it i would recommend heading over to the actual plugin page url that they have created here as it will give you access to the documentation for this plugin and also access to a demo editor that they've created now this will help you along the way however i did find that their documentation can be a little difficult to follow it's quite sporadic in the steps that it offers and i mean that's the reason why i'm creating this tutorial today to make it easier for you to follow along and i also found that the demo editor itself can be a little bit confusing although it's a beautifully designed application there is a ton of hidden elements and also the workflows can be a little confusing to get your head around particularly if you are new to bubble but once you have installed the plugin we'll jump back into our bubble editor over here and the first thing you'll notice is that we need to actually integrate our stripe api keys in order to make this plug-in functional now i'll be walking you through the entire step-by-step process today so i'm going to be registering a brand new stripe account from scratch and explaining how you can follow along and do the exact same as well so i have a tab opened up here and i'm going to be creating a new stripe account here i'm going to just add in a demo email address that i've created i'll add in my name my country is australia you'll need to update that based on where your location is and then i will add in a password and then i can create my account once we're in our strap account the first thing we'll need to do is just verify our email address so i'm just going to jump over into my gmail account now and verify that email that they've sent me and now that i've verified my email address the next step in our module will require us to actually activate our account so we'll just need to add in some information about our business itself and then once we've activated our account we'll then have access to our development and production api keys so we'll select to activate our account and what you'll need to do is go through and add in all of the information about your particular business obviously just for security details i'm not going to share what i add into mine here but what i will do is just jump ahead to the end of this process so you can then follow along once you've added in your own details and now i'm at the end of the process of adding in all my details just to iterate by now you should have added in the details of your business some of your personal information about your address and then also integrated your bank account that you'd like to receive payments through as well as set up two-factor authentication onto your stripe account so once i'm happy with the information i've added i will select done and now i've been redirected back to my stripe dashboard and from here the next stage in our process is adding in our api keys from our stripe account into our bubble marketplace plugin so if we scroll on down to the developers tab here you'll then see a drop down for api keys we'll select that and now stripe will display a publishable api key as well as a secret api key here one thing i will note is that these are the api keys for your production environment so when your application is live these will be the api keys you'll need to use however because in today's tutorial i'm just creating a demo application i will need to select the toggle here to view test data and now that will display a publishable key and a secret key for my test environment so once i have access to these keys what i'll need to do is copy and paste those into my marketplace express plugin and then that will allow it to begin sending and receiving data between my stripe account and my bubble editor so i'm going to toggle back into the live environment once again and i'll start by copying the publishable api key here then i will jump back over into my bubble editor head over to the plugins tab and i can now paste in the value within the relevant field for my stripe marketplace express plugin so in this case i'll start by pasting in the stripe publishable key so this is the key for the live environment as you'll see there is a difference between the development environment and both the live environment here so i'll paste that in that field and then above this i'll then need to reveal my secret api key and paste that in the field above so i'll jump back into stripe so i can reveal my secret api key and then publish that across so i'll jump back into my bubble editor again i'll paste in the value of that secret api key one thing i will note at this point in time though and if you read through the xero code documentation in front of your api key you will need to add in the word bearer and leave a space and that is just for the secret key field you won't need to do that for the publishable key so once again just reiterating you'll need to add the word bearer with a capital b then leave a space and then have your secret api key added in the field beside that now back in my stripe dashboard i can toggle back over to view my test data because i'll need to grab the publishable key for my test environment i'll copy that jump back over into my bubble editor and i'll paste that in the publishable key for my development environment here and then i'll need to replicate the same experience for my secret key so i'll head back into the stripe dashboard i will reveal my test key and now back in bubble i will paste that value in and once again i'll need to add the word bearer with a capital b add in a space before i add the rest of my api key value now from here there's just two last fields i'll need to add and that is my client id for our production as well as the client id for the development environment and in order to configure these fields what we'll need to do is actually create a stripe connect account now stripe connect is the product that stripe uses to process payments between multiple vendors which essentially just means that you as the middle person in the situation can facilitate transactions between users and take a percentage of each sale so once again i will head to my stripe account here i will then go to my settings tab and then from our settings page here you'll see a list of stripe products that we can integrate and what we'll need to do is add the stripe connect product so select your get started and then on this page it will just explain a list of the benefits and the use cases for strike connect we will then select to get started again and within the setup process it will give you a couple of different options as to what type of strike connect account you would like to create in our case today we're going to use the platform or marketplace example which is exactly what you think it might be so they give some great examples here of something like lyft where it's a ride hailing app there's users there's drivers and there's you the owner of the application you would obviously like to facilitate payments between both parties and within that you would take a percentage of each transaction so after we've selected this option we will select continue and then what you will need to do before we can grab our client id is actually complete our platform profile so this will once again just require some additional information about your business that you would like to run in order to find the best configurations for your marketplace connect integration so i will select to complete my platform profile i will select to get started and from here strap will just require you to answer some quick questions about the actual product that you're trying to build so to begin with what you'll need to do is just select the type of business that you're creating for the sake of our tutorial today i'm going to be selecting on demand services because i'm going to be rebuilding just a freelance marketplace like fiverr which as you can see they provide examples of what some of these products might look like so doordash lift and upwork but of course you'll just need to choose what best suits the product strategy that you have in mind from here i will select to continue to the next screen and now you will need to identify where exactly it is that your customers will be making purchases throughout your application in my case it is on my actual application so once again they give an example of lift where you are actually charging people within the application before you split the transaction sale which fits the use case of what i'm building today quite nicely so i'll select that choose the continue button and then i'll need to identify whose name will need to be listed on the credit card statement i'm going to use once again my platform's name i will just note that although my business name will be on the credit card statements i can still include the information of the seller on the platform who is selling their services or goods so once i'm happy with that decision i will select the continue button once again and now for the next question we need to identify who customers should contact if they have a dispute or complaint i would once again like that to be my platform i will select continue and now it has generated just an overview of my responses i will submit that application and now i will need to select the type of strike connect account i would like to integrate with my application so it gives you a bunch of different options here with different capabilities to suit your unique use case i'd recommend taking the time to read through each selection and if you'd like to learn more information you can always select to view their account type documentation here for most cases though you will just need to use the express account type which integrates quite nicely with our marketplace express plugin so i'll select to choose the express account type and it will then send you through to the account type documentation where you can view how to integrate this of course this will be explaining how you can do it manually through code however today we just need to integrate our client id for our connect account with our marketplace connect plugin so if i jump back over to my other tab here i can then head into my settings and you'll now see there's an option to select the settings for our drive connect account once you're in this page you can see that my account has been set up if you would like you can also update the branding of your stripe connect experience so this is just a demo or preview of what that connect experience portal will look like for merchants when they register for your marketplace or platform as it stands i'm happy with just the default branding that has been added but if you'd like to customize this i'd recommend taking the time to do that now but if you're happy with the way it is we can just scroll on down and what we'll need to do now is copy across the client id and paste that into our marketplace connect plugin but before we do that what we will need to do is actually just enable our xero auth settings here so what this essentially means is that in our marketplace experience when a user would like to sign up as a merchant that wants to sell something we will redirect them through to our stripe connect portal where they can register an account but if they already have an existing stripe account we would like to enable them to just simply log in through a zero auth authentication meaning they won't need to create a new account so we'll just select both these toggles here to enable those features and then we will copy across our live mode client id jump back into our bubble editor and i will paste that into my client id here then i will head back into my stripe dashboard and i will need to do the same for my test data so i will select to toggle across to my test data i'll scroll on down once again i will copy the value of our client id this time it's the test mode id so our development environment i will then enable our zero or settings across both the express and standard accounts and then head back into bubble and paste in our client id in our dev id field and just like that that completes the first stage of our build today which is just integrating the actual marketplace express plugin as well as setting up our own stripe account and integrating the stripe connect product into our stripe account so i can jump back over to my notion dock here and i can tick off the first list of features that i've created so as i mentioned i've created a strap account i took the time to activate my account i've added in my api keys which included both the dev and live api keys i added the bearer configuration at the front of my secret keys i then added in the client id from my stripe connect settings and throughout the onboarding process i was also able to enable the strike connect account which of course just required us to choose the account type that we would like to use which was the express setting after we've taken the time to set up our own stripe account as the owner of our application we can move on to the first core feature that users on our platform will be able to engage with and in this instance we'll start by creating a feature that allows users to register as sellers on our platform so as i've mentioned in my application today i'm creating a freelance marketplace so i'll be creating a function that allows users to sign up as freelancers who can then list their services and charge those looking to purchase those services so if we jump on into our bubble editor i'll show you how we can get started over in my editor here i've created a very basic settings page that allows users to update the information of their account this will just include things like their name their bio their profile photo and also an account type so when a user registers an account on my platform so on the registration page here i have a drop down element that's identifying if the user their account type is listed as someone who's looking to sell products or services or someone who's looking to purchase products or services and the reason i have this element is just so in my database i can differentiate between both parties on my marketplace that i'll be connecting so that's why over on my settings page again i have added in a similar option just to allow a user to update their profile setting preferences just in case for instance they were to sign up as someone who was looking to just purchase products or services but later on they're interested in becoming a freelancer on our marketplace now what i have also created if i head to my elements tree here is a couple of hidden elements and the first one is a connect option here which will allow merchants on our platform to connect or create a stripe account of their own and when they do create an account we would like that to integrate within our own stripe connect marketplace that we built in our stripe dashboard now this element is hidden here it's not visible on page load so this is just a group with a text element and a button inside of it but i've also created a condition which allows this element to only display if the user's account type is registered as someone looking to sell products so the same account type within our drop down menu here identified as i'm interested in selling products so that means that this group will only display to users who have registered as potential merchants in our marketplace so from here what i would like to do is create a workflow when this button is clicked here that redirects a user through to a stripe portal where they can either register or log in as a merchant within our marketplace so before i go and create the workflow when this connect button is clicked there's one other thing i'd like to mention that you'll need to add to this page if you head to your visual elements tab here in your ui builder if you scroll on down you'll see the element here called stripe marketplace token and this element won't be visible to users so here's my token here if i was to select it so strike marketplace token a the reason you'll need to add this element is because this is essential in order to power the workflow that we'll be creating in our tutorial today then once you've added this element we can select the connect button and start edit a workflow and within the first step of our workflow we will integrate that token on our page that we've just added with a unique id for this current user so the person who's registering as a merchant so i will add our first action here and i'm just going to search for the event create id and then you'll see the option create id number token from a stripe marketplace token i will select that and automatically it's now going to select our stripe token element that we've added on that page but what we'll need to do is match that token with a unique user id now you could create your own unique id for a user but there's no need seeing as bubble will automatically add a unique id when an account is created so the way you can source this idea is by inserting dynamic data and choosing from the current user so the person who's logged in if you scroll on down you can find their unique id and that will just be a string of numbers that's associated with this user account now once we've configured this token we will add an additional step to our workflow and this action will be used to redirect a user through to our stripe portal so i'll just type in the event called connect and i will just choose the first option here which states connect express standard account and i won't need to configure any of the options here you could if you would like to send through an email address so the user doesn't need to fill that in but i'm just going to leave these configurations as they are by default now once a user has been redirected through to the stripe portal and they've registered their own connect account they will then be redirected back to our settings page and throughout this process stripe will also send through a unique url parameter that we can extract to identify all of their new account information that they've created so what we will need to do is create a separate workflow again that can extract that url parameter when stripe redirects a user back to our settings page so i will create another event here and i will want this event to trigger when the page is loaded so every time a user refreshes the page or lands on this page but of course i won't want this workflow to run in every instance when the page is loaded instead i would only like it to trigger when a user has been redirected back from the stripe portal so in order to create this experience what i can do is add a condition onto this event and within this condition i'll only allow it to run when the page url currently contains the stripe connect parameter code so i will add a condition here and i'll select only when i'll scroll right on down to the bottom and i will select the get data from page url option and now i can choose from a custom parameter that's been sent to this page and the name of stripes custom parameter that they'll be sending through is just called code and i would like this workflow to only run when that url parameter is not empty so when it does have a value of code within the url string then within this workflow i will need to add an action i will search for connect and i will select the second option here which is stripe marketplace complete connect express account connection and then what i'll need to do is link the parameter code that's been sent through from stripe and verify it with my own application here so i will once again need to pull the parameter code which will contain all of the information through our stripe api so i will insert dynamic data scroll on down to the bottom select the get data from page url option and i will identify that the page parameter is code and that's all i'll need to add for this step but additionally i'll also need to make changes in our database for this current user because although they've registered their stripe connect account through stripe we'll also need to update some information on our own marketplace or platform so what i'll need to do is add in an additional step to this workflow i'll select from our data tab and i'll opt to make changes to a thing the thing i would like to change is the current user and in this case i will need to register a seller id for this user so i already have a data field here called seller id i will just jump into my database and show you what this looks like so under my user data type here i have a seller id which is just a plain text field you'll also need to create this within your database under your user data type and then back in my workflow editor i will update the seller id to be the result of step one so the stripe verification token that's been sent through and then i will need to pull the stripe user id so that is the account id of this merchant from the stripe account that they just created and now the last thing i'd like to do within this workflow is just display a success alert to this user just to create a user experience that can clearly explain to the user that they have successfully integrated their stripe account now if i head back to my design tab here i've created just a very basic pop-up that just congratulates the seller for successfully registering their merchant account so what i'll need to do is just show this within our workflow editor so i'll select our workflow tab i'll add an additional action i will scroll on down to the element actions and i will choose to show an element the element will just be my pop-up here and now that will just complete the process of registering an account now before we go and test this whole experience there is a another configuration we'll need to add so at the moment within our first workflow we are redirecting a user through to our stripe express portal and then the stripe portal will be redirecting a user back to our landing page where we'll be extracting the parameter code from the url but what we will need to do is identify in our stripe dashboard what url it is that we'll need to redirect users back to in this case it will be the current settings page that we're working on so if i jump over into my strat dashboard here in another browser i have we can select our settings option here we will then head over to the connect option and select the settings button here and then if we scroll on down to the bottom of the page you will see an option to add a redirect here so what we'll need to do is select to add a uri and then we will add in the url of the bubble page we would like to send the user back to so if i head back into my bubble editor i will need to preview this application and then i will copy the url of the actual application not of our editor here and then i'll jump back into stripe and in this instance i'll be adding the redirect uri to our live environment so if i was to paste in the value of our url here because this is our live environment i would need to update the url with the actual production url value once our application has been published so that won't include the version test in the url nor would it include the debugger value as well so i could add that uri and then what i will need to do is add in the actual value of our test environment to our test data so i'll select the option here to toggle on our view test data and then i'll scroll down to the bottom again and then i will add the uri and i will paste in the value of our settings page where it's the version test and then i will add that as it is by default so now when we're testing this whole experience it will send the user back to the right version of our settings page now one last thing i will note you can do in your bubble editor is if we head to our design tab here we can just add some dynamic text elements onto our page that will allow us to verify the stripe merchant id that they've just created as well as the stripe code that's been sent through the url parameter so i will grab a text element and i'm just going to drag this anywhere on my page this is purely just for the sake of being able to verify on our end as the application editor that this workflow has successfully run and within this text i would first like to pull the stripe code that's been sent through in the page parameter so i'll just put stripe code i will then insert dynamic data scroll on down to the get data from page url and the parameter as i mentioned before is called code and then below this i'll add in an additional text element and in this case i would just like to verify the seller id within our own database so i'll just type in stripe id and then i'll insert dynamic data and choose to display the current users seller id which of course is the value that we've just stored in our previous workflow now let's jump over into our development environment and preview what this whole experience looks like over in my development environment here i've just created an account for a user called alice jordan and she is registered as someone who's interested in selling products and services in our marketplace as you can see she currently doesn't have a stripe id associated with her account as she has not yet registered through our connect portal if we were to select the connect button it will now redirect us through to our stripe connect portal and you can see here that alice now has the option of registering her own stripe account if she did have an existing stripe account as you can see she could just enter in that email address and it would skip this whole process of having to sign up a new account but in this case what i'll need to do is just register an account here and once i've done that i will skip ahead to the end process where i will show you what happens when this user is then redirected back to our settings page so i'm at the end of the process of adding in all my details for alice's account here once i'm happy with the information i've added i will select the done button this will now register her stripe connect account and as you can see it will now redirect us through to our settings page that we've created it will display that success pop-up and then over on our page here you can see that we are pulling through the stripe parameter code that they've sent in our url string here and we have successfully registered her seller id within our own database if you would also as the builder of this application like to verify that alice's account has been registered within your strike connect dashboard you can head over to your stripe account here jump over to your connected accounts tab and then if you're currently toggled to view your test data you can scroll on down to your connected accounts and you'll be able to see that an account has been registered in this case i already had a connected account but the new account is pending as alice will need to verify her account through her email address before she's able to use that in our connect marketplace back in my notion doc i can now tick off that i've finished creating a feature to register users as merchants and sellers across our own marketplace throughout this process i explained how we could build a redirect to a stripe portal where users could register their accounts i then also explained how we could create a redirect back to our own settings page after that user has successfully registered as a seller when the user was redirected i was able to display a success message and also the dynamic information of the stripe parameter code and seller id that we've stored in our database and then finally i've also shown you a way of being able to review how many accounts have been connected within your own stripe dashboard so we can take all these features off from our notion list here and that is all i have time for in this tutorial today if you're interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey

Channel: Building With Bubble

Views: 6,986

Keywords: Bubble, no-code, visual programming, Buildcamp, Makerpad, Adalo, Webflow, Stripe Connect, no-code tools, app development, minimum viable product, mvp, software development, bubble visual programming, bubble no-code

Id: ixVVNMBRJkE

Length: 36min 49sec (2209 seconds)

Published: Tue May 11 2021