Integrating Stripe Subscription with Bubble App

in this video I'm going to show how you can payall certain sections of your bubble app and once users have subscribed using stripe they can then access that area of your app you'll see at the moment I cannot access this section of my bubble app but if I click on my account I'll have the abilities to subscribe to a plan I'll have the option to choose between a monthly plan and also an annual plan which works out a bit cheaper once I fill out these details and then subscribe to the plan I'll be brought back to my bubble app and as we'll see I'll then be able to access that payal content you can see here I've been successfully subscribed and when I click on payall content I can now access this section of the app I'll also show how you can use the stripe pricing table to offer your users a number of different tiers and also be able to switch between monthly and yearly plans finally I'll show how you can let users cancel subscriptions using the stripe customer portal and also update our plan and change payment methods if necessary we're going to start off by creating a new subscription plan in stripe I'm here in my stripe dashboard this tutorial does assume that you have already set up stripe account and I'm going to create a new product and the way I'm going through that is I'm going to go to the search bar up here I'm going to search for product catalog I'm going to click on that and you'll see that I already do have some plans created they were created quite a while ago so we're going to create a new one and the way we do that is we click on the add product button up here and I'm going to call this our basic plan you can add a description if you wish I'm not going to do so you can see here is a section for tax that's because I strip tax enabled on this particular account you probably won't see that on your own stripe account if you don't have it enabled don't need to worry about it for the purposes of this tutorial then if we move on to the actual amount I'm going to say this will cost €29 per month and the reasons per month is I'm recurring there and have the billing period set as monthly you can see you can also set as daily weekly yearly or custom but I'm going to leave it as monthly for now so we're going to add that product and now we want users of our Bubble app to be able to subscribe to this plan on a monthly basis and to do that we need a way for our Bubble app to talk to stripe so what we're going to do is we're going to go to the plug-in section of our bubble editor and we're going to install the bubble stripe plugin you can find that by simply typing in stripe and it should be the first one that appears on the right hand side so we want to install that once we've installed that we do need to fill out a few Fields here and you can see here there are six different API Keys some for live some for development mode we're only going to focus on development mode today but the process is exactly the same for live but you just need to be on the live version of your strip dashboard so going back here the first one we're going to need to fill in is the secret key development and you get this from the developer section of your stripe dashboard and if you click on API key you should see here that we have two keys we the publishable key and the secret key key I'm going to reveal the secret key I'm only doing that because we're in test mode and then I'm going to paste that in there publishable key is quite simple to get you can see that's already revealed so we're going to click on that and paste it into here I'm going to leave client ID development blank for now this is really only if you're using stripe connect that this is relevant and because we're not going to be dealing with that in this tutorial I'm not going to deal with it now I'm going to upload an image for strip checkout just so we can see see something when customers are checking out and I'm also going to give a name to this drive checkout I'm going to call it Cranford Tech sometimes this will be set to check out V2 by default the Legacy one I highly recommend you change this to check out V3 okay so now that we've set up our stripe plugin we're going to subscribe a user to the plan that we just created and it might be a good idea just to take a look at our bubble application very quickly I put together a quick demo app and it's really simple dashboard Style app where there's two tabs there's this payal content Tab and we're going to implement our payall later on and there of this my account Tab and this is where we're going to subscribe the user to a plan so what I'm going to do is I'm going to go back to my bubble editor I'm going to find that my account screen which is actually a reusable element so we'll click on that we'll drop a button into our group there and we'll just say subscribe and we just change the color to make it match up with the rest of our app and then what we're going to do is we're going to go back to this button and we're going to click add a workflow and because we've installed the bubble stripe plug-in we have a bunch of different workflow actions that we previously didn't and you can see here there's a whole list of them and what I'm going to do is I'm going to say I just search for it might be easier so scrad the user to a plan and then I get this set of options here that we can fill out um the most important thing we're going to do is pick the plan name now unfortunately the drop down here doesn't tell us the name of the plan it just gives us the price ID so if we go back to our dashboard and we take a look at our product catalog and the basic plan that we just created we can see here that the price ID for the 29 per month it ends in a DH so let's find that from our dropdown and let's take a look and we can see there that that is the plan that we just created so let's try this out as we have it at the moment we are going to want to save down some data but let's just show you how this looks so what I'm going to do is I'm actually going to go back to the index page of my applications which is a really simple signup page so let's put in some dummy data here and we'll create an account and we draw to our dashboard and when we click on this my account tab we should now be able to subscribe to that plan we created okay so you can see here we've been brought to a nice checkout page we have the name of the plan the price of the plan and we can fill in our payment details here and then subscribe so let's do that now I'm going to use some dummy test car details you can get these quite easily by just Googling stripe test care details okay I've put those details in so I'm going to click on subscribe that's gone through successfully and you can see there that we're brought back to our bubble application and we're getting a message from stripe just saying that we've successfully entered our credit card information and we are subscribed to the plan and if we go into our stripe dashboard and click on customers what we should see is Miles Kane test user I just created there he had a subscription created you can see there it was for €29 on the 24th of January and if we click on that we should be able to get more details on specific sub description so that's worked out but we've no record of this in our bubble database if we go back to our bubble database we should see that we one user and it's you can see mc@ gmail.com but we haven't saved down any information relating to the subscription we have no way of really pay Walling the content that we have on the other tab so we're going to need to collect some additional information for Miles so let's go to our data types Tab and add some new fields onto the user type just so you're aware you could easily create a new data type called subscription add all these fields to that data type and then add a subscription to the user but I'm just going to add them to the user in this example the first field I'm going to add is the stripe customer ID field it's going to be a text and this is going to be unique stripe identifier that'll be created any time they subscribe to a plan the next one I'm going to put in is called subscription ID which again will be unique stripe code associated with a subscription I'm going to put in subscription start which is going to be a date subscription end which is also going to be a date I'm going to add frequency which will indicate to us whether it's a monthly or an annual plan it's going to be type text and then finally possibly the most important field is the subscription status field and that's going to tell us whether the subscription is active canell and we're going to use that then to pay wall our section of the app that is behind the payall later on in the tutorial and the good news is it's actually really easy to save all this data down uh in the workflow that we created earlier so I'm going to go back to the views my account reusable element click on that subscribe button and you can see here after we subscribe the user to the plan that we created what we can do is we can make changes to the current user and the first thing that we're going to change is the frequency and we can get that by going to result of step one and then we can go to items the first item and then we can go for Interval interval is really the stripe language for frequency the next one we're going to update is stripe customer ID this is really easy all you need to do is look for current user and then this is really important you don't want to pick this stripe customer ID field here because this is the field we're updating it'll be referencing itself what you want to do is scroll down and then find stripe customer ID down here this is a field that comes with the plugin and bubble in the background will make a record of the stri customer ID when you subscribe to a plan using the bubble plugin but make sure you pick the second one down here next we're going to say subscription end is going to be equal to result of Step One current period ending date subscription start is going to be very similar equal to result of Step One current period starting date and then finally subscription status is going to be equal to result of step one and it status so let's log miles out and sign up with a new user going to click on log out and we'll sign someone else up go to our dashboard and if we click on my account we should this time be able to subscribe once again click on subscribe and we should be brought back to our bubble application and this time if we go to our database what we should see is we have a lot more data saved down next to Alex Turner just going to refresh my head and you can see here we actually do have quite a bit of the data save down we forgot to save down a subscription ID so let me just add that to the workflow very quickly what I should have done here was also added in subscription ID equal to the result of step one it's subscription ID and if we refresh we won't be able to get it now but if I click subscribe it might actually update the details and then if we go back we should see in our database that we have that updated for Alex Turner let's just take a look at our strip dashboard at our customers and you can see there we have a Turner and he subscribed to the monthly plan so that has gone through successfully and more importantly we've saved down all the relevant data so what I'm going to do is back in my bubble application I'm going to say under Kwal content I'm going to say that this group is only visible when current users subscription status is active then it is going to be visible which means that by default I'm going to have to say it is not visible on page load also going to collapse it when it's hidden and then I'm going to add in another group here and I'm going to call this group not subscribed make it a column make it take up the full width and the full height let's change a background color to make it a bit more obvious put in some padding here and then what I'll do is I'll drop it text them in the middle and say please subscribe to access this section of the dashboard again we just formatted a bit okay we'll put in the center and then what we can say is when the current users's subscription status is not active then we're going to show this otherwise it's not going to be visible on page load and we are going to collapse it when it's hidden so if we refresh our app what we should see is that because we're logged in as Alex Turner who does have an active subscription we can access the payal content here but if we log out and we register as another user you'll see that this user cannot access this section of the dashboard because we have payall it you need to have a subscription status of active to viewed and if we look at our database we'll see that our most recent user which is T Swift they do not have a subscription status that is active now so far we've been subscribing users to monthly plans but let's say we wanted to offer the opportunity to scribe on an annual basis well what we can do is if we go back to our stripe dashboard and search again for our product catalog and take a look at that plan that we created you can see it's priced at €29 per month we can do is we can add another price and let's say we want to just do in Euros again €290 per year so a bit of a discount on an annual basis we'll go to annual or yearly as it is here create that price and then if we want the user to have the opportunity to Avail of this price what we can do is we can click on that price and we can go to upsells and we can find the €290 year price that we also created so if we go back to our bubble application and let's say we want to subscribe our user to an annual plan you'll see here now on the Strip checkout page that the default is the monthly one 29ur per month but there's also the opportunity down here to save 58 with annual billing and if we click on that you can see here the total due goes up to 290 so let's subscribe the user to an annual plan this time I'm going to fill out these details really quick quickly let's hit subscribe and once again brought back to our Bubble app and we take a look at our database this time we should see this frequency rather than be month it should be year so let's take a look at that and you can see that has indeed happened we're pulling in all the relevant data and this user should now be able to access the paywall content which they can so up until now we've been using the bubble stripe plugin to subscribe users to plans which is working fine but there is another way we can subscribe users and potentially a way you might want to implement into your own app and this is by using stripe pricing tables and the way we access these is if we go back to our stripe dashboard and we search up here for pricing tables you can see showing up already I've already created one or two but I'm going to create a new one here so we're going to click on create pricing table and we'll have to add in products so the first product I'm going to add in is my basic plan which I've created for €29 per month you can see I can also add in another price here so we'll come back to that in a minute but what I'm going to do first is I'm going to add in another product uh what I'm going to do is I'm going to add a new product I'm going to call this growth plan and we're going to say this one's going to cost9 per month so we'll add that and then finally we will add a Premium plan so again we'll click on add new product type that in Premium plan and we'll make this €99 per month and this is a preview stripe is showing us of our pricing table and if we want to get this into our Bubble app what we can do is click on continue we're want to leave all these options as is for now going to click continue again and then we'll click finish and now stripe has provided us with this snippet of code what I'm going to do is I'm going to click on copy code then when I go back to my my account section what I can do is I can get a HTML element I can put it in my main group and what I can do is I can paste that snippit of code into my HTML element I'm going to just change the layout here to make it take up the full width and any available height as well and we'll just put it down one and then let's update that I'm actually going to just log in a new user because obviously this particular user has already subscribed and if we go to the my account section you'll see here now we have the opportunity to subscribe to either the basic the growth or the Premium plan so we can let users choose different tiers using our strike pricing table and if we click on growth plan for example we're brought to this stripe checkout page and again we can fill in our details and subscribe to the plan I'm not going to read that just yet because I actually want to build out our pricing table just a bit more there's a couple of nice features we can do to make this look a bit better the first thing I'm going to do is we just go to edit pricing table I'm going to add another price to the basic plan so in addition to €29 per month I'm also going to add in €290 per year and you can see here in the preview we're getting the option to choose between monthly and yearly so I'll do a similar thing for the growth in the premium plans going add in a new price here of € 490 every year add that and similar for the Premium plan we'll add a new price and we'll say 900 90 per year so we'll click on continue click on continue again and we'll click on Save and now if we refresh our Bubble app hopefully we'll see those options come through and we are indeed so we have our monthly prices we can also see our yearly prices so what we can do do is back in our stripe dashboard if we go to the pricing table that we just created and if we click on edit pricing table we do have the ability to highlight a specific plan if we want to draw the user's attention to it and the way we can do this is if we scroll down to the bottom of this page and toggle on the Highlight product button you'll see there it's highlighting the growth plan by default but we can change that to one of the others and we can change as well the language around it I'm going to go to recommended for now one other thing we can do to make our pricing table look a bit better is just add in some list of features beneath each plan so for example for the basic plan what I could do I could add something to the feature list I could say feature one and then for the grow plan what I could do is I could add in feature one and also feature two and and so on I'm not going to spend too much time doing that now because hopefully you get the idea of how you can customize it to your own needs but that's how you go about that so let's click on continue continue again and just save that down and then hopefully when we refresh our Bubble app we should see that we're getting our growth plan highlighted we have the option to toggle between monthly and yearly and if we try and sign this user up for a growth plan let's do that now click on subscribe and it's going to put in these dummy details quickly and let's subscribe that user to a plan we are going to run into a bit of an issue here as we'll see in a second first of all we're not being brought back to our bubble application and so we're getting this message here telling us thanks for subscribing and if we do go back to our Bubble app what we'll see in our database is that F Mercury's details have not been updated which makes sense if you remember our workflow when we were clicking on subscribe we were making changes to the user based on the subscription but there's no workflow associated with the strip pricing table we're accessing it directly via the HTML code that we put in now if we go to our stripe dashboard we should see that F Mercury does indeed have a subscription so you can see that he has been successfully subscribed so we need to figure out a way to let bubble know that F mercury has sub described and to save down the relevant data and the way we're going to do that is via web Hooks and it's actually a nice time to introduce web hooks because we're going to need them in a bit anyway when we're going through how to let users cancel plans but web hooks are essentially a way of letting strip communicate to bubble and update our bubble database accordingly once an event has happened to use web hooks the first thing you're going to need to do is in your stripe dashboard go down to settings go to API and you're going to want to enable workflow API and backend workflows so make sure that box there is ticked once you do that you're going to have the option under the dropdown at the top of your page to go to backend workflows we're going to click on click here to add a backend workflow and we're going to create a new API workflow we're going to call this workflow checkout session event I'm going to leave this ticked on I'm going to leave these next two boxes unticked and then importantly under parameter definition I'm going to change this from manual definition to detect request data I'm then going to click on the detect data button and I'm getting this URL on my screen here and what this is is this is the URL that stripe is going to send messages to and we're then going to update our bubble database once this endpoint is hit so I'm going to copy this URL I'm then going to go back to my stripe dashboard and I'm going to go to developers and in developers you'll see here there's a section called Web books and this is where we set up web hooks I already have one created for another app that I've built but yours is more than likely going to be blank to create a new web hook we're going to click on ADD endpoint and then we're going to paste in the URL that we copied from our Bubble app and we're going to paste it into the endpoint URL now security is really important for web hooks so we are going to add an extra layer of security and the way we're going to do that is by generating an API token in our Bubble app and then adding it to the end of this endpoint URL that sounds quite complicated but it's actually quite simple all you need to do is get out of that for a second go to settings under the API section you can click here generate a new API token bubble is going to randomly generate a private key for us and I'm going to call this API to looking I'm then going to copy this private key I'm going to go back to my endpoint URL and stripe go to the very end of the mpoint URL put in a question mark to signify that it's a URL parameter and then type in API token equals and paste my API key in there just to get that extra layer of security now there's a bunch of events that we can listen to here you'll see here they're listed under various headings and for example you could search for a subscription and create an event whenever a subscription is created and these are basically the triggers for the web hook so if for example we were going to trigger a web hook to send information to BU when a subscription was created we would tick on this that's not what we're going to do right here it just doesn't perfectly line what we need instead what we're going to search for is checkout session and we're going to specifically use the checkout session. completed event to send information to Bubble so I'm going to add that and then I'm going to add this endpoint and once I add this endpoint you'll see here the stripe is now waiting for events and what we need to do now is initialize this web hook once we get the web hook up and running this will not need to be done but just for the very first time we need to initialize the web Hook and the way we do that is is essentially we want to complete checkout session but we only want to do that when we have this detect data window open so what I'm going to do is I'm going to log out of my bubble app and I'm going to log in as a new dummy user and then I'm going to subscribe to the basic plan this time and I'll fill in these details quickly and now once the checkout session has completed which is going to happen once the user is subscribed hopefully that web Hook is going to be triggered and we're going to see some data go go into our Bubble app okay so the checkup session has now been completed if we go back to our bubble tab you'll see here that a bunch of data has come through so this is exactly what we wanted for example you'll see here there is the data in which it was created various things around the object which is the subscription uh so I'm going to save all this down and then what we want to do is we want to take the web Hook off initialization mode and just have it run as standard and the way we can do that is by going back into our stripe dashboard clicking on these dots up here clicking on update details and then simply removing initialize from the very end of our web hook endpoint URL we'll update that endpoint and if we refresh our stripe dashboard we should actually see the successful event being sent through and you can see there that has inde deep gone through so we now have Bubble communicating with stripe but we're still not seeing our data being updated if we look at the most recent user gruss gmail.com you'll still see there's no data coming through there so what we need to do is we need to make changes to a thing underneath this API workflow so I'm going to go to make changes to a thing and the thing I'm going to choose is I would like to be able to do current user but if we think about it this is a backend workflow this could happen at any time and bubble doesn't necessarily know what is the current user so in instead what we need to do is do a search for a user and look for the very first user where certain conditions are met and what we essentially want to do is we want to match the current user with data that's is coming back from the web hook so the bubble knows that that is the relevant user to update so what we're going to do to do that is we're going to go back to our stripe pricing table which is on our views my account page and what we're going to do is we're going to add in some information to our HTML code I know we're getting away from no code or into actual coding here but this is quite simple so don't worry what we need to do is just before the very last line which is the you know closing tags of the stripe pricing table I'm going to add in client reference ID equals and then put this in between quotes and it's going to be equal to the current users unique ID so this means that we're sending unique ID to the stripe checkout session when we're accessing it via this table we can then use that reference ID to look up the us in our backend workflow let me show you how it's going to work if we click on backend workflows what we're going to do is we're going to change the first user where that user's unique ID is equal to request datas and then we scroll down we should be able to get client reference ID so again we're matching the unique ID of our user with the client reference ID which we have toll stripe is going to equal just go over it again with toll stripe it is going to equal current users unique ID client reference ID there and client reference ID there so then we can change a couple of things not everything we'd like but what we can do is we can find the stripe customer ID and we can say that's equal to request datas and if we search for objects customer that's going to be that we can also update the subscription ID which is going to be equal to request datas subscription object subscription even and then finally we can also update for now the subscription status that's going to be equal to request datas objects status so let's do that let's go back to our bubble dashboard and we will sign G Russell uh back up for one more plan and then hopefully the data in our bubble database is going to get updated so let's subscribe to the Premium plan this time once again I'll fill these details out really quickly and let's subscribe G Russell hope you know stripe is sending a message to Bubble saying the checkout session has been completed please update these fields and if we look at our database and click refresh we will see that customer ID has come in the subscription ID has come in and a subscription status has come in now you may note that subscription status there it's complete whereas the others were active so this actually means that we are not using the right field in our backend workflow we were getting the object status the object in this case was actually the checkout session um and its status was complete so that means that this isn't really useful for us but that's okay because we can update the other fields which we are going to do anyway using another step and to update the remaining fields that we need in our bubble database which is going to be subscription status um subscription start date end date and frequency we're going to install another plugin and the plugin we're going to install is the stripe customer portal plugin this is a plugin I've developed myself you can search for it by going to add plugins and searching for stripe customer portal it should show up there once you've installed that plugin we need to do some API key configuration much like we did for the other strip plugin but it's really simple we just need to put in the secret key and also the secret key would bear in front of it so let's just do that quickly we even grab our secret key from here copy that put in our secret key there and put in Bearer and our secret key there now that we've done that we have access to other workflows and what we can do is we can add a second step to our backend workflow and we can say make changes to a thing and we want to change the user that we updated in step one and this time around we want to first of all get the subscription status the way we can do that with the plugin is we can go to get data from an external API the API provider is going to be striping subscription details this is something that comes with the plugin and then the subscription ID is going to be equal to this user's subscription ID and then the subscription details is going to give us a bunch of things we can get back what we want for now is status and then we're going to do something very similar for the other fields that we're missing for subscription start we're once again going to say get data from external API stripe subscription details this users subscription ID and this time we're going to get current Period start for subscription end we're going to get get data from an external API stripe subscription details again this user subscription ID and we're going to go for current period end and then finally we're going to get the frequency and we can get that by going to once again get data from external API stripe subscription details and then this user subscription ID and the very last thing is we go for plan interval that will get us all the data we need so I'm hoping now that when we get a user subscribing to a plan via the stripe pricing table we're going to see all the fields in our database be filled out so let's log G Russell out and we'll create one more user and we're going to sign El narus up go for the Premium plan this time let's subscribe elars to that plan hope be sending the webbook through at this stage and then if we go back into our database and reload that just because he hasn't been showing up yet what we should see is we have a new user lrs testmail and all the information seems to be there let's just take a closer look we have the frequency it was a monthly plan he was subscribing to customer ID is there subscription end date is exactly a month after the start date and the sub subscription status is active which means that if we go back to our application we should see that he can have view this payal content so that's how you sign users up to subscription plans using the strip pricing table that's how you save down data one more thing we need to do is we need to allow users to cancel their plan so let's say for example they're just not happy with whatever service you're offering and they want to cancel their subscription what we can do is we can use the stripe customer portal to achieve this so I'm going to go back to the views my account and I'm going to just copy this button and I'm going to say cancel subscription and we should really only be showing the Subscribe button and the pricing table if the user isn't already subscribed so might just change the formatting on this first of all but then what I might do is put a condition on this button that says when current users subscription status is active this is not visible so we'll untick that we'll collapse when hidden and then we'll copy this condition and also put it on our pricing table up here and again collaps went hidden and now because elaris is subscrib to a plan he should really only see the cancel subscription button on the my account page you could also display some information of the subscription using those fields but I'm not going to go into that right now on the cancel subscription button what we're going to do is we're going to go down to plugins we're going to choose the self-service portal stripe portal this is an action that comes with the stripe customer portal plugin and we're going to need to fill out two FS here the first one is the customer ID which we've already save down so we can go for current users stripe customer ID and then the second one is the return URL this is where the user is going to be redirected to after they are done with the portal so if they exit back out of it where our app are they going to send us well we want to send them back to their my account page so I'm simply going to say this URL this is going to create the link to the stripe customer portal but we actually need to navigate to it as well so in step two we're going to say open an external website we're want to say result of step one and it's URL so let's refresh our application and if we now go into cancel subscription we're going to be brought to this stripe customer portal and we can do a couple of things here so you may instead of just saying cancel subscription on the button maybe you want to say something like manage subscription but really up to you what you can do is you can view your invoice history so you can see here this is related to 99 Euro plan that LR has previously subscribed to you can add payment methods you can delete payment methods if you have more than one what we want to do is want to cancel this plan so I'm just going to go back to customers in our stripe dashboard for a second and find elaris and you can see here that he is indeed active at the moment in terms of subscription status and if I click cancel we should see that change so he's no longer subscribed we've just canceled his plan and if we refresh our stri dashboard you can see it has been cancelled now one issue is this is not yet going to be reflected in bubble because if we go back to our database we would ideally like this field here under subscription status to change from active to canel but that's not happening which means that Lars at test mail.com he can still access his payall content which isn't really what we want so what we're going to to do is we're going to set up another web hook so if we go back to our backend workflows we're going to create another API workflow and we're going to call this one subscription updated and again I'm going to leave these three boxes as they are by default and I'm going to click on detect request data I'm going to detect data and once again we're given this endpoint URL that we need to copy let's go back to our strike dashboard click on developers and add another webbook this is from a previous app this is for the app that we're working on today and we're going to add another one similar to this we're going to add in our endpoint we're going to once again add in our URL parameter at the end to give that extra layer security so I'm going to go back to my settings tab and then under API you might remember we generated this API token so I'm going to copy that go back to my webbook URL put in API token equals and then paste that in and I guess what's different about this Web book is we're going to be listening for different events and the events we're going to be listening to are all related to the subscription and there's two events in particular I recommend using for this webbook uh one is subscription. deleted and then the other one is going to be subscription updated which is this one down here so let's add those events add our endpoint and once again we're now waiting for this to be initialized so what we need to do is once again trigger that web hook so I'm going to log out I'm going to sign in as a new user once more we'll sign a album up for a subscription really quickly subscribe them to that plan go back to our Bubble app and under my account I'm going to cancel the subscription and before I actually click cancel here I need to open up that detect data window there so that's now open so hopefully when I click on cancel plan here we're going to see data feedback in to Bubble so we click cancel plan that's canceling and hopefully we're going to see data as we are here now one really specific thing to note with this particular API workflow is that the data coming back for one or two of the fields isn't by default set to the right type and the ones I'm talking about specifically are object current period end and current Period start you can see there they're coming in as numbers what you want to do is change them to date Unix just makes things easier when they're saving that down to your database and then what we want to do much like we did last time is we want to edit our web hook to remove the initialize and we also want to make changes to a thing so so we're going to go to make changes to a thing we're going to do a search for a user much like we did last time and we're going to go for the very first user but this time we're using a slightly different condition to match the user up in our database this time we're going to say stripe customer ID is equal to request datas object customer so we're going to figure out which customer trigger the event match it up with a customer in our database and then we can change all the fields we want I'm going to update all of them just so that if there are any changes to subscription we get notified of it in our database immediately so frequency is going to be equal to request datas objects plan interval strip customer ID we don't need to update that one but we will update subscription end to be equal to request datas object current period end subscription start is going to be equal to request datus object current Period start subscription ID is going to be equal to request datas object ID and then finally subscription status probably most importantly is going to be equal to request data object status okay so that should all be working fine let's do one last test to make sure everything's running as we want it to I'm going to go back to my dashboard so have one more dummy user this will be the last one create that account sign them up go for Premium plan this time subscribe Michael Scott test mail.com to a plan and then if we go back to our app and we want to cancel his subscription let's just actually maybe take a look at our database first of all so we can compare refresh that okay we can see michaelc testmail dcom active subscription status but if we cancel his subscription we should hopefully see that change in our bubble database so cancelling let's go back to our bubble database keep an eye on this active piece of text here refresh and you can see their subscription status has changed to cancel so that's how you update the status of a user and then if we go back to our application they will no longer have access to the pay Walt content now I will say just before I finish up if you are diplom your application to live mode you are going to need to make a small change to your web hooks I'm not going to go over that in this video I do have another one I will link to in the description and that'll tell you everything you need to know about deploying your app to live in terms of what that means for your Web book so hope this has been useful if you have any questions you can let me know in the comment section below

in this video I&#39;m going to show how you can payall certain sections of your bubble app and once users have subscribed using stripe they can then access that area of your app you&#39;ll see at the moment I cannot access this section of my bubble app but if I click on my account I&#39;ll have the abilities to subscribe to a plan I&#39;ll have the option to choose between a monthly plan and also an annual plan which works out a bit cheaper once I fill out these details and then subscribe to the plan I&#39;ll be brought back to my bubble app and as we&#39;ll see I&#39;ll then be able to access that payal content you can see here I&#39;ve been successfully subscribed and when I click on payall content I can now access this section of the app I&#39;ll also show how you can use the stripe pricing table to offer your users a number of different tiers and also be able to switch between monthly and yearly plans finally I&#39;ll show how you can let users cancel subscriptions using the stripe customer portal and also update our plan and change payment methods if necessary we&#39;re going to start off by creating a new subscription plan in stripe I&#39;m here in my stripe dashboard this tutorial does assume that you have already set up stripe account and I&#39;m going to create a new product and the way I&#39;m going through that is I&#39;m going to go to the search bar up here I&#39;m going to search for product catalog I&#39;m going to click on that and you&#39;ll see that I already do have some plans created they were created quite a while ago so we&#39;re going to create a new one and the way we do that is we click on the add product button up here and I&#39;m going to call this our basic plan you can add a description if you wish I&#39;m not going to do so you can see here is a section for tax that&#39;s because I strip tax enabled on this particular account you probably won&#39;t see that on your own stripe account if you don&#39;t have it enabled don&#39;t need to worry about it for the purposes of this tutorial then if we move on to the actual amount I&#39;m going to say this will cost €29 per month and the reasons per month is I&#39;m recurring there and have the billing period set as monthly you can see you can also set as daily weekly yearly or custom but I&#39;m going to leave it as monthly for now so we&#39;re going to add that product and now we want users of our Bubble app to be able to subscribe to this plan on a monthly basis and to do that we need a way for our Bubble app to talk to stripe so what we&#39;re going to do is we&#39;re going to go to the plug-in section of our bubble editor and we&#39;re going to install the bubble stripe plugin you can find that by simply typing in stripe and it should be the first one that appears on the right hand side so we want to install that once we&#39;ve installed that we do need to fill out a few Fields here and you can see here there are six different API Keys some for live some for development mode we&#39;re only going to focus on development mode today but the process is exactly the same for live but you just need to be on the live version of your strip dashboard so going back here the first one we&#39;re going to need to fill in is the secret key development and you get this from the developer section of your stripe dashboard and if you click on API key you should see here that we have two keys we the publishable key and the secret key key I&#39;m going to reveal the secret key I&#39;m only doing that because we&#39;re in test mode and then I&#39;m going to paste that in there publishable key is quite simple to get you can see that&#39;s already revealed so we&#39;re going to click on that and paste it into here I&#39;m going to leave client ID development blank for now this is really only if you&#39;re using stripe connect that this is relevant and because we&#39;re not going to be dealing with that in this tutorial I&#39;m not going to deal with it now I&#39;m going to upload an image for strip checkout just so we can see see something when customers are checking out and I&#39;m also going to give a name to this drive checkout I&#39;m going to call it Cranford Tech sometimes this will be set to check out V2 by default the Legacy one I highly recommend you change this to check out V3 okay so now that we&#39;ve set up our stripe plugin we&#39;re going to subscribe a user to the plan that we just created and it might be a good idea just to take a look at our bubble application very quickly I put together a quick demo app and it&#39;s really simple dashboard Style app where there&#39;s two tabs there&#39;s this payal content Tab and we&#39;re going to implement our payall later on and there of this my account Tab and this is where we&#39;re going to subscribe the user to a plan so what I&#39;m going to do is I&#39;m going to go back to my bubble editor I&#39;m going to find that my account screen which is actually a reusable element so we&#39;ll click on that we&#39;ll drop a button into our group there and we&#39;ll just say subscribe and we just change the color to make it match up with the rest of our app and then what we&#39;re going to do is we&#39;re going to go back to this button and we&#39;re going to click add a workflow and because we&#39;ve installed the bubble stripe plug-in we have a bunch of different workflow actions that we previously didn&#39;t and you can see here there&#39;s a whole list of them and what I&#39;m going to do is I&#39;m going to say I just search for it might be easier so scrad the user to a plan and then I get this set of options here that we can fill out um the most important thing we&#39;re going to do is pick the plan name now unfortunately the drop down here doesn&#39;t tell us the name of the plan it just gives us the price ID so if we go back to our dashboard and we take a look at our product catalog and the basic plan that we just created we can see here that the price ID for the 29 per month it ends in a DH so let&#39;s find that from our dropdown and let&#39;s take a look and we can see there that that is the plan that we just created so let&#39;s try this out as we have it at the moment we are going to want to save down some data but let&#39;s just show you how this looks so what I&#39;m going to do is I&#39;m actually going to go back to the index page of my applications which is a really simple signup page so let&#39;s put in some dummy data here and we&#39;ll create an account and we draw to our dashboard and when we click on this my account tab we should now be able to subscribe to that plan we created okay so you can see here we&#39;ve been brought to a nice checkout page we have the name of the plan the price of the plan and we can fill in our payment details here and then subscribe so let&#39;s do that now I&#39;m going to use some dummy test car details you can get these quite easily by just Googling stripe test care details okay I&#39;ve put those details in so I&#39;m going to click on subscribe that&#39;s gone through successfully and you can see there that we&#39;re brought back to our bubble application and we&#39;re getting a message from stripe just saying that we&#39;ve successfully entered our credit card information and we are subscribed to the plan and if we go into our stripe dashboard and click on customers what we should see is Miles Kane test user I just created there he had a subscription created you can see there it was for €29 on the 24th of January and if we click on that we should be able to get more details on specific sub description so that&#39;s worked out but we&#39;ve no record of this in our bubble database if we go back to our bubble database we should see that we one user and it&#39;s you can see mc@ gmail.com but we haven&#39;t saved down any information relating to the subscription we have no way of really pay Walling the content that we have on the other tab so we&#39;re going to need to collect some additional information for Miles so let&#39;s go to our data types Tab and add some new fields onto the user type just so you&#39;re aware you could easily create a new data type called subscription add all these fields to that data type and then add a subscription to the user but I&#39;m just going to add them to the user in this example the first field I&#39;m going to add is the stripe customer ID field it&#39;s going to be a text and this is going to be unique stripe identifier that&#39;ll be created any time they subscribe to a plan the next one I&#39;m going to put in is called subscription ID which again will be unique stripe code associated with a subscription I&#39;m going to put in subscription start which is going to be a date subscription end which is also going to be a date I&#39;m going to add frequency which will indicate to us whether it&#39;s a monthly or an annual plan it&#39;s going to be type text and then finally possibly the most important field is the subscription status field and that&#39;s going to tell us whether the subscription is active canell and we&#39;re going to use that then to pay wall our section of the app that is behind the payall later on in the tutorial and the good news is it&#39;s actually really easy to save all this data down uh in the workflow that we created earlier so I&#39;m going to go back to the views my account reusable element click on that subscribe button and you can see here after we subscribe the user to the plan that we created what we can do is we can make changes to the current user and the first thing that we&#39;re going to change is the frequency and we can get that by going to result of step one and then we can go to items the first item and then we can go for Interval interval is really the stripe language for frequency the next one we&#39;re going to update is stripe customer ID this is really easy all you need to do is look for current user and then this is really important you don&#39;t want to pick this stripe customer ID field here because this is the field we&#39;re updating it&#39;ll be referencing itself what you want to do is scroll down and then find stripe customer ID down here this is a field that comes with the plugin and bubble in the background will make a record of the stri customer ID when you subscribe to a plan using the bubble plugin but make sure you pick the second one down here next we&#39;re going to say subscription end is going to be equal to result of Step One current period ending date subscription start is going to be very similar equal to result of Step One current period starting date and then finally subscription status is going to be equal to result of step one and it status so let&#39;s log miles out and sign up with a new user going to click on log out and we&#39;ll sign someone else up go to our dashboard and if we click on my account we should this time be able to subscribe once again click on subscribe and we should be brought back to our bubble application and this time if we go to our database what we should see is we have a lot more data saved down next to Alex Turner just going to refresh my head and you can see here we actually do have quite a bit of the data save down we forgot to save down a subscription ID so let me just add that to the workflow very quickly what I should have done here was also added in subscription ID equal to the result of step one it&#39;s subscription ID and if we refresh we won&#39;t be able to get it now but if I click subscribe it might actually update the details and then if we go back we should see in our database that we have that updated for Alex Turner let&#39;s just take a look at our strip dashboard at our customers and you can see there we have a Turner and he subscribed to the monthly plan so that has gone through successfully and more importantly we&#39;ve saved down all the relevant data so what I&#39;m going to do is back in my bubble application I&#39;m going to say under Kwal content I&#39;m going to say that this group is only visible when current users subscription status is active then it is going to be visible which means that by default I&#39;m going to have to say it is not visible on page load also going to collapse it when it&#39;s hidden and then I&#39;m going to add in another group here and I&#39;m going to call this group not subscribed make it a column make it take up the full width and the full height let&#39;s change a background color to make it a bit more obvious put in some padding here and then what I&#39;ll do is I&#39;ll drop it text them in the middle and say please subscribe to access this section of the dashboard again we just formatted a bit okay we&#39;ll put in the center and then what we can say is when the current users&#39;s subscription status is not active then we&#39;re going to show this otherwise it&#39;s not going to be visible on page load and we are going to collapse it when it&#39;s hidden so if we refresh our app what we should see is that because we&#39;re logged in as Alex Turner who does have an active subscription we can access the payal content here but if we log out and we register as another user you&#39;ll see that this user cannot access this section of the dashboard because we have payall it you need to have a subscription status of active to viewed and if we look at our database we&#39;ll see that our most recent user which is T Swift they do not have a subscription status that is active now so far we&#39;ve been subscribing users to monthly plans but let&#39;s say we wanted to offer the opportunity to scribe on an annual basis well what we can do is if we go back to our stripe dashboard and search again for our product catalog and take a look at that plan that we created you can see it&#39;s priced at €29 per month we can do is we can add another price and let&#39;s say we want to just do in Euros again €290 per year so a bit of a discount on an annual basis we&#39;ll go to annual or yearly as it is here create that price and then if we want the user to have the opportunity to Avail of this price what we can do is we can click on that price and we can go to upsells and we can find the €290 year price that we also created so if we go back to our bubble application and let&#39;s say we want to subscribe our user to an annual plan you&#39;ll see here now on the Strip checkout page that the default is the monthly one 29ur per month but there&#39;s also the opportunity down here to save 58 with annual billing and if we click on that you can see here the total due goes up to 290 so let&#39;s subscribe the user to an annual plan this time I&#39;m going to fill out these details really quick quickly let&#39;s hit subscribe and once again brought back to our Bubble app and we take a look at our database this time we should see this frequency rather than be month it should be year so let&#39;s take a look at that and you can see that has indeed happened we&#39;re pulling in all the relevant data and this user should now be able to access the paywall content which they can so up until now we&#39;ve been using the bubble stripe plugin to subscribe users to plans which is working fine but there is another way we can subscribe users and potentially a way you might want to implement into your own app and this is by using stripe pricing tables and the way we access these is if we go back to our stripe dashboard and we search up here for pricing tables you can see showing up already I&#39;ve already created one or two but I&#39;m going to create a new one here so we&#39;re going to click on create pricing table and we&#39;ll have to add in products so the first product I&#39;m going to add in is my basic plan which I&#39;ve created for €29 per month you can see I can also add in another price here so we&#39;ll come back to that in a minute but what I&#39;m going to do first is I&#39;m going to add in another product uh what I&#39;m going to do is I&#39;m going to add a new product I&#39;m going to call this growth plan and we&#39;re going to say this one&#39;s going to cost9 per month so we&#39;ll add that and then finally we will add a Premium plan so again we&#39;ll click on add new product type that in Premium plan and we&#39;ll make this €99 per month and this is a preview stripe is showing us of our pricing table and if we want to get this into our Bubble app what we can do is click on continue we&#39;re want to leave all these options as is for now going to click continue again and then we&#39;ll click finish and now stripe has provided us with this snippet of code what I&#39;m going to do is I&#39;m going to click on copy code then when I go back to my my account section what I can do is I can get a HTML element I can put it in my main group and what I can do is I can paste that snippit of code into my HTML element I&#39;m going to just change the layout here to make it take up the full width and any available height as well and we&#39;ll just put it down one and then let&#39;s update that I&#39;m actually going to just log in a new user because obviously this particular user has already subscribed and if we go to the my account section you&#39;ll see here now we have the opportunity to subscribe to either the basic the growth or the Premium plan so we can let users choose different tiers using our strike pricing table and if we click on growth plan for example we&#39;re brought to this stripe checkout page and again we can fill in our details and subscribe to the plan I&#39;m not going to read that just yet because I actually want to build out our pricing table just a bit more there&#39;s a couple of nice features we can do to make this look a bit better the first thing I&#39;m going to do is we just go to edit pricing table I&#39;m going to add another price to the basic plan so in addition to €29 per month I&#39;m also going to add in €290 per year and you can see here in the preview we&#39;re getting the option to choose between monthly and yearly so I&#39;ll do a similar thing for the growth in the premium plans going add in a new price here of € 490 every year add that and similar for the Premium plan we&#39;ll add a new price and we&#39;ll say 900 90 per year so we&#39;ll click on continue click on continue again and we&#39;ll click on Save and now if we refresh our Bubble app hopefully we&#39;ll see those options come through and we are indeed so we have our monthly prices we can also see our yearly prices so what we can do do is back in our stripe dashboard if we go to the pricing table that we just created and if we click on edit pricing table we do have the ability to highlight a specific plan if we want to draw the user&#39;s attention to it and the way we can do this is if we scroll down to the bottom of this page and toggle on the Highlight product button you&#39;ll see there it&#39;s highlighting the growth plan by default but we can change that to one of the others and we can change as well the language around it I&#39;m going to go to recommended for now one other thing we can do to make our pricing table look a bit better is just add in some list of features beneath each plan so for example for the basic plan what I could do I could add something to the feature list I could say feature one and then for the grow plan what I could do is I could add in feature one and also feature two and and so on I&#39;m not going to spend too much time doing that now because hopefully you get the idea of how you can customize it to your own needs but that&#39;s how you go about that so let&#39;s click on continue continue again and just save that down and then hopefully when we refresh our Bubble app we should see that we&#39;re getting our growth plan highlighted we have the option to toggle between monthly and yearly and if we try and sign this user up for a growth plan let&#39;s do that now click on subscribe and it&#39;s going to put in these dummy details quickly and let&#39;s subscribe that user to a plan we are going to run into a bit of an issue here as we&#39;ll see in a second first of all we&#39;re not being brought back to our bubble application and so we&#39;re getting this message here telling us thanks for subscribing and if we do go back to our Bubble app what we&#39;ll see in our database is that F Mercury&#39;s details have not been updated which makes sense if you remember our workflow when we were clicking on subscribe we were making changes to the user based on the subscription but there&#39;s no workflow associated with the strip pricing table we&#39;re accessing it directly via the HTML code that we put in now if we go to our stripe dashboard we should see that F Mercury does indeed have a subscription so you can see that he has been successfully subscribed so we need to figure out a way to let bubble know that F mercury has sub described and to save down the relevant data and the way we&#39;re going to do that is via web Hooks and it&#39;s actually a nice time to introduce web hooks because we&#39;re going to need them in a bit anyway when we&#39;re going through how to let users cancel plans but web hooks are essentially a way of letting strip communicate to bubble and update our bubble database accordingly once an event has happened to use web hooks the first thing you&#39;re going to need to do is in your stripe dashboard go down to settings go to API and you&#39;re going to want to enable workflow API and backend workflows so make sure that box there is ticked once you do that you&#39;re going to have the option under the dropdown at the top of your page to go to backend workflows we&#39;re going to click on click here to add a backend workflow and we&#39;re going to create a new API workflow we&#39;re going to call this workflow checkout session event I&#39;m going to leave this ticked on I&#39;m going to leave these next two boxes unticked and then importantly under parameter definition I&#39;m going to change this from manual definition to detect request data I&#39;m then going to click on the detect data button and I&#39;m getting this URL on my screen here and what this is is this is the URL that stripe is going to send messages to and we&#39;re then going to update our bubble database once this endpoint is hit so I&#39;m going to copy this URL I&#39;m then going to go back to my stripe dashboard and I&#39;m going to go to developers and in developers you&#39;ll see here there&#39;s a section called Web books and this is where we set up web hooks I already have one created for another app that I&#39;ve built but yours is more than likely going to be blank to create a new web hook we&#39;re going to click on ADD endpoint and then we&#39;re going to paste in the URL that we copied from our Bubble app and we&#39;re going to paste it into the endpoint URL now security is really important for web hooks so we are going to add an extra layer of security and the way we&#39;re going to do that is by generating an API token in our Bubble app and then adding it to the end of this endpoint URL that sounds quite complicated but it&#39;s actually quite simple all you need to do is get out of that for a second go to settings under the API section you can click here generate a new API token bubble is going to randomly generate a private key for us and I&#39;m going to call this API to looking I&#39;m then going to copy this private key I&#39;m going to go back to my endpoint URL and stripe go to the very end of the mpoint URL put in a question mark to signify that it&#39;s a URL parameter and then type in API token equals and paste my API key in there just to get that extra layer of security now there&#39;s a bunch of events that we can listen to here you&#39;ll see here they&#39;re listed under various headings and for example you could search for a subscription and create an event whenever a subscription is created and these are basically the triggers for the web hook so if for example we were going to trigger a web hook to send information to BU when a subscription was created we would tick on this that&#39;s not what we&#39;re going to do right here it just doesn&#39;t perfectly line what we need instead what we&#39;re going to search for is checkout session and we&#39;re going to specifically use the checkout session. completed event to send information to Bubble so I&#39;m going to add that and then I&#39;m going to add this endpoint and once I add this endpoint you&#39;ll see here the stripe is now waiting for events and what we need to do now is initialize this web hook once we get the web hook up and running this will not need to be done but just for the very first time we need to initialize the web Hook and the way we do that is is essentially we want to complete checkout session but we only want to do that when we have this detect data window open so what I&#39;m going to do is I&#39;m going to log out of my bubble app and I&#39;m going to log in as a new dummy user and then I&#39;m going to subscribe to the basic plan this time and I&#39;ll fill in these details quickly and now once the checkout session has completed which is going to happen once the user is subscribed hopefully that web Hook is going to be triggered and we&#39;re going to see some data go go into our Bubble app okay so the checkup session has now been completed if we go back to our bubble tab you&#39;ll see here that a bunch of data has come through so this is exactly what we wanted for example you&#39;ll see here there is the data in which it was created various things around the object which is the subscription uh so I&#39;m going to save all this down and then what we want to do is we want to take the web Hook off initialization mode and just have it run as standard and the way we can do that is by going back into our stripe dashboard clicking on these dots up here clicking on update details and then simply removing initialize from the very end of our web hook endpoint URL we&#39;ll update that endpoint and if we refresh our stripe dashboard we should actually see the successful event being sent through and you can see there that has inde deep gone through so we now have Bubble communicating with stripe but we&#39;re still not seeing our data being updated if we look at the most recent user gruss gmail.com you&#39;ll still see there&#39;s no data coming through there so what we need to do is we need to make changes to a thing underneath this API workflow so I&#39;m going to go to make changes to a thing and the thing I&#39;m going to choose is I would like to be able to do current user but if we think about it this is a backend workflow this could happen at any time and bubble doesn&#39;t necessarily know what is the current user so in instead what we need to do is do a search for a user and look for the very first user where certain conditions are met and what we essentially want to do is we want to match the current user with data that&#39;s is coming back from the web hook so the bubble knows that that is the relevant user to update so what we&#39;re going to do to do that is we&#39;re going to go back to our stripe pricing table which is on our views my account page and what we&#39;re going to do is we&#39;re going to add in some information to our HTML code I know we&#39;re getting away from no code or into actual coding here but this is quite simple so don&#39;t worry what we need to do is just before the very last line which is the you know closing tags of the stripe pricing table I&#39;m going to add in client reference ID equals and then put this in between quotes and it&#39;s going to be equal to the current users unique ID so this means that we&#39;re sending unique ID to the stripe checkout session when we&#39;re accessing it via this table we can then use that reference ID to look up the us in our backend workflow let me show you how it&#39;s going to work if we click on backend workflows what we&#39;re going to do is we&#39;re going to change the first user where that user&#39;s unique ID is equal to request datas and then we scroll down we should be able to get client reference ID so again we&#39;re matching the unique ID of our user with the client reference ID which we have toll stripe is going to equal just go over it again with toll stripe it is going to equal current users unique ID client reference ID there and client reference ID there so then we can change a couple of things not everything we&#39;d like but what we can do is we can find the stripe customer ID and we can say that&#39;s equal to request datas and if we search for objects customer that&#39;s going to be that we can also update the subscription ID which is going to be equal to request datas subscription object subscription even and then finally we can also update for now the subscription status that&#39;s going to be equal to request datas objects status so let&#39;s do that let&#39;s go back to our bubble dashboard and we will sign G Russell uh back up for one more plan and then hopefully the data in our bubble database is going to get updated so let&#39;s subscribe to the Premium plan this time once again I&#39;ll fill these details out really quickly and let&#39;s subscribe G Russell hope you know stripe is sending a message to Bubble saying the checkout session has been completed please update these fields and if we look at our database and click refresh we will see that customer ID has come in the subscription ID has come in and a subscription status has come in now you may note that subscription status there it&#39;s complete whereas the others were active so this actually means that we are not using the right field in our backend workflow we were getting the object status the object in this case was actually the checkout session um and its status was complete so that means that this isn&#39;t really useful for us but that&#39;s okay because we can update the other fields which we are going to do anyway using another step and to update the remaining fields that we need in our bubble database which is going to be subscription status um subscription start date end date and frequency we&#39;re going to install another plugin and the plugin we&#39;re going to install is the stripe customer portal plugin this is a plugin I&#39;ve developed myself you can search for it by going to add plugins and searching for stripe customer portal it should show up there once you&#39;ve installed that plugin we need to do some API key configuration much like we did for the other strip plugin but it&#39;s really simple we just need to put in the secret key and also the secret key would bear in front of it so let&#39;s just do that quickly we even grab our secret key from here copy that put in our secret key there and put in Bearer and our secret key there now that we&#39;ve done that we have access to other workflows and what we can do is we can add a second step to our backend workflow and we can say make changes to a thing and we want to change the user that we updated in step one and this time around we want to first of all get the subscription status the way we can do that with the plugin is we can go to get data from an external API the API provider is going to be striping subscription details this is something that comes with the plugin and then the subscription ID is going to be equal to this user&#39;s subscription ID and then the subscription details is going to give us a bunch of things we can get back what we want for now is status and then we&#39;re going to do something very similar for the other fields that we&#39;re missing for subscription start we&#39;re once again going to say get data from external API stripe subscription details this users subscription ID and this time we&#39;re going to get current Period start for subscription end we&#39;re going to get get data from an external API stripe subscription details again this user subscription ID and we&#39;re going to go for current period end and then finally we&#39;re going to get the frequency and we can get that by going to once again get data from external API stripe subscription details and then this user subscription ID and the very last thing is we go for plan interval that will get us all the data we need so I&#39;m hoping now that when we get a user subscribing to a plan via the stripe pricing table we&#39;re going to see all the fields in our database be filled out so let&#39;s log G Russell out and we&#39;ll create one more user and we&#39;re going to sign El narus up go for the Premium plan this time let&#39;s subscribe elars to that plan hope be sending the webbook through at this stage and then if we go back into our database and reload that just because he hasn&#39;t been showing up yet what we should see is we have a new user lrs testmail and all the information seems to be there let&#39;s just take a closer look we have the frequency it was a monthly plan he was subscribing to customer ID is there subscription end date is exactly a month after the start date and the sub subscription status is active which means that if we go back to our application we should see that he can have view this payal content so that&#39;s how you sign users up to subscription plans using the strip pricing table that&#39;s how you save down data one more thing we need to do is we need to allow users to cancel their plan so let&#39;s say for example they&#39;re just not happy with whatever service you&#39;re offering and they want to cancel their subscription what we can do is we can use the stripe customer portal to achieve this so I&#39;m going to go back to the views my account and I&#39;m going to just copy this button and I&#39;m going to say cancel subscription and we should really only be showing the Subscribe button and the pricing table if the user isn&#39;t already subscribed so might just change the formatting on this first of all but then what I might do is put a condition on this button that says when current users subscription status is active this is not visible so we&#39;ll untick that we&#39;ll collapse when hidden and then we&#39;ll copy this condition and also put it on our pricing table up here and again collaps went hidden and now because elaris is subscrib to a plan he should really only see the cancel subscription button on the my account page you could also display some information of the subscription using those fields but I&#39;m not going to go into that right now on the cancel subscription button what we&#39;re going to do is we&#39;re going to go down to plugins we&#39;re going to choose the self-service portal stripe portal this is an action that comes with the stripe customer portal plugin and we&#39;re going to need to fill out two FS here the first one is the customer ID which we&#39;ve already save down so we can go for current users stripe customer ID and then the second one is the return URL this is where the user is going to be redirected to after they are done with the portal so if they exit back out of it where our app are they going to send us well we want to send them back to their my account page so I&#39;m simply going to say this URL this is going to create the link to the stripe customer portal but we actually need to navigate to it as well so in step two we&#39;re going to say open an external website we&#39;re want to say result of step one and it&#39;s URL so let&#39;s refresh our application and if we now go into cancel subscription we&#39;re going to be brought to this stripe customer portal and we can do a couple of things here so you may instead of just saying cancel subscription on the button maybe you want to say something like manage subscription but really up to you what you can do is you can view your invoice history so you can see here this is related to 99 Euro plan that LR has previously subscribed to you can add payment methods you can delete payment methods if you have more than one what we want to do is want to cancel this plan so I&#39;m just going to go back to customers in our stripe dashboard for a second and find elaris and you can see here that he is indeed active at the moment in terms of subscription status and if I click cancel we should see that change so he&#39;s no longer subscribed we&#39;ve just canceled his plan and if we refresh our stri dashboard you can see it has been cancelled now one issue is this is not yet going to be reflected in bubble because if we go back to our database we would ideally like this field here under subscription status to change from active to canel but that&#39;s not happening which means that Lars at test mail.com he can still access his payall content which isn&#39;t really what we want so what we&#39;re going to to do is we&#39;re going to set up another web hook so if we go back to our backend workflows we&#39;re going to create another API workflow and we&#39;re going to call this one subscription updated and again I&#39;m going to leave these three boxes as they are by default and I&#39;m going to click on detect request data I&#39;m going to detect data and once again we&#39;re given this endpoint URL that we need to copy let&#39;s go back to our strike dashboard click on developers and add another webbook this is from a previous app this is for the app that we&#39;re working on today and we&#39;re going to add another one similar to this we&#39;re going to add in our endpoint we&#39;re going to once again add in our URL parameter at the end to give that extra layer security so I&#39;m going to go back to my settings tab and then under API you might remember we generated this API token so I&#39;m going to copy that go back to my webbook URL put in API token equals and then paste that in and I guess what&#39;s different about this Web book is we&#39;re going to be listening for different events and the events we&#39;re going to be listening to are all related to the subscription and there&#39;s two events in particular I recommend using for this webbook uh one is subscription. deleted and then the other one is going to be subscription updated which is this one down here so let&#39;s add those events add our endpoint and once again we&#39;re now waiting for this to be initialized so what we need to do is once again trigger that web hook so I&#39;m going to log out I&#39;m going to sign in as a new user once more we&#39;ll sign a album up for a subscription really quickly subscribe them to that plan go back to our Bubble app and under my account I&#39;m going to cancel the subscription and before I actually click cancel here I need to open up that detect data window there so that&#39;s now open so hopefully when I click on cancel plan here we&#39;re going to see data feedback in to Bubble so we click cancel plan that&#39;s canceling and hopefully we&#39;re going to see data as we are here now one really specific thing to note with this particular API workflow is that the data coming back for one or two of the fields isn&#39;t by default set to the right type and the ones I&#39;m talking about specifically are object current period end and current Period start you can see there they&#39;re coming in as numbers what you want to do is change them to date Unix just makes things easier when they&#39;re saving that down to your database and then what we want to do much like we did last time is we want to edit our web hook to remove the initialize and we also want to make changes to a thing so so we&#39;re going to go to make changes to a thing we&#39;re going to do a search for a user much like we did last time and we&#39;re going to go for the very first user but this time we&#39;re using a slightly different condition to match the user up in our database this time we&#39;re going to say stripe customer ID is equal to request datas object customer so we&#39;re going to figure out which customer trigger the event match it up with a customer in our database and then we can change all the fields we want I&#39;m going to update all of them just so that if there are any changes to subscription we get notified of it in our database immediately so frequency is going to be equal to request datas objects plan interval strip customer ID we don&#39;t need to update that one but we will update subscription end to be equal to request datas object current period end subscription start is going to be equal to request datus object current Period start subscription ID is going to be equal to request datas object ID and then finally subscription status probably most importantly is going to be equal to request data object status okay so that should all be working fine let&#39;s do one last test to make sure everything&#39;s running as we want it to I&#39;m going to go back to my dashboard so have one more dummy user this will be the last one create that account sign them up go for Premium plan this time subscribe Michael Scott test mail.com to a plan and then if we go back to our app and we want to cancel his subscription let&#39;s just actually maybe take a look at our database first of all so we can compare refresh that okay we can see michaelc testmail dcom active subscription status but if we cancel his subscription we should hopefully see that change in our bubble database so cancelling let&#39;s go back to our bubble database keep an eye on this active piece of text here refresh and you can see their subscription status has changed to cancel so that&#39;s how you update the status of a user and then if we go back to our application they will no longer have access to the pay Walt content now I will say just before I finish up if you are diplom your application to live mode you are going to need to make a small change to your web hooks I&#39;m not going to go over that in this video I do have another one I will link to in the description and that&#39;ll tell you everything you need to know about deploying your app to live in terms of what that means for your Web book so hope this has been useful if you have any questions you can let me know in the comment section below

Transcript for:Integrating Stripe Subscription with Bubble App

Transcript for:
Integrating Stripe Subscription with Bubble App