Building a SaaS with Lovable, Supabase, and Stripe

0:00 I'll walk you through how you can create 0:01 a SAS application that you can collect 0:03 real money from your users without 0:05 writing a single item code within an 0:06 hour I'll be creating a beautiful user 0:09 interface a backend to persist users 0:11 data and also process payment from the 0:13 users to do this we'll be using lovable 0:16 an AI coding agent that allows us to 0:18 build applications without writing any 0:20 code we'll also be using superbase and 0:22 stripe to handle back end and collect 0:24 payments so step one we're going to be 0:26 building the front end or the user 0:28 interface of the application whenever I 0:30 build a new application I like to always 0:32 start from the front end make sure I 0:34 like all the visuals and all the 0:36 features are working locally and then 0:38 move on to adding all the features 0:40 connecting it to a backend or payment 0:42 processes or whatever so let's start 0:44 from there okay so we've jumped into 0:46 lovable where we can have a conversation 0:48 with the AI and it'll build out all the 0:50 applications that we uh want to for this 0:52 example today I'll be building a Google 0:54 photo clone type of application where 0:56 users can store photos on the 0:59 application and it'll also have 1:01 different tiers it will have a free tier 1:03 and a paid tier and maybe a few 1:05 different variations of paid tier like 1:07 um Pro or I don't know Pro Plus or 1:10 something uh where um depending on the 1:12 tier it'll change how many photos the 1:15 users can store so let's start with a 1:18 simple prompt something like uh create a 1:22 Google photo clone where users can 1:27 upload and manage 1:31 their 1:32 photos I think this is a good starting 1:36 point now while loable is building out 1:39 the application i' like to highlight 1:41 that um here's a super base integration 1:44 button that you can get started with and 1:46 we'll be diving into that later on when 1:48 we actually add super base which is a 1:51 back end uh and um fully 1:54 connected uh to a server where all the 1:58 uh photos and all the user data will be 2:00 uh 2:01 persisted but coming back to the front 2:04 end application you can see loveable 2:06 doing its magic um if you're a no code 2:10 uh developer um without much uh coding 2:13 experience you don't need to worry about 2:14 all these code being written uh 2:16 generally with lovable you don't really 2:19 have to ever go into the actual editor 2:22 um it just displays all the code just 2:24 because it's kind of it's kind of cool 2:26 looking but uh it does a really good job 2:29 of creating the applications without 2:31 ever um interacting with the code like I 2:35 promised in this video today so here we 2:38 have a simple application I think this 2:40 is a good starting point let's take a 2:42 look at what we can do here so I have 2:44 some random images sitting down here in 2:46 my folder if I upload it it's uh 2:49 instantly visible if I try to upload 2:51 another one it just shows up there uh 2:55 which is awesome I think I feel like 2:58 this is um we're done yeah yay done uh 3:01 with the video uh except if I hit 3:04 refresh I think all the data yeah is 3:06 gone so as you can see we have a nice 3:09 interface and seemingly working 3:12 application except whenever we refresh 3:14 the page all the information is gone and 3:17 that's because it's not persisted 3:19 anywhere but yeah that's okay uh we'll 3:21 take care of that later I want to add a 3:23 few more features so later on when we 3:26 connect it with the back end we will 3:28 introduce authentication where users can 3:30 sign up log in and manage their users 3:33 user account and stuff but before that I 3:37 guess one thing we can do is we can 3:39 maybe create a different page where 3:42 users can choose different tiers and for 3:45 now obviously it's not going to be 3:46 connected to any payment processing so 3:50 yeah it's just going to be a static page 3:52 where you users can just say okay I'm 3:54 I'm a pro member or I'm a free member 3:56 and then we can um tweak the app 3:59 depending on that so let's say something 4:01 like uh looks 4:04 great now let's 4:09 introduce 4:10 tiers create uh three tiers free pro and 4:18 pro Plus for a free 4:23 tier users can upload up 4:28 to in in reality we're probably going to 4:30 allow like I don't know 20 50 or 4:33 whatever for free tier and then 100 200 4:35 300 obviously I don't want to sit here 4:38 and upload 200 images um so let's say 4:41 fre users gets to upload two pro uh up 4:46 to four and then Pro Plus unlimited so 4:50 uh free tier users users can upload up 4:52 to two images um Pro tier users can 4:58 upload up to four 5:01 images and Pro Plus users can upload 5:08 unlimited number of 5:12 images create a button in the main page 5:16 that opens up a dialogue to change the 5:22 tier for now it's okay that the users 5:28 can choose 5:30 whatever tier they 5:34 want okay let's see if this uh will 5:53 work okay so loveable is doing its magic 5:57 it's 5:58 implementing the 6:00 the dialogue to choose different 6:04 tiers and upload Li enforcement based on 6:08 okay well actually it's it's done so oh 6:12 okay I see it current plan tier so we 6:15 can hit this and we can choose different 6:18 tiers and uh it shows a nice um toaster 6:23 that I've Chang my tier so let's upload 6:26 two 6:28 images it even allows me to bulk upload 6:31 images okay there's a serious face uh me 6:37 right there and if we try to upload the 6:39 third one it says it's your beyond your 6:42 current limitation if I change my tier 6:45 to 6:47 Pro it allows me to upload more and if I 6:51 try to go beyond my current limit by 6:56 uploading few more okay it allows me to 6:59 upload one one but then it didn't allow 7:00 me to upload the second one but if I go 7:04 to Pro Plus I can just upload a whole 7:09 bunch of them looks great looks great 7:12 just out of curiosity and I don't intend 7:14 to go deep that deep in this particular 7:17 video but I wonder what happens when I 7:19 go to free from Pro Plus after uploading 7:22 a whole bunch of 7:24 images I guess nothing happens which is 7:26 okay um yeah that's some Edge case 7:29 pieces that we might want to pick up in 7:31 an actual application but for now I 7:34 think this 7:36 is yeah uh Beyond good enough now moving 7:39 on to step two adding a backend now that 7:42 we have a web app that works locally 7:44 it's time to add a back end so that we 7:45 can process user data on a server for 7:48 this we're going to be choosing 7:49 superbase because it has authentication 7:51 database and a storage to store the uh 7:54 images from the user and it also has a 7:56 native integration with level Okay so a 7:59 new superb project has been created this 8:02 is all we need to do and uh the rest 8:04 will be taken care from The Lovable 8:06 interface so we can come back to our 8:08 loable page and head over to this 8:10 superbase buttton and choose the 8:13 superbase project that we just created 8:15 lovable photos hit connect and we're 8:18 just going to hit connect again and yep 8:21 lovable is connecting to superbase you 8:23 can see that I'm now connecting to a 8:26 superbase project gather database 8:28 information which is a freshly created 8:31 uh super be instance so there's not much 8:33 um information there but uh we are doing 8:37 front and first and then back and later 8:40 and it's done connecting with super base 8:42 so now we can ask superbase specific 8:45 queries here so first thing that we want 8:48 to do is adding authentication because 8:50 otherwise um this app wouldn't really uh 8:53 works so let's we can just say add 8:57 authentication to the app 9:03 I could be more specific but uh 9:05 generally loveable Des does a really 9:07 really good job of uh handling these 9:11 vague U 9:13 prompt so what lble did here is it's 9:16 generating a profiles table for us uh 9:20 it's trying to generate these tables for 9:23 um us on the super base uh instance and 9:26 whenever it runs a SQL query it has to 9:29 get our permissions uh which is a very 9:32 nice feature it's it's very safe so we 9:35 can make sure that everything's all good 9:38 um if you're not so familiar with um SQL 9:41 yeah generally it does a good job but um 9:44 if you are absolutely not sure and if 9:46 you have an actual working production 9:48 app that you don't want to break then 9:50 you might want to consult another person 9:53 or another AI but in this case we're 9:55 just uh playing around and I uh I trust 9:58 loable very very much so we're just 10:01 going to hit apply 10:03 change and a lovable is doing its magic 10:07 so it has created the profiles table now 10:09 it it's adding a whole bunch of um login 10:12 related uh features into our 10:26 app okay so it has added 10:30 authentication um for now so usually we 10:35 need to first sign up and then sign in 10:38 I'm just going to jump into my super 10:40 base dashboard and create a uh dummy 10:43 user 10:44 here uh so if I zoom out here's a add 10:48 user button here we can create a new 10:50 user call this Tyler at superb. 10:54 iio and my super secure password 11:00 and I'm just going to say this user is 11:02 already has already confirmed their 11:04 email address with this user created I 11:07 can jump in here and say I'm Tyler at 11:10 Super 11:11 base. 11:13 and what was my secure password secure 11:16 password I 11:19 think great now I've signed into my 11:23 application there's a log out button I 11:25 can upload photos and I can can I still 11:29 change plans as I want yep I can change 11:32 plans so maybe this is something that we 11:35 can work on after this and before we 11:38 dive in it's saying that please note 11:41 that the photog grid component is 11:42 getting quite long over 150 lines we 11:45 should consider refactoring it into 11:47 smaller components in the future for 11:49 better 11:52 maintainability um yeah what it says uh 11:57 makes sense generally in coding if if 11:59 you're not so familiar with coding you 12:01 don't want to have a super super long 12:04 files especially when you're working 12:06 with AI cuz AI can only take in so many 12:08 tokens or so many lines of code and um 12:12 generally if you try to cram too much 12:14 into AI it'll just start um being lazy 12:17 or you know it'll just start skipping a 12:20 few lines so let's see we can just say 12:23 uh yep uh split photo grid component 12:29 in multiple files so that each files are 12:38 smaller so here we're not really adding 12:41 any new feature it's just maintaining 12:43 code bases even though we don't really 12:45 see the code bases um it's still uh 12:48 important to keep those uh things in 12:51 mind keep your codebase AI friendly uh 12:54 so that you know uh your AI can keep 12:57 doing its magic okay so we are back AI 13:01 has done the refactoring the app looks 13:03 the exact same so now let's take care of 13:06 this uh current plan issue where users 13:09 can just uh choose whatever plan they 13:11 want except should I take care of that 13:14 after adding payment you know what no uh 13:17 let's go ahead with it so the way it 13:19 works is if we jump into the super base 13:23 table uh we have a profile table here 13:26 which if you don't code you don't really 13:28 need to know so much about but it's 13:30 basically uh the table that takes care 13:32 of uh user information like a tier 13:35 column so here um you know uh if I am a 13:41 free tier user it will say free here if 13:43 I am a pro tier user it'll say Pro and 13:46 since I'm uh a Pro Plus tier user uh it 13:49 will say Pro Plus uh which is great I 13:53 honestly thought I would have to first 13:56 ask it to add a uh tier column but it's 14:01 able to do that so okay then in that 14:05 case let's skip uh Missing with this 14:08 because when we move on to adding 14:10 payments we want to basically have the 14:13 user choose a tier and then take them to 14:16 the um payments page and make a payment 14:19 so let's see if we can upload let's let 14:22 me go back to a free tier and if I do go 14:26 back to a free tier to does my TI get 14:30 updated yeah yes it does wow okay 14:33 lovable is really awesome isn't it so if 14:37 I try to upload two 14:41 images and then upload another one it's 14:45 obviously going to block me and I want 14:49 to know if these images are being 14:53 persistent on the database so 14:56 it's probably not persisted right 14:59 there's no images table but let's see if 15:03 we have something in the storage okay so 15:05 there's nothing in the storage that 15:07 means this image these images are not 15:10 persisted which means if I refresh the 15:12 page it's all 15:15 gone yes yep it's all gone so uh okay 15:19 let's do this so 15:21 currently the images are not 15:27 persisted upload the 15:30 images that the user 15:33 selects to 15:38 superv feel like this is a poor prompt 15:41 but let's see what it can uh come up 15:46 with okay so it's generating a bunch 15:49 more sqls so it's generating a table a 15:52 photos table to keep track of um you 15:55 know which photos are related to which 15:57 user and and uh it's also generating 16:00 generating Ro level security policy 16:03 which is something you need to keep um 16:06 table secure and it's also creating a 16:09 new bucket so a bucket is bucket in 16:13 super base is something that you store 16:16 files such as images or videos or PDFs 16:19 uh so it's creating that it's creating a 16:21 bucket called photos great it's also 16:24 setting some Ro level security policy uh 16:27 so that a new new files can be inserted 16:30 with anybody who's 16:32 authenticated and also anybody can 16:35 basically download the photos in the uh 16:38 photos uh 16:40 bucket now okay uh this is very hard to 16:44 pick up if you don't know SQL but let's 16:47 see if we can help flowable figure out 16:49 on its own about this uh flaw so let's 16:53 see we can say something like make sure 16:56 the storage bucket 16:59 are secure and only the uploader can 17:05 view and upload the 17:10 files so just an extra push to Lev 17:13 making sure that uh you know everything 17:16 is nice and 17:18 secure and I have high faith for level I 17:21 I'm sure I can figure out uh the flaw 17:24 okay so great so now we have some 17:26 additional uh policies we have for s 17:29 uh we are making sure that the user user 17:34 ID is the first element of the folder 17:36 name so I I go deeper into this 17:39 particular one uh later on but it looks 17:43 good so uh we can hit apply changes for 17:47 this first one and then we can hit apply 17:50 changes for the second 17:52 one um which creates the bucket and it 17:58 creates the uh new more secure policies 18:02 so we can go back to our buckets we can 18:05 see the 18:06 photos 18:08 um photos bucket so let's uh try it so 18:12 we can 18:13 upload upload two 18:16 images and then that's the 18:19 limit no so if we refresh the 18:23 page are the photos persisted hm they 18:27 are not persist LED are 18:31 they oh okay Lev was still working on 18:34 its magic I guess um I moved too 18:37 quick migration is being applied has 18:40 been applied successfully it's still 18:42 doing something so let's wait for a 18:44 bit okay let me now update the code to 18:47 handle secure 18:49 okay so um yeah let's wait for 18:56 that I wonder if it's already 19:03 uploaded I guess nothing has been 19:05 uploaded yet so let's go back wait for 19:09 loable to handle 19:20 everything okay uh I'm not sure what 19:22 this area is but it has encountered a 19:25 error cannot find name super Bas what 19:28 what's great about lovable is uh you 19:30 know typically when it comes to AI 19:32 development there's there's a lot of 19:34 errors that happen and lovable actually 19:36 does not charge for fixing these errors 19:39 so whenever you see our error just just 19:41 hit that try to fix it button um it'll 19:44 be taken care of uh for free for you uh 19:48 which is one of the really amazing 19:50 things about lovable 20:09 okay let's try it out so I am going to 20:12 upload a 20:14 photo and hit refresh and see if I can 20:17 still see that photo fingers 20:20 crossed yes I do okay great so if we 20:23 jump into our super base photos bucket 20:27 we see the target get photo so storage 20:31 buckets in super base are organized in 20:34 folders We have this weird Gish string 20:37 folder name slash the file name and this 20:42 particular string matches my particular 20:44 user ID uh which is generated 20:47 automatically by superbase and that's 20:48 how lovable is able to uh make sure that 20:52 you know which file goes into which file 20:55 and that's how superbase is able to keep 20:57 everything secure you know if someone 20:59 else is trying to access this folder 21:02 they superbase is able to deny that 21:04 request because their user ID does not 21:06 match this uh file name which is a very 21:08 common way of securing superb storage 21:11 buckets so great I think this is working 21:15 if we jump into the uh tables we see a 21:19 photos inserted into our photos table 21:23 with a user ID which is my user ID that 21:27 we saw earlier 02 7 uh some title a 21:30 storage path create ad everything is 21:34 looking uh very beautiful now on to step 21:37 three Payment Processing now at this 21:39 point we have a fully functional web app 21:41 that can store users images one problem 21:43 is we don't collect actual payments from 21:45 the users so users can actually change 21:47 their tier as they want which is 21:49 obviously uh not what we want uh so we 21:52 want the users to pay us if they want to 21:55 upgrade their uh tier to Pro or Pro Plus 21:58 so let's add that for that we'll be 22:00 using stripe to collect payments and 22:02 we'll also create a super base Edge 22:04 function that can handle all the payment 22:07 processing except you know obviously we 22:09 won't write in code lovable is going to 22:12 do autom magic for us coming back to 22:13 lovable we can ask it to add stripe to 22:16 our app so add stripe to 22:20 collect uh 22:23 payments now this is going to um ask us 22:27 a few things such as strip's uh API key 22:30 and whatnot but uh let's wait for that 22:33 so it's adding stripe um it has taken 22:37 care of a few things in the background 22:39 um okay so it's asking us a few things 22:42 so first let's look at the requirements 22:44 we have super based project setup we 22:46 have added authentication now we need a 22:50 uh stripe account in stripe API key and 22:53 uh we need a we need to provide a price 22:56 ID from the stripe project 22:59 now before we proceed with the 23:00 implementation you need to yep we need 23:03 to create a stripe account uh create a 23:05 product create a stripe API key and a 23:09 price ID so let's move on to do that and 23:13 once we have everything we can um add 23:16 the API key from this button right here 23:18 so I've actually already created a 23:22 stripe account if you don't have one you 23:24 can create one for free but it takes a 23:27 few days to create uh your account uh 23:30 however you should be able to create a 23:31 TI account right away which is what I 23:34 have right now I have a level SAS uh 23:37 sandbox account so um since this is a 23:42 Sandbox account uh no actual payment 23:44 will be processed and it's safe in a way 23:47 that no actual transaction happens to 23:49 expose my secret key here if you have a 23:52 actual live stripe account the secret 23:55 key is something you don't want to 23:57 expose to any body any system any AI 24:01 prompt so uh let me take this secret key 24:05 and go come back to L Buble and add the 24:08 API key right here one thing you don't 24:11 want to do is you don't want to add um 24:14 this secret key to your prompt because 24:18 that will expose your secret key to um 24:21 the AI model and also depending on your 24:23 lovable setting that might expose the 24:25 apiq to the public which is a very bad 24:28 thing so yeah I've added my uh sandbox 24:32 API key if you want to collect actual 24:35 live USD or other currencies then you 24:38 have to provide a production stripe 24:40 account but we're just testing out 24:41 things here so I've added the stripe 24:45 secret key now we have to provide a 24:48 payment ID payment ID price ID price 24:53 ID price ID so we can come back to the 24:57 stri dash board go to products catalog 25:00 and we're going to be creating two 25:03 products we will create 25:05 a pro tier we can just call it pro we 25:10 don't need any images amount let me just 25:14 change it to USD and um 10 bucks why not 25:19 monthly recurring Revenue yep sounds 25:23 good and we are also going to add a pro 25:28 uh 25:29 plus which will be uh 25:35 $50 25:37 and that is good now each one of these 25:41 products should have 25:44 a price ID now in order to get the price 25:48 ID we can click into the product and 25:51 then we can click into this uh price 25:53 here and then we can get this price ID 25:56 here uh this price ID is not uh super 26:00 secure it's 26:02 um it's actually publicly accessible 26:05 information so you can expose it and 26:07 that was the Pro price right so here is 26:13 the price ID for the Pro 26:18 Plan and here is the price ID for the 26:23 Pro Plus 26:26 plan and we can get the Pro Plus price 26:32 ID right 26:37 here that should do 26:40 it now with this um loable is going to 26:44 spin up a few super B function uh which 26:48 you don't need to worry too much about 26:50 um but essentially a backend function 26:53 that will handle uh processing payments 26:55 and uh processing web hooks from stripe 26:59 I think um that'll uh notify uh super 27:03 base once a user upgrades or changes 27:05 their uh tier uh or product or Subs 27:10 subscriptions so yep thanks for 27:12 providing the price ID since the 27:14 application already has tiers I'll help 27:17 you implement subscription based 27:18 payments for the pro and pro plus tiers 27:22 sounds 27:23 great so it's modifying the so let's 27:26 first create a stripe checkup Edge 27:28 function so it's creating uh a few Edge 27:31 functions behind the scenes to handle 27:34 the payments and a web hooks that that 27:37 are coming in from 27:38 strip and it has 27:41 implemented uh subscription system the 27:44 changes include New Edge 27:46 functions uh the upload uh update the 27:50 dialogue uh so that when user tries to 27:53 change their tier uh they will hopefully 27:55 be taken to a checkup page and 28:00 then uh handle a success and error case 28:03 or cancel case for the uh Payment 28:06 Processing let's give it a spin let me 28:10 hit refresh just in 28:13 case and uh let's 28:17 change let's try to upload a few more 28:22 photos and see that we get on 28:28 I was hoping we get our error message 28:30 but for some reason we are not getting a 28:32 error message let's see what is up there 28:36 okay so I think along the line somewhere 28:39 along the line 28:41 um yeah it got rid of the uh limitation 28:44 feature which we can uh come back and 28:47 add or let's let me hit 28:51 refresh 28:52 and make sure that okay so all these 28:56 images are actually being stored so 28:59 let's see let's see 29:01 um it 29:03 appears that a free tier 29:08 user can now upload more than two 29:14 images make sure the limitation for the 29:20 free and pro 29:23 tier users are there 29:30 things like this might happen when 29:31 you're coding with AI but the beauty is 29:35 that you can always ask AI to implement 29:38 it back and if you're interested in 29:40 actually going deeper into coding uh you 29:43 can what you can do is you can actually 29:45 set up a test uh so that these 29:49 conditions are always met and what these 29:51 test codes uh do is it simulates uh 29:54 different scenarios and you can make 29:56 ensure that uh different and in under 29:59 different circumstances different 30:01 conditions are met so for example in an 30:03 actual test code you can simulate a free 30:07 user and make sure that free user um 30:10 trying trying to upload more than three 30:14 images will 30:18 fail okay so it failed to upload image 30:23 Let me refresh the page and try it out 30:27 again again okay so it looks like it's 30:31 working 30:33 except I feel like 30:38 um if I delete a few of 30:44 these so let me delete two photos come 30:49 back refresh the 30:52 page I wonder if it's going to allow me 30:54 to upload two photos 30:58 I feel like that is what happened 31:02 earlier okay great uh actually it looks 31:05 like Lev will fix everything so now the 31:07 limitation for free tier and hopefully 31:09 the pro tier is there uh Moment of Truth 31:13 we can change the users tier to Pro 31:17 except stripe integration does not work 31:20 within this preview screen what we have 31:23 to do is we have to actually publish 31:25 this app and view it in a Standalone uh 31:28 browser window uh not within a preview 31:31 so our website has been published we can 31:35 hit that URL to open our app in a 31:39 standalone browser window I can sign 31:42 into my super base super base. iio with 31:47 my secure 31:52 password 31:54 great now um just to make sure that you 31:58 know the free tier limit is there okay 32:01 as a free user I'm not able to upload 32:03 any more images if I want to change my 32:05 T2 Pro hopefully this takes me 32:10 to uh stripe checkout page except it did 32:14 not so let's come back and ask lovable 32:19 so if I if that failed then I could 32:22 probably um do it here okay so it yeah 32:28 there's an error we can just hit the fix 32:31 error button to have loable fix our 32:33 error for free I guess this is in a way 32:36 a bit hacky but uh a 32:38 nicer um way as a user to have ai fix 32:43 the bug for free instead of if you find 32:46 a clear error that you know the lovable 32:48 airor message pop up pops up then you 32:50 can probably just press that but if you 32:52 find air somewhere else like you know 32:54 not in the prie window but in the actual 32:57 production app you can maybe simulate 32:58 that air in the preview window and then 33:01 have the uh you know fixed air button 33:05 pop up and then fix errs for free um but 33:11 yeah let's see if we can just do that 33:14 right here so if I 33:17 hit uh Pro still not going let's see 33:23 what's going on notice that the a is 33:24 occuring because the edge function 33:26 create checkout is not being found let's 33:29 fix this H okay 33:32 okay let's see and then now with the new 33:36 error we 33:39 are let's just trust lble and see what 33:42 it can come up with so let me help you 33:45 with the 44 error step by 33:48 step okay check out is not being found 33:52 that the expected URL this typically 33:54 means that the function hasn't been 33:56 deployed a function configuration is 33:58 incorrect function URLs is 34:01 incorrect okay so it 34:05 updated a few 34:09 files um okay it looks like it fixed the 34:14 error hopefully it works this time but 34:17 let's 34:20 see and there you go um it's trying to 34:23 take us to the checkout page which it's 34:25 failing because it doesn't work within 34:28 the 34:29 preview uh window here but if I refresh 34:32 this page and try to change my plan to a 34:36 pro in the Standalone browser 34:39 window um I wonder if I have to I guess 34:43 I have to hit okay we let's hit 34:55 redeploy hopefully that means it's done 34:58 deploying the latest version if I hit 35:04 refresh and try to change my plan to 35:09 Pro there you go I have been taken to a 35:14 um stripe checkout page I can test out 35:20 um 35:22 my the tick out flow 35:25 with a actual um test credit card that I 35:29 have or stripe provides um none of these 35:33 actually matter but uh yeah sh Japan 35:37 phone number is optional if I hit 35:40 subscribe I should be taken back to my 35:46 app and hopefully my tier would have 35:51 changed it's currently free but if I hit 35:54 refresh 35:59 still free is it still 36:04 free it is still free and I guess within 36:09 the database it's still free as well if 36:13 we jump into the stripe dashboard come 36:16 back to 36:21 Pro there has been a purchase request so 36:26 that's that's working uh do I do we have 36:29 a customer we do have a new customer and 36:33 the customer is a pro tier user 36:35 currently so that's good that is working 36:40 just 36:42 fine now 36:48 okay let's see we can ask L to fix 36:55 this once the user has put down a 37:00 payment for a pro tier Pro or Pro Plus 37:09 tier there uh tier within the super base 37:15 database should be updated as 37:23 well I could have said you know 37:25 Implement a um 37:28 well actually it wouldn't be able to 37:31 implement web hook because I would have 37:33 to configure the web hook for loable 37:35 okay so it's actually doing that so it's 37:37 actually creating a new Edge function to 37:39 handle stripe web hooks that will update 37:41 users tier and then I guess this is 37:45 something that I didn't do I'm not sure 37:48 if L will asked me to do that maybe it 37:50 did maybe it didn't but what I have to 37:52 do is I have to take this and set up 37:55 this web hook within stripe so so uh 37:59 this function listens to shrip web hook 38:01 events and verifies and 38:03 handles um status 38:06 changes you'll need to set up stripe web 38:10 hook in your stripe dashboard pointing 38:12 to your super base Edge functions URL 38:15 and ADD web hook secret to your 38:17 superbase Edge functions secret okay 38:23 so stripe web hook logs 38:32 H okay so we can come into stripe and 38:39 developers and then we can open web 38:41 Hooks and we can create 38:44 a event 38:46 destination now we can uh get the uh 38:50 endpoint so endpoint is essentially a 38:53 URL that you want to call when something 38:56 happens 39:03 H interesting okay so yeah we 39:08 can come and open the stripe web hook 39:13 Edge function go to 39:15 overview or details actually and get the 39:19 endpoint URL now we can just copy and 39:23 paste this in here we don't really need 39:26 any description 39:29 and add a endpoint except we didn't 39:32 select any events so for this we want to 39:38 select oh my memory working with stripe 39:42 is a bit Rusty was 39:46 it what is it called is it payment 39:49 method payment link 39:51 payout plan 39:54 H we can actually 39:57 ask lovable um what event uh do we need 40:03 to select when creating the web 40:08 hook within 40:17 stripe we could have also probably asked 40:20 this in a separate AI um that way you 40:23 wouldn't take one credit away from the 40:26 lovable 40:28 um current plan but that's okay uh this 40:32 is just a demonstration of loable so 40:34 let's keep it here so based on the edge 40:36 function code we're using you need to 40:38 select the following event in your strip 40:40 web hook 40:42 configuration checkout session 40:45 completed oh that's it checkout session 40:47 completed okay check out session 40:52 completed 40:54 so check out 40:59 session 41:02 completed add events add endpoint now 41:06 once we have the web hook created we can 41:09 get the web hook secret uh copy that and 41:14 take it into a super base Edge functions 41:17 and we need to add it as an environment 41:20 variable so we can come here to add new 41:23 secret uh the secret value is the web 41:26 hook Secret and this is another thing 41:28 that you want don't want to expose to 41:30 the public so make sure it's secure and 41:33 I'm wondering if love Buble gave us what 41:37 um what the name of this secret should 41:41 be so scrolling up scrolling up uh 41:45 that's the a that's the 41:47 aor um we need to create Edge functions 41:50 to handle stripe web hook uh set up 41:54 super base web hook pass the edge 41:56 functions URL and ADD web hook secret to 41:59 your super Bas functions as secrets so I 42:03 guess it did not give you uh give us 42:06 what the secret should be so what should 42:10 the web hook secret be called what 42:15 should the web secret be 42:18 called what WebEx secret 42:22 um en 42:25 environment variable 42:28 varable be called within super base Edge 42:46 functions okay so it has actually got 42:50 the actual reference from the code base 42:52 which is pretty awesome we can just copy 42:55 this bit and and we can just copy this 42:59 bit and take it into our super be 43:04 dashboard secret name paste that in 43:06 there and create a 43:09 secret okay so now let's see let's see 43:15 if we 43:16 can do it again the current price 43:20 current TI 43:22 free uh yeah let's let's try to upgrade 43:25 to Pro Plus so if I upgrade Pro 43:31 plus it's going to take me to another 43:34 checkout 43:35 page and I 43:38 can check it out with a fake credit 43:50 card and check out 43:59 now once this checkout is complete there 44:01 should be a request sent to Super bage 44:05 functions from 44:07 stripe and that should trigger updating 44:10 the users tier so if we go back to the 44:15 edge functions 44:24 logs hm we not seeing anything just 44:30 yet if we go back to the stripe 44:34 dashboard and refresh the page we do see 44:38 a uh request being sent except okay 44:42 missing 44:43 authorization hitter error happened so 44:48 okay we can probably take 44:50 that so we have this error we can 44:53 probably take the entire thing 44:57 okay we can say for the stripe web hook 45:02 um 45:03 endpoint we are getting the following 45:09 error and let's see if level can fix 45:12 this um this is for those who code um 45:16 you might know what the cause of this 45:18 but uh super base Edge functions by 45:20 default requires a special header um the 45:23 anonymous key to be present within the 45:25 request 45:27 and that's where the um error is coming 45:32 from now lavable uh knows this need to 45:36 configure to allow on authenticated 45:39 request currently our Edge function 45:40 requires authentication authentication 45:42 by default so it has modified stripe 45:45 webook this changes disabled JWT 45:48 verification for that endpoint uh this 45:51 is secure because we still verify the 45:53 incoming web uh hook couldn't apply your 45:57 changes because the code changes changes 46:00 I suggest were the same as the previous 46:03 code please rephrase your request or 46:07 provide more details H we can verify uh 46:12 what's going on here so we can open the 46:14 stripe web hook uh Details page and if 46:18 we scroll down a bit we can see the 46:20 function configuration is set to enforce 46:23 JWT verif 46:25 verification uh um yeah okay in this 46:28 case if um I'm just going to tweak this 46:31 you can just toggle this uh by yourself 46:33 manually and hit save whenever you see 46:35 that error it just means that you can uh 46:38 turn this off and have the uh Edge 46:41 functions be able to be uh inv invoked 46:45 without the actual header in place so 46:50 with all of that let's see if we can go 46:56 back let's let's remove these products 47:00 from this Tyler sugar 47:08 guy cancel subscription immediately okay 47:13 so now there's no subscription for this 47:17 guy we have a fresh start for him and 47:23 let's go back and try to upgrade to a 47:27 upper tier so we want to upgrade our 47:30 tier to 47:33 Pro fingers crossed this works 47:40 um 47:49 okay subscribe 48:00 now there's a bit of time lag between uh 48:03 when the subscription happens and the um 48:07 web Hook is triggered so it's expected 48:10 that the tier hasn't changed yet here 48:12 but hopefully if I hit 48:14 refresh the 48:16 tier has 48:19 been updated except it has not been 48:23 updated okay so let's let's take take a 48:27 look at what is going on we can open the 48:30 logs and we can see that 48:35 um we can see that nothing no 48:38 invocations has happened if we go into 48:43 stripe dashboard 48:46 developers and web hooks open this web 48:50 hook that we created uh it got another 48:54 error saying this cannot be used in a 48:57 Synn synchronous content 49:02 context I wonder if we can get the full 49:05 error message cuz that'll be super 49:08 helpful but maybe not 49:11 okay let's give this to 49:15 lovable uh I got the following error 49:20 message within the uh 49:24 stripe web hook Edge 49:39 function okay so it looks like it knows 49:42 why it happen this area occurs because 49:44 we're using the synchronous 49:47 con uh I don't I don't really fully 49:51 understand what's going on but that is 49:53 okay uh the main change is replacing 49:57 uh this with that um which hopefully 50:01 makes it work so let's go back and try 50:05 it out again Let me refresh the 50:08 page 50:10 and let's see if I let's let's see if it 50:13 allows me to just subscribe to Pro again 50:16 and it doesn't because because I already 50:20 am a pro member which makes sense so let 50:24 me just cancel my subscription man 50:26 manually here let's cancel this 50:29 subscription immediately and come 50:33 back and I want to change my 50:36 subscription tier to 50:44 Pro now let's 50:48 see hit 50:51 subscribe payment being processed right 50:54 now 50:57 and Moment of Truth fingers 51:00 crossed this time we hopefully have it 51:04 if I hit 51:08 refresh the tier is still free if we go 51:12 to developers web hooks open web 51:18 hook 51:20 it looks 51:23 like no there's no new web hook events 51:29 huh there has not been a new web hook 51:33 event okay so this is the previous one I 51:40 think maybe this happened because 51:46 I resubscribe to the same plan too soon 51:49 no uh new event was sent out a user not 51:55 found had 51:58 has been sent out okay this makes sense 52:04 okay so I think what this is trying to 52:07 do is here we can take a look at the 52:10 request that a stripe 52:12 sent and we can see that 52:15 the um it's sending 52:18 out a few information about you know 52:21 price and tier and customer ID customer 52:25 name and whatnot um but there is nothing 52:31 that Associates the super base user that 52:35 we see within the dashboard with this 52:37 particular uh stripe 52:40 customer 52:42 um 52:44 so we could probably properly debug this 52:48 but I'm just going to give this airor 52:51 message to lovable I'm getting this aor 52:56 message when I 53:00 upgrade to 53:02 April plan 53:06 for 53:13 um this 53:16 user hopefully you can figure out what's 53:18 going on and fix the um issue 53:27 okay so this error occurs when upgrading 53:29 to Pro Plan the issue is the web hook 53:31 Handler um where we're trying to find 53:34 the user 53:37 is find the user in the wrong table 53:42 okay so it is trying to Now look for the 53:46 user in the correct table 53:49 hopefully added more detail loging to 53:52 help with debugging improve handling 53:54 messaging and 53:58 okay we just need to keep 54:01 trying uh this time I'm just going to 54:04 try to upgrade to Pro Plus because that 54:07 way I don't have to go back and delete 54:09 my current subscriptions of 42 42 42 42 54:16 42 54:18 oops 54:23 and okay 54:30 it's processing it has it has process 54:35 the 54:36 payment let's see if we 54:40 can get a successful 54:44 green uh web hook and we did get a 54:48 receive two which means if we go back 54:51 and refresh this oh without refreshing 54:53 even the user has been upgraded to Pro 54:57 Plus okay great so uh let let's enjoy 55:02 uploading as many photos as we want 55:05 to uh and obviously 55:08 it'll um if I yeah obviously if I try to 55:11 upload five images it's going to take a 55:13 bit but yeah there we go yeah we have a 55:15 fully functional Google photo a clone 55:18 app where we can upload bunch of photos 55:20 and users can change their tier and we 55:23 have connected stripe to thato that we 55:26 can actually collect um real money from 55:29 the users and we have struggled a bit 55:32 bit at the end but um if um from my 55:36 personal experience uh working with uh 55:38 any kind of payment processing API is 55:41 extremely hard and the fact that we were 55:43 able to get it done in I don't know 30 55:46 um 20 30 minutes of struggle maybe 55:48 possibly even listen that I haven't 55:50 checking out the clock yet um is a 55:53 miracle it would take entire day if not 55:57 longer for the actual experienced 55:59 software engineer to implement something 56:01 like this so this is super amazing uh I 56:06 hope you all like lovable and the super 56:09 B integration and hopefully you buil 56:11 something uh awesome using them