Tutorial: Add payment checkout to Lovable apps

0:00 finally after months of requests I can 0:02 make this video so many of you have 0:04 reached out asking the same burning 0:06 question how do you actually integrate 0:08 stripe into your apps so you can make 0:10 money from them while bolt. new makes 0:12 this process incredibly frustrating in 0:14 borderline impossible there's a better 0:17 solution if you saw my last video 0:18 featuring lovable AI you saw how easily 0:21 you can integrate a backend to your 0:23 applications via the native superbase 0:26 integration now I'm about to show you 0:28 something even better how to get stri up 0:30 and running in your application so you 0:32 could start making money and you don't 0:33 need any coding experience at all I'm 0:35 not a coder so you could follow along 0:37 step by step and do this simply with 0:39 lovable AI all right let's dive in and 0:41 start making money so for the sake of 0:42 this video I'm going to be building a 0:44 very basic app it doesn't matter I don't 0:46 want to go and show how to build an 0:48 awesome user interface you can see my 0:49 previous videos on how to do that 0:50 instead I'm just going to build a basic 0:52 app and then show you how to set up 0:54 stripe Integrations and how easy it is 0:55 to do that so basically I'm just going 0:57 to say create a notetaking app very 1:00 simple obviously I could get much more 1:01 complex with this I could build a cooler 1:03 app but I'm just going to do this for 1:05 the sake of this 1:08 video okay and so here is the not taking 1:11 app it's extremely simple you could see 1:14 I could change the user interface 1:15 however I want but for the beginning of 1:17 this video let's at least start with 1:19 this and then now let's go ahead add 1:21 user login so they have to actually be 1:23 authenticated and you know they have to 1:25 log in in order to access the app and 1:26 then in front of that as well when they 1:29 log in they actually need to sign up 1:30 with stripe and pay in order to get 1:33 access to our app setup user 1:38 off and if you haven't seen my previous 1:40 video about lovable make sure to watch 1:41 it after this one but it's very easy to 1:43 set up super base so essentially I'm 1:45 going to click this button up here set 1:47 up superbase this is the database that 1:48 we actually store user logins different 1:51 queries and whatnot so you can see now 1:54 it's saying we'll need to use superbase 1:56 please connect your project to superbase 1:57 first by clicking on the superbase menu 1:59 in the top top right of the interface so 2:01 let's do that first of all let's come 2:03 over to superbase and make sure that we 2:05 have an account set up or make sure that 2:07 we have um a project setup that we want 2:09 to use for this so I'm going to click 2:11 new 2:16 project all right so what I'm going to 2:17 do is I'm going to connect this to an 2:18 existing project so lovable Project 2:22 Connect lovable is now saying it's 2:25 connecting to superbase great so now it 2:28 looks like the super base is set 2:30 up let's now add user 2:34 authentication in order to access the 2:37 app so we don't want people to have 2:39 access to the app unless they're signed 2:40 into their account or signed up for 2:42 account that way we could then make it 2:44 so they need to subscribe to a 2:47 subscription plan via stripe before 2:49 actually getting access to the 2:50 application so let's do that now it's 2:52 going to help us set this up inside a 2:54 superbase via the native integration 3:03 okay so let's test this out first so we 3:05 could sign up let's 3:07 try an email 3:13 account there we go so it looks like we 3:15 actually signed into account so that is 3:17 now working okay so now for the 3:19 important part inside of our application 3:21 so let's just 3:23 say set up stripe 3:27 integration real quick I want to take 10 3:29 seconds to say if you're not already 3:31 subscribed to the channel make sure to 3:32 subscribe this channel is all things AI 3:34 for non techies so if you want to stay 3:36 up to date with AI in the future make 3:38 sure to follow this channel like this 3:40 video and leave a comment all right 3:41 let's get back to 3:46 it okay so it's showing us the steps 3:49 that have been completed and the steps 3:50 that need to be completed so the 3:52 superbase project is already set up the 3:54 authentication is set up which is this 3:55 right here in order to log in and sign 3:57 up to your account we need to add stripe 3:59 account and product setup and then 4:01 stripe secret key in store stripe secret 4:03 key in super base Edge functions so 4:06 before we implement the code changes 4:07 you'll need to create a stripe account 4:09 instead of a product SL price if you 4:11 haven't already get your stripe secret 4:14 key add it to the superbase edge 4:15 function secret so first of all let's go 4:18 ahead and get our stripe secret key come 4:21 down to developers here and then come up 4:23 to API keys and then make sure to reveal 4:25 the secret key okay so once you have 4:27 your secret key paste it right here 4:29 never ever paste your secret API Keys 4:33 into the chat here you only want to put 4:35 it if they have a text box where it says 4:37 to enter your API keys because then 4:38 nobody could see it if you paste it in 4:40 this chat right here anybody could see 4:42 and steal your API keys so that's very 4:44 very important I need to throw that 4:46 throw that out there so I'm going to 4:47 save that now so now it looks like API 4:50 Keys have been saved into my super 4:53 base so I'm just saying I added the 4:55 strape stripe API key here is the 4:59 product 5:01 ID and then we want to come back to our 5:03 stripe account we want to come to 5:05 product catalog and then create a 5:06 product you could see I already created 5:08 one down here click on the product and 5:09 then come and click on this price here 5:11 in order to copy and paste this price ID 5:15 or product 5:15 [Music] 5:18 ID so basically I'm going to say I added 5:21 the stripe API key here is the price 5:24 [Music] 5:25 ID it's fine to put this in the chat 5:28 right here because that is that's 5:30 already public information it doesn't 5:34 matter so now it's actually writing some 5:37 code into our super base it's actually 5:39 creating necessary Edge functions which 5:41 I don't even know what an edge function 5:43 is That's The Power of using a platform 5:45 like lovable it just sets this stuff up 5:47 in the back end for you automatically 5:49 okay so it looks like it actually has 5:50 added the stripe integration I need to 5:52 check and see if it's fully set up so 5:54 first of all I need to sign up for an 5:55 account 5:59 okay so I can now sign into an account 6:01 and in order to subscribe to access the 6:04 app you need to subscribe so let's click 6:10 subscribe looks like this is working so 6:12 far oh okay so one thing you need to do 6:15 is when you're testing out the stripe 6:17 it's not going to load in the preview 6:18 here so you need to actually publish 6:20 your app and deploy it so when I use 6:22 this actually in the browser as opposed 6:24 to inside of lovable this should work so 6:27 give it a second 6:31 okay now that I have deployed this let's 6:32 go to the actual URL okay let's go ahead 6:35 and test this out one more time so let's 6:36 sign 6:41 up okay so now we're prompted to 6:43 subscribe in order to access the app and 6:45 it should Now take us back to that 6:47 stripe checkout this is in test mode so 6:49 we could just test with a fake card 6:51 instead of actually like making this 6:52 payment go through 6:54 so let's actually copy and paste this 6:57 number here so come to card there we go 7:00 let's do one two 2 N just random numbers 7:06 here okay let's subscribe and they 7:08 should go through um again the payment 7:11 won't actually go through but it's just 7:12 testing it to make sure that all the 7:13 functions are 7:15 working it's processing it looked like 7:17 that worked it should now send us back 7:18 to our app and here is where we will log 7:21 in and we should now have access to our 7:24 app amazing so there we go that is how 7:27 you add stripe it's very easy to do in 7:29 lovable I hope this tutorial was nice 7:31 and simple for you now we could go ahead 7:34 come back to our app and you know make 7:35 this look however we want we could you 7:37 know make this look a little bit better 7:39 change everything about it but now in 7:41 order for you to actually use app you 7:43 have to be a user that is stored in 7:45 superbase and you also have to pay via 7:48 stripe in order to have access to this 7:50 so if we want to get technical we could 7:52 come to superbase and set all this stuff 7:55 up but the amazing thing with lovable is 7:58 you don't need to set any of it up 7:59 yourself that is the power of these 8:02 native Integrations that they actually 8:03 have essentially we'd have to come in 8:05 here and add all this information we'd 8:06 have to come to Edge functions and set 8:09 all this stuff up we'd have to write 8:10 code but it actually does this since it 8:12 has this native superbase integration 8:14 right here so guys I hope this video was 8:16 valuable for you make sure to sign up 8:17 with The Lovable there is a link in the 8:19 description subscribe to the channel for 8:21 more videos like this going over 8:22 everything AI for non techies that being 8:24 said I'll see you guys in the next video