Implementing Security Measures for Microservices and Payment Integration

To make our text field more secure, we applied a combination of React State validation functions and error messaging. This included input validation for email and URLs to prevent potential security threats such as cross-site scripting (XSS) attacks. We also implemented limited checks to prevent form submissions if there were any errors.

By applying these changes, we aimed to improve the overall security of our microservices application. The modifications included input validation to ensure that users enter valid data, input sanitation to prevent XSS attacks, and limited checks to prevent form submissions in case of errors.

One of the key features of our application was integrating Stripe for payment processing. This integration allowed us to accept payments securely and efficiently. We were able to insert metadata as we saw during testing, which is a great feature of Stripe's API. The API is well-trusted among users, making it an ideal choice for our application.

To test the functionality of our payment integration, we deployed our changes and tested them in a controlled environment. We entered various inputs, including email addresses and URLs, to ensure that our validation functions were working correctly. This included testing the character limits for email addresses and URLs, which allowed us to verify that our input validation was functioning as expected.

Overall, our experience with integrating Stripe into our microservices application was positive. The integration was seamless, and we were able to take advantage of Stripe's features such as metadata insertion. We also deployed our changes in a test environment and tested them thoroughly to ensure their functionality.

While the integration process took some time, it was worth the effort. Our application now has improved security measures, including input validation and error messaging, which will protect user data. The integration with Stripe also allows us to accept payments securely, making our application more functional and user-friendly.

Looking forward, we plan to integrate this into our website. This will require some additional work, but it's essential for taking our application to the next level. We're excited about the possibilities that this integration brings and are confident that it will improve the overall user experience.

The use of CLA (Cursor Lab Alliance) was a highlight of our experience. The IDE is user-friendly, with features like the compose feature, chat feature, and inline feature. These features made it easy to work on our application, even for someone who is not experienced in microservices development.

In conclusion, our experience with implementing security measures and integrating Stripe into our microservices application was a success. We learned a lot from this process and are confident that our application is now more secure and functional. The use of CLA and Stripe's API made the integration process seamless, and we're excited about the possibilities that this integration brings.

Microservices Development Experience

Our experience with creating a microservices application was an exciting one. We used CLA to build our application, which proved to be a great choice. The IDE is user-friendly, and the features like compose feature, chat feature, and inline feature made it easy to work on our application.

One of the challenges we faced was integrating Stripe into our application. However, with the help of CLA's API, we were able to achieve this integration seamlessly. The API is well-trusted among users, making it an ideal choice for our application.

We also had the opportunity to deploy our changes in a test environment and tested them thoroughly. This ensured that our application was functioning as expected and that our security measures were effective.

Overall, our experience with creating a microservices application was positive. We learned a lot from this process and are confident that our application is now more secure and functional.

Cybersecurity Considerations

As we developed our microservices application, we considered various cybersecurity measures to protect user data. One of the key considerations was input validation to prevent potential security threats such as XSS attacks.

We also implemented limited checks to prevent form submissions in case of errors. This ensured that our application would not be vulnerable to security breaches.

Furthermore, we integrated Stripe's API to accept payments securely. The API is well-trusted among users, making it an ideal choice for our application.

Firebase Experience

In addition to integrating Stripe, we also had the opportunity to work with Firebase. We found that Firebase was easy to use and deploy our changes in a test environment.

The deployment process was smooth, and we were able to verify that our application was functioning as expected. This experience reinforced our confidence in using Firebase for our application.

Conclusion

In conclusion, our experience with implementing security measures and integrating Stripe into our microservices application was a success. We learned a lot from this process and are confident that our application is now more secure and functional.

The use of CLA and Stripe's API made the integration process seamless, and we're excited about the possibilities that this integration brings. Our experience with Firebase also reinforced our confidence in using it for our application.

We hope that our experience will be helpful to others who are considering creating their own microservices applications. We believe that with the right tools and expertise, anyone can create a secure and functional application.

Next Steps

As we move forward, we plan to integrate this into our website. This will require some additional work, but it's essential for taking our application to the next level.

We're excited about the possibilities that this integration brings and are confident that it will improve the overall user experience.

In conclusion, our experience with creating a microservices application was an exciting one. We learned a lot from this process and are confident that our application is now more secure and functional.

"WEBVTTKind: captionsLanguage: enwhat you see here is what we are going to build today using only AI tools like uh cursor and we're going to use a bit of claw 3.5 ui2 but mostly it's going to be cursor in this video so this is a microservices app page call it what you want that has stripe integrated so you can kind of do payments very easy so this could be like some microservices that you offer maybe on your social media so you can leave this in your b or something or on your web page this is kind of up to you uh but now I just want to show you how this works before we get into the building part right so let's say uh I wanted to sell some engagement on some social media post yeah that's a micros service right so I can click on buy here I can fill it like uh Reddit I don't know.com right and I can give some instructions to the user I can click on Pay Here and so if I click on this right on pay so this will take me over to the stripe checkout page and you can see I can just fill out here and I can pay $3 for this so pretty easy to set up uh we also have a conversation page so this is here we can book on calendary so you can just click on this takes me to my calendary you can schedule a meeting with me and you can pay right uh but one thing I added in here so let's say uh yeah I also have this YouTube video chout out so let's say uh someone wanted to buy something from me so uh engage on a social media post that was just something something I made up right so let me just fill out this and click on pay with stripe so let me just fill out my information and credit card number here and pay for this okay so my payment was confirmed so if I go to my transactions now on my stripe uh dashboard you can see I have something called uncaptured here so this is something I put in uh because uh let's say uh this person here that wanted to buy a social media post for me put in kind of the meta data you can see here so we kind of asked for can you retweet my post so I can go check out the post no I don't think I want to retweet this right then I can just go up here right and I can either capture to confirm this or I can just click cancel and now uh I don't like this post save and this is going to be return now to the customer so I can always go into my schedule here and check do I have time for this booked meeting if not I can just uh cancel it and they will get the money back instead of having to deal with payments and then I have to send it back and stuff right so that's very convenient for this right so I can check okay so he booked there so he paid for this so that is basically the app we're going to build today so we going to take you to every single step we're going to use a bit of clae but only 90% we're going to use cursor so I've been really happy playing around with cursor lately so it's going to be more of like a how to use cursor to build a Firebase and stripe uh app uh almost so I hope you we learned something I hope you enjoyed it it's a bit of a long video but you can watch this over a few days if you wanted to I think there are some good information here if you are interested in using AI to write your coding or programming or just yeah to learn something so I think we're just going to get started I hope you will enjoy it and yeah speak soon as we did in my previous video we will also today be combining CLA projects and we will be using cursor so I've been trying to go more over to use cursor uh it's a bit more advanced if you only used to using CLA uh but you should get right into it as you will see in this video uh it got some really nice features that really helps us speed up the process of making yeah what you call it an app is it an app today yeah we'll take a look at it so basically we're going to start uh as usual I have created like a visual prompt that I like to include so this is basically some design uh that yeah as you can see here it's pretty basic so this is uh the ID put down into yeah from my head onto the page here so here are the microservices I will be uh yeah selling if you want to call it like that uh this is of course highly personal because uh I can sell some video shoutouts uh for YouTube uh I can do like a conversation uh 15 minutes 30 minutes uh I get a bunch of requests but I always said no up until now maybe I'm going to try it so we going to try to do this uh it could be like a simple maybe like engagement on a on your uh social media post so maybe retweet comment on a post or something so I'm thinking like microservices and these are like is this micro Services it could be uh so we want to have this on the main page right so this is going to be like the main page facing uh for me it's going to be on my website uh but this could be a standalone app too that you can just Link in your bio right so let's say the user or the customer clicks on buy here it's going to be directed to this sub page uh if they want to be like a conversation they can book this on calendary uh and pay with stripe so the important thing here is that uh stripe API has this function that the payment can be hold until the conversation or the YouTube video shout out is confirmed by the Yeah service provider in this case it's me uh if I don't respond at all the money will be returned so that kind of gives like some yeah Authority for me to kind of uh yeah that conversation I don't think it's appropriable so I'm just going to return the money same for all the other stuff here right so the user will not be charged until the yeah the service provider confirms the deal right uh so that is what we're going to try to build today I don't think it's going to be too difficult you're going to be using like I said cursor and Cloud projects so hopefully it's a speedy process uh you're going to see me try to incorporate it at the end into my already existing website using something called cursor composer so I'm really looking forward to that that's going to be the first time I tried so uh yeah hopefully it's going to be Speedy in interesting and hopefully we can learn something so let's get get started shall we so I think we just going to start over here on CLA so I just going to uh create a project here and I'm just going to call it maybe like a micro Service app yeah that's fine click on create project uh I have prepared like uh custom instructions you can kind of see we can set here uh this is the one I've been using a lot lately so it's a pretty simple custom instruction you're an expert web developer it's expert in JavaScript react Etc your task is develop uh based on instruction from the user and build with react components I want to cl to return full code files uh use descriptive variable names comments on stuff but only for the complicated Parts Write Clean and effective code so a very minimalistic system prom but it's been working pretty good for me so I'm just going to save that right uh okay so I think we're going to start here with the prompt uh like we always do uh so so let me just upload uh our image here right okay so we have this and let me write like the initial prompt here to get us started on this project okay so let's go over the initial prompt together have so uh hello I am ready to create a full stack web app with a react front end and no JS back end let's start with the front end before we integrate the back end I think that's a good practice at least that's what I used to do I have uploaded an image of the design I want from my Microsoft Services app and I kind of reference the image here plan.png you can see it here uh as you can see from image the main page is a list of micros Services I offer uh if the user clicks uh on on my on by they will be sent to a sub page for the service they clicked on conversation is the same sub page because uh 50 and 30 minutes that could be the same sub page right uh I will give you some instructions for the YouTube shout out and engagement post sub page later just create a place order for now keep the UI minimalistic in a dark team with high contrast and good readability please I'm on Windows 11 vs code Studio cursor but that's basically vs code now create a stepbystep plan to start building my app please okay so this is the prompt we're going to run with so I'm just going to click on this now and hopefully we get some good instructions here we're going to bring over to cursor start implementing creating some components and see where this takes us okay so we have the response here I also want to mention I started a timer here so we can actually track how long we're going to spend on this project but if we scroll up here now uh we just want to start here by creating a react uh app right so let's just copy this okay and let's head over to cursor now or your vs code studio uh so what I want to do is uh I just want to go to my terminal here right and kind of go to my JavaScript folder as you can see here so let me just do that and then I'm going to npx create react app micros Service app and just hit enter uh this is going to kind of create or initialize our react app here now it's going to take a minute or two uh but I will take you back when this is complete okay so that was done uh now we can just see the into the app we created right and we can actually just open the folder here so I'm just going to go to my JavaScript going to go to my micros Service app and open this and here you can see now we have some folders here we have a app.js index.js so we can start working with this right so uh first let's install some packages if you go back here you can see we have some dependencies we want to install so I'm going to copy those and just go down here and install those and the next step is we're going to create a components folder right so let's do that so this is going to be in our source directory so Source let's create a new new folder components right and then you can see uh we're going to uh start building out some components here so we want to update our app.js this is already existing so we can just copy this app.js replace what we have here right and save main page.js so we're going to create this in our components folder right new file main page.js okay and we can just take the content here and copy this okay let's do that same with sub page we're going to create a sub page.js here so remember okay pretty simple setup sub page copy the code here uh and save that and then we have something called app. CSS so this is the styling we want so we can copy this if you go back here now you can see in our source we have something called app. CSS so let's just replace this so now we kind of added some styling here and that is our initial start now so now we can kind of run this app so we can just copy this command here and do like an npm start right and this should pop up uh our first iteration of the app here uh it's going to be pretty barebones okay so we have some errors uh main page. CSS okay so let's see here was there something I missed here okay so I guess I missed something here so let's just copy our um error here it's asking for a main page CSS subpage CSS okay so now I see so um we didn't have any main page. CSS or sub page CSS but that's fine so we just going to update those to main page and sub page uh to remove the CSS Imports and remove the Styles over to app. CSS file so let's just update these two components here so main page right and we're going to update our sub page basically what we did here is we removed this line here right and now we can kind of take a look at our app here and yeah now you can see this is our initial part right so when we click on our conversation we are taken to this page here's this part right so yeah I think this is a good start uh it's a bit Bare Bones but I think that's fine so you can see we want to add some styling here the prices but other than that it looks pretty uh close to the paint we B rated right so you can see pay with stripe book on calendary and yeah I think this is a good start so uh let's move on to the next step uh I think we're going to style this a bit make it a bit more uh linear and make it a bit more easy to kind of see the price and stuff so let's uh continue with that so I actually think this is a good opportunity to actually do some visual prompting so if we open kind of our screenshot um our snapshot here uh you can just do like this or something right so let's just grab this uh let's copy that uh we can go to paint that's fine and let's let's do like a new one here right uh oops that was a bit big uh yeah um that's fine so what I want to do is let's say uh I want to do like um this and let's say I wanted to move them over here right uh we can do maybe some kind of Arrow here something like that right and let's copy this and now let's head over to cursor so what we can do now here we have some options we can actually do uh just click here and click something called contrl L this brings us in to our chat right so what I want to do now now is I just want to paste in my image here and let me come up with a prompt here to try to move this over here so let's try the prompt here you can see my UI now plan 2.png uh I want to move the uh prices next to the buy button I didn't save that uh also align the prices horizontally and vertically next to the price with a gap One update my app please with this integration and now you can see we have the option control enter this is using our code way as uh context so hopefully this is enough to actually fix this and yeah let's just see it so when I click control enter now you can see we are reading all the existing files so this is a super smooth thing we don't have to leave the IDE to actually do some changes and we have something called uh I think it's fast apply they call it so we can just select so we want to update our app. CSS right so we can select that file can make this a bit smaller and you can see we can click on apply here and you can see okay so these are the changes we're going to do we can accept those let's save it not s contrl s we got some more changes we want to do we going to go to our main page.js and we want to add change up some lines of code here okay so I'm going to accept that and save it and now we can go back to our app right and boom yeah perfect so that is kind of what we wanted right right uh you can see from our paint we wanted to move that over here uh perfect we got the aligned so that was fixed it doesn't look crooked so yeah I'm kind of happy with this and if we click here now uh I think we're kind of ready I like this part I think this is nice centered and maybe we want to change up some of the I think I maybe want this underneath here here maybe they pay with stripe maybe you want to Center those two so let's try to do like a followup so let's do uh copy this and we can also just go back to cursor we can follow up so let's paste in an image and let's do like great job um so let's try to keep it simple great job in the sub pages I want two button Center on page and also align the button vertical not side by side contr enter so again we're going to read our code base and hopefully this picks up what we want and we can make some quick apply changes here in just our cursor ID so you can see we want to Mo uh modify the sub page so we got some suggestions here continue this is going to write some new code here did it do that couldn't really see it but let's see now we want to update our app. CSS right okay we want to add some new code here we want to line center right accept save did we save the sub page yes and hopefully we go back here now perfect right let's see if that went over to all of them yeah I like that uh I think I want to add like maybe like a stripe logo here and like a calendary logo maybe uh I think that's going to be the next part maybe we want to add like a YouTube logo here on the sub page but we're going to fix that later uh but for now I'm pretty happy with this looks and yeah let's just move on to the next step so I kind of forgot that we want different sub Pages for the YouTube video shout out right we don't want this calendary part and for the engagement social media post so what I'm going to do now is I'm going to go back to cursor here uh right I'm just going to clear this chat and uh what I'm going to do is I'm going to click contrl l again and uh let me just come up with a prompt here to kind of instruct that we need different sub pages right so I just want to try with the prompt all is good but we need two more sub pages one must connect to our engagement uh social media post service and the other one or one must connect to the YouTube video shout out service uh the conversation services are all good don't change those uh add a new two sub Pages remove the links from the old one for the respective services please uh again we're going to control enter to use our uh code base as context and hopefully now we can create two new sub um pages right okay so I went I created our two new components so the first one is going to be the SOI post page so I'm just going to click on this uh let's apply the code with this quick yeah apply feature so you can see we are writing the code here perfect let's save that or accept save uh let's do the same for our YouTube shout out uh sub page add the code right accept save okay great now we want to update our app.js file so again we can use the quick apply feature here we're going to make some changes accept save and probably we have to update our main page a bit with some new links and stuff again Quick Fix with the apply quick service and yeah that should be pretty much it now we can head back to our current APP you can see it's pretty much the same but now we have a YouTube video shout out perfect uh I'm going to alter here right to set it up the way I want it and we have a social media so yeah so we can enter a post URL that was pretty much a good idea so I want to have one more text fill like a post URL and like some instructions and on the YouTube video shout out uh yeah that is almost good enough uh shout out details uh and maybe some contact information we'll see uh you can see these are the way it was before so yeah that worked pretty smooth using cursor so I'm pretty happy with that now let me do like a Quick tune of the sub pages and then we are ready to almost ready I guess to move on to the back end so we spent 25 minutes so far uh so we are doing pretty good on time now so yeah let me do the next step here okay so I'm going to start with the social media post sub page I just want to add like a quick description field and just make some gaps here right so for this uh let's use cursor so so I'm just going to do like on the uh so me sub page let let's add uh a second text field uh let's call it uh enter instructions uh instructions for the post or something and also do a gap one between in each text field and button control enter and hopefully this can do like some small changes here uh I want to add a second and I want to add some gaps here so let's see if we can fix that with cursor go to our sub page apply accept save and we're going to do some uh in our CSS okay save that so let's take a look now yeah I think this was pretty good enter instructions we got a gap one here enter the URL so this could be saved maybe to our backend somewhere or sent To Us by the mail uh payment will be processed immediately uh I'm going to change that but let's go back here now and let's do some okay so we changed up this too yeah I kind of like that that was not too bad uh but we also need to add a URL link here I think or we don't need a URL link or do we let me think about this okay so I'm just going to final change is to add the email contact field uh on the YouTube sub page uh could have done that myself but let's just use a cursor here now uh so we can get like a yeah email here so we can do easily to contact the people that are wanting to buy some services from us right so you can see uh we want to go to our page and uh I think that's fine and R CSS say that did it change anything here not really good look now okay so we have our email address and the details uh yeah I think that's pretty good for now uh of course uh I will have to do some security here so we can don't past in scripts and stuff here to try to hack us right and let's do yeah I'm going to work on that a bit later I'm not going to integrate those security measures at the moment uh but for now I'm pretty happy with uh the services so I think now we actually going to go over and start working a bit on the back end but before we do that uh I thought I could actually do one thing first and if you go to my current website right you can see this is the theme or The Styling I have so it's kind of retro styling here right so I think it's pretty cool looks pretty nice right so I want to keep this uh styling if I wanted to put the microservices on my website right so what I thought I would try is actually to just uh I just added this website to my code base here right and if we go contrl L we have something called mention so uh let me try to come up with a prompt here that we can actually take The Styling from my current website and put it onto the micro Services we are creating here so I'm just going to do I want to copy the styling and the font from and then I'm going going to do like a uh at here or mention folders and I'm going to do our website and I'm going to find my kind of my website here right so you can see we have this uh yeah under here I'm select this folder and then I'm going to do to my components and then I'm going to do like an at menion again files and folders and let's do components right uh can you help me fix this I'm going to try to keep it simple here so let's do like a control enter now so now it's going to go through the folders in my website here okay so let's see now so we hopefully we get some instructions here so create a new styles. Js file in your components folder okay we can do that so new file uh what's it called styles. JS okay uh copy the relevant Styles okay so let's just first apply this accept and save that next step is going to be upgrade uh main page.js okay so we imported Styles now you can see that so let's try this next step is going to be to uh do the same with all our other components here so I'm just going to update all the components and then we can see if the styling kind of looks uh the same as uh website okay so the final thing I had to do was just to add my font here into my a folder named fonts and I added something called fonts. CSS that kind of points to this and now if we go to our app boom here we have it so you can see this is you can see it changed up kind of the price here but I think it's fine right so if we look now when we click on buy excuse me we kind of get this again I kind of might have to change that back but then engagement post think looks great kind of looks the same style as my website right so you can see that so I'm pretty happy with this shout out page also looks good and the conversation yeah I have to fix a bit on that but other than that that was super easy to do to kind of copy the style from another site onto our new service right or new app so I just added my website to my code base and I just use that chat control s feature to kind of reference the folders right that was super easy so yeah I guess I can just show you how I'm going to align this so this is our conversation page right so we kind of want to fix up the buttons again so here I'm going to use the composer part so I'm just going to select the sub page we want to change I'm going to C click controll I and we get this composer so I'm just going to do align the calendary and the pay button Center horizontal and vertical with a gap one not side by side keep the back button as is um I'm just going to click enter here now and hopefully this is going to write our new sub page uh to uh the same uh style as we wanted you can see uh so we can accept all and this got saved so if we go back here now boom we got it the way we had it right we can go back check this yeah perfect so this is the way I want it we have the gap on perfect now let's do the back end okay so this is kind of the ID I had for the backend since this uh app page call it what you want it's not going to have like a very advanced back and we're just going to use something uh we can set up on Firebase that is functions so we can use JavaScript for this so basically the idea is when the user click on pay with stripe uh we're going to send like this request to the Firebase function that is going to redirect the user to our stripe checkout page that we have kind of have to set up here right and I also want like uh when I have like a pending stripe payment uh if a service uh for a valid service I want to kind of have some kind of way to go and yeah confirm that in stripe so I kind of want a message or something like that I'm going to look into that but basically when the user clicks here on maybe like buy and when it clicks this button here pay with stripe uh we just want to send them over to this stripe checkout page so I want to host this on Firebase I think it's yeah pretty easy to set up over there uh but you can do this with many other places you can use uh I think you can use code your own style uh with just the stripe API you can also use like super base versel maybe uh but I'm going to use Firebase uh in this example so I think we just going to head over to Firebase and show you how kind of I set this up right so I'm just going to go to console Firebase google.com create a project right I'm just going to call it I don't know micros Service uh app that's fine okay that's fine okay so uh I don't need analytics for this I think so we just going to fire up this project we're going to select this as a web app uh because I wanted this even though this is going to be included in my web page I also wanted this to be like a standalone app in this video so if you want to link this to your uh bio or on your web page or whenever so we're just going to do this like a standalone app right okay so now we kind of got into this uh I want to go to Project settings I think and click on web app here right uh okay hosting uh yeah we can do that uh it's fine so let's just call it micros okay so let's add this so here you will kind of see your Firebase configuration I'm probably just going to blur it out just to be safe there's some API keys and stuff here that you will need right uh and we're going to do mpm install Firebase so we can copy that right and let me go on to the next stage here and we also want to install Firebase CLI so I'm just going to go back to cursor now and I'm going to close this and I'm just going to stop this now right and I'm just going to do mpm install Firebase and after that I'm going to install this Firebase CLI the tools so yeah it's going to take maybe a minute or something and I'll to install these two uh but I'll be right back okay so uh yeah I'm installing the Firebase tools here uh so we can click on next and we need to log in and initialize and after a while we can deploy right so let's just copy this login so as long as you kind of are logged into your Firebase console this should be pretty easy so we can clear that just do a Firebase login and I think I should be logged in here yeah okay great then we can kind of do the next step uh initialize our project okay so before we initialize this now uh I just wanted to try something here on cursor so uh okay so you can see we have our project here right we have public everything so I want to go back to the chat I'm just going to close down a few stuff up here uh so let's do contrl L right and let me just type in a prompt here okay so I'm going to try this prompt here so I'm ready to initialize this project on Firebase the front end is pretty much done the next step is going to be to have a back end that will use Firebase functions to send people to my stripe checkout page when interacting with to pay with stripe buttons on the sub pages I will be using run the payments with stripe extension on Firebase so that is something we want to use uh can you guide me through the installation of the Firebase setup step by step pleas this and here we're going to do like a control enter and hopefully we will get like a stepbystep guide here how you can set this up so you can see we're going to install Firebase tools we have done that log in uh next is going to be to initialize this and here you can get you can see we get some questions during the initialized process here so when we run Firebase uh in it here now you can see we will get some questions so are you ready to proceed uh yes s functions and hosting when prompted so we're going to go down here we're going to find functions I'm going to click space bar hosting space bar and okay and enter and we're going to use an existing project so that is going to be our microservices app right and the next step is going to be to select JavaScript for functions right say yes to Sint es lint and install dependencies now right so like we said we're going to use JavaScript uh do you want to install yes install dependencies yes and that should be pretty much it right and after installation you should update your package Json to include Firebase and stripe dependencies so we can do that so that is going to be our package.json right uh we can prompt this so let let's just try this so I'm going to select this and let's try to add this to chat um help me with this setup to so let's try that uh I kind of know what I have to do here but uh you can see so enter build right so here we going to enter build configure a single app we going to answer yes set up uh uh okay so we're going to do no and that was it so now we have initialized our project here now so now we can kind of go back up here right and we want to update your package.json right so let's click on that and bring this down and we want to add these lines so let's do this okay so we added these lines here accept and let's save that install the new dependencies okay so just do an npm install here and set up the stripe extension um okay we can do that but for this H I kind of like to do that over on the Firebase console I think it's just a bit more easy to do that instead of using doing it on the um the CLI right uh so what I like to do is I'm just going to go to project overview extensions and explore extensions right okay so this was a messed up but if we scroll down here we can find uh run payments with stripe let me turn off this I know it's killing your eyes but yeah so uh here we can kind of run payments with Stripe Right so I'm just going to click on install in Firebase console so we're going to choose a project so that's going to be our micros Services app and we're going to just continue here all right so you can see uh next and review API is enabled so I want to enable this right uh click on next and here uh I'm just going to keep everything default here I'm not going to change up everything big at the moment at least and then we get to this configuration for now I'm just going to leave it at default but I am going to put in my stripe API key here with restricted access and the web hook I think we're going to do that later but for now uh let me show you kind how you set up uh to get your API key so we just going to head over to the stripe dashboard and I'm going to show you how you can get your restri restricted uh key and to find this we just have to go to your homepage on stripe dashboard and click on developers and here we have something called API keys so we can just click into that and kind of uh down on the page you will find restricted API keys and you can just click on create new okay so I clicked on create restricted API key I'm going to go back to cursor now so you can see we're going to give right access to customers checkout sessions and customer portal so let me do that so you can see customers we're going to give right access customer session right access and the final right access was customer portal so we can find that too so customer portal right access right and the two read only accesses is going to be subscription and prices subscriptions that's going to be read and let's find prices and pricess right here okay so that is basically it and now we can kind of click on create key right okay so we need to set a key name so I'm just going to name it micro s okay go down again create key and now you can see I have to verify this so let me just quickly do that and then you will probably have your restricted API key okay so you can see down here we have my uh restricted key okay so I copied my key I'm just going to paste it in here and create a secret so I'll be right back okay so you can kind of see now uh yeah this is set right uh like I said I'm just going to leave everything default now I'm not going to do any major changes because we can come back to this so now I'm just going to click on install extension here this is going to take some time uh not like hours but like maybe 5 to 10 minutes so I'm just going to let this run and I'll be back when this is uh finished right so while installing this oh okay so we got an error so this has happened before so we can click on see details can click on details okay so we have some kind of error message here resource error so what I did I just copied this error message I created just a new chat on chat TBT here so while installing the extension payment with stripe I got the error so I just pasted in my errow here and we get like a breakdown so we have some steps to resolve so create a fir store database navigate to fir store database in the left hand menu click on create a DB so you can see if you click on build here fire store data database right and we come to this page here we're just going to click on I think it's just create database right and I'm just going to keep this default right start in I think we going to do let's just start in production mode I don't think it matters too much right okay so that was it your database is ready to go just add some data perfect we have another step we need to resolve so this is going to be enable Firebase off so in the Firebase console navigate to Authentic ation click on get started and enable the Firebase authentification service perfect okay let's go to build authentication and click on get started right okay so we have done that now I want to go back to extensions see details and I want to click view details retry installing so we're going to try again so I'll take you back and see if this made any changes okay great so now you can see yeah we got this installed so now we kind of have the option to manage this so everything is kind of set up here now we have our stripe uh stripe API key secret here uh we might have to add our web hook uh everything is default here now so I'm not going to change up anything here yet uh but uh now I think we're going to head back to our project and we're going to start to write our back end that is going to be integrated with this uh stripe payment here right okay so if we head back to cursor now we have kind of done the set up the stripe extension the next part is going to be create a new file function index.js and add the following code okay functions we have that folder that was autocreated and here we want to add this file to our index.js right so just click on this and do the auto apply here so we're going to accept that and save it right you can see we have some errors here uh but I'm going to update this later right and update your front end code so let's go to Source components sub pages and uh let's add in this okay so we imported some functions here we added some new styling uh your publish publishable key right okay so let's accept for now I think this looks good set up your stripe secret key as a Firebase and enironment variable okay we can do that Firebase functions and we're going to set your stripe secret key okay let me copy this and let me just set this up uh in the CLI here now I'm going to put in my API key here and run this so I'll be right back okay so I added my stripe API key uh into our Firebase environment enir BS but uh yeah I'm not going to show you that right uh now we can actually deploy our Firebase project so let's just uh do this here now so let's just try this so Firebase deploy so hopefully this is going to work uh right out the b now uh yeah okay so let's just clear this chat okay so we have a few issues here right yeah so I think we need the es lint here to work right before we can actually deploy this so this could be interesting to try to fix with the control l l feature here so let's just uh yeah do a new chat right and I want to just copy all of these errors here so let's just do it like oh there's a lot of Errors so all of this add to chat and then just ask can you re solve the errors please and of course do this with a context from our full base here okay so you can see uh let me have solved the errors right so let's just go all the way up to the top here I try to follow the instructions we get back from cursor here so we want to start uh on index.js right here's the corrected so let's go to function index uh we can bring down the terminal a bit for now and let's use the fast apply here okay so let's accept that and save it right uh package.json in our function so this uh we can add some lines here so this is the eslint fix right accept and save that install the missing dependencies try the Firebase host Firebase deploy now okay so now you can see we kind of run the eslint fix that should work now so this is looking much better okay so we had some other small issues uh let me just do uh npm run build right remember we added that so this is going to create like a production ready build so we can actually just deploy that and I think I only want to deploy the hosting for now okay so we have some issues here uh in the sub page so I want to try this and let's do add to chat and resolve the error okay so we want to install uh the stripe package is here great so npm install stripe.js right and then we want to update our sub page so we want to import Stripe from here this should be added on top here I guess good accept save update a handle payment function and it's probably in here too right there might be some changes we have to do later now right and create an EnV file in the root of your project and add your stripe publishable key uh okay yeah I might do that so let me just set that up doesn't matter too much but then I'm going to show you how you create this publishable key here so I'm just going to go to rout here new file. EnV right and let's copy this or we can just do like this and we're going to add this line accept and I'm going to find my my publishable key here right so I think this is a good time to actually just go into the test mode uh on the stripe dashboard so I'm just going to head over to the stripe dashboard and activate test mode I'm going to show you how you can do that okay so you can see test mode we can just click on this now and then we can kind of go to our API keys right and here we have the test uh publishable key that we're going to use now because you should always do this in test mode like I know when we created our first restricted key we did that in um in like a live mode uh but I want to revert to that now so we can do this in test mode instead because that's a good practice right so now we're going to have to go back and kind of do that again but I can show you now how I'm going to do this so this is a test key I always use so I'm just going to duplicate this it's basically the same but I'm just going to call it something else I'm just going to call it micro test right it has the same access so I'm just going to create this okay and yeah I think that's basically it so now let me just copy my test key and the first thing I want to do is I want to set my test key now in kind of the Firebase uh configuration so I'm just going to do like the Firebase functions get config set stripe key so I'm yeah I don't care about this test key if I don't have to hide that I can just revoke that afterwards but this is for the yeah so now we can update this right and I think we have to go back to our Firebase console 2 and do some managing here so I'm going to click on refigure extension uh I'm going to change up kind of the API key here so I just put my test key into our run payments with stripe configuration just going to click save so this is going to have to run again it's going to take a few minutes before this is updated with our test key and if we go back here now to cursor we can go to our EnV and I'm going to grab my test publish key right let's just paste that in here and let's save that right okay and then I think we can try to deploy this again let's just try both again and see if it works if not let's just do only the hosting okay so I got another small error I think this is pretty easy to fix we have to navigate to our functions right so CD functions and we can install stripe here uh in this directory I think I kind of forgot about that and then we're going to update our functions SL package uh Json here so let's go to functions okay so I'm just going to apply this so This added stripe I guess we kind of already have it but okay that's fine and we're going to update function. index 2 okay we made some few changes there that triggered an error but that's going to be fixed in the lint I think uh set your stripe API key uh we already done that that's fine and now let's try to only deploy the functions so we can do let's Firebase deploy only functions and hopefully this could work now because when we run the fix here now I think it's going to be okay yeah that looked fine and let's see now if this is going to go through okay looks like we have some more issues here so I'm just going to go through this list here and try to fix and see if this helped okay so finally we got the deployment complete so that was our uh functions completed so we can go back to the console now right should be here so functions so hopefully now we can kind of see the function here right yeah so here we have our functions for this micros Service app perfect so now we going to start testing this and actually see if it works okay so that worked now we have deployed this two so now we get this link here that we can follow and hopefully this will take us to our microservices yes perfect so we can go to the buy page oop that looks a bit bugged but for now it's looking okay what happens if we click here pretty much nothing else nothing now because we haven't yeah so we're going to do some debugging here let's do console so let's try to debug this and see if we can figure out what is happening here so I'm just going to grab the console error here go back to cursor when I click the buy button on the conversation page I get the error in console so let's do controll enter and see if we can do like some quick debugging here on this app okay so kind of as expected we don't have our Firebase configuration so create a new file Firebase uh in the source directory okay new file Firebase JS and let's uh grab this so I'm going to get go grab the Firebase configuration to and kind of paste in here right but also we need to update our sub page and so stuff here so let me just quickly do that our app.js and to so to find my Firebase configuration I can just go back to the console setting go to Project settings and if I scroll down here now I can kind of see all my configuration so I'm just going to go ahead and copy that I'm going to paste that in and do like control uh control enter okay perfect so now you can see we got my configuration here so I'm just going to apply that and then we're going to try again so now since we changed up uh some stuff here we're going to do like Firebase uh deploy again okay good so if now we click on the link hopefully this is going to solve this now so if we click on conversation now okay good so now we can are one more step and the next thing now is going to be to integrate so when people click on pay with stripe now uh hopefully will they be sent to our checkout page so we going to do a bit more on that and of course we're going to add the calendary link and yeah all of these other Pages here too uh but we're closing in now so hopefully this is going to go smooth at the end here uh yeah so let's just move on to the next step so the issue we had was that when people clicked on this pay with stripe button uh nothing happened right so uh we got a console LR so I just copied that uh if you go back to cursor now you can see uh when I click the pay with stripe button on my sub page. I get the console error here so this was the error we got right when we clicked so nothing happened and I also did like a command here um that is something like I think it's uh Firebase functions log so this is going to log what happens in our function when we try to run it so I pasted that in here too right and I just said can you help me resolve this error okay so we wanted to check that create checkout function in index.js so we went ahead and you can see I updated this we also want to update sub page.js to handle the error more gracefully so I updated my sub page right uh make sure you have the stripe key uh correctly set in your config yes and then I deployed it again uh and if you take a look now you can see if we go over to our micr services app now we click on conversation here and then we click on pay with stripe can room this yeah now we are taken over to the to the to the test mode here for stripe checkout right so we can just do like a do com so if this works now we can be brought back to the main page right okay so we checked out success okay so you can see this is not a page we have to update that uh but that's fine for now so if we go to our integration here now you can see we have some successful API requests here right so let me see if our billing got went through here so if we go to transactions you can see y that went through perfect so this is our uh apia we can see the customer and we got our $40 that we paid here right for the conversation so that is perfect uh but now I need to make some changes to our our logic here because if you remember I wanted this service I don't want the transaction to go through right away I want this to be kind of put on like hold so I have actually have to go confirm this before uh the money is paid out right so let me try to find out how I can do that so you can see I am over at the stripe API here and I found this called confirm a payment intent right uh so you can see here we have payment method and you can see we have this setup here but there's something that's called uh capture method so manual place a hold on the funds when the customer authorizes the payment but don't capture it until later so I think this is the part uh I want to use uh but for now I'm just going to grab some documentation here right and then I'm going to try to uh ask cursor now now to kind of implement this so let's paste in uh let's do stripe I'm going to paste this in okay so this was a lot context right and then let me do my prompt here now so I just want to follow up the documentation with uh I want my stripe integration to work like this when the user pays with stripe I want to put the payment on hold so I as the servers provider must confirm that the service is valid before the customer gets charged can you help me set this up please and I'm going to enter with control enter so we kind of get our full context here and yeah this is the first time I'm trying this so hopefully uh we're going to try this uh capture method so I'm not quite sure how this works uh but it's going to be interesting to see if we can actually get this to work so let's just let this run and let's implement the changes okay so the first change we want to do is to our create checkout session so we're going to click on that you can see we added payment int data capture method manual so that is what we looked at here right in the API manual right that could be interesting and let's go back to cursor here and let's save this like this uh next you need to create a new Cloud uh function to capture the payment after you confirm this uh okay so we're going to add this to I guess it's already added but that's fine update our sub page to handle a successful call back uh okay yeah let's just try what it suggests here so let's do those changes and let's save that and you need to create an admin interface or on secure endut where we can review the painting pedms and capture them so I'm just going to ask uh how can I create this can I do this on the stripe dashboard dashboard I think that would been an OP imal for me I think okay so you can see payments you can look for the status and then you can check capture button yeah this seems pretty okay uh so now yeah let's just deploy this again and test it so let's just do like an npn run right and I'm just going to deploy this again and then see if this works okay so we deployed that again uh let's go to our app now uh let's try to do the same now so pay with Stripe Right and let me just fill out this checkout here okay so I'm just going to pay this so hopefully now this is not going to be okay so we need to fix this but now we want to head over to my um my uh dashboard here on stripe and see if we get this capture payment uh set up here okay so I just went to transactions and you can see we have something here called uncaptured okay okay so this is looking good and there's something about refund here too so that's we going to test that too so if I click on this now you can see I can pick between capture and cancel so first I'm going to try to capture it uh okay capture a payment okay so that succeeded okay that was good uh I want to go back here now uh and see what happens so let me just do this again and see what happens if we cancel this okay so hopefully now we have a new uncaptured payment here let me refresh yes so let's go to that so what happens now if we cancel it if I see like ah no this conversation doesn't really uh I can't do this one sorry so I'm going to click on cancel I'm going to select a reason other uh I'm sorry right yes okay so this was cancelled uh it may take a few days for the money to reach the customer's bank account okay but hopefully uh yeah I think that's fine uh and yeah that was super easy to set up so I guess the capture method here work pretty good right the payment in 10 capture manual so I was pretty happy with this and this is exactly what I wanted so the only thing we have left now is to if you go to our app you can see uh okay we have to F fix this checkout page but we also have to add uh the social media post we have to set that up and we have to set up the YouTube video shout out right uh yeah so let's just do that and I think we also have to fix this 30 minute part here so yeah let's try to set that up and that should be almost completed and to try to fix that uh I want to try to use the composer feature here in cursor that's just going to be uh we can do control uh shift I so we get to this so uh I want to add some context here so we need our sub page right we need our YouTube chout out page we need our social media post page we can also add our uh index.js I think right uh okay so let me just do a prompt here now and see if we can fix all of this using the composer here so I think I'm just going to try the prompt I need to add strip payment to the YouTube shout out on social media post pages also the sub page must have a separate button for a 30 and 15 minutes conversation since the price is different can you help me fix all of these implementations so now I'm going to click enter here and hopefully now we can add all of these changes to all of these page at once and the composer is also going to write the code for us so yeah it's going to be interesting to see if uh we can actually fix this okay so you can see it started with adding some separate buttons to the sub page uh okay and then it's going to go over to the YouTube shout out page interesting you can see this changes implement the stri payments for all services make sure yeah and you want to update the main page too and the app so I think we're just going to try this so let's see now so we went to this okay so we can see the YouTube shout out page we have this Json stringify amount yeah $100 I think this is social media 30 and the sub page now should have two of these so we have amount and service name okay so we have two different buttons here right 75 and 40 yeah I think we're going to try this so let's do accept all and uh let's uh redeploy this and test it okay so that was done so let's refresh our page now uh let's try this uh social media here so we get uh yeah and we can enter some URLs here let's see pay with stripe okay that looks good yeah perfect engage engagement on your social media post $3 great and let's do video shout out so hopefully this is going to be like a $100 yeah perfect so let's do the conversation here okay that was a pretty good way to do it uh so we can do like we can select 40 or 75 yeah kind of like that so you can see it doesn't matter which one we click because we can select here what we want to pay so let's try the 75 yes and let's try the 40 perfect okay so that means everything is set up let's just keep it like this okay so I'm going to redeploy this uh but for now uh I think uh I think we are what am I missing now so the think the only thing I want to add now is the calendary link uh and I'm going to see where this ends up so I'm going to ask about where I can actually get these details right so I think I'm just going to try on my social media post page YouTube shout out page there are text fields that the user can fill out is it possible to send this information from these text FS along with the payment so I can see this info in the stripe dashboard before I capture sure cancel the payment uh controll uh enter and let's see if this is possible because that would be really convenient right so let's see if uh we can do that okay so we have to handle the payment uh function in both the pages uh you need to include the form data in request body okay uh let's make this a bit bigger so we can go to our social media page and replace this okay that's pretty interesting okay so let's accept that so we have post URL and instructions yeah similar for the YouTube shout out page so this is probably going to add the same yeah accept that and save it uh we want to update our back end a bit here too so let's go to our index and up the metad data here is that going to be in here yeah most likely so let's just try this then we need to redeploy just do like uh uh mpm run lint here first let's just see if we can actually deploy this now uh so we got a bit of an error here so let me just fix that and then I'm going to redeploy this and we're going to test these text Fields okay so I redeployed this now now we actually need to test this so let's go back to our microservices here uh let's just do uh yeah so let's say I had a Reddit post right post this is the URL tweet my post I don't know okay and we're going to pay with Stripe Right so I'm just going to fill out this yeah and just click on pay and when this is complete now I'm going to go back to transactions okay so in our transactions now let's click on this uncaptured part here so is there any information here let me just scroll down here okay so you can see when we come to meta data here you can see instructions hello can you comment on my post please maybe tweet my post and we got the URL here so that worked pretty good uh it's not perfect but it's quite easy to find and we I guess we could have made like a custom application for this to only handle this uh so I'm just going to see if I get an email uh with this uh from stripe that will make it even more easy so I actually don't think they send out no notifications in the test mode so what I'm going to do now is uh I'm going to put this over to my live API key and publish key and then we're going to try it out so I'm actually going to pay the US uh the $3 and then we going to test this uh in like a real transaction and see if I get a notification ations and see if all the metadata works right so uh yeah I'm just going to tell you quickly how uh how I actually put this uh from test mode over to like the live uh mode now okay so to move this over to my live uh now I kind of updated my publish key so I selected the live version of my publish key I set my configuration to my non-test API key and I also went back to my micros Service app and updated my extension uh with the live stripe stripe API key and that is basically all I did and I redeployed uh my Firebase both the function and just a Firebase redeploy so let's go to our app now and let's go here let me just fill out something here and now we're going to try to pay with my real credit card so I'm just going to click here on Stripe Right so hopefully now this is going to be in like a non test environment so let's see okay so I have a small issue here so it doesn't have the permissions to actually do this so I'm going to try to fix this using cursor first so I'm just going to put in the console error and the Firebase log error here and see if we can actually resolve this so let me just try to do that okay so what I had to do is I had to go back to my API key and I had to give the uh checkout sessions in my API key right access so I just went to my developer page API keys and I went to edit my key and I gave checkout sessions the right access redeployed and now you can see if we go here now uh we click on pay with Stripe Right now we get taken to our page but now you can see we are not on the test environment right so I'm actually going to try to pay now with my real credit card and then I'm going to see if I even get like a notification and if our metad data was yeah it uh got along with our payment okay so my payment went through now let's go to my transactions here and update uh okay so we have an uncaptured one here great uh let's click on this okay interesting so let me see now if we have the meta data yes perfect okay uh I just want to check my email if I get like a notification for this so I didn't see any notification but I'm going to set that up right so that could be nice so we can now uh decline or capture this I'm just going to cancel this right and yeah no time what uh okay so I cancel this will I now get an email from uh stripe that my order was cancelled I'm not quite sure uh but other than that yeah working pretty good we are live now so this is not in the test environment so yeah I'm pretty happy how this looks so now there's just a few final touches left uh the first thing I did I uh needed to add my calendar link right to my uh conversation page so I'm I'm just going to use the composer here to do that great and then we have to do like uh yeah npm run build and redeploy this new change so Firebase deploy so I'm just going to deploy this and then we're going to go to our conversation page to see if the calendar link is working okay so let's just go to our conversation here and click on calendary yeah this looks good so you can pick between the two meetings yeah pretty much standard setup here and you can select one of those right and yeah this is an easy way for me to let's check the other page yeah those looks pretty good so this is an easy way for me to check who's booked and who did pay for it we can go to my transaction here right and I guess we haven't tested this but it's pretty much the same so people can contact me and I can leave your my email uh I guess there's just one thing left I want to do before I'm happy with this uh yeah yeah and that is try to do some simple Security on all the text Fields right so we don't get any scripts and stuff into our text Fields so let me try to use cursor for that too I'm just going to show you the prompt and see if it works works right so again I want to try to keep this simple so in my component social media post page YouTube shout out page I have some text Fields I want to make sure that these text fields are secure to ATT text and only allows valid input to be inserted can you help me set this up control uh codebase and let's see if we can get some uh simple cyber security here but of course uh I would highly recommend uh doing more research on uh things that and leave you vulnerable right I'm no expert at all on this so if I going to create something that was quite serious I would maybe contact someone who knows a lot about this stuff right uh but let's just see what we can do now uh by just using cursor here so you can see I'll help you set up some input validation and sanitization for the text field uh to make them more secure combination of react State validation functions and error messaging so if you go down here these modifications include input validation for email and URLs input sanitation to prevent xss attacks car limited checks error Miss uh messages preventing form submissions if there are any errors so yeah let me try to implement uh just apply all of these changes and then we going to deploy and go back and see if it actually is working as intended right okay so they deployed our changes so let's go to our YouTube page and let's try to enter like a okay so you can see Play Enter an email address yeah that seems pretty good at least seems to be working okay so let's try to put in a lot of characters okay details must be th000 characters or less uh okay that seem to work uh let's go back here let's go here and a URL enter a Val valid URL okay and let's try this 500 characters okay so I'm I'm happy with this for now at least there is some uh simple uh implementations we did here for the cyber security but this is very important right if you have some databases that contain some information you really have to seek out good help as probably many of you know right uh with that I think we are pretty much completed so yeah this video got very long but uh I learned a lot from this uh I thought it was super interesting and I really enjoyed working with cursor as expected uh so I kind of said in the beginning of the video that we will be using clae projects too but I guess it just turned out that we only used cursor so that is kind of high how highly I rate this right and it's super easy to work with we have the compose feature we have the chat feature we also uh we did a bit of that um inline feature too I guess we didn't use it too much contrl L for a chat so pretty helpful to just have this uh set here and uh like if you have your own API key uh they are also possible to kind of put in your own API key here uh if you have that set up so I'm going to be trying that when my trial period is over and I have reached out to cursor maybe uh I'm going to try to ask if there's something I can do for them because I really like their product uh but the focus today was to try to create our microservices and yeah and like the big part of this was to integrate stripe into this right because it's such a nice way to get paid and there's a lot of options their uh API is superb so there's a lot of stuff we can do we can insert some metadata as we just saw and it's pretty secure and it's well trusted against uh amongst users right and we can do that test environment so pretty cool to work around with that and I as always I really enjoyed working with Firebase I really like that so you can see we are deployed here and yeah so it's pretty smooth to work around with and it's easy to change and it's pretty easy even though we are on the pay as you go I'm not going to pay anything at least of significance for this app right uh my next step is going to be to integrate this into the website uh but that's not going to be a part of the video because yeah that's pretty personal to me right so I'm going to try to find a way to do that pretty smoothly even if I just do a link or if I transfer everything over to my other Firebase setup uh but yeah I hope you learned something and I hope you uh gave you some interesting ideas maybe you want to create your own micro Services app where you can kind of yeah do simple charges for small services that you can provide that you have skill in leave it in your Twitter Bo your LinkedIn Bo or on your web page I think it's a cool IDE right and you learn a lot from just playing around with this and again uh CLA 3.5 uh very nice to work with when creating these pretty simple apps but pretty useful apps and yeah we have to check out how long did we spend on this so you can see my timer is around 4 hours and that seem pretty much how long I spent on this uh maybe I forgot sometimes to start it and stop it but I think around 4 hours for this uh yeah should be pretty much correct uh like 4 hours is quite a lot but with the integration with stripe and Firebase and deployment and everything and all the debugging I don't think it was too much remember I am quite unexperienced when it comes to this so 4 hours I'm happy with that so I want to say thank you for tuning in a long video I know but hope you to learn something uh at least I did so yeah yeah we speaks again soon and enjoy your weekend or weekwhat you see here is what we are going to build today using only AI tools like uh cursor and we're going to use a bit of claw 3.5 ui2 but mostly it's going to be cursor in this video so this is a microservices app page call it what you want that has stripe integrated so you can kind of do payments very easy so this could be like some microservices that you offer maybe on your social media so you can leave this in your b or something or on your web page this is kind of up to you uh but now I just want to show you how this works before we get into the building part right so let's say uh I wanted to sell some engagement on some social media post yeah that's a micros service right so I can click on buy here I can fill it like uh Reddit I don't know.com right and I can give some instructions to the user I can click on Pay Here and so if I click on this right on pay so this will take me over to the stripe checkout page and you can see I can just fill out here and I can pay $3 for this so pretty easy to set up uh we also have a conversation page so this is here we can book on calendary so you can just click on this takes me to my calendary you can schedule a meeting with me and you can pay right uh but one thing I added in here so let's say uh yeah I also have this YouTube video chout out so let's say uh someone wanted to buy something from me so uh engage on a social media post that was just something something I made up right so let me just fill out this and click on pay with stripe so let me just fill out my information and credit card number here and pay for this okay so my payment was confirmed so if I go to my transactions now on my stripe uh dashboard you can see I have something called uncaptured here so this is something I put in uh because uh let's say uh this person here that wanted to buy a social media post for me put in kind of the meta data you can see here so we kind of asked for can you retweet my post so I can go check out the post no I don't think I want to retweet this right then I can just go up here right and I can either capture to confirm this or I can just click cancel and now uh I don't like this post save and this is going to be return now to the customer so I can always go into my schedule here and check do I have time for this booked meeting if not I can just uh cancel it and they will get the money back instead of having to deal with payments and then I have to send it back and stuff right so that's very convenient for this right so I can check okay so he booked there so he paid for this so that is basically the app we're going to build today so we going to take you to every single step we're going to use a bit of clae but only 90% we're going to use cursor so I've been really happy playing around with cursor lately so it's going to be more of like a how to use cursor to build a Firebase and stripe uh app uh almost so I hope you we learned something I hope you enjoyed it it's a bit of a long video but you can watch this over a few days if you wanted to I think there are some good information here if you are interested in using AI to write your coding or programming or just yeah to learn something so I think we're just going to get started I hope you will enjoy it and yeah speak soon as we did in my previous video we will also today be combining CLA projects and we will be using cursor so I've been trying to go more over to use cursor uh it's a bit more advanced if you only used to using CLA uh but you should get right into it as you will see in this video uh it got some really nice features that really helps us speed up the process of making yeah what you call it an app is it an app today yeah we'll take a look at it so basically we're going to start uh as usual I have created like a visual prompt that I like to include so this is basically some design uh that yeah as you can see here it's pretty basic so this is uh the ID put down into yeah from my head onto the page here so here are the microservices I will be uh yeah selling if you want to call it like that uh this is of course highly personal because uh I can sell some video shoutouts uh for YouTube uh I can do like a conversation uh 15 minutes 30 minutes uh I get a bunch of requests but I always said no up until now maybe I'm going to try it so we going to try to do this uh it could be like a simple maybe like engagement on a on your uh social media post so maybe retweet comment on a post or something so I'm thinking like microservices and these are like is this micro Services it could be uh so we want to have this on the main page right so this is going to be like the main page facing uh for me it's going to be on my website uh but this could be a standalone app too that you can just Link in your bio right so let's say the user or the customer clicks on buy here it's going to be directed to this sub page uh if they want to be like a conversation they can book this on calendary uh and pay with stripe so the important thing here is that uh stripe API has this function that the payment can be hold until the conversation or the YouTube video shout out is confirmed by the Yeah service provider in this case it's me uh if I don't respond at all the money will be returned so that kind of gives like some yeah Authority for me to kind of uh yeah that conversation I don't think it's appropriable so I'm just going to return the money same for all the other stuff here right so the user will not be charged until the yeah the service provider confirms the deal right uh so that is what we're going to try to build today I don't think it's going to be too difficult you're going to be using like I said cursor and Cloud projects so hopefully it's a speedy process uh you're going to see me try to incorporate it at the end into my already existing website using something called cursor composer so I'm really looking forward to that that's going to be the first time I tried so uh yeah hopefully it's going to be Speedy in interesting and hopefully we can learn something so let's get get started shall we so I think we just going to start over here on CLA so I just going to uh create a project here and I'm just going to call it maybe like a micro Service app yeah that's fine click on create project uh I have prepared like uh custom instructions you can kind of see we can set here uh this is the one I've been using a lot lately so it's a pretty simple custom instruction you're an expert web developer it's expert in JavaScript react Etc your task is develop uh based on instruction from the user and build with react components I want to cl to return full code files uh use descriptive variable names comments on stuff but only for the complicated Parts Write Clean and effective code so a very minimalistic system prom but it's been working pretty good for me so I'm just going to save that right uh okay so I think we're going to start here with the prompt uh like we always do uh so so let me just upload uh our image here right okay so we have this and let me write like the initial prompt here to get us started on this project okay so let's go over the initial prompt together have so uh hello I am ready to create a full stack web app with a react front end and no JS back end let's start with the front end before we integrate the back end I think that's a good practice at least that's what I used to do I have uploaded an image of the design I want from my Microsoft Services app and I kind of reference the image here plan.png you can see it here uh as you can see from image the main page is a list of micros Services I offer uh if the user clicks uh on on my on by they will be sent to a sub page for the service they clicked on conversation is the same sub page because uh 50 and 30 minutes that could be the same sub page right uh I will give you some instructions for the YouTube shout out and engagement post sub page later just create a place order for now keep the UI minimalistic in a dark team with high contrast and good readability please I'm on Windows 11 vs code Studio cursor but that's basically vs code now create a stepbystep plan to start building my app please okay so this is the prompt we're going to run with so I'm just going to click on this now and hopefully we get some good instructions here we're going to bring over to cursor start implementing creating some components and see where this takes us okay so we have the response here I also want to mention I started a timer here so we can actually track how long we're going to spend on this project but if we scroll up here now uh we just want to start here by creating a react uh app right so let's just copy this okay and let's head over to cursor now or your vs code studio uh so what I want to do is uh I just want to go to my terminal here right and kind of go to my JavaScript folder as you can see here so let me just do that and then I'm going to npx create react app micros Service app and just hit enter uh this is going to kind of create or initialize our react app here now it's going to take a minute or two uh but I will take you back when this is complete okay so that was done uh now we can just see the into the app we created right and we can actually just open the folder here so I'm just going to go to my JavaScript going to go to my micros Service app and open this and here you can see now we have some folders here we have a app.js index.js so we can start working with this right so uh first let's install some packages if you go back here you can see we have some dependencies we want to install so I'm going to copy those and just go down here and install those and the next step is we're going to create a components folder right so let's do that so this is going to be in our source directory so Source let's create a new new folder components right and then you can see uh we're going to uh start building out some components here so we want to update our app.js this is already existing so we can just copy this app.js replace what we have here right and save main page.js so we're going to create this in our components folder right new file main page.js okay and we can just take the content here and copy this okay let's do that same with sub page we're going to create a sub page.js here so remember okay pretty simple setup sub page copy the code here uh and save that and then we have something called app. CSS so this is the styling we want so we can copy this if you go back here now you can see in our source we have something called app. CSS so let's just replace this so now we kind of added some styling here and that is our initial start now so now we can kind of run this app so we can just copy this command here and do like an npm start right and this should pop up uh our first iteration of the app here uh it's going to be pretty barebones okay so we have some errors uh main page. CSS okay so let's see here was there something I missed here okay so I guess I missed something here so let's just copy our um error here it's asking for a main page CSS subpage CSS okay so now I see so um we didn't have any main page. CSS or sub page CSS but that's fine so we just going to update those to main page and sub page uh to remove the CSS Imports and remove the Styles over to app. CSS file so let's just update these two components here so main page right and we're going to update our sub page basically what we did here is we removed this line here right and now we can kind of take a look at our app here and yeah now you can see this is our initial part right so when we click on our conversation we are taken to this page here's this part right so yeah I think this is a good start uh it's a bit Bare Bones but I think that's fine so you can see we want to add some styling here the prices but other than that it looks pretty uh close to the paint we B rated right so you can see pay with stripe book on calendary and yeah I think this is a good start so uh let's move on to the next step uh I think we're going to style this a bit make it a bit more uh linear and make it a bit more easy to kind of see the price and stuff so let's uh continue with that so I actually think this is a good opportunity to actually do some visual prompting so if we open kind of our screenshot um our snapshot here uh you can just do like this or something right so let's just grab this uh let's copy that uh we can go to paint that's fine and let's let's do like a new one here right uh oops that was a bit big uh yeah um that's fine so what I want to do is let's say uh I want to do like um this and let's say I wanted to move them over here right uh we can do maybe some kind of Arrow here something like that right and let's copy this and now let's head over to cursor so what we can do now here we have some options we can actually do uh just click here and click something called contrl L this brings us in to our chat right so what I want to do now now is I just want to paste in my image here and let me come up with a prompt here to try to move this over here so let's try the prompt here you can see my UI now plan 2.png uh I want to move the uh prices next to the buy button I didn't save that uh also align the prices horizontally and vertically next to the price with a gap One update my app please with this integration and now you can see we have the option control enter this is using our code way as uh context so hopefully this is enough to actually fix this and yeah let's just see it so when I click control enter now you can see we are reading all the existing files so this is a super smooth thing we don't have to leave the IDE to actually do some changes and we have something called uh I think it's fast apply they call it so we can just select so we want to update our app. CSS right so we can select that file can make this a bit smaller and you can see we can click on apply here and you can see okay so these are the changes we're going to do we can accept those let's save it not s contrl s we got some more changes we want to do we going to go to our main page.js and we want to add change up some lines of code here okay so I'm going to accept that and save it and now we can go back to our app right and boom yeah perfect so that is kind of what we wanted right right uh you can see from our paint we wanted to move that over here uh perfect we got the aligned so that was fixed it doesn't look crooked so yeah I'm kind of happy with this and if we click here now uh I think we're kind of ready I like this part I think this is nice centered and maybe we want to change up some of the I think I maybe want this underneath here here maybe they pay with stripe maybe you want to Center those two so let's try to do like a followup so let's do uh copy this and we can also just go back to cursor we can follow up so let's paste in an image and let's do like great job um so let's try to keep it simple great job in the sub pages I want two button Center on page and also align the button vertical not side by side contr enter so again we're going to read our code base and hopefully this picks up what we want and we can make some quick apply changes here in just our cursor ID so you can see we want to Mo uh modify the sub page so we got some suggestions here continue this is going to write some new code here did it do that couldn't really see it but let's see now we want to update our app. CSS right okay we want to add some new code here we want to line center right accept save did we save the sub page yes and hopefully we go back here now perfect right let's see if that went over to all of them yeah I like that uh I think I want to add like maybe like a stripe logo here and like a calendary logo maybe uh I think that's going to be the next part maybe we want to add like a YouTube logo here on the sub page but we're going to fix that later uh but for now I'm pretty happy with this looks and yeah let's just move on to the next step so I kind of forgot that we want different sub Pages for the YouTube video shout out right we don't want this calendary part and for the engagement social media post so what I'm going to do now is I'm going to go back to cursor here uh right I'm just going to clear this chat and uh what I'm going to do is I'm going to click contrl l again and uh let me just come up with a prompt here to kind of instruct that we need different sub pages right so I just want to try with the prompt all is good but we need two more sub pages one must connect to our engagement uh social media post service and the other one or one must connect to the YouTube video shout out service uh the conversation services are all good don't change those uh add a new two sub Pages remove the links from the old one for the respective services please uh again we're going to control enter to use our uh code base as context and hopefully now we can create two new sub um pages right okay so I went I created our two new components so the first one is going to be the SOI post page so I'm just going to click on this uh let's apply the code with this quick yeah apply feature so you can see we are writing the code here perfect let's save that or accept save uh let's do the same for our YouTube shout out uh sub page add the code right accept save okay great now we want to update our app.js file so again we can use the quick apply feature here we're going to make some changes accept save and probably we have to update our main page a bit with some new links and stuff again Quick Fix with the apply quick service and yeah that should be pretty much it now we can head back to our current APP you can see it's pretty much the same but now we have a YouTube video shout out perfect uh I'm going to alter here right to set it up the way I want it and we have a social media so yeah so we can enter a post URL that was pretty much a good idea so I want to have one more text fill like a post URL and like some instructions and on the YouTube video shout out uh yeah that is almost good enough uh shout out details uh and maybe some contact information we'll see uh you can see these are the way it was before so yeah that worked pretty smooth using cursor so I'm pretty happy with that now let me do like a Quick tune of the sub pages and then we are ready to almost ready I guess to move on to the back end so we spent 25 minutes so far uh so we are doing pretty good on time now so yeah let me do the next step here okay so I'm going to start with the social media post sub page I just want to add like a quick description field and just make some gaps here right so for this uh let's use cursor so so I'm just going to do like on the uh so me sub page let let's add uh a second text field uh let's call it uh enter instructions uh instructions for the post or something and also do a gap one between in each text field and button control enter and hopefully this can do like some small changes here uh I want to add a second and I want to add some gaps here so let's see if we can fix that with cursor go to our sub page apply accept save and we're going to do some uh in our CSS okay save that so let's take a look now yeah I think this was pretty good enter instructions we got a gap one here enter the URL so this could be saved maybe to our backend somewhere or sent To Us by the mail uh payment will be processed immediately uh I'm going to change that but let's go back here now and let's do some okay so we changed up this too yeah I kind of like that that was not too bad uh but we also need to add a URL link here I think or we don't need a URL link or do we let me think about this okay so I'm just going to final change is to add the email contact field uh on the YouTube sub page uh could have done that myself but let's just use a cursor here now uh so we can get like a yeah email here so we can do easily to contact the people that are wanting to buy some services from us right so you can see uh we want to go to our page and uh I think that's fine and R CSS say that did it change anything here not really good look now okay so we have our email address and the details uh yeah I think that's pretty good for now uh of course uh I will have to do some security here so we can don't past in scripts and stuff here to try to hack us right and let's do yeah I'm going to work on that a bit later I'm not going to integrate those security measures at the moment uh but for now I'm pretty happy with uh the services so I think now we actually going to go over and start working a bit on the back end but before we do that uh I thought I could actually do one thing first and if you go to my current website right you can see this is the theme or The Styling I have so it's kind of retro styling here right so I think it's pretty cool looks pretty nice right so I want to keep this uh styling if I wanted to put the microservices on my website right so what I thought I would try is actually to just uh I just added this website to my code base here right and if we go contrl L we have something called mention so uh let me try to come up with a prompt here that we can actually take The Styling from my current website and put it onto the micro Services we are creating here so I'm just going to do I want to copy the styling and the font from and then I'm going going to do like a uh at here or mention folders and I'm going to do our website and I'm going to find my kind of my website here right so you can see we have this uh yeah under here I'm select this folder and then I'm going to do to my components and then I'm going to do like an at menion again files and folders and let's do components right uh can you help me fix this I'm going to try to keep it simple here so let's do like a control enter now so now it's going to go through the folders in my website here okay so let's see now so we hopefully we get some instructions here so create a new styles. Js file in your components folder okay we can do that so new file uh what's it called styles. JS okay uh copy the relevant Styles okay so let's just first apply this accept and save that next step is going to be upgrade uh main page.js okay so we imported Styles now you can see that so let's try this next step is going to be to uh do the same with all our other components here so I'm just going to update all the components and then we can see if the styling kind of looks uh the same as uh website okay so the final thing I had to do was just to add my font here into my a folder named fonts and I added something called fonts. CSS that kind of points to this and now if we go to our app boom here we have it so you can see this is you can see it changed up kind of the price here but I think it's fine right so if we look now when we click on buy excuse me we kind of get this again I kind of might have to change that back but then engagement post think looks great kind of looks the same style as my website right so you can see that so I'm pretty happy with this shout out page also looks good and the conversation yeah I have to fix a bit on that but other than that that was super easy to do to kind of copy the style from another site onto our new service right or new app so I just added my website to my code base and I just use that chat control s feature to kind of reference the folders right that was super easy so yeah I guess I can just show you how I'm going to align this so this is our conversation page right so we kind of want to fix up the buttons again so here I'm going to use the composer part so I'm just going to select the sub page we want to change I'm going to C click controll I and we get this composer so I'm just going to do align the calendary and the pay button Center horizontal and vertical with a gap one not side by side keep the back button as is um I'm just going to click enter here now and hopefully this is going to write our new sub page uh to uh the same uh style as we wanted you can see uh so we can accept all and this got saved so if we go back here now boom we got it the way we had it right we can go back check this yeah perfect so this is the way I want it we have the gap on perfect now let's do the back end okay so this is kind of the ID I had for the backend since this uh app page call it what you want it's not going to have like a very advanced back and we're just going to use something uh we can set up on Firebase that is functions so we can use JavaScript for this so basically the idea is when the user click on pay with stripe uh we're going to send like this request to the Firebase function that is going to redirect the user to our stripe checkout page that we have kind of have to set up here right and I also want like uh when I have like a pending stripe payment uh if a service uh for a valid service I want to kind of have some kind of way to go and yeah confirm that in stripe so I kind of want a message or something like that I'm going to look into that but basically when the user clicks here on maybe like buy and when it clicks this button here pay with stripe uh we just want to send them over to this stripe checkout page so I want to host this on Firebase I think it's yeah pretty easy to set up over there uh but you can do this with many other places you can use uh I think you can use code your own style uh with just the stripe API you can also use like super base versel maybe uh but I'm going to use Firebase uh in this example so I think we just going to head over to Firebase and show you how kind of I set this up right so I'm just going to go to console Firebase google.com create a project right I'm just going to call it I don't know micros Service uh app that's fine okay that's fine okay so uh I don't need analytics for this I think so we just going to fire up this project we're going to select this as a web app uh because I wanted this even though this is going to be included in my web page I also wanted this to be like a standalone app in this video so if you want to link this to your uh bio or on your web page or whenever so we're just going to do this like a standalone app right okay so now we kind of got into this uh I want to go to Project settings I think and click on web app here right uh okay hosting uh yeah we can do that uh it's fine so let's just call it micros okay so let's add this so here you will kind of see your Firebase configuration I'm probably just going to blur it out just to be safe there's some API keys and stuff here that you will need right uh and we're going to do mpm install Firebase so we can copy that right and let me go on to the next stage here and we also want to install Firebase CLI so I'm just going to go back to cursor now and I'm going to close this and I'm just going to stop this now right and I'm just going to do mpm install Firebase and after that I'm going to install this Firebase CLI the tools so yeah it's going to take maybe a minute or something and I'll to install these two uh but I'll be right back okay so uh yeah I'm installing the Firebase tools here uh so we can click on next and we need to log in and initialize and after a while we can deploy right so let's just copy this login so as long as you kind of are logged into your Firebase console this should be pretty easy so we can clear that just do a Firebase login and I think I should be logged in here yeah okay great then we can kind of do the next step uh initialize our project okay so before we initialize this now uh I just wanted to try something here on cursor so uh okay so you can see we have our project here right we have public everything so I want to go back to the chat I'm just going to close down a few stuff up here uh so let's do contrl L right and let me just type in a prompt here okay so I'm going to try this prompt here so I'm ready to initialize this project on Firebase the front end is pretty much done the next step is going to be to have a back end that will use Firebase functions to send people to my stripe checkout page when interacting with to pay with stripe buttons on the sub pages I will be using run the payments with stripe extension on Firebase so that is something we want to use uh can you guide me through the installation of the Firebase setup step by step pleas this and here we're going to do like a control enter and hopefully we will get like a stepbystep guide here how you can set this up so you can see we're going to install Firebase tools we have done that log in uh next is going to be to initialize this and here you can get you can see we get some questions during the initialized process here so when we run Firebase uh in it here now you can see we will get some questions so are you ready to proceed uh yes s functions and hosting when prompted so we're going to go down here we're going to find functions I'm going to click space bar hosting space bar and okay and enter and we're going to use an existing project so that is going to be our microservices app right and the next step is going to be to select JavaScript for functions right say yes to Sint es lint and install dependencies now right so like we said we're going to use JavaScript uh do you want to install yes install dependencies yes and that should be pretty much it right and after installation you should update your package Json to include Firebase and stripe dependencies so we can do that so that is going to be our package.json right uh we can prompt this so let let's just try this so I'm going to select this and let's try to add this to chat um help me with this setup to so let's try that uh I kind of know what I have to do here but uh you can see so enter build right so here we going to enter build configure a single app we going to answer yes set up uh uh okay so we're going to do no and that was it so now we have initialized our project here now so now we can kind of go back up here right and we want to update your package.json right so let's click on that and bring this down and we want to add these lines so let's do this okay so we added these lines here accept and let's save that install the new dependencies okay so just do an npm install here and set up the stripe extension um okay we can do that but for this H I kind of like to do that over on the Firebase console I think it's just a bit more easy to do that instead of using doing it on the um the CLI right uh so what I like to do is I'm just going to go to project overview extensions and explore extensions right okay so this was a messed up but if we scroll down here we can find uh run payments with stripe let me turn off this I know it's killing your eyes but yeah so uh here we can kind of run payments with Stripe Right so I'm just going to click on install in Firebase console so we're going to choose a project so that's going to be our micros Services app and we're going to just continue here all right so you can see uh next and review API is enabled so I want to enable this right uh click on next and here uh I'm just going to keep everything default here I'm not going to change up everything big at the moment at least and then we get to this configuration for now I'm just going to leave it at default but I am going to put in my stripe API key here with restricted access and the web hook I think we're going to do that later but for now uh let me show you kind how you set up uh to get your API key so we just going to head over to the stripe dashboard and I'm going to show you how you can get your restri restricted uh key and to find this we just have to go to your homepage on stripe dashboard and click on developers and here we have something called API keys so we can just click into that and kind of uh down on the page you will find restricted API keys and you can just click on create new okay so I clicked on create restricted API key I'm going to go back to cursor now so you can see we're going to give right access to customers checkout sessions and customer portal so let me do that so you can see customers we're going to give right access customer session right access and the final right access was customer portal so we can find that too so customer portal right access right and the two read only accesses is going to be subscription and prices subscriptions that's going to be read and let's find prices and pricess right here okay so that is basically it and now we can kind of click on create key right okay so we need to set a key name so I'm just going to name it micro s okay go down again create key and now you can see I have to verify this so let me just quickly do that and then you will probably have your restricted API key okay so you can see down here we have my uh restricted key okay so I copied my key I'm just going to paste it in here and create a secret so I'll be right back okay so you can kind of see now uh yeah this is set right uh like I said I'm just going to leave everything default now I'm not going to do any major changes because we can come back to this so now I'm just going to click on install extension here this is going to take some time uh not like hours but like maybe 5 to 10 minutes so I'm just going to let this run and I'll be back when this is uh finished right so while installing this oh okay so we got an error so this has happened before so we can click on see details can click on details okay so we have some kind of error message here resource error so what I did I just copied this error message I created just a new chat on chat TBT here so while installing the extension payment with stripe I got the error so I just pasted in my errow here and we get like a breakdown so we have some steps to resolve so create a fir store database navigate to fir store database in the left hand menu click on create a DB so you can see if you click on build here fire store data database right and we come to this page here we're just going to click on I think it's just create database right and I'm just going to keep this default right start in I think we going to do let's just start in production mode I don't think it matters too much right okay so that was it your database is ready to go just add some data perfect we have another step we need to resolve so this is going to be enable Firebase off so in the Firebase console navigate to Authentic ation click on get started and enable the Firebase authentification service perfect okay let's go to build authentication and click on get started right okay so we have done that now I want to go back to extensions see details and I want to click view details retry installing so we're going to try again so I'll take you back and see if this made any changes okay great so now you can see yeah we got this installed so now we kind of have the option to manage this so everything is kind of set up here now we have our stripe uh stripe API key secret here uh we might have to add our web hook uh everything is default here now so I'm not going to change up anything here yet uh but uh now I think we're going to head back to our project and we're going to start to write our back end that is going to be integrated with this uh stripe payment here right okay so if we head back to cursor now we have kind of done the set up the stripe extension the next part is going to be create a new file function index.js and add the following code okay functions we have that folder that was autocreated and here we want to add this file to our index.js right so just click on this and do the auto apply here so we're going to accept that and save it right you can see we have some errors here uh but I'm going to update this later right and update your front end code so let's go to Source components sub pages and uh let's add in this okay so we imported some functions here we added some new styling uh your publish publishable key right okay so let's accept for now I think this looks good set up your stripe secret key as a Firebase and enironment variable okay we can do that Firebase functions and we're going to set your stripe secret key okay let me copy this and let me just set this up uh in the CLI here now I'm going to put in my API key here and run this so I'll be right back okay so I added my stripe API key uh into our Firebase environment enir BS but uh yeah I'm not going to show you that right uh now we can actually deploy our Firebase project so let's just uh do this here now so let's just try this so Firebase deploy so hopefully this is going to work uh right out the b now uh yeah okay so let's just clear this chat okay so we have a few issues here right yeah so I think we need the es lint here to work right before we can actually deploy this so this could be interesting to try to fix with the control l l feature here so let's just uh yeah do a new chat right and I want to just copy all of these errors here so let's just do it like oh there's a lot of Errors so all of this add to chat and then just ask can you re solve the errors please and of course do this with a context from our full base here okay so you can see uh let me have solved the errors right so let's just go all the way up to the top here I try to follow the instructions we get back from cursor here so we want to start uh on index.js right here's the corrected so let's go to function index uh we can bring down the terminal a bit for now and let's use the fast apply here okay so let's accept that and save it right uh package.json in our function so this uh we can add some lines here so this is the eslint fix right accept and save that install the missing dependencies try the Firebase host Firebase deploy now okay so now you can see we kind of run the eslint fix that should work now so this is looking much better okay so we had some other small issues uh let me just do uh npm run build right remember we added that so this is going to create like a production ready build so we can actually just deploy that and I think I only want to deploy the hosting for now okay so we have some issues here uh in the sub page so I want to try this and let's do add to chat and resolve the error okay so we want to install uh the stripe package is here great so npm install stripe.js right and then we want to update our sub page so we want to import Stripe from here this should be added on top here I guess good accept save update a handle payment function and it's probably in here too right there might be some changes we have to do later now right and create an EnV file in the root of your project and add your stripe publishable key uh okay yeah I might do that so let me just set that up doesn't matter too much but then I'm going to show you how you create this publishable key here so I'm just going to go to rout here new file. EnV right and let's copy this or we can just do like this and we're going to add this line accept and I'm going to find my my publishable key here right so I think this is a good time to actually just go into the test mode uh on the stripe dashboard so I'm just going to head over to the stripe dashboard and activate test mode I'm going to show you how you can do that okay so you can see test mode we can just click on this now and then we can kind of go to our API keys right and here we have the test uh publishable key that we're going to use now because you should always do this in test mode like I know when we created our first restricted key we did that in um in like a live mode uh but I want to revert to that now so we can do this in test mode instead because that's a good practice right so now we're going to have to go back and kind of do that again but I can show you now how I'm going to do this so this is a test key I always use so I'm just going to duplicate this it's basically the same but I'm just going to call it something else I'm just going to call it micro test right it has the same access so I'm just going to create this okay and yeah I think that's basically it so now let me just copy my test key and the first thing I want to do is I want to set my test key now in kind of the Firebase uh configuration so I'm just going to do like the Firebase functions get config set stripe key so I'm yeah I don't care about this test key if I don't have to hide that I can just revoke that afterwards but this is for the yeah so now we can update this right and I think we have to go back to our Firebase console 2 and do some managing here so I'm going to click on refigure extension uh I'm going to change up kind of the API key here so I just put my test key into our run payments with stripe configuration just going to click save so this is going to have to run again it's going to take a few minutes before this is updated with our test key and if we go back here now to cursor we can go to our EnV and I'm going to grab my test publish key right let's just paste that in here and let's save that right okay and then I think we can try to deploy this again let's just try both again and see if it works if not let's just do only the hosting okay so I got another small error I think this is pretty easy to fix we have to navigate to our functions right so CD functions and we can install stripe here uh in this directory I think I kind of forgot about that and then we're going to update our functions SL package uh Json here so let's go to functions okay so I'm just going to apply this so This added stripe I guess we kind of already have it but okay that's fine and we're going to update function. index 2 okay we made some few changes there that triggered an error but that's going to be fixed in the lint I think uh set your stripe API key uh we already done that that's fine and now let's try to only deploy the functions so we can do let's Firebase deploy only functions and hopefully this could work now because when we run the fix here now I think it's going to be okay yeah that looked fine and let's see now if this is going to go through okay looks like we have some more issues here so I'm just going to go through this list here and try to fix and see if this helped okay so finally we got the deployment complete so that was our uh functions completed so we can go back to the console now right should be here so functions so hopefully now we can kind of see the function here right yeah so here we have our functions for this micros Service app perfect so now we going to start testing this and actually see if it works okay so that worked now we have deployed this two so now we get this link here that we can follow and hopefully this will take us to our microservices yes perfect so we can go to the buy page oop that looks a bit bugged but for now it's looking okay what happens if we click here pretty much nothing else nothing now because we haven't yeah so we're going to do some debugging here let's do console so let's try to debug this and see if we can figure out what is happening here so I'm just going to grab the console error here go back to cursor when I click the buy button on the conversation page I get the error in console so let's do controll enter and see if we can do like some quick debugging here on this app okay so kind of as expected we don't have our Firebase configuration so create a new file Firebase uh in the source directory okay new file Firebase JS and let's uh grab this so I'm going to get go grab the Firebase configuration to and kind of paste in here right but also we need to update our sub page and so stuff here so let me just quickly do that our app.js and to so to find my Firebase configuration I can just go back to the console setting go to Project settings and if I scroll down here now I can kind of see all my configuration so I'm just going to go ahead and copy that I'm going to paste that in and do like control uh control enter okay perfect so now you can see we got my configuration here so I'm just going to apply that and then we're going to try again so now since we changed up uh some stuff here we're going to do like Firebase uh deploy again okay good so if now we click on the link hopefully this is going to solve this now so if we click on conversation now okay good so now we can are one more step and the next thing now is going to be to integrate so when people click on pay with stripe now uh hopefully will they be sent to our checkout page so we going to do a bit more on that and of course we're going to add the calendary link and yeah all of these other Pages here too uh but we're closing in now so hopefully this is going to go smooth at the end here uh yeah so let's just move on to the next step so the issue we had was that when people clicked on this pay with stripe button uh nothing happened right so uh we got a console LR so I just copied that uh if you go back to cursor now you can see uh when I click the pay with stripe button on my sub page. I get the console error here so this was the error we got right when we clicked so nothing happened and I also did like a command here um that is something like I think it's uh Firebase functions log so this is going to log what happens in our function when we try to run it so I pasted that in here too right and I just said can you help me resolve this error okay so we wanted to check that create checkout function in index.js so we went ahead and you can see I updated this we also want to update sub page.js to handle the error more gracefully so I updated my sub page right uh make sure you have the stripe key uh correctly set in your config yes and then I deployed it again uh and if you take a look now you can see if we go over to our micr services app now we click on conversation here and then we click on pay with stripe can room this yeah now we are taken over to the to the to the test mode here for stripe checkout right so we can just do like a do com so if this works now we can be brought back to the main page right okay so we checked out success okay so you can see this is not a page we have to update that uh but that's fine for now so if we go to our integration here now you can see we have some successful API requests here right so let me see if our billing got went through here so if we go to transactions you can see y that went through perfect so this is our uh apia we can see the customer and we got our $40 that we paid here right for the conversation so that is perfect uh but now I need to make some changes to our our logic here because if you remember I wanted this service I don't want the transaction to go through right away I want this to be kind of put on like hold so I have actually have to go confirm this before uh the money is paid out right so let me try to find out how I can do that so you can see I am over at the stripe API here and I found this called confirm a payment intent right uh so you can see here we have payment method and you can see we have this setup here but there's something that's called uh capture method so manual place a hold on the funds when the customer authorizes the payment but don't capture it until later so I think this is the part uh I want to use uh but for now I'm just going to grab some documentation here right and then I'm going to try to uh ask cursor now now to kind of implement this so let's paste in uh let's do stripe I'm going to paste this in okay so this was a lot context right and then let me do my prompt here now so I just want to follow up the documentation with uh I want my stripe integration to work like this when the user pays with stripe I want to put the payment on hold so I as the servers provider must confirm that the service is valid before the customer gets charged can you help me set this up please and I'm going to enter with control enter so we kind of get our full context here and yeah this is the first time I'm trying this so hopefully uh we're going to try this uh capture method so I'm not quite sure how this works uh but it's going to be interesting to see if we can actually get this to work so let's just let this run and let's implement the changes okay so the first change we want to do is to our create checkout session so we're going to click on that you can see we added payment int data capture method manual so that is what we looked at here right in the API manual right that could be interesting and let's go back to cursor here and let's save this like this uh next you need to create a new Cloud uh function to capture the payment after you confirm this uh okay so we're going to add this to I guess it's already added but that's fine update our sub page to handle a successful call back uh okay yeah let's just try what it suggests here so let's do those changes and let's save that and you need to create an admin interface or on secure endut where we can review the painting pedms and capture them so I'm just going to ask uh how can I create this can I do this on the stripe dashboard dashboard I think that would been an OP imal for me I think okay so you can see payments you can look for the status and then you can check capture button yeah this seems pretty okay uh so now yeah let's just deploy this again and test it so let's just do like an npn run right and I'm just going to deploy this again and then see if this works okay so we deployed that again uh let's go to our app now uh let's try to do the same now so pay with Stripe Right and let me just fill out this checkout here okay so I'm just going to pay this so hopefully now this is not going to be okay so we need to fix this but now we want to head over to my um my uh dashboard here on stripe and see if we get this capture payment uh set up here okay so I just went to transactions and you can see we have something here called uncaptured okay okay so this is looking good and there's something about refund here too so that's we going to test that too so if I click on this now you can see I can pick between capture and cancel so first I'm going to try to capture it uh okay capture a payment okay so that succeeded okay that was good uh I want to go back here now uh and see what happens so let me just do this again and see what happens if we cancel this okay so hopefully now we have a new uncaptured payment here let me refresh yes so let's go to that so what happens now if we cancel it if I see like ah no this conversation doesn't really uh I can't do this one sorry so I'm going to click on cancel I'm going to select a reason other uh I'm sorry right yes okay so this was cancelled uh it may take a few days for the money to reach the customer's bank account okay but hopefully uh yeah I think that's fine uh and yeah that was super easy to set up so I guess the capture method here work pretty good right the payment in 10 capture manual so I was pretty happy with this and this is exactly what I wanted so the only thing we have left now is to if you go to our app you can see uh okay we have to F fix this checkout page but we also have to add uh the social media post we have to set that up and we have to set up the YouTube video shout out right uh yeah so let's just do that and I think we also have to fix this 30 minute part here so yeah let's try to set that up and that should be almost completed and to try to fix that uh I want to try to use the composer feature here in cursor that's just going to be uh we can do control uh shift I so we get to this so uh I want to add some context here so we need our sub page right we need our YouTube chout out page we need our social media post page we can also add our uh index.js I think right uh okay so let me just do a prompt here now and see if we can fix all of this using the composer here so I think I'm just going to try the prompt I need to add strip payment to the YouTube shout out on social media post pages also the sub page must have a separate button for a 30 and 15 minutes conversation since the price is different can you help me fix all of these implementations so now I'm going to click enter here and hopefully now we can add all of these changes to all of these page at once and the composer is also going to write the code for us so yeah it's going to be interesting to see if uh we can actually fix this okay so you can see it started with adding some separate buttons to the sub page uh okay and then it's going to go over to the YouTube shout out page interesting you can see this changes implement the stri payments for all services make sure yeah and you want to update the main page too and the app so I think we're just going to try this so let's see now so we went to this okay so we can see the YouTube shout out page we have this Json stringify amount yeah $100 I think this is social media 30 and the sub page now should have two of these so we have amount and service name okay so we have two different buttons here right 75 and 40 yeah I think we're going to try this so let's do accept all and uh let's uh redeploy this and test it okay so that was done so let's refresh our page now uh let's try this uh social media here so we get uh yeah and we can enter some URLs here let's see pay with stripe okay that looks good yeah perfect engage engagement on your social media post $3 great and let's do video shout out so hopefully this is going to be like a $100 yeah perfect so let's do the conversation here okay that was a pretty good way to do it uh so we can do like we can select 40 or 75 yeah kind of like that so you can see it doesn't matter which one we click because we can select here what we want to pay so let's try the 75 yes and let's try the 40 perfect okay so that means everything is set up let's just keep it like this okay so I'm going to redeploy this uh but for now uh I think uh I think we are what am I missing now so the think the only thing I want to add now is the calendary link uh and I'm going to see where this ends up so I'm going to ask about where I can actually get these details right so I think I'm just going to try on my social media post page YouTube shout out page there are text fields that the user can fill out is it possible to send this information from these text FS along with the payment so I can see this info in the stripe dashboard before I capture sure cancel the payment uh controll uh enter and let's see if this is possible because that would be really convenient right so let's see if uh we can do that okay so we have to handle the payment uh function in both the pages uh you need to include the form data in request body okay uh let's make this a bit bigger so we can go to our social media page and replace this okay that's pretty interesting okay so let's accept that so we have post URL and instructions yeah similar for the YouTube shout out page so this is probably going to add the same yeah accept that and save it uh we want to update our back end a bit here too so let's go to our index and up the metad data here is that going to be in here yeah most likely so let's just try this then we need to redeploy just do like uh uh mpm run lint here first let's just see if we can actually deploy this now uh so we got a bit of an error here so let me just fix that and then I'm going to redeploy this and we're going to test these text Fields okay so I redeployed this now now we actually need to test this so let's go back to our microservices here uh let's just do uh yeah so let's say I had a Reddit post right post this is the URL tweet my post I don't know okay and we're going to pay with Stripe Right so I'm just going to fill out this yeah and just click on pay and when this is complete now I'm going to go back to transactions okay so in our transactions now let's click on this uncaptured part here so is there any information here let me just scroll down here okay so you can see when we come to meta data here you can see instructions hello can you comment on my post please maybe tweet my post and we got the URL here so that worked pretty good uh it's not perfect but it's quite easy to find and we I guess we could have made like a custom application for this to only handle this uh so I'm just going to see if I get an email uh with this uh from stripe that will make it even more easy so I actually don't think they send out no notifications in the test mode so what I'm going to do now is uh I'm going to put this over to my live API key and publish key and then we're going to try it out so I'm actually going to pay the US uh the $3 and then we going to test this uh in like a real transaction and see if I get a notification ations and see if all the metadata works right so uh yeah I'm just going to tell you quickly how uh how I actually put this uh from test mode over to like the live uh mode now okay so to move this over to my live uh now I kind of updated my publish key so I selected the live version of my publish key I set my configuration to my non-test API key and I also went back to my micros Service app and updated my extension uh with the live stripe stripe API key and that is basically all I did and I redeployed uh my Firebase both the function and just a Firebase redeploy so let's go to our app now and let's go here let me just fill out something here and now we're going to try to pay with my real credit card so I'm just going to click here on Stripe Right so hopefully now this is going to be in like a non test environment so let's see okay so I have a small issue here so it doesn't have the permissions to actually do this so I'm going to try to fix this using cursor first so I'm just going to put in the console error and the Firebase log error here and see if we can actually resolve this so let me just try to do that okay so what I had to do is I had to go back to my API key and I had to give the uh checkout sessions in my API key right access so I just went to my developer page API keys and I went to edit my key and I gave checkout sessions the right access redeployed and now you can see if we go here now uh we click on pay with Stripe Right now we get taken to our page but now you can see we are not on the test environment right so I'm actually going to try to pay now with my real credit card and then I'm going to see if I even get like a notification and if our metad data was yeah it uh got along with our payment okay so my payment went through now let's go to my transactions here and update uh okay so we have an uncaptured one here great uh let's click on this okay interesting so let me see now if we have the meta data yes perfect okay uh I just want to check my email if I get like a notification for this so I didn't see any notification but I'm going to set that up right so that could be nice so we can now uh decline or capture this I'm just going to cancel this right and yeah no time what uh okay so I cancel this will I now get an email from uh stripe that my order was cancelled I'm not quite sure uh but other than that yeah working pretty good we are live now so this is not in the test environment so yeah I'm pretty happy how this looks so now there's just a few final touches left uh the first thing I did I uh needed to add my calendar link right to my uh conversation page so I'm I'm just going to use the composer here to do that great and then we have to do like uh yeah npm run build and redeploy this new change so Firebase deploy so I'm just going to deploy this and then we're going to go to our conversation page to see if the calendar link is working okay so let's just go to our conversation here and click on calendary yeah this looks good so you can pick between the two meetings yeah pretty much standard setup here and you can select one of those right and yeah this is an easy way for me to let's check the other page yeah those looks pretty good so this is an easy way for me to check who's booked and who did pay for it we can go to my transaction here right and I guess we haven't tested this but it's pretty much the same so people can contact me and I can leave your my email uh I guess there's just one thing left I want to do before I'm happy with this uh yeah yeah and that is try to do some simple Security on all the text Fields right so we don't get any scripts and stuff into our text Fields so let me try to use cursor for that too I'm just going to show you the prompt and see if it works works right so again I want to try to keep this simple so in my component social media post page YouTube shout out page I have some text Fields I want to make sure that these text fields are secure to ATT text and only allows valid input to be inserted can you help me set this up control uh codebase and let's see if we can get some uh simple cyber security here but of course uh I would highly recommend uh doing more research on uh things that and leave you vulnerable right I'm no expert at all on this so if I going to create something that was quite serious I would maybe contact someone who knows a lot about this stuff right uh but let's just see what we can do now uh by just using cursor here so you can see I'll help you set up some input validation and sanitization for the text field uh to make them more secure combination of react State validation functions and error messaging so if you go down here these modifications include input validation for email and URLs input sanitation to prevent xss attacks car limited checks error Miss uh messages preventing form submissions if there are any errors so yeah let me try to implement uh just apply all of these changes and then we going to deploy and go back and see if it actually is working as intended right okay so they deployed our changes so let's go to our YouTube page and let's try to enter like a okay so you can see Play Enter an email address yeah that seems pretty good at least seems to be working okay so let's try to put in a lot of characters okay details must be th000 characters or less uh okay that seem to work uh let's go back here let's go here and a URL enter a Val valid URL okay and let's try this 500 characters okay so I'm I'm happy with this for now at least there is some uh simple uh implementations we did here for the cyber security but this is very important right if you have some databases that contain some information you really have to seek out good help as probably many of you know right uh with that I think we are pretty much completed so yeah this video got very long but uh I learned a lot from this uh I thought it was super interesting and I really enjoyed working with cursor as expected uh so I kind of said in the beginning of the video that we will be using clae projects too but I guess it just turned out that we only used cursor so that is kind of high how highly I rate this right and it's super easy to work with we have the compose feature we have the chat feature we also uh we did a bit of that um inline feature too I guess we didn't use it too much contrl L for a chat so pretty helpful to just have this uh set here and uh like if you have your own API key uh they are also possible to kind of put in your own API key here uh if you have that set up so I'm going to be trying that when my trial period is over and I have reached out to cursor maybe uh I'm going to try to ask if there's something I can do for them because I really like their product uh but the focus today was to try to create our microservices and yeah and like the big part of this was to integrate stripe into this right because it's such a nice way to get paid and there's a lot of options their uh API is superb so there's a lot of stuff we can do we can insert some metadata as we just saw and it's pretty secure and it's well trusted against uh amongst users right and we can do that test environment so pretty cool to work around with that and I as always I really enjoyed working with Firebase I really like that so you can see we are deployed here and yeah so it's pretty smooth to work around with and it's easy to change and it's pretty easy even though we are on the pay as you go I'm not going to pay anything at least of significance for this app right uh my next step is going to be to integrate this into the website uh but that's not going to be a part of the video because yeah that's pretty personal to me right so I'm going to try to find a way to do that pretty smoothly even if I just do a link or if I transfer everything over to my other Firebase setup uh but yeah I hope you learned something and I hope you uh gave you some interesting ideas maybe you want to create your own micro Services app where you can kind of yeah do simple charges for small services that you can provide that you have skill in leave it in your Twitter Bo your LinkedIn Bo or on your web page I think it's a cool IDE right and you learn a lot from just playing around with this and again uh CLA 3.5 uh very nice to work with when creating these pretty simple apps but pretty useful apps and yeah we have to check out how long did we spend on this so you can see my timer is around 4 hours and that seem pretty much how long I spent on this uh maybe I forgot sometimes to start it and stop it but I think around 4 hours for this uh yeah should be pretty much correct uh like 4 hours is quite a lot but with the integration with stripe and Firebase and deployment and everything and all the debugging I don't think it was too much remember I am quite unexperienced when it comes to this so 4 hours I'm happy with that so I want to say thank you for tuning in a long video I know but hope you to learn something uh at least I did so yeah yeah we speaks again soon and enjoy your weekend or week\n"