How to QUICKLY Add Stripe Payments to Your Apps (Lovable AI)

0:00 in this video I'll show you the quick 0:01 and easy two-step process to accept 0:04 Sprite payments in your lovable buildt 0:06 app and don't worry if you don't have 0:07 any coding experience cuz this is for 0:09 those of you that are non-technical I'm 0:11 going to be using my years of experience 0:13 writing custom coded apps to teach you 0:14 how to implement Payment Processing the 0:16 right way so I'm going to keep this 0:18 video short and sweet I'll only be 0:20 covering how to add stripe to your 0:21 lovable buildt app and there'll be no 0:23 extra fluff and by the end of the video 0:25 you'll have a quick and easy way to 0:26 start collecting payments so you can 0:28 start making money with your app so 0:30 let's jump 0:32 in okay so let's start off I've just 0:36 generated a note taking app that's all I 0:39 have that's is this is the MVP so I've 0:42 run that prompt so before we go into 0:45 implementing stripe we need to make sure 0:47 that we have user authentication the 0:48 reason why CU stripe needs to connect a 0:51 user email to a payment so we need 0:55 authentication and user account set up 0:57 first so that's the first step so 1:06 okay but we want to actually use super 1:08 base see how it says use superbase on 1:10 alternative we'll click 1:17 that we'll connect our superbase account 1:20 this is the one I'm going to connect but 1:21 you can create a new project it'll take 1:23 you to superbase you create an 1:24 organization then an account then you'll 1:27 connect it 1:43 cool now lovable is going through the 1:46 steps of creating some databases for us 1:49 to be able to manage our user accounts 1:52 that's what all these are um yes we want 1:55 to apply these changes 2:05 awesome it says here for development 2:08 purpose says you want want to disable 2:10 email verification definitely want to do 2:12 that so we can use fake email accounts 2:15 so in order to do that you click you go 2:17 to authentication right here then you 2:20 click email then you 2:22 hit users need to confirm the email 2:24 address before signing in so that is 2:26 correct you need to keep this turned off 2:29 and that that's all you need to do so we 2:32 can test this 2:35 now sign 2:39 up okay we have our sign out button here 2:42 let's just check that that 2:46 created a new 2:48 user cool test one 2:52 perfect okay so it looks like we have an 2:55 user account now let's sign out 3:00 cool so authentication works okay now 3:02 that we have authentication system set 3:04 up we need to go with our stripe 3:16 so okay so it's asking for the stripe 3:19 secret key so you'll go to your stripe 3:21 account you'll log in and you'll copy 3:25 your secret key I'm in a test 3:27 environment right now the sandbox as you 3:29 can see here here so this is a test key 3:33 and I'll be using it to test when you 3:36 have deployed your your your product 3:40 that uh your SAS or app you'll need to 3:43 change your secret test key with your 3:45 production key um if you go to your Live 3:48 account click go live that's where 3:50 you'll see your secret key there 4:05 okay copying my secret key 4:39 okay so we need to get our price 4:42 ID so product catalog 5:11 by clicking on the price that's where 5:13 you'll get access to the price ID it's 5:15 right 5:28 here okay and it's really important to 5:30 know that with your secret keys that you 5:33 got from stripe don't share those with 5:37 anyone um because if someone gets those 5:40 keys and they can get access to your 5:41 stri account and um you don't want 5:44 people access with access to your stri 5:46 again so if that happens and you 5:48 accidentally like paste them into this 5:51 chat here or store them anywhere in 5:54 public is fine no need to stress like 5:57 even if you've done a recording 6:00 and you know you've accidentally shown 6:02 them in the 6:04 recording all you have to do is go back 6:08 to where your keys are so click 6:09 developers 6:11 here go to API 6:17 Keys next to the secret key click this 6:20 and roll key roll key will update the 6:22 key so it'll basically delete the 6:24 previous key you'll need to make sure 6:26 that you update all of your places where 6:29 you're using your old key after you roll 6:31 it otherwise everything will break so 6:35 you need to make sure that if you do 6:37 roll your key you have to with the new 6:39 key that it generates you'll copy it and 6:41 you'll add it to wherever in your code 6:43 bases um that it was previously 6:49 set okay cool so now it's created an 6:52 edge function which is kind of like a 6:53 backend component that allows us to 6:56 process these stripe payments 7:00 perfect so let's give it a 7:03 test going to publish 7:14 this okay looks like the payment process 7:17 isn't being set so 7:37 okay so this is updating the database in 7:39 order to track subscription status 8:05 go this is updating the access 8:09 policy 8:13 on authenticated user that is signed 8:17 in let's see if this 8:25 works cool so it looks like it's it's 8:28 work hopefully working now let's publish 8:31 this to a test 8:35 environment a staging environment I 8:37 should call 8:38 it cool cuz you'll only be able to test 8:41 these payments through when you deploy 8:50 it perfect cool subscribe looks like the 8:54 price is 8:55 correct it's using test email 2 9:00 now this is a test card that stripe 9:04 allows you to use to test 9:07 your uh to test your payment system this 9:10 this code uh this card will only work if 9:14 you have a test stripe secret key set so 9:20 if you in production so you've changed 9:23 your stripe secet secret key for your 9:25 lovable app and you tried to use the 9:27 fake card it won't work and the fake 9:30 card is just these these numbers here 9:33 and you can do any day in the 9:36 future any 9:39 CCV any state any 9:42 zip let's test this out 10:01 cool awesome so it looks like it just 10:04 needs one more change so when it's not 10:09 updating 10:11 the actually we can check that if we go 10:13 to our 10:17 database um what are we looking for 10:24 tables okay so this is super base this 10:27 is the back end that's connected that 10:29 you connected earlier by creating your 10:31 organization tables are collections of 10:34 data so we have a notes table right here 10:37 that's a collection of all the notes 10:38 that each user has profiles that's a 10:40 collection of all the profiles that 10:42 people that created profiles and 10:44 subscriptions that'll be a collection of 10:46 all the subscriptions stripe payment 10:49 subscriptions so that's where you can 10:51 like look at the data that's getting 10:53 saved 10:56 so okay view in table editor cool 11:00 so here we have all of our data we have 11:03 our user IDs we should 11:06 have payment created art tier which is 11:09 free say our subscription tier strip 11:12 subscription ID strip custom ID so this 11:15 must be the customer that created a 11:18 payment and this user ID I imagine will 11:22 link 11:26 to copy sell content 11:34 it would probably be in 11:36 [Music] 11:39 authentication yep okay so this is how 11:42 it's linked 11:44 so 11:46 the this ID is linked to this user in 11:51 the authentication table if we go back 11:54 to our 11:56 database tables 12:02 subscriptions see the user ID will link 12:04 up to that user ID as we can 12:07 see so that's that's how the process is 12:09 working what we need to do though to get 12:11 this to work is we need to tell 12:22 lovable okay so while we're waiting for 12:25 this to generate what I'm going to do is 12:27 I'm going to give you a little 12:28 visualization of how this works cuz it 12:30 might seem like a lot going on basically 12:34 what we have is your uh lovable build 12:37 app when it's deployed it goes to you go 12:41 to your website url.com and it renders 12:45 your your app like this right here 12:48 that's in your browser because you're 12:50 doing a web search in your browser 12:52 whether it's Chrome whether it's Safari 12:53 whatever it 12:55 is when you are in your browser you 12:58 click subscribe or create a note 13:01 whatever you do there's a request that 13:03 gets sent from your browser to superbase 13:05 which is the the back end or it's 13:08 actually a back end I shouldn't use qu 13:09 there so the step function is a piece 13:14 of code basically that performs some 13:18 sort of action and in this case what 13:20 it's doing is it's saving our data to 13:22 the databases and it's sending data to 13:24 stripe to say this person's wants to 13:26 make a payment and then stripe goes the 13:28 credit card's good this is a per this is 13:30 a good payment it's success I'm going to 13:32 send back a thumbs up saying this is all 13:34 good and this is how we visualize it 13:36 from the browser to our back end step 13:39 functions step functions will make an 13:41 update in the payments in this this case 13:44 it would be the 13:47 subscriptions subscriptions table 13:50 because we were looking at that earlier 13:52 it'll also be with the users 13:56 table CU noticed how the user will be 14:00 connected to a subscription cuz we need 14:02 to know who is subscribed to the payment 14:06 so these two tables will be updated 14:08 stripe will make uh will do the payment 14:11 process it send it back and then this is 14:12 kind of how the data will flow just in 14:14 this scenario that's just to help you 14:16 kind of visualize how it 14:18 works so if we go back and see how we're 14:24 going okay this is asking for refactor 14:27 which I don't think we need to 14:30 let's sign in 14:31 again okay now let's give this as 14:35 crack our email looks 14:40 good test card 14:59 okay so it looks like it's not 15:01 associating it's not saving the stripe 15:04 payment with the 15:07 user because we have our user ID and if 15:09 we go back to storage 15:31 yeah so we see that the user 15:34 ID the tier is not getting updated and 15:37 the stripe custom ID is not getting 15:39 updated 16:09 okay 16:11 so try this 16:27 out wonderful 16:30 cool so it just needs a bit of massaging 16:33 just tell it's what it's not doing um 16:36 but always make sure that you're testing 16:39 in your deployed version because it 16:41 won't work if you do it 16:43 locally um and locally by locally I mean 16:47 in the editor right here that just um it 16:50 doesn't work because you're doing a 16:51 redirect to the stripe payment 16:54 page if you want help building AI apps 16:59 SAS with tools like lovable repler v0 17:04 bolt. new then um you should check out 17:07 my community it's for noode um no code 17:11 Founders anyone that's really looking to 17:13 build in noode Industry with uh these 17:17 tools um there's a ton of content here 17:19 you can I got weekly posts and classroom 17:22 content how to build an a assass with AI 17:26 agents Dev prompts 17:29 sass ideas uh ton of stuff so it's free 17:32 you can get access with the first link 17:34 in the description and I'll see you in 17:36 there