How to Add & Manage Stripe Subscription Payments in Bubble.io (Including Paywall Feature)

if you're looking to add a payment subscription feature in your bubble app using stripe then this is the video you've been looking for application which will prompt users to upgrade to a paid subscription account from which your users can then subscribe to a fortnightly monthly or yearly plan now this complete guide is going to cover everything you need to know about integrating stripe subscriptions into your bubble app and of course all of this is going to be done without writing a single line of code not only are you going to learn how to structure your database to support subscription payments but we're going to teach you the exact steps to integrate stripe into your bubble app which of course includes sourcing your own stripe API Keys we'll explain how you can build a paywall in your app how you can create custom product subscription tiers within your own stripe account the workflows you need in order to actually process a subscription payment followed by a way in which customers can either upgrade downgrade or even cancel their subscription payments and then of course a ton of additional insights to help you Stitch all of this together so that way you can start charging subscriptions within your own bubble app now look there's so much that we need to cover within this tutorial today so I'm going to hand this one over to James and he's going to walk you through the exact steps you need to follow hello James here um in this tutorial we're going to look at how to monetize your bubble application and take payments through stripe so I'm going to give you a quick demonstration of what that might look like in your application I'm going to go through these set of actions here so choose the first so I'm just going to give you a quick demo so I'm in my app I'm going to log in as a person who does not have a subscription login it's going to take me through to subscription page I'm going to select the monthly one it's going to take me through to a checkout let me put some payment details in and then press subscribe so it's going to process that payment it's going to be successful I'll get a further notification bubble that the payment has been successful press OK and it's going to navigate me through to you know a page in my application so this person signed up for a monthly subscription let's just double check what's happened here so this um record has been generated in my database so let's just open it up so there's Anna made the payment it's a monthly subscription and she's an active subscriber uh so in here now let's say this Anna has been using the app for a while and she thinks hey this is good I want to change it to an annual subscription so click on this button currently on a monthly I want to go to an annual select the yearly plan continue confirm so I have now Anna has now made a payment so in in the stripe portal it's saying that she's on an annual Gateway pass if I refresh the data here this has now changed to a year the subscription end date is moved to you know a year's time still active and so you know great what about now Anna's had enough and she wants to cancel her subscription so let's cancel the plan that we're on let's cancel so shown that she's not part of a plan I go into my bubble database refresh data status canceled so how did all that happen well that's all we're going to go through in this video so bear with me for a couple of minutes when I purge my app of anything stripe related and let's go through these steps together one eternity later okay so my app is now free from anything stripe related so let's go through these in order first up we need to set up a stripe so if you haven't got a stripe account you've got a stripe.com set up an account go through just the the basic elements of setting up the company it'll just take you through a like an onboarding process and eventually you'll get to this sort of page here so you can see I still haven't finished activating my my setup but you know I've got enough access to be able to do what I need to do in bubble so I've got an option here called products so let's click products and I've got a few existing ones already but let's add some new ones for the purposes of the demonstration so let's add let's call it monthly I can't spell monthly Magic and this is gonna cost 40 pounds a month it's a recurring subscription and it's going to be taken on a monthly basis so you can personalize this quite a bit you can add images or an image to which which reflects your product you can put in more description but for now uh this is good enough so let's save product so it takes you through to uh sort of more information on the product note this ID here so this is uh identifier for this product in stripe we'll come to that shortly when we set up our workflows so just note where that is in terms of your product so let's click back on product let's add a product and let's call this annual Magic again I can put a description and whatnot uh this charge 400 pounds a month uh sorry 400 pounds a year for this product and so we want to change our billing period to yearly but you can see you know there's different options here so I'm going to select you the save product and again just you know note uh that ID there which is for the product so in stripe you know set up your business be sort of personal information in there and everything um and then set up the products that you are going to sell in your bubble application so how do we now get bubble to talk to stripe so we need to set up our plugins so go back into our application select plugins click add plugins and we're going to search for stripe we're going to install two plugins so there's one here the stripe plugin that's made by Bubble so let's install that and then scroll down a bit and you'll see another one called stripe customer portal so press install on that one too and so we're done so here are my two plugins if I click on the stripe one so I've got a load of empty Fields here so there's some fields for live we're not interested in those at this point but I do need some development keys so that when bubble taught a stripe you know stripe knows that it's my application talking to it so if we go back to stripe you'll see here on the home page I have some keys here for developers so the publishable key and the secret key so obviously keep these to yourself you don't want these getting into the wrong hands or even the right ones just keep them totally safe and secure for your eyes only just click on publishable key and I know just just a note I know I'm in test mode here um so if I activate my account I could toggle that and go back to live these Keys would then be relevant to live but you know we're not concerned about that at this stage so I'm happy these are my test Keys let's just grab for test publishable key go into my application publishable key development paste that in go back in the stripe grab the secret key copy that go into my app secret key development and I need one more here so client ID development go into stripe it's not immediately available so I have to click view Docs there's an option here called multi-party payments click on that I scroll down to manage accounts and I click testing and there's a header here will test the Overflow and your development client ID is and we want to grab that key so let's grab that copy back to my application paste that in and while we're at it let's in our stripe custom portal we also need to put in a API key so this is the secret key let's grab the secret key so the SK copy back here and then this actually uses uh it wants a prefix if you like called Bearer so that'll be typing Bearer space and paste in your secret key one thing to note on the stripe plugin is just make sure that the stripe checkout version is the latest version so version three is the latest one and that's the one I have selected so let's go back to our list so your subscribe this is the products set up the plugins and now the next bit is the setup our database so how we're going to capture you know our payment information in our application so go back into my app click on data in data types on your setup menu table called payments there are different ways of capturing the sort of payment details you could attach them to a user um or you could attach them to like a company field I think it's just healthy to keep them separate you may only want um you know some admin from the company accessing it so just like don't fuse that information with the company information so have it on a separate table and the other thing is that this gives you some flexibility so in our example we're just going to have one customer is related to a subscription but I could put in a new field and I have it as a related field so a company field and so then I could have it so that users who are part of that company are able to access my app because the subscription is attached is linked to the company so it gives you some flexibility if you have a setup and a separate table so that's what we're going to do but we are just going to use it for a single user so that setup uh you know obviously make sure your privacy rules are applied you know before you go live but for now we're just going to go through the basics needed so create new field let's set up a new field so let's do last payment date and that's going to be a date uh let's have payment frequency so just like a monthly or an annual um thing so that's text uh let's get the product ID so product ID so let's grab that ID that we saw so whether it's a um a monthly or an annual plan so create and let's grab the stripe customer ID [Music] so this will all be clear as we go along this process that again is text let's grab the subscription end date this is a date and then really important field status so is this person is this subscriber an active subscriber or has a subscription lapsed and uh you know if it has we want to catch that that's a really important field so text create Okay so we've set up our bubble payment table let's get into the meat of things now and set up the workflows so I have a really simple subscription page setup so if I go into the design and I have a drop down here and this is I've got a I've got an option set up and so I have two options to select from in payment frequency is it going to be an annual subscription or is it going to be a monthly subscription so that's really easy to get set up uh and you know there are different ways of doing this you can have different buttons um depending on whether you know it's a monthly or annual if you can get it to click on an image so there's multiple ways in terms of user experience for this example I've just got the one button and it's going to do different workflows depending on whether it's a monthly or an annual subscription selected so on my subscribe button let's start at a workflow so click here to add an action what we want to do is if we started for plan we want to subscribe the user to a plan so select that and then we're going to apply this action to the current user yes uh we'll untick that we'll just assume these are all new subscriptions being set up um stripe plan name now in fact when I click this I don't I think there's actually more in Stripes let me just refresh my bubble application because this might be a common thing you see as well so if you don't see your item there do a refresh grab this box yeah so we can see more and more there now so let's go into stripe briefly click on our products and monthly magic so let's click on that and I can see there's price underscore one lhicy uh price one lhicy so that is my monthly uh monthly magic product so click that I just wanted to be you know one I can put in here a trial period so I could type in current date time plus 7 plus 14 if it's going to be a week or two weeks uh but we're just gonna We're not gonna have a trial period in this application and then I can tick this as well so do not show success message do not show success message lots of s's if I tick that I can if I like create a pop-up to say hey payment made and then you know go go the next action will happen in the workflow but I'm just going to rely on bubbles built-in notifications so I'm going to leave that unticked so in terms of our app connected to stripe it's using the plugin it's connecting via those API keys so we can see you know the products that we have on offer and so we now want to be able to capture some information in our bubble database which reflects that purchase that has just been made so the next action we're going to do is data and then create a new thing so type and it's going to be that payments table you set up let's click add all fields so the last payment date if nearly all of these can just be generated as a result of what happened in step one so this is nice and easy to set up so result of Step One last payment date is the current period starting date the payment frequency results step one select items and then it gives you a few more options is going to be intervals that's the stripe's name for the frequency product ID so the step one is the plan ID the status this is a really important one it's a result of Step One status this is the only one which isn't as a result of step one so click and this is going to be current user stripe customer ID and then the subscription end date so if it's a monthly one should end from a month from now so result step one current period ending date um and then this is another really important um conditional to set up so we only want this record to be created in our database if this step one here if that's successful so in other words we want Stripes payment to be successful tell us that it's an active an active user and so only create this when step one the status is uh strangle it up I can't see is oh sorry status is active so result step one only do this when that status is active so if the payment fails you know don't do this workflow which tells bubble that this person has a subscription okay and then if that is successful we want to just in terms of user experience navigate them to the app and again we can go to step two copy that expression step three paste and so you only continue on the Journey of going through to the main application website page if Step One is successful so I just want to do one more thing so when the user logs in so let's go back to our index page so this is the login page look at all workflows when login is pressed at the moment it just goes through to the page app but we want to tell our application to be uh like you know oh hold on this person is not a subscriber send them to the subscription page if they have an active subscription send them to the main application page so let's put that logic in so go to page app only when uh do a search for uh payments so add a new constraint so the person who creates that subscription if you like is going to be the current user so created by equals current user close and so it's a list but we're only doing it's going to be the first item because we're going to create that subscription and if we're going to have any changes or cancellations it's just going to keep that one record updated it's not going to generate a new a new record so it's gonna be the first item and the status is active so go to that page when if you can find the current user in that payments table and this status is active otherwise go to page go to page subscription and just for efficiency we can copy this expression go to page subscription paste when it's not active so if you're anything or there just go to page subscription so if they are in the payments table and they don't have an active subscription send them to the subscription page if you can't find them send the subscription page so let's see so we set the workflows and are less demonstrate what that looks like or what happens in our bubble database uh so we'll all index page here so let's preview that Celeste login as Amy so I've never been set up this should go to subscription which it does perfect I've got my drop down here but I realize I think I've missed one step so let's just go back to our subscription page yeah okay so I've got a drop down but only got one button and so at the moment you know I selected annual it's going to subscribe me to the monthly plan so we need to put a conditional on this workflow so only subscribe to the monthly plan when the monthly plan is selected from the drop down so we need to just set this up so drop down is value display is get an option so we've got payment frequency operating setup so when the drop down value is monthly do this workflow and so what we can do very quickly is copy that workflow paste and then we'll change this from monthly to annual and then in the workflow we can change the plan to the annual plan so in the drop down if you select monthly sign for a monthly plan it sounds really obvious but just new talk to the logic in your head if they select the annual plan in the drop down sign them up to the annual plan in stripe so let's just refresh that so I'm going to select the monthly plan from Amy press subscribe let's put my payment details in select some details so press subscribe so this is going to show a success I hope yep I'm gonna get the bubble notification saying it was successful I've been subscribe to the plan press OK and I should navigate me through to the app perfect and in terms of what's happened in our database so we click on app data let's go to payments and let's open this record up so Amy has made a payment she's on a monthly plan she's an active subscriber and you can see the 14th of October So currently the subscription is going to end the following month and so strike will try and take a payment again in a month's time remember we set up recurring billing so great that that worked as we wanted it to so we've demonstrated taking a payment but what about now if Amy is enjoying the app on her monthly plan and she's like oh I feel like seeing a bit of money I'm going to sign up to the annual plan or she has a change of heart and thinks I don't really like this application I want to cancel my my subscription so what does she do in that case so let's go back to our list next thing we're going to do is set up a portal workflow so let's go into stripe and while we're in stripe let's just just double check that payment so you can see Amy signed up and in subscriptions there's a Live subscription Amy so great but in our uh search bar type in Portal so customer portal is what we want and this is the this is where you can configure the portal that the customer goes into so you can change the appearance of this you can put in your company's branding put in more information about your business some key things that we want to allow the user to do is to cancel their subscription so I'm going to toggle that for our purposes we're just gonna do cancel immediately and then we're also going to allow the user to update their subscription so let's tick that so you know it does what it says on the tin so to speak so it's going to allow the customer to switch to different pricing plan the key thing to note here is that you have to add the products that you're going to offer when a person changes their plan so we're going to allow I'll use it to switch between annual and monthly sorry so I put in my two products I'm going to allow them to switch to I've allowed them to cancel uh I'm happy with everything else so let's press save so how is Amy going to access that portal so in our app here let's just create button quickly so let's select app in our design let's grab a button so send that over to the right think I can change it to the same style so there we go so let's call that um knowledge subscribe [Music] that looks good to me so on there let's start edit workflow and recall that in our plugins we set up the stripe customer portal so in the workflow uh start searching for portal and you can see here Celsius portal stripe portal and in this Top Field here insert Dynamic data and what we're going to need is current users uh where is it a stripe customer ID so that is how stripes are going to know who is you know checking their subscription and you know to change the plan so that customer ID you know could be Associated to a company if you're allowing multiple users over the risk with that but you know that's that's the association that you have there and then the next action is going to be if you search for external so we're going to want to open an external website and this is going to be a dynamic link so insert Dynamic data so result of Step One and it's going to be the URL so on the basis of the customer ID you know all the parameters or whatever are going to be in that URL so grab that unique URL and then take it to their portal so let's test that in operation so refresh it's about my page here some logins Amy let's press manage subscription and so Amy here she is emiattest.com monthly Magic and here I have the option to update the plan or cancel the plan so let's let's cancel the plan shall we just press cancel cancel plan and notice I've got no option to go back to the page I came from um so in our plugin strike custom portal you'll see an option here for stripe portal return URL so this is the URL that there's going to be a link in that portal your user is going to click on that when they've made the changes and they're happy and they'll take them back to this page um in the app so what is that page going to be let's just say it's the dashboard page from now so grab that URL in the stroke portal do that link so if I now press there I click on manage subscription so it's Amy she's not signed up to anything but you can now see that there's a link here so I'm going to press that and we'll go back back into my that mean dashboard page but what has happened in our bubble database so in stripe if I click on payments subscriptions click on canceled I can see that Amy has canceled their subscription but in bubble if I go to my data I press refresh data it's still shown as active so this is a major risk you know aim is cancel the subscription uh you know I'm going to stop receiving payment for this customer but currently this will show us an active user and so they're able to use the application so how uh do we get Strife to talk back to us in order to you know tell our application like well this person is canceled you know maybe you should do something about it so we're gonna do these steps Now set of back-end workflow and a web hook in stripe so you'll need a personal plan at the minimum in order to be able to do this I just remember you know in order to be able to do back-end workflows you can't do on the free plan so assuming you have the plan or just remember as well when you set up a new app in bubble um when you log in I think for the second time into that application it gives you the option usually uh as of today's date anyway to have like a 10-day trial so that's you know our way of getting access without paying for a short period of time to be able to test this stuff out but for now let's press back end workflows so I'm in my back end workflows and I'm going to set up new API workflow so let's call this stripe Dash book there's a couple of options here they need to make sure are enabled so expose the public API yes this can be run without authentication yes we don't want to put a barrier in Stripes way when it talks back to us same thing with privacy rules we just want and we don't any barrier for this key information which is going to come back from stripe so this workflow is going to be triggered with post just accept that as true you don't have to go with the explanation and then in terms of the parameter definition click the drop down and then detect request data so detect data so bubble now is if you like in listening mode it's it's ready to receive something from stripe in order that it can defy it knows what it's going to receive in terms of all the different fields so let's copy that link so just click on it let's copy it and let's go into stripe and type in web hooks so I'm in my web of web hooks section sorry and I'm going to press this thing and press this button rather add an endpoint so the endpoint URL is that URL that we copied from bubble and then in terms of a description we don't need one and then the key thing here is Select events so this is stripe stripe is asking now which events do you want to trigger data being sent back to this API link so select events and you can see here that there's there's lots of options available to us at this stage we're interested in two so we want to capture uh or is it when a customer subscription is deleted so when we cancel we want to capture that and change our database and then we also want to change our database when a customer changes from one plan to another so if they move from a monthly to an annual you know we want to capture that and update our database accordingly so we've set up those two events let's move this image a sec so add those two and then add endpoint so now we need to push some data into bubble so I know I have this here I need to just set up another subscription quickly so I can cancel it within stripe so you'll see what I mean here now so let's log out uh who I got Bob test.com so he doesn't have a subscription a set of monthly one because it's quickly Okay so we put on payment details a lot of successful confirmations can navigate okay so in stripe uh we've got Bob subscription let's move that again and here we go Bob so in bubble now we want to go into our API workflow and press detect data so you know we put it back in listening mode and we're going to force something back so cancel cancel subscription and if I go back into the app here we go so it's answered so it was listening an event happened event happened rather and in bubble it's answered so we've got a few things that we just want to change initially so we've got current period end so that's been stored as a number at the moment we want to have that as a date and pick the Unix one same for Period start date Unix um I think that is good for now so let's press save and let's go back to them okay this thing always trips me up but in stripe go back to our web hooks and we want to amend this web hook address now so click on the Ellipsis here update details and we want to delete this initialize word so that was just like the initial um comms link if you like the one that's going to use to like the tunnel is going to use to send information down is this sort of modified URL so delete that initialize update endpoint and this is good to go from stripe's point of view so let's make sure that our actions uh are set up appropriately so that when users cancel or update the subscription you know we make the right change to our payment table so when those either of those events happen do this workflow so data we're going to make changes to a thing and the thing we're going to change is do a search for and it's going to be a payment and it's going to be stripe customer ID so it can't be Chrome user because this is a back-end workflow so you know it's not it's not as if the user is logged in and doing this thing this is happening in the background and you know we need to be able to identify the right record to update so let's start custom ID equals request data so this is the data that has been sent back as a result of one of those events happening and it's going to be ID close and remember we just have one record for each customer so first item so let's change some Fields so we're going to change the last payment date because if they change from a monthly to an annual after a few days you know they've updated their payment date if you like so request data and I think it's called period start so yeah object current Period start let's change another field the payment frequency so if they move from a monthly to an annual we want to capture that so request data and the words that bubble so that where the stripe uses is interval so you can see object plan interval let's change the product ID if they move from a monthly to an annual we want to capture that updated ID so request data uh this is the plan ID so object plan ID change in the field we're going to change the status so request data start type in object status so yeah this is this is a really fundamental one so if they cancel we want the user no longer to be active if they change the plan from a monthly to an annual all that's going to happen here is it's going to override active with active so that's fine we don't mind that happening change on the field and then the subscription end date so of course you know if they were in a monthly and then they switched to an annual you will reflect that updated ND in our database the request data subtitling period and then current period end okay so I think that is everything so let's let's test it out so we are logged in as Bob so let's just go into our table here so this one here Bob so he's on a monthly subscription he's active let's change Bob to an annual subscription so he's logged in uh so bobbittest.com okay so I don't have the option at the moment so I just realized I actually canceled Bob's subscription to generate the event so I could get strive to talk to Bubble so let's go back log out and let's just log in uh someone completely new so my.test.com so he doesn't have subscription perfect so he's got monthly one let's subscribe him to this so I have used them before so it's payment details are already there so let's press subscribe okay paint successful confirmation navigate now let's just check our um our database so we've got a pin here Mike is on a monthly subscription he's active so we want to change mic now to a annual user so let's click on man subscription let's update plan let's select the yearly continue consume Okay so and stripe let's see what's happened so Mike there's his monthly he's now updated that to a year this is the 400 pounds and then what is our application saying cess press refresh something's gone wrong ah sometimes things going wrong is good so let's just check our web hooks so we click on events I guess that was successful so I've done something wrong in the back-end workflow oh there we go so I'd actually put the wrong field in from from Stripes so the customer ID is not just ID it is the object the customer so close that so I am now confident that this will work so [Music] um let's go back to monthly in our payments you'll see this monthly payment being made in uh the portal let's update the plan let's change it to yearly confirm not successful uh let's refresh so 400 pounds it's reflected in stripe and in our data fresh and there we go yeah so that has changed to a year uh it still shows active and the subscription end date is now for a year's time let's cancel his subscription now so let's press cancel council plan so I want to see that reflected now in my bubble database refresh so this active is going to change to canceled hopefully and it does perfect so I've now got stripe talking back to my bubble application and if we check our list there we go we've gone through all the steps so you know there's there's a lot there's lots that you can do with payments in terms of user experience you know might who am I here Mike so if I'm making a cancel my subscription when I go back to tutorial the the link here really I should have triggers for saying hey this guy is no longer a subscriber maybe log him out or take him back the subscription page or take him back to the login page you know whatever so you know really think about uh your security apparatus within your application depending on whether or not you know the user is an active subscriber or not you might have like basic plans and premium plans so the basic things still get in but they can't see everything so you know really think about um you know access to your application on the basis of their um subscription status and you know you don't you don't want to mess up information around uh payments so you know really really Hammer the testing with this uh product you saw with me how easy it was just like select the wrong feel it doesn't work so just you know make sure that you're really comfortable with the information you're sending the stripe and the information that you're receiving and yeah feel free to play around with those other events that we saw in web hooks so there's different things are happening and that will trigger information and then you can set up other back-end workflows for other events happening so yeah explore freely in the test environment you know you cannot do anything wrong either in bubble or in stripe so you know feel free to to go at it so I hope you find that helpful uh yeah it's a bit of a longer lesson it's a few you know really important steps to go through but I hope after having watched this you you feel a bit confident to give it a go uh or if you've been following along hope you've you know enjoyed seeing that attend money come through you know the thing is now get that app finished get your your app monetizing and yeah once when when that is the real thing um that will feel great so if you've got any questions or comments put them in the comments below I'll uh yeah I'll check it every now and again and hopefully be able to help you so thanks for watching and just like that you now know how to integrate stripe to create your own paid subscriptions feature as you can see using a combination of both stripe and bubble it's never been easy to bring this feature to life if you found this video useful I'd always recommend hitting that subscribe button on my channel so that way you can be the first to know when I drop any additional bubble resources but for the meantime I just wanted to say a massive thank you for taking the time to watch this course and I wish you all of the best on your own no code Journey foreign [Music]

Channel: Building With Bubble

Views: 18,447

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, Stripe, Stripe subscriptions, Stripe payments, Bubble.io stripe subscriptions, Bubble paywall

Id: EAhrfR62q1c

Length: 49min 0sec (2940 seconds)

Published: Thu Sep 29 2022