The ultimate guide to Stripe Connect and Bubble.io (full tutorial)

today I'm going to show you everything you need to know about integrating stripe Connect into your bubble application we're going to go through a bunch of things but you can see here I split it into three main sections the first section we're going to deal with is onboarding of merchants now Merchants are going to be the people who are selling products or services on your Marketplace application so for example if you're running an Airbnb style rental Marketplace the merchants would be the Airbnb hosts I'm going to show you can process Marketplace payments where you split the payment between the platform which you'll be running and the merchant who is the person who's selling the good or service on your platform so again in an Airbnb example if you're running an Airbnb sell Marketplace you will get a percentage of each transaction that occurs on the platform with the remainder going to the Airbnb host I'm also going to show you some more complex Marketplace payment flows things like putting a payment on hold things like delaying payments until a service has been delivered and finally splitting subscription payments so if you're rning subscription Marketplace like substock you can split the monthly subscri description between yourself and the writer I'm going to put time stamps to all of these sections in the description below so if you do want to skip ahead to a specific part you can do so now if you're watching this tutorial you probably know what stripe connect is but for those who don't a quick overview stripe connect is a product from stripe that makes it super easy to manage the payments aspect of running a Marketplace business so for example companies like door Dash will use strip connect as other companies like Shopify open table and even X as of late apparently this tutorial does assume that you have registered for a stripe account and that you have enabled to connect if you have not enabled to connect but you have registered for a stripe it's really easy all you need to do is go to the left hand side of your stripe dashboard I have connect here because I've already used it it may not be there if you haven't so you have to click on more find connect and simply activate it there is some onboarding flow to go through but it's quite simple throughout this tutorial we're going to be using the stripe connect Marketplace plugin this is a plugin I have developed myself it's been live for over a year and a half now and you can see as of the time of recording over 350 bubble Builders have used it to build applications that integrate with stripe connect I've got to see a bunch of ways that people use Marketplace payments in their bubble apps through running this plugin and I'm going to see everything you need to know in this tutorial from that experience to install the plugin you can go to the plugins tab of your bubble editor then if you click on ADD plugins and search for stripe connect Marketplace you should see it appear on the right hand side you can see here I already have it installed you can purchase it on a onetime basis or you can subscribe on a monthly basis and please note that subscriptions for bubble plugins are pro ratted so if you install it and uninstall it after a couple of hours you will only pay a few cents once you have the plugin installed we're going to need to configure our API Keys you can see here there's a bunch of fields that are currently blank we're going to be building out our demo application in development mode today so it's just these three fields that we're currently concerned with and it's really easy to get these three keys here API key Dev stripe publishable key Dev and strip Seeker key Dev all you need to do is go to your stripe dashboard click on developers click on API keys and for the publishable key we're just going to copy that we're going to go back to our plug-in Tab and we're going to paste that in there that's our publishable key done for our stripe secret key very similar we're going to reveal our secret key you may have to enter a password just for sec security reasons we're going to copy our secret key go back to our plugins tab paste it in there and then finally for the API key Dev very simple all we need to do is click on the box type in the word Bearer put in a space and then paste in the secret key again okay so now that we've done that our plugin is hooked up the stripe and we can start building out some workflows you you'll see here that I've built out a basic signup page and what we're building today for our demo example is an eCommerce Style app much like Etsy or depop or Amazon I've called a meop as you can see here and it's going to be an e-commerce style marketplace where merchants or sellers can sign up sell Goods on your platform and then your platform will get a percentage of each transaction that takes place you can see that on the signup form in addition to the standard email address and password input I've also created this one called shop name that's because each of the merchant who is signing up for your platform they're going to have their own shop and they're going to be able to name it something specific to them so what I'm going to do before I build it the workflows associated with this signup is I'm going to go to my database and I'm going to create a new data type and I'm going to call it store we'll create that and we'll create a new field on that store data type and call it name this is just going to be the name of the store that has been created so let's do that now now if we go back to our design tab click on the create account button and click on edit workflow we obviously want to sign the user up so we're going to go to account sign the user up the email is going to be the input emails value the password is going to be the input passwords value and then we're also going to create a new thing the new thing we're creating is a new store and what we're going to do is we want to set the name of that store to be equal to input name its value now we do want to link this store to the user so that whenever this user is signing up with their email address and password we're also going to link the specific shop to them so what I think is the best thing to do is if we go back to our database again and click on user if we create a new field on the user data type called store and make it the field type store then when we're going to sign up our user we can actually link this store to has created to this user that been signed up and what we can do is we can make changes to the current user we can say store is equal to the result of step two the store we created there and then that should link it to that user finally we're going to navigate the user to a dashboard page and I've created a very Bare Bones dashboard page at the moment you can see there's not really much here apart from the header but we are going to build that out in a second so let's go back to our mersion signup and goes to our workflow creating the account signing the user up creating a new store adding the store to the user and then we're going to send them to the dashboard page so let's sign a user up just to test all that out we refresh our page we're going to give this shop name as the Cranford Tech Shop email address is going to be shop Cranford tech.com and then the password will put in as well so let's create that account and and you can see we're being navigated to this dashboard page and you I remember from our checklist earlier that the first thing we want to do is onboard our merchants and what that means is that if a merchant or a seller wants to sell goods or services on your platform they need to have their own stripe account the specific type of account we're going to allow Merchants to create on our platform is known as a stripe Express Account it's a type of stripe account that strip does recommend for marketplaces like this so we need to find a way to allow our users to register for those stripe Express accounts we want our Merchants to be able to sign up for a stripe Express account and then fill out all the necessary stripe requirements Stripe have a bunch of information they need you to fill out before they'll register to you for an account and we're going to do that on a stripe onboarding portal so what we're going to do is we're going to grab a button in our visual elements we're going to drop it on our page and we're going to say register for stripe account and we're just going to fit that with the content and we're going add a bunch of workflow actions to this button but before we do we need to think about our database structure because we're going to be recording some information based on the user or the merchant signing up for a stripe Express account and what we're going to want to do is store down a couple pieces of information the first one is the unique stripe ID that's associated with their stripe Express account so what I'm going to do is I'm call call this field seller account ID and I'm going to make it a text field I'm also going to add a field called charges enabled I'm going to come back to this in a bit but what we're going to use this for is to figure out whether or not the user has supplied all the information necessary or whether there still some outstanding information that they need to give to stripe I'm going to set the default of charge enabled to be no let's go back to our workflow that we're going to build out for this button and the very first thing we're going to do is we're going to go down to the plugins tab here you can see because we have the stripe connect Marketplace plugin installed we have a bunch of workflow actions here that we can access and the very first one we want to use is the stripe connect create Express account action okay so this action is going to actually create a stripe Express Account it's not going to be fully registered in the sense that the user is still going to need to supply information later but it kicks off that process and there's a bunch of fields here that we need fill out the very first one is the country that the user's business is registered in so if I'm a seller on this meop platform and I'm based in the US I'm going to leave my country ID there as the us but my platform which I'm going to be using through this tutorial it's called qualified it's an old stripe account I had for a previous business and I'm going to to make things simple at first say that my seller business is also registered in Ireland the two digit code for Ireland is IE there's a full list of country codes down here that you can use and we'll leave it like that for email I'm going to use the current users email address just to keep things simp so so current users email and then payout interval this is really interesting so this is on what frequency your Merchant is going to get paid out say they make a bunch of sales in the first week of the month but you don't want them to get paid out until month end if that were the case you would leave the payout interval to monthly and then you'd also set the monthly anchor here which is the specific date in the month on which the user will get paid out only if you set this to monthly so if I set it to one the user is going to get paid out from the platform on the first day of every month whereas if I set it 2 30 it'll be 30th day of every single month you can also set the payout interval to daily if you wanted your Merchants to get paid out on a daily basis or weekly if you wanted to get paid out every week I'm going to leave it as monthly and I'm going to leave the monthly anchor as 30 for now so this workflow action is creating stripe Express account we then want to take information from this and save it to our database so what we're going to do is we're going to make changes to the current user and we're going to fill out that seller account ID field that we created and it's going to equal the result of Step One its stripe account ID so that means that we're creating the express account in step one and then we're saving it down to our database now we want the user to be able to access stripe onboarding portal so again we're going to use a custom workflow action that comes with the plugin and we're going to be using this stripe connect create onboarding link action next and again there's three Fields here that we need to fill out the first one is the stripe account ID of the connected account you're onboarding so because this whole platform is going to be built on stripe connect you may hear me refer to connected accounts that's essentially Merchant accounts that are on our platform an account is the unique stripe account ID that's associated with the connected account which is the merchant strive Express account and what we can do for that it's really simple we can just say the result of step one it's stripe account ID so again we're creating that Express Account associating that unique ID with the user and then passing that through to the account field here refresh URL and return URL are essentially the web pages you return to if you exit the onboarding flow let's go to return URL first because hopefully it's the one that'll be most applicable to you return URL so the user will be redirected to after leaving or completing the onboarding flow uh what I'm going to do for this is I'm going to insert Dynamic data and I'm simply going to say this URL which will send us back to the dashboard page so again if you think about we're on the dashboard page we're going to have a button here now if we refresh our page we're going to register the user for a stripe Express Account they'll be sent off to stripe onboarding portal and then once they finished I want to send them back to this dashboard page refresh URL this is the URL the user is going to be redirected to if the account Le is expired or it just doesn't use for some reason again I'm going to keep things simple and just leave it as this URL and then the final step in this onboarding flow is we're actually going to send the user to the stripe onboarding portal so again we can go to navigation open an external website and we're going to want to go to result of step three it's URL you can see that's coming there automatically so let's test this out refresh our page and let's register for a stripe account and you can see here we have been sent through to this connect. stripe.com URL this is the stripe onboarding portal H you'll also see here that my applications branding is showing up this is qualified again like I said a previous strip I've used and this custom color scheme I'm not going to spend too much time going through the intricacies of the stripe onboarding portal because this is going to be different depending on what geographic region you're in because I registered for an Irish account the requirements that are going to be shown on screen here are going to be different to what's going to be shown if you're in Australia or Canada or the US so I'm just going to fast forward to the very end of filling out this information okay so I provided all the information Stripes asked for you know things like my website address this is all just dummy details uh some banking details so I provided 10 bank account details just for the demonstration purposes here today but you can obviously add your actual banking details so I'm going to click on agree and submit and what we should see now is I'm going to be sent back to my dashboard page and you can see that is indeed what's happened and if we go to our stripe dashboard and if we click on connect and we look on connected accounts you'll see here you want to register shop Atron for.com it's been improved you can see here charges have been enabled on it I do eventually need display an identity document but for now it's okay so this Merchant is good to sell but one thing is that I've provided all the necessary information payments are enabled but not every Merchant is going to do that first time I can tell you from experience so what we need to do is we need to check if I have actually successfully registered for a stripe account or whether there's still some outstanding information that I need to give and the way we can do that is we can use this charges enable field that I've added here remember the default is set to no and what we can do is when the page loads we can make changes to the current user and what we can do is we can say charge is enabled equals and then we're going to use this get data from an external API workflow action the API provider is again we're going to see a bunch of different calls that we have because we have the plug-in installed and what I'm going to do is I'm going to go to retrieve Account Details the account ID is going to be the current users set account ID and you can see we have a bunch of information we can get back there's so many things that you can get information back from strip for the only one that we're concerned with right now is this charges enabled field so just having a quick look at our database you can see at the moment my one user's charges enabled are actually set to blank H they probably should be set to no but I think I signed the user up before I set the defaults to no I'm just going to manually change that now but then if we re fresh our dashboard page we should see that workflow run in the background and if we go to our database and refresh you can see charges enabled have now gone TS we probably want to demonstrate this on the dashboard itself so what I'm going to do is I'm going to grab the text element just drop it in here and I'm going to say charges uh stripe charges enabled and then we'll put in current users charges enabled and that'll default to know if we haven't but if we have that workflow run and change it to yes let's just tidy this up and refresh our page okay we probably don't want to register for stripe Account button there if they've already successfully registered for one so what I'm going to do I'm going to say is when current users charges enabled is yes this element is visible untick that and that should remove it from the page for this particular user okay this is a good start but like I said we want to check if a user hasn't successfully provided all of the information so let's sign up another user and this time just kind of not provide the correct information to stripe or something along those lines I'm going to log out we're going to be brought back to the index page which is currently blank let's go back to Merchant signup and let's just call this one the Cranford Bookshop books croner tech.com and again a simple password and let's create that account and you can see here we're getting an error if you look at the bottom right we're seeing this little warning and what are we saying okay we're seeing that D strip connect retrieve account details just returns an error and an unauthorized request URL accounts now what's actually happened here is if you think about it when we're running that workflow on the dashboard page we require a stripe account ID but this user hasn't actually registered for a stripe account yet so therefore we're going to get an error if we run this workflow when they haven't registered for that account so what we're going to do is we're only going to run this workflow when current users seller account ID is not empty so only when there's something there so let's refresh our page and we shouldn't see the eror this time because I don't expect that workflow to run and it hasn't so that's a good start and this time when we're registering for a stripe account let's click on that button we're once again brought to the strip onboarding portal but instead of filling out the information let's just click on the return to qualify button so let's say the merch doesn't fill out the necessary information our charges enabled have state at no which is good because again they have not supplied enough information and if we go to our connect it accounts and we refresh that what we should is that we have an account under books at cran for.com that's restricted and you can see that is indeed the case because they haven't supplied enough information charges and payouts were paused if you click on requirements you can see that I haven't supplied any of this information now if they do want to go back into the onboarding flow it's really simple all you need to do is again use a similar workflow to what we have we don't want to create an account again so what we probably should do is just create another button so we want to copy this one going to paste it down and we're going to say this is going to be complete stripe registration and this is only going to be visible when remove that condition this is only going to be visible when the current user seller account ID is not empty so they do have an account but charge is enabled is set to no that's the only time this is going to be visible so we'll put that there and I will say this is not going to be visible on page load and if we refresh we should see that that button will pop up for this user because that is indeed what their scenario is and we don't really need this so what we can say is this is going to be not visible when the current user's charg is enabled is yes or when the current users seller account ID is not empty so if they do have some sort of account and again let's refresh and we should only see the one button now which will be complete stripe registration and it's really simple all we need to do is go to this button go to add workflow go back down to our plugins and go to create onboarding link the stripe account ID this time around is going to be equal to the current users seller account ID we'll set the refresh URL to be equal to this URL again I'm going to add something on the end of the return URL what I'm going to say is this URL I'm also going to put a parameter at the end of it and the way I'm going to do that is I'm going to put in question mark and then I'm going to say return equals true and I'll show you why I'm going to do that in a minute but for now let's just bring the user back to the onboarding portal so we can go to result of step one it's URL it's popping in there automatically and refresh our page and let's complete the stripe registration and again you can see we're brought back here and maybe just for demonstration purposes let me fill out some of this information so we'll use this and we'll continue and I'm going to fill in some of this info here so I filled out all the personal details but what I'm going to do is I'm not going to fill out the business details for now and if I go back to my dashboard you'll see return equals true was in the parameter for a second I'll come back to that but if we go to this and we refresh you can see here there is still some information requested I think we fill out one or two of these but again let's go back into the onboarding portal before I do I wanted to figure out that issue with the return equals true actually because you can see here H that didn't show up so I think what we need to do is put in just that at the end of it refresh our page complete strip registration and we can continue use a test mode and what you can see here is we don't need to fill out all the information again we've already filled out some of it so stripe is smart enough to know which information we've given it and what information is outstanding let's use a test account there and then we can agree and submit and you can see this time we do have the return equals true in the page URL but before coming onto that what we can do is just take a look and refresh our connected account we can see now that payouts have been enabled on this particular account now you will see at some St we're going to need to provide some identity documents which means that I would recommend keeping this onboarding flow as it is at the moment where you know if charge is enabled comes up as note they're going to have the option to go back to the portal so just to note that now the reason I put this return equals true parameter in the page URL is want to signal to the merchant more obviously that yes you have registered for a strive Express account so what you could do and you don't have to do this but I think it's a nice touch is you could add a popup element so if we search here for our popup and we put this in here uh what we could do is we could put something in like uh a text element let's drop that in there and say you've successfully registered for a stripe Express account uh we'll just make that heading and we'll just make that fun a bit nicer change the layout to a column put it in the center and apply some padding H maybe just change the width of the height of that to be a bit smaller is heading six okay and then what we want to do is we only want to show this popup when two conditions are met we want to show this popup number one when they have registered for a stripe Express account and number two only when this return equals true is in the page URL because what you could do is you could show it on every page load when the user has their charges enabled but we don't want to show this every single time user logs on to their dashboard so what we're going to do is we're going to say when page is loaded but only when current users charge is enabled or yes that's condition one and then also when get data from page URL we're going to type in return here we're going to say only when that is or only when that is true so because return equals true is in the page URL at the moment if we refresh we should see that pop up ah well it won't because we haven't actually triggered the popup so what we're going to do is we're going to go show an element and we're going to show the element popway and you can see there that does actually show up whereas if this return equals true wasn't in the page URL in the popup is not going to show up so we now gone through how to onboard Merchants to your Marketplace app before we move on to processing Marketplace payments which is the next part in our ultimate guide I do want to talk a bit about debugging because this is likely going to be something you'll come across at some stage as you're building your Marketplace app and every now and then you're either not going to submit the right information to stripe the formatting will be off or something may go wrong this is very easy to resolve stripe very generous in terms of explaining what goes wrong and what you need to do to fix it so what I'm going to do is I'm going to log out I'm going to create another user and we're going to register for stripe Express account but this time I'm going to send the incorrect information so let's just do another dummy store name so we'll create that account um we be brought to our dashboard but this time when we're initially registering for a stripe account what I'm going to do is I'm going to leave email field here blank and strip also needs an email in order for it to create an Express account for us so I'm expecting to see an error here and you see I'm getting this alert that says plugin action stripe connect create onboarding link error when par response the key error is not part of the B type definition now I know that I haven't given the email address to drive and that's what's causing the error but sometimes you're going to see something like this and this isn't a particularly helpful response it's pretty generic and it doesn't really tell us a source of the issue but thankfully if you go to your stripe dashboard and you click on developers and you go to logs what you'll see here is we do have a list of all the actions that stripe has done on our accounts over the past today first of all and going back even further and what's really useful is it gives us an error code over here on the right hand side so you can see here there was an error with this particular workflow and you can see here it was caused because we pass an empty string for account and if we scroll down we'll see here account was indeed empty now this is a bit confusing because we didn't actually even get to that stage if we think about our workflow before we even create the onboarding link we're creating the account and the reason that stripe is telling me that this account was empty is because it was never created in the first place and we know that because we look at the error prior to it you'll see here we have email invalid invalid email address and you can see your email was empty which was indeed what we did so if you do come across an error like this for any particular workflow that you that you're using to stripe connect Marketplace plugin for this is the best way to figure out the issue straight away we're now going to move on to processing Marketplace payments and you can see here the first thing we're going to do is just go through the mechanical splitting a one-off payment between a merchant and a platform going back to our dashboard page you might notice I made a couple of changes here first thing is just added name of the sell store to the top of the page but I've also added more importantly this my product section and what this is going to be is this is going to be the area where the store owner in this case the owner of the Cranford Tech Shop uploads products that they want to sell on the meot platform you can see here that I've already added two products and I'm just going to add one more to show you how it works so we'll click on add new product and we'll call this new product cardigan we're going to get a price of50 is going to be the currency or $50 I should say for this store and then we're going to upload an image and we'll click add product and you can see now it's appearing under the my product section and just to give a quick look at our database what I've done is I've created this new data type called Product I've given it the field image which is an image name the name of it price which is the price of it and then finally the store is linked to so if we take a look at the cardig I've just uploaded you can see it's linked to this store which is in fact the Cranford tech store which you can see here now if we go back to our homepage I've also updated this just to show that all the products that are for sale on the meot platform at the moment these three are from the one Setter the Cranford tech shop but if you had other Sellers as well on the platform they would also be adding their own products and if we click on one of of the products let go with the Classic Blue jumper we're brought to this product page uh it's quite a simple workflow that's involved with that when one of the products is clicked on we're simply going to page product sending the current sales product as the data and if we look at the product page you'll see it's quite basic it's just the current Page's products name the current Page's product store name and then the image the description and some placeholder text that I puted in there as well but what we want to build out now is a payment flow associated with this buy button so when a customer clicks on this buy button we want them to be able to input their care details and purchase this product so what I'm going to do is I'm going to log out as the store owner and then if we go back to a customer signup page very similar to The Merchant signup page so let's just sign this customer up and create an account for them brought back to the homepage and quickly just looking at our database what we could do is we could probably distinguish between customers and sellers and give them different user roles we don't need to do that now but just something you may wish to do on the signup flows add in an extra action that essentially makes the the user here a customer and equivalent on the merchant signup page make them a merchant okay now we are logged into customer and what I'm going to do also is I'm going to get rid of this my shop button up there because we don't want to show that to a customer really so I'm going to say is when the user is logged out it's not visible or when the current users seller count ID is empty so any user that doesn't have the seller account ID not going to be showing that therefore the customers won't let's click on our classical jumper again and we want to buy this jumper before we click buy we want to structure our database so we can record information relating to this transaction so I'm going to go back to my data tab I'm going to click on data types and I'm going to have the new type called transaction and there are a number of fields here that we want to add we're only going to add three for now we will add further as we get deeper into the tutorial and get into more kind of complex flows but for now all we need is amount which is going to be the total value of the transaction it's going to be a number check out session ID this is going to be a unique stripe identifier which I'll explain in more detail in a minute and then finally seller account ID this is really important because this is the stripe account ID that is linked to the seller of the good that we are purchasing okay now let's go back to our product page and build out the workflow associated with this buy button here the very first thing we're going to do is we are going to create a new thing the new thing we're going to create is a transaction and we're not going to change any fields in it just yet we will in a minute but let's leave it blank for now the second thing we're going to do is we are going to create a checkout session so you can see here under stripe connect we have stripe connect create checkout session and we also have stripe connect create checkout session subscription that not what we're going to be using now we make it onto this later in the tutorial that is really gear to our subscription payments for now we're going to stick with stripe connect create checkout session there is a bunch of fields here we need to fill out it looks like quite a lot but it's quite simple once you get into it the first thing we need to fill out is the success URL so this is the URL the customer center when the payment is complete You may wish to redirect them to uh you know congrats on purchasing this good page but for now I'm going to keep it very simple and I'm just going to put in website home URL essentially sending them back to the homepage we also need to put in a URL the customer will be directed to if they cancel the payment during the payment flow and again I'm going to keep it really simple for now and just put in website home URL stripe account ID this is the unique stripe account ID of the seller of the good or service and in this case we obviously want to get the stripe account ID associated with the shop Cranford tech.com accounts so we want to get this value here and what we can do for that is if we go back to the workflow what we can say is we can go for the current Pages product stores creators seller account ID so a couple of layers there but what we're essentially doing is we're getting the store we're getting over created that store which is our seller and then getting their stripe account ID platform fee and you'll see in bracket here it says sense this is really important so I'm actually going to fill out the price sense field first and then come back to this the price in sense is the price of the good or service that is being sold and that's going to be equal to the current Pages product price quite simple so again in this example if we're purchasing that kind of blue jumper you would see here in our database we have for products Classic Blue jumper price is 50 but as the information highlights you do need to put this in in cents so at the moment 50 is supposed to represent $50 what we need to do is we need to multiply this by 100 to get to our cense value and then we want to decide how much the platform which is going to be your bubble app how much that's going to take from each transaction so I'm going to copy this expression here I'm going to paste it in here and we're essentially going to get to our $50 again we obviously want a platform taking the full amount of the transaction I'm going to let them take 20% so I'm going to click on more here and I'm going to multiply it by 0.2 and that will allow the platform which is meop in this example to get 20% of that $50 transaction which is $10 currency is an US Dollar by default you will notice that you will have to use a three digigit ISO code you can see a full list of currency supported by stripe at that link so if you're unsure as to whether the currency you wish to use is supported please do check that out out I'm going to leave that as USD for now and then product name is going to be equal to the current Page's product name there's a few other fields here so there's on behalf of there is delayed payment Fields there's embedded checkout session I'm going to come on to these later I want to just get us up and running with a simple Marketplace transaction for now now you might remember in step one we created a new transaction but we didn't actually record any information against it we're going to change that now what we're going to do is we are going going to make changes to a thing the thing we're changing is the transaction that we created in step one and we're adding a bunch of information to that entry the first thing is the amount and you could do this in two ways you could really take the value that I've added in uh here the price and sense or what you can do is you can do result of step two the amount of that I think that's quite a simple way of doing it so that's what I'm going to go for seller account ID that's going to be equal to current Pages products stores creators seller account ID again much like we did in step two and then finally check out session ID this is really important because we're going to use this to retrieve further information down the line for now all you need to know is it's going to be result of step two it's checkout session ID just to expand on checkout sessions for a second so the entire plugin is built on the stripe checkout product this is essentially a way that stripe allows you to create Dynamic payment forms where people can pay for goods using their credit card or other payment methods you'll see it in action in a second and in fact we're almost there the next step and the final step in this basic Marketplace transaction flow is to navigate open an external website we're going to insert Dynamic data and we're going to go to the URL that's created in step two so let's refresh our page let's click the buy button and see if works out okay and you can see here we're getting an error so let's do our debugging much like we did earlier on let's go back to our logs so again just for memory sake developers logs and if we refresh our dashboard you'll see sometimes the errors don't actually show up which is kind of annoying H what you can do instead is just go to failed sometimes it shows up there let's just give it a second ah and you can see it did indeed show up there okay so what's it telling us it's telling us we did not specify a destination account and the destination account is essentially this value inside here so what I suspect is happening here this is due to privacy rules um sometimes they can interfere with you getting the data incorrectly so let me just try this in a simpler way so it's rather than saying that let's go with current Pages product creators set our account ID and then let's just take a quick look at our privacy rules to make sure we can actually get that data so that is publicly visible priv rules and we may need to tick this let's just try that out refresh our page and we'll click the buy button again and yeah you can see this time we are being brought to the stripe checkout you can see here the URL it's checkout. stripe.com I am later going to show you how you can embed this payment form in your own website but for now let's just stick with this so we have the options to fill in our details here I'm going to fill St in very quickly okay so I fill that information just for your own knowledge you can see here I've used a credit card number that's a bunch of 4 tws 4 tws that is the stripe test card if you Google stripe test card it'll give you a bunch of different card details you can use to simulate various different scenarios but that's what that is there but let's click pay for this I'm expecting to be brought back to my homepage because that's what we specified as the return URL and you can see that is indeed what happened let's take a look at our stripe Das board and see if that payment went through okay that looks like it's been successful you can see there there's been a payment for $50 uh you can see the customer was customer testmail decom those are the details I put in uh you can see here Stripe have taken a fee from it and they've also done the translation because this was a Euro count they've translated the $50 that were spent by the customer into my net Euro take now what's really important is if we go back to payments that was how much was spent in total let's take a look at collected fees yeah and you can see here $10 have gone to the platform which is qualified in this scenario or or kind of meop is the the overall platform I suppose um so $10 have gone to the platform and then if we look at connect and if we look at shop Acron for.com you'll see here they have a total balance of 35 so what that is essentially is not sure if we can look at the actual sales here if we look at payments maybe yeah so you can see here that this is how much they got out of that 4465 gross but then after the fee that went to the platform they got 35 net out of all of that so look that's how you do a very big basic Marketplace transaction let's go back to our database and just take a look at the transaction that was recorded there you can see here we have the amounts we have the seller account ID and we have the checkout session ID in there as well I do want to go back to the create checkout session action here and just go over a couple of the more advanced fields particularly this on behalf of field because this is quite important this will decide whether the customer is interacting with the platform which in this case is meop or whether they're interacting with the merchant on the platform which would be Cranford tech store in this case so if we just go back and we want to buy this one more time just click buy you'll see at the moment The Branding here is qualified you know there's no mention of the Cranford tech store we are really interacting with the qualified uh platform or meop as it should be really but if we change this to yes and we refresh our page and we click on that again and click on buy this time this time we should see information relating to cran for text show up yeah you can see there rather than the the qualified information we have cran for teex showing up and if we look in further detail at this explanation here you'll see that if this is set to no like now you will not be able to do transactions if the platform and the connected account are registered in different payment zones so for example I'm on an Irish platform at the moment which is meop is registered as an Irish platform crer Tech is an Irish entity as well it's the merchant on meop because they're both in Ireland absolutely fine no issues if we set this to no but if they were in different regions so for example Cranford tech store was a us-based entity and registered on an Irish platform this would be an issue you would not be able to use no so a lot of people will set this as yes by default just because they kind of a lot of Marketplace apps they're going to be Global in nature if your Merchants are primarily going to be based in the same region as your platform then you can't set that to no but a lot of people will set that to yes by default you can read more about it at this particular link down here as well now at the moment when we're processing these payments the payment form that's created by the checkout session it's on this checkout. stripe.com web page which is fine but a lot of people will actually want to host it on their own URL so let's say we want to host it on this stripe connect 2024 bubble apps URL you can do that that is possible it's actually a relatively new feature that has been added to the plugin because stripe only allowed it relatively recently um so what I'm going to do is I'm going to create a new page I'm going to call this checkout and I'm actually going to clone it from the product page actually we clone from the index page might be easier and I'm going to delete this group here so we have a pretty blank page but what you'll see is we have this element that comes with the plugin and it's called embedded checkout session what you're going to need to do is you're going to need to drop this on the page that you want to host the payment form on and I recommend letting it take up pretty much the full width of the page and giving it a height of at least 700 as well just so it has room to breed and we can fully see the payment form and then what we're going to do is when we're creating the checkout session on the product page which is here we're going to change two things I'm going to set this back to not just for a minute to keep it kind of consistent but what we're going to change is we're going to change this embedded session to yes and then we're going to specify a return URL now return URL is quite similar to a success URL in that it's going to be where the user redirected to after they've completed Le it the checkout session or you know purchase the good in other words so I'm going to take actually the same one that we have up here going to copy it and I'm going to paste it into here now because we have the return URL we don't actually need a success and cancel URL so you can clear these if you want to I will just show you but you can also leave them in and then the other change we're going to make is instead of opening an external website what we're going to do is we're going to navigate to a page and that page is going to be the checkout page okay so let's go back and buy a Christmas jumper this time it's not going to work this time but I'm just going to show you what's going to happen first of all and then we'll fix the one remaining thing we need to for this to be embedded on our page so let's click buy we're brought to the checkout page and there's absolutely nothing there so again not really what we want but we did drop that element in so we can get something to show up we just need to do one final step and in order to show the payment form using the embedded checkout session element what we need to do is we need to run a workflow on page load and we're going to say when the page is loaded we're going to go down to element actions and we're going to say load an embedded checkout session and we just need to fill out one value here and the value is the client secret value and this is quite a sensitive piece of information from a security perspective so I really recommend loading it directly in here rather than saving it down to your database or saving it somewhere else and the way you can get it directly is what you're going to need to do is we're going to use the get data from an external API we're going to use stripe connect retrieve retrieve checkout session details and then you can see if we click on more then we can actually access the client secret here but our issue is we need to provide the checkout session ID now we have saved that down to our database for a lot of our transactions you can see there but we need somehow to get it from this page here into this workflow here and the way I suggest doing that is is if we go back to our product page and that workflow associated with the buy button when we are going to the page check out what we can do is we can send a transaction and we we can send the transaction that was created in step one and you can see here we are getting an error and the error is occurring because we do not have transactions set as the data type on our checkout page so let's do that if we go back page checkout we can set the type of content here to be transaction our error goes away and now if we take a look at that workflow again on the product page we're going to the page checkout and we're sending the transaction we've created here we know that we're saving down a checkout session ID to that transaction so what we can do quite easily on the checkout page is here we can say current page of transactions check out session ID so I'm going to go back to the homepage again just so we can see the flow from start to finish and let's go to Cardigan this time let's buy that you can see we' been brought to a checkout and our payment form is loading up in our own page here so this is how you can embed the payment forms in your own bubble application which Some people prefer from a ux point of view so let's just fill out these details really quickly and let's click pay and we should be brought this time to the return URL and you can see again we are this is the homepage is the same as a success URL and if we take a look at our database and we take a look at our transaction we can see there that we've saved any information associated with that so we've gone through how to create a basic Marketplace transaction one thing we haven't accounted for is what if a transaction doesn't go through so if we have a user who let's say purchases a cardigan from one of our merchants and they click on the buy button but they then decide that they don't wish to actually go through the purchase and instead maybe they click on the home button well we don't have a way of distinguishing this in our database at the moment you'll see if we go into all transactions they all look the same at the moment there's no field to indicate whether or not a payment did actually go through so we're going to solve that problem now and what we're going to do is we are going to pull down the payment status on the return URL the success URL or the cancel URL page you might remember if we go back to our product page page and click on the flow associated with the the buy button that if we're embedding a checkout session we have this return URL here I'm just going to clear that for a second and put back in website home URL and then if we are navigating to a strip hosted page we have a success URL and a cancel URL and what I'm going to do is I'm going to add a bit of information to the return URL I'm going to use a page URL parameter to do this so I'm going to put in question mark and then I'm going to type in transaction equals insert Dynamic data and the result of Step One its unique ID so you might remember we created a transaction in step one no information was actually set to it here but a unique ID was created because we created a new transaction I'm taking that unique ID and I'm adding it to the end of the return URL this means that when a user purchases something now which we will demonstrate let's go with the Christmas jumper we'll buy that and I'll fill in these details really quickly we should now see when we click pay that we're redirected to the homepage but that we will have that transaction in the page URL and we can use this piece of information here to update the payment status of the transaction before we build out the workflow associated with that I'm going to go back to to my database I'm going to go to the data types and I'm going to add a new field to the transaction data type called payment status it's going to be a text field and then if we go back to our index page we're going to run something on the page load so we're going to say when page is loaded but only when get data from page URL transaction is not empty so we're only going to run this workflow when transaction is in the page URL and when that is not empty and what we're going to do is we are going to make changes to a thing we're going to do a search for the transaction and for now we're just going to pick the very first item and what we're going to do is we're going to say payment status is equal to get data from an external API and we can use the strip retrieve checkout session details call that comes with the plugin and we need to insert this transactions checkout session ID and then we have a bunch of information we can choose from here you'll see there's a long list of information we can get back from stripe the one I want to get back is payment status we're nearly ready to go on this but you might have noticed that we're not really searching for a specific transaction yes we're getting the first one but the first transaction doesn't necessarily have to be the one that we just created so what we're going to do is we're going to use this unique ID up here to identify the correct transaction that we want to update and what I'm going to do is I'm going to have a new constraint and I'm going to say unique ID is equal to get data from page URL parameter name equals transaction so what's going to happen now is bubble is going to take this unique ID it's going to cross reference it versus all of the unique IDs for transactions in our database and it's going to look up the one that equals this one let's take a look at our database one last time and then we'll refresh our page so you can see here the most recent transaction does not currently have a payment status but if we refresh our page and go back to our database and click refresh data you'll see there's still nothing going through there so let's take a look at our workflow and I can see I've actually spelled transaction wrong and that's why that's happening so my mistake there let's go back to the product page where we initially specified that and correct my typo so trans ask action that's the one and we can buy one more product buy that fill this out quickly okay okay let's pay for this Christmas jumper we should be brought back to the homepage we should see a unique ID associated with our transaction in the page URL and if we go to our database I'm hoping that we have a new transaction like you can see there the payment status equals to paid so that's how you track whether or not a transaction was paid for so we've gone through some of the mechanics of processing Marketplace payments and the next thing we want to look at is how to process refunds now either the merchant which in this case would be the only with the cran for tech shop or the administrator of the platform so whoever runs a meot platform in this example either of those users could have the ability to is issue refunds in this example here I'm going to assume that you want the merchant to have the ability to issue refunds and if we scroll down here you'll see I've added a new section to the merchant dashboard which is called my transactions and this is essentially all of the transactions that this Merchant has been involved in so if we look at the editor and just take a look at what's actually happening here underneath the hood you'll see that this is a table element uh what I'm doing here is I'm searching for transactions and I'm looking for all transactions where the seller account ID is equal to the current user's seller account ID so again just using that to filter for transactions that are relevant for this particular Merchant you'll see here under status I'm pulling in the current row transactions payment status that's the field that we created in the previous section of this tutorial it's not looking great from a UI perspective at the moment because we have a bunch of these transactions where either we didn't track track the status initially or we did track the status but it wasn't paid for and so it was left blank so what I'm going to suggest you do is you only look at transactions that were definitely paid for so what I'm going to do is I'm going to say at a constraint we only want the transactions or the payment status is equal to paid and then if we refresh our page we should only see this solitary transaction showing up here next we're going to want to create a workflow on this refund link that will refund the transaction now before we do that I do want to go back to our database and add another field to our transaction data type and call this refund status it's going to be a text field and we're going to set the default here to be na because by default payments should not be refunded just so I can see what that looks like uh for our most recent transaction here I thought I might tidy this up and just delete all of the ones that we didn't track properly because they were at an earlier stage in the tutorial delete all them I'm also going to add that default na just to this specific refund there okay then we're going to add in another column on our table here uh we're going to call this refund status and let's get rid of that and then we'll copy this and we'll say current row transactions refund status and let's refresh our dashboard we should see an NA next to that particular one yep Y and that's what that is and then what we're going to do is once this button here is clicked we're going to go to plugins stripe connect create a refund and there are a number of fields that we need to fill out here there's a payment intent id there's the amount we want to refund we want to figure out what are refunding the platform fee and then the charge type but let's start off with the payment intent id to get this field what we can do is we can go to get data from an external API we can go to retrieve checkout session details and we can say checkout session is equal to this trans current RWS transactions check out session ID and we want to get the payment intent that will give us that for the amount I'm going to assume here that you want to refund the full amount you can only refund up to the full amount of the transaction I will also say you're not going to get the stripe fees back they do not get refunded as part of the refund so what I'm going to say is I'm going to go for current row transactions amount you can choose whether or not you want to refund the platform fee which would be the amount that went to the meop in this example or whatever bubble application You're Building I'm going to leave this as yes and then importantly you need to specify whether the original charge was a destination charge or whether it was a separate charge and transfer we actually haven't discussed these two type of charges yet everything we've done so far has been a destination charge and this is relevant mostly for the kind of delayed payments that we're going to come on to in a later section of the tutorial so I'm going to leave this as destination for now just for reference in case you're curious you can figure out what kind of charge you initially used by looking at the create checkout session workflow and you'll see down here we have charge type which can be your desk destination or a separate Char and transfer but let's go back to our dashboard for a second so we're going to create a refund and let's just do this step for now we can build out the rest of this workflow in a second but let's refresh our dashboard let's also take a look at that payment in our actual stripe dashboard that's the most recent one there for $40 so if we go down here and if we click on refund something's going to happen in the background you see there something has gone through now we need to build out the eui a bit and the because it's not really great at the moment we don't know for sure whether that refund has gone through we we can check our stripe dashboard which I'm going to do now and you can see there that charge has now been refunded so once that $40 has gone through we would ideally like to update this refund status because at the moment this looks like any other charge you know it was paid for we don't know if it was refunded or not we still have the option to refund again which isn't great so so what we're going to do is we going to add a second step in here after create a refund uh we're going to go to make changes to a thing and the thing we're going to change is the current row transaction we're going to change the refund status of that transaction and what we're going to say is we're going to simply get result to Step One it starts so let's create another transaction from scratch and the best thing to do is probably to go back to our index page and then run as the customer this time and again we'll purchase our Christmas jumper buy that and again I'll fast forward through putting in these payment details on the embedded payment form and we'll click pay now so we should see another $40 transaction go through on our strip dashboard that has gone through and hopefully we should see about $8 of that go to the platform which has happened you can see the previous one was refunded and then if we go back and we run as our Merchant shop acrf for.com and take a look at their shop go down here and you can see here we have this other transaction here which was paid refund status is na but if I click on this refund button here you can see that refund has now succeeded so if we go back to our dashboard take a look at that we refresh that transaction has now been refunded and it's accurately shown on our stripe dashboard so two last things to tidy this up first of all I'm going to get rid of this earlier transaction because uh it's a bit confusing given we hadn't updated accordingly at the time so let's just delete that and then the second thing is this refund status this refund has been issued it has succeeded we should not have the opportun Unity to issue another refund because it already has been refunded so what I'm going to do on a dashboard page is I'm going to say when current row transactions refund status is succeeded this element is not visible and I'll collapse it as well when it's hidden so therefore we shouldn't have the ability to issue a refund on anything that's already been refunded and you can see that is indeed the case there so that's how you'd issue refunds as the merchant and you can Implement a similar system as administrator of the platform now this table that I created to keep track of transactions it's somewhat useful but we do actually have a nicer way of letting Merchants view any sales that they've made and stripe provid is Express dashboard which Merchants can access and the way you would create that it's really really simple if you just go back up to the top of your page uh let's take this button and we're going to put it in this group here and I'm going to call this access stripe dashboard and let's add a workflow to that what we're going to do is we're going to go down to plugins and we're going to say stripe connect create Express dashboard link and all we need to do is give stripe our account ID for the merchant so so that's going to be equal in this case to the current users's seller account ID and then once we've created that link all we need to do is open up an external website and reference the URL created in step one so let's try that out now and you can see we bro is connect.com dashboard uh we're in test mode and I've used a test number so I think I can just use those digits there to access the dashboard and you can see then we're brought in here and even though on my dashboard it was showing I think I only had one transaction in reality I had a lot more because we were doing some in this tutorial we were deleting them but you can see here that we have a list of all the transactions that we have received since setting up this stripe Express account and you can see the refunds are also going through there so it gives you nice granular detail on the various sales that the merchant has made you can get another list from here if you go into transactions you can export it you can look at uh various different time periods so just a nice way for your Merchants to be able to see the transactions that they've been involved in so we've now gone through what I considered the kind of standard Marketplace payment flow you'll see towards the bottom of this document though I do have three more complex Marketplace payment scenarios and we're going to go through them now the very first scenario I want to go through is putting a payment on hold and you can see here in brackets I have like uber the idea here is that you know if you get an Uber you might authorize the payment upfront you then get into the Uber and once you've been successfully delivered to your destination that charge is then captured and the funds come out of your account and into the platforms the kind of classic scenario I suppose for putting a payment on hold would be if you go to a hotel you might give your card details up front the payment won't actually be made at that point in time once you're checking out a few days later then the hotel takes the funds from your account and then a third example which is the one we're going to be going through today is if you're running an e-commerce marketplace with multiple merchants or sellers on it uh like in our meop example then particularly if they're selling you know a limited Supply product or something like that that they may want to double check that they do have the good in stock before actually taking payment so what we're going to do is we're going to allow customers authorize our payment details for a given product the merchant stre going to get a chance to make sure they can actually deliver that product and if they're satisfied that they can do that they will be able to capture the payment we're going to need to make one quick change to our database before we get into building out the workflows and that's for our transaction data type I'm going to add a new field called dispatched question mark and make it a yes or a no field and the merchant is going to be able to indicate whether or not they've actually dispatch The Good by default it's going to be no we're then going to go back to our product page and the buy button there specifically because implementing this kind of hold on a payment is actually really easy especially given we've already set up the checkout session creation process and all that all we need to do is go down get the delayed payment Fields here and change this authorized only from no to yes and what we can do is if we go back to our index page and we just run as a customer again we can see how this works on a stripe dashboard end first of all so let's say we want to buy it as Christmas jumper as a customer we're going to click buy Tod details really quickly and they in let's click pay we're brought back to our homepage but if we look at our stripe dashboard and look at our payments you'll see here that the most recent payment from Michael Scott it's uncaptured so we haven't actually captured that payment yet the funds have not left his account and gone into our own if you look at our bubble database as well just so you're aware we're still getting the payment status and you can see at the moment it's set to unpaid we're now going to make a couple of changes to our dashboard page so I'm going to rerun as our Merchant again which is the shop CR for tech.com account and if we go to my shop this is our kind of my transactions section at the moment but I just want to make a changer to that to account for the fact that we're now in an application where we want to be able to you know capture payment details so what I'm going to do is I'm going to change the status here at the moment this is getting the kind of checkout session payment status I'm going to change this and I want to change this to clear that I want to change it to the payment intent status and the way you get that is if you go to insert Dynamic data get data from an external API we want to get the payment details because if we can get the payment details we can get the status over the payment and the difference between the payment intent status and the checkout session payment status is that the payment intent tracks it over time you know the original status we were getting was very much unique to that original checkout session where it was either purchased or it wasn't but this case has a bit different because we are giving our payment details at one point in time but not actually capturing it until a later point point now we do need to provide a payment intent id which we haven't saved down um you could do that there's definitely ways to save it down but what I'm going to say here is get data from an external API we're going to get the checkout session details because we can get the payment intent id from that and then we're going to provide current rows transactions checkout session ID and then if we refresh our page I can see we have an issue here now because we didn't provide the payment intent there apologies so under payment intent you want to get retrieve checkout session details and then go down to payment intent now let's refresh our page and you can see we have succeeded in there uh I might actually just change the name of that to make it super clear what this is and then what I going also o do is at the moment uh we're filtering for transactions where the payment status equals paid but if you think about it by default if we're only authorizing a payment and not capturing it the default kind of behavior is that it's not going to be paid so I'm going to remove that filter for now and now you can see we have two different payment in intent statuses we have succeeded for the transaction that's gone through and subsequently refunded and then we also have this new and we've just created where it requires capture so what we can do is instead of kind of focusing on the refund here what I'd like to do is change that refund status to dispatched and we're going to change this the current row transactions dispatched and then I'm going to change this refund text to capture so let's refresh one more time and see how it looks so you can see here we have not dispatched this order I want to be able to capture it now though much like I did actually not like I did yet so I should have um indicated earlier what you can do if you want is you can capture payments directly from the stri dashboard so that Michael Scott test.com payment it's still uncaptured as is evid here what we can do is if we wanted to we could just capture from here now you can really only do this if you're the administrator of the platform itself rather than the merchant because your average Merchant who's building a store on your e-commerce platform they're not going to have access to this capability but let's click capture here capture the full amount and then if we refresh our page what we should see is that requires capture it's going to change to succeed it now this is an ideal because you know we're kind of doing one thing on stripe it's much better if we can build this programmatically into our actual bubble application so to avoid confusion what I'm going to do is I'm going to delete those two transactions there and I'm going to create a brand new one we will run as a customer again and we're going to buy Classic Blue jumper this time put the details in again super quick okay let's click on pay and let's run again as our Merchant just so we can see what they would see on their dashboard and if we go down we can see here they have one transaction $50 transaction it requires capture so what we want to do is let's assume that this merchant do now check their stock and they do indeed have a Christmas Jumper in stock they're ready to dispatch to the customer what we want to do is want to hook this capture workflow here up to something you might remember previously we had it hooked up for a refund that's not what we want to do right now instead what we want to do is go down to plugins and then stripe connect capture a payment and again we're going to need to supply the payment intent id and what I'm going to do to get that is get data from an external API we're going to use the stripe connect get payment details which again requires a payment intent id which we will get by going to get data from an external API get checkout session details and provide current row transactions checkout session so again reing the checkout session which we do have saved down to get the payment intent id which we do not have saved down to get the payment and then status bit of a m but hopefully that makes sense I'm just going to put in here pay intent perfect and then what we can do is we can just get the status for that now let's say we click this button uh we would ideally like this to update if a change has indeed happened so what I'm going to do is I'm going to then refresh the page just so we'll get a chance to reload this workflow here and before I do that what I actually also want to do is I want to make a change to the dispatch so we can change the current rows transactions we can change this dispatch from no T yes because again the only reason we're clicking this is because we've agreed that look we are happy that this item is in stock and we can dispatch it so let's make that obvious okay let's refresh our page let's go down here you can see payment in status at the moment says required capture let's now capture that payment and we're getting an issue here now so what are we missing let's find out no such payment intent exists okay so we're missing a payment intent somewhere and if we go back to our capture payment what are we doing here we want to get ah of course we're getting the status rou than the ID that would make sense so just to go over that again we need to write a payment intent id here when we're capturing the payment and I was getting the status instead let's refresh our page go down and again still requires capture let's click on capture you can see the dispatch did changed to yes and you see the pay status has now changed to succeeded and if we look at our strip dashboard go to payments you'll see the the most recent charge there for Jim halber $50 charge it has now succeeded and we should see our $10 fee as well going to our platform from that transaction so that's how you put a payment on hold I will say that this only works for up to 7 days this is maybe not suitable if you're building a Services Marketplace like upwork or Fiber where it may take Beyond seven days to capture the payment um this is probably more Super for more shortterm holds on cards you can read the full details on the stripe website if you just Google stripe authorize and capture it'll give you a full breakdown of everything you need to know on that let's move on to delayed payments for services marketplaces like upwork or Fiverr and the specific scenario I'm thinking of here is if you're building an application that is a Services Marketplace and you have Freelancers who offering their services to customers on your Marketplace you're typically going to want the customers to pay for the service immediately but for the freelancer not to actually get their cut of the transaction until service has been delivered and the reason we can't really use the authoriz and capture method like we went through previously is because like I said that does expire after 7even days the hold on the card so that's not always going to be appropriate for a Services marketplace where it can take much longer than that to deliver the end product so instead what we're going to do is we're going to look at one calling the separate charges and transfers method and we'll go through to pros and cons in a second but if we just go over here we should see a kind of outline of what this what this is H you can see more information on the stripe documentation as well if you Google separate charges and transfers there have some great explanations but at a very high level what essentially is going to happen is the customer is going to pay for the service immediately you can see the $100 being transferred to the platform that $100 is going to be held on the platform account so in our case it's going to rest in the meop account and then once the service has been completed the customer is going to Mark the service as complete and then the platform is going to transfer $80 to the freelancer while they hold on to the remaining $20 before stripe fees Etc and the reason this is a useful method is I guess you have the funds on your platform account straight away you can transfer funds to multiple parties so in some really complex marketplaces you may actually wish to transfer to more than one third party and you can achieve that with this method the big con with this approach is that the platform and the connected accounts must be in the same region so if You' have a platform that's based in Europe but a freelancer who's based in the US and has a uh an American stripe account that is not going to work there's also a bit of complexity in the sense that you need to ensure you have sufficient funds in the platform account to transfer to your freelan aners or whoever your Merchants may be at all times so I've made a few changes to our meop app you'll see here instead of having all the the jumpers and other clothing that we had previously I know I've hired the perfect freelancer we only have one freelancer up here at the moment but you can see he's offering Web Design Services for $399 and graphic design services for $199 and this is actually the Cranford tech store so a bit of a change of of offering for Cranford tech store but if we go to the shop you can see here there are the two services that CR for tech shop is currently offering I'll also show maybe just in the database very quickly I have added this new data type called service and you can see there I have the cost the name and then the service provider which is really important because that's what's going to link us to the correct seller account ID now in terms of the actual workflow itself it's pretty simple um I've created a copy of our product page which you might remember was this page here and I've called it service and if we actually just run as the customer we can see what that's going to look like so I'll go to all users run as the customer account go back to the homepage and let's say that our customer wants to hire us for some web design when they click on this hire button we're going to be brought to a very similar workflow to that what we've seen previously for the products and just to show you what's actually happening there underneath the hood go to design click on higher and check out that workflow once again we're creating a transaction exactly the same a tiny difference on this one is we're continuing to embed it in our own app which is why this is set to yes and why these two fields are blank but one difference is if we scroll down here we're going to need to change the charge type to separate charge and transfer that's really important H we're also going to need to set the authorize only back to no otherwise it's pretty similar you know we're saving down the amount the seller account ID and the checkout session ID and we're navigating to the checkout page so I'm going to hire uh for $399 I'm expecting to see that come through on our payment side as succeeded but I'm expecting the full amount to go to the platform and for our connected account not to get any initially so let's see how that goes brought to our checkout page ah and you can see I've made the classic mistake here of not multiplying our service by 100 and we're ending up with a 399 charge which is obviously not what we want so let's fix that quickly when we're creating the checkout session yeah you can see for the platform fee I did the correct thing and multiplied it by 100 but I forgot to do that for the price itself so I'm going to multiply that by 100 then when we refresh we should see 399 this time when we hire cter tech for some web design and let's fill this out quickly okay let's pay for that web design service and we're brought back let's take a quick look at our database to see how that looks and under transactions you can see there payment status is indeed paid and if we go to payments here we refresh we should see a $399 payment come through and you can see it has now if we were taking 20% of this as a platform for you which is what we've said we're going to do I would expect just under $80 of this to be collected in fees but as I mentioned earlier that's not going to be the case because we use our separate charges and transfer method the entirety of this payment is now going to be sitting on the platform account now let's assume that our customer is satisfied with our web design service and that we' delivered whatever we were doing for them and that they're happy enough to Mark the job as complete what you're going to need to do is you're going to need to give the customer access to some sort of button that will allow them to Mark the job as complete now we do have a dashboard built for the seller of services on the dashboard page and realistically you're going to be putting this on a customer facing dashboard if you're building out an actual application but just give you a sense of how this works and rather than building a brand new dashboard I'm going to use this one for demonstration purposes first of all I'm going to change this button here from capture to transfer and in my database I'm going to change dispatched to job complete and then I'm going to refresh my page here and I'm going to rerun as the service provider in this case shoppr protect.com so you can see here the latest transaction which is really the most relevant one and in fact I might delete those two previous ones let's go back and you can see the payment has succeeded but the dispatch is currently marked as no so this is my indication that the job hasn't yet been completed now let's assume that this is a customer facing dashboard and that they're satisfied with the Web Design Services what what we can do is we can build a workflow so that when transfer is clicked we're going to transfer the 80% of the value of the transaction to the freelancer so what we need to do for that is we need to go to our dashboard go to design and on transfer here we're going to edit this workflow and instead of doing stripe connect capture payment going to delete that and going to delete that going to delete that I'm going to go down to plugins and do stripe connect create a transfer and then the value of the transfer is going to be equal to the current rows transactions amount and then we're going to multiply that by 0.8 because we're not giving the freelancer 100% of the value of the transaction we're only giving them 80% so that we can hold on to our 20% as a platform currency is actually really important we need need to make sure that this matches the initial currency that the transaction took place in I've been using dollars throughout this tutorial so I'm going to put an USD there if you wish you can save on the currency of each transaction if you're reading get into a complicated marketplace where you're selling a multiple currencies unless you need that would advise against that keep things simple I would say but you could save down different currencies to the transactions and reference them here and then finally probably the most important one is the stripe account ID so what we need to do here is get the current row transactions seller account ID so once we click that button we're hopefully going to create the transfer as we wish I also then want to make changes to a thing the thing I want to change is the current R transactions job complete I want to change that to yes and I keep falling for that the thing I want actually change is current R transaction and then I want to change the job complete to yes so let's refresh our dashboard let's assume that we're a customer looking at this uh job here and that we're satisfied with the job we're going to click on transfer You may wish to call it something like Mark job complete instead or something like that but let's click transfer you can see our workflow is running I can see dispatch has changed to yes and if we go to our strike dashboard we should see that $399 we knew that payment went through but what's going to be key here is where the collected fees has shown up so like I said it should be just under $80 so let's take a look and we can see that hasn't happened just yet and the reason that hasn't happened and I'm going to be correcting myself here but there's not going to be any collected fees if you think about it the transaction in its entirety went to us and it's then up to us to transfer on to the merchant so the kind of Telltale sign of whether this is worked or not it's not going to be collected fees it's going to be in Connect and if we look at shop atrf for.com and look at the most recent payment we should see that a big enough payment went through for $319 that are 80% of the $400 which leaves about $80 in the actual platform account which is then the platform's cut of the overall transaction so that's worked out and we can see in our dashboard again that that job is now marked as complete you can change language there from dispatch to job complete just to make it look a bit more in line so the very last thing I want to show you today is splitting subscription payments in a Marketplace so let's say you have an app like a substack where people create content on your bubble app and they sell a monthly subscription to that content but you want to take a cut of each transaction you can Implement that functionality with stripe connect and using the stripe connect Market Place plugin and we're going to go through how to do something like that the example we're going to do today in keeping with what we've building so far it's going to be more of an e-commerce based example but if you do want to see a specific substack style example if you go to the plug-in page for the stripe connect Marketplace bugin what you'll see is if you scroll down to demo app and instructions you can actually find a real live example of a substack Style app if you click on substack subcription Marketplace example and then click on that button there you're going to be brought to that example you can see the editor and everything behind it there's also a pretty detailed demo video already on Marketplace subscription payments so that's about a 50- minute long video I'm not going to spend 50 minutes here going into all the details but I will show you what you need to get up and running with your subscription Marketplace application the first thing we're going to need to do is we're going to create a new data type in our database called subscription we're going to add a few fields to this we're going to identify the customer who's going to be a user we're going to identify the subscription seller who is going to be the store owner so again Cranford Tech Shop is going to be the subscription seller in this example we are going to add a subscription ID to it this is going to be unique stripe field that'll be used to identify subscriptions we're going to link it to a specific product and that type is going to be product and finally we're want to give a status which is going to be really important we're just going to say it's going to be type text I've built the app so far based on it being a kind of oneoff purchase but for the purpose of this demonstration I've now assumed the meop has turned into a jumper subscription marketplace where if you pay 4 $3 a month you get a new Christmas jumper every month I've kep most of the rest of setup here pretty identical you can see on the product page but I just changed that instead of getting a one-off Christmas jumper you're now going to get a monthly subscription to Christmas jumpers the Subscribe button here isn't currently hooked up to anything so that's what we're going to work on next uh if we go to subscribe and we click on edit workflow the very first thing we're going to do is the same thing we did when we were dealing with one-off purchases we're simply going to create a new thing and the new thing is going to be a transaction however we're also going to create another new thing this time around we're going to be creating a subscription and we can begin to add fields to this subscription for example we can identify that the customer is going to be the current user we can identify that the product is going to be the current Pages product so again in this example it's going to to be our monthly subscription to Christmas jumpers we can identify that the seller of this subscription is going to be equal to the current Pages products store so again it's going to be the Cranford tech store sorry the Cranford tech shop in this particular example and then we're going to create the checkout session now for much of this tutorial today we've been using the strike connect create checkout session action we're not using that here we have a different create checkout session action specifically for subscriptions just because there's quite a few nuances involved in creating subscriptions that aren't there in the regular checkout session the rest of the action is very very similar to what you have seen previously if you've been following along the rest tutorial but I am going to go through each of these fields one by one so if you're picking it up from scratch you'll be able to understand what's going on success URL that's the URL the user is going to be redirected to after completing payment form I'm going to type in website home URL and much like we did when we were saving down transaction details for our one-off purchases we're going to put in a couple of page URL parameters to help us pull down information when the user is returned to that success URL the first thing we're going to put in is transaction and we're going to give the unique ID that was created when we created a transaction in step one so we go a result of Step One and its unique ID we're also going to add in a PID URL parameter for subscription just because we also want to save down some data relating to the subscription when the user is brought back to the homepage and again we're going to say result of step two and we're going to say unique ID going to do the exact same thing for the cancel URL stripe account ID is going to be quite simple it's going to be current Pages products creators seller account ID the plan name so what we want to call our monthly subscription plan to Christmas jumpers I think the best thing to do is just take the product name so current page is product name click out and then we'll put into the dash and just say monthly subscription the price and sense of this subscription is going to be equal to the current Pages products price and then you might remember we need to multiply by 100 in order to get it into dollars because by default price is going to take the in in cense now if you were following along with the earlier part of the tutorial you will have noted that the platform fee previously we had to calculate it in sents ourselves it's a bit different here you can see the platform fee is actually in percentage so we can specify what percentage the platform is going to take from each monthly subscription payment I'm going to type in 15 for this currency I'm just going to go to USD as we've been doing so far then on behalf of I'm going to leave as no I'm also going to do all this in the stripe hosted page rather than embedding it in a checkout session on our own application it makes it a bit easier when we're coming back to save down data later we can update the subscription that we created in Step One what we can do is we can add in its amount which is going to be the result of step three its amount we can add in the checkout session ID which is going to be the result of Step tre's checkout session ID and we can also add in the seller account ID which is going to be equal to current Pages products creators seller account ID just looking I think those are the fields we want let for now yeah that'll do this for now and then finally much like we've been doing up until now we're going to open an external website and we're going to go to the URL that was created in step three so let's refresh our page and let's make sure we're actually running as a customer here just in case we were logged in as an actual Merchant let's go back to the homepage and pick a monthly subscription let's go with the cardigan subscription where we get a monthly subscription to a cardigan and we'll subscribe to it and you can see we're brought to the stripe checkout session page I'm going to fill out these details really quickly and now let's subscribe to this plan so that's gone true on the stripe side we're now being brought back to our homepage and you can see from the page URL we have unique ID of the transaction up there and we also have the unique ID of the subscription up there let's take a look at our payments so we go back and we take a look at payments and let's refresh our page oh no need to we can see a subscription for $50 has gone through there and if I remember right 15% of that which would be about 750 would go to our platform and indeed you can see at 750 has gone to the shop at cran for.com account let's take a look at our database next because we saved in some of the information related to this but not quite all of it so you can see here this is indeed the most recent transaction and we filled out all these fields here we have a seller account ID in there we have the checkout session ID we have the payment status which is all useful but what we don't have is under subscriptions we've just created a subscription here we don't have the subscription ID and we don't have the status of the subscription and this is really important because we want to know if this subscription is act active or whether it's been cancelled whether the card is bounced whether there's an issue with the payment so we need to figure out a way to get the subscription status in here and the way we're going to do that is we're going to get the subscription ID first of all and then we're going to use that to get the subscription status let's go back to our homepage this is where the user is returned to you after they have completed the transaction and you see at the moment we're running this workflow when the page is loaded and when transaction is in the page URL it's not empty so that workflow is being run and in fact that's why we've updated the payment status we went through this earlier but essentially we're using a an API call to update the information we're going to do something similar we're going to copy this we're going to paste it because what we're going to do for this workflow here is we're going to say when subscription is in the page URL much like it is here and it's not empty then we're going to do something else and what we're going to do do is we're going to make changes to a thing the thing we're going to change is a subscription and we want to get the first subscription we can find where its unique ID is equal to get data from a page URL and we essentially want to do here is we want to get the subscription unique ID which is going to be in the page URL so we're looking through our database we're finding a subscription that has this unique ID and we're changing it what are we changing we're changing first of all the subscription ID and we're going to use a get data from an external API call here and we're going to say strike connect retrieve checkout session details the checkout session is going to equal to get and the fact no the checkout session ID is going to equal to do a search for transactions and we want to get first transaction where the unique ID is equal to what we're seeing in the page URL so again we're in a couple of layers I know it's quite complex but essentially what we're doing is we're looking for transactions where the unique ID is equal to this we're taking the checkout session ID associated with that we can get the first item we can get checkout session ID and then we can get subscription so I'm going to refresh my page and because I already have these loaded up I should actually see the subscription ID come in here so let's refresh our page hopefully that workflow is run when we click refresh data we get the subscription ID which we do now we want to update the subscription status so very simple all we need to do is we need to again make changes to a thing we're want to make a change to the subscription we created in step one and we want to change it status to get data from external API much simpler this time we're simply going to use stripe connect retrieve a subscription and then we need to give them the subscription ID we can do that by saying this subscriptions subscription ID and all we want to do here is get it status maybe before I do that there is a whole bunch of other information you can get here which can be useful if you're building a kind of complex Marketplace but just for our purposes today I'm going to get the status now because I know the user has Su because I know the user has successfully subscribed to our our cardigan plan I'm expecting the subscription to be active you know there shouldn't be any issues with it we know it's gone through so now when I go back into our database I'm hoping to see the word active pop in here and sure enough you can see that's what's happened so the very last thing we're going to need to do is allow our customers to cancel our subscriptions they will need some way of doing this and if you can do it in your bubble app all the better so what I've done is I've created a modified version of our Merchant dashboard for our customers and I've listed out all the subscriptions that they are subscribed to in this table here just taking a quick look at it what we're doing is we're setting the type of content on this table to be subscriptions and we're searching for all subscriptions where the customer is equal to the current user you can see there's only one there at the moment and the way we're going to manage our subscriptions in terms of cancellations and seeing invoices is by using the stripe billing portal it's a really nice feature from stripe that lets you access a page hosted on their website where you can update your payment methods see invoices cancel subscriptions it's super easy to use all we're going to do is when we click on the manage subscription button we're again going to go down to plugins and we're going to say strip connect self-service portal there's two things we need to fill out here there's the customer ID which we haven't yet actually saved down and there's also the return URL for the return URL I'm simply going to send them back to this URL and then for the customer ID we need to figure out a way to get this saved out in our database for our users so what I'm going to do is I'm going to go on to our user data type I'm going to create a new field called customer ID I'm going to give it a text field type and then you might remember when we were initially creating the subscriptions on the product page when we were clicking on subscribe we were using the unique IDs of the transaction and a subscription to pull in data for the customer sorry for the transaction and a prescription themselves the good news is we can also use these parameters to pull in data uh like the customer ID what we're going to do is we're going to go back to our index page and when we're changing the transaction we can also make changes to the current user so we go to account make changes to current user and then customer ID is going to be equal to get data from an external API Ser connect retrieve checkout session details and the checkout session ID is going to be equal to result of step one it's check out session ID and then if you scroll down here we should be able to get customer as a field so we will actually need to subscribe to another product just to get that saved down so let's do that really quickly we've already subscribed to the cardigan so let's go over to Christmas jumper this time around click on subsscribe fill our details quickly and let's subscribe to that plan brought back to the homepage and hopefully now we should see in our app data yeah we should see a customer ID there for our most recent customer just expand that out a bit and you can see that's there which means that we should now be able to fill out that customer ID and all we can say is current users customer ID now before we go and cancel our subscription we want to think about how to update this status field because this is not going to get updated automatically in our bubble database in a second um and in fact what I might do first of all is let's just cancel one and I'll show you how it looks so let's go go to our dashboard we now have two subscriptions uh let's go and manage them that should really be managed subscriptions but we don't need to worry about that for now and of course one thing we forgot to do was we did create self-service portal but we also need to navigate to it so let's open that up so to step one it's URL refresh our page and let's go there now so this is destroy billing portal this is where you can manage your subscriptions you can see here we have uh one plan here at the moment the reason we don't have two is we hadn't given the customer ID to first time around so stripe doesn't actually know at the moment that these are one customer they thinks it's two separate plans at the moment for two separate customers but going forward if we were to subscribe to a new plan then this would update but what I did want to show you was if we click cancel here uh and before I do maybe just look at the plan in stripe itself so let's refresh our stripe dashboard let's look at our customers and Ted lass test me L was the most recent one uh if we going to overview you can see here that they do have a subscription created there let's click on that and we can see the subscription by clicking on the ID there so this is that subscription you can see it's active at the moment now if we click on cancel here it is going to cancel the plan on stripe and if we go here and click on refresh that is going to change from active to cancel I'm guessing which it has but if we look at our bubble database nothing has happened here yet that's because bubble isn't in sync with stripe it's not talking to stripe and it doesn't know that it needs to update its status so what I'm going to do is I'm going to say whenever we're back on the customer dashboard I'm going to say when the page is loaded I'm not going to put any conditions in because I really want this to happen every time we're going to say make changes to a list of things on the list of things we're changing are subscriptions we're going to have to do a search for subscriptions and we're going to change all subscriptions where customer is equal to the current user what we're going to do is we're going to change the status to get data from an external API we're going to do the retrieve a subscription call and we're going to provide the subscriptions ID as necessary and then we're going to just look for status here and that should update so I'm hoping now when we go back to our dashboard that we're going to see this workflow kick off in the background and update our subscription statuses and you can see there the Christmas jumper has cancelled kigan remains active again we haven't canceled that one so you can also use web books I will say to cancel subscriptions automatically where you wouldn't have to run a workflow like this I do have a video on using web books at stripe I will link to it below but this is an alternative method as well and a fairly straightforward one so that's it for this tutorial I hope you've learned a bit about how to integrate stripe Connect into your bubble application and if you do have any questions you can let me know in the comment section

Channel: Cranford Tech

Views: 1,783

Keywords: bubble.io tutorial, bubble.io stripe connect, bubble.io payments, bubble.io marketplace payments, bubble.io stripe

Id: Ba20wCQpHn8

Length: 116min 33sec (6993 seconds)

Published: Sat Jan 13 2024