Ecommerce Website Tutorial – Create a B2B App with Stripe + Postgres + REST API Backend

Key Takeaways

in this course Anya Kubo will teach you how to build three internal applications that are useful for many types of businesses the applications focus on the needs of employees managers and developers Anya is great at breaking things down and makes it simple to follow along when learning new Concepts hello everyone here on free cooker camper can build three apps and three hours using postgres Stripes API as well as an emailing integration my name is Anu Kubo software developer as well as course creator online and together we are going to build three internal tool applications that one business might use we will build an application used by employees an application used by managers and an application used by developers all linked to one database so just like you might see when working for a real small to medium-sized company now hold on yeah this seems super overwhelming why don't worry I'll be taking you through everything step by step starting with an explainer and ending with three separate tutorials leaving you with the confidence to build your own internal tools as well as some new business logic so by the end of this course you will have these wonderful applications to run an e-commerce store from the back end or back office side this is essentially what the operations team at a company will see the application will display all items in our inventory that we can sell and we will be getting this data from a database that we will build using postgres the data will be for mobile phones with each item having a price image URL description and unique SQ or identifier a data management purposes the application will also allow us to manage the purchases made by customers this means we will be able to search for orders and create refunds the refunds will be done thanks to a strike API integration on top of that we will also be able to email customers with auto-generated texts and this is some custom JavaScript that we write as well as the SMTP API you will also be able to see all other employees in the company thanks to this tab right here next up we will build the managers app in terms of admins of the company so imagine that you're a manager and you need to view all the employees at your company as well as their private information you might also need to delete someone from the database or edit their details such as their title or address for example well you can do that here as well as view the end injury too to delete items from the inventory and add new items to the inventory another nice feature we are going to add is the ability to see analytics of which employee is gaining the most revenue for your company and finally we will build a b2d app or business to developer application this app will offer additional developer friendly functionality what this means is that the app will be able to facilitate orders made through API course by displaying the endpoints right here as well as a bunch of other stuff okay so a lot to get through I'm excited let's do it this course is made possible by a grant from ritual the local platform built for Developers retool has drag and drop tools and Integrations to help developers build front ends for their internal apps right on top of apis and data sources in this course we'll be using resource free plan which is available for teams up to five people [Music] okay so let's do it I've started off on the retail platform which is the platform I'm going to use in order to build these internal apps and I'm just going to go ahead and create new from App okay so let's go ahead and call that up something I'm gonna go ahead and call it Mobby as that is my fake company's name it's a mobile company we're going to be making a mobile company's internal apps and this is going to be the employee app so just go ahead and do that you can of course Call It Whatever You Wish and there we go as you can see this is just some default settings we have a table in here and we also have a query that has been set up for us in order to get going however I am going to delete this so we can start with a clean slate so just go ahead and delete yours and then I'm also going to delete this table simply by clicking on it and then pressing delete on your keyboards great so now we have a clean slate we can control which tabs we want to see up here so here I can actually see the state of my queries okay when I get them and we can also control seeing the tab down here or we can minimize it as well as this tab on here which provides us with all our inbuilt components so let's go ahead and undo this first off I'm just going to create a container that's going to hold our tables our order tables our inventory table and our employee table to show us the employee all of that data so I'm just going to go ahead and call this order management dashboard just like so I'm going to choose to align it to the left like that and then we can also choose a color for this container's header so to do that just make sure you're on the actual container itself and then on the inspect tab we can scroll down and we can give our header a background color so I'm just going to go ahead and select one of these I'm going to go with primary and if we want to change it we can just drag this just like so to make it a little bit lighter or darker that is totally up to us okay if we go lighter the color will change a bit but we can also overwrite the default text color I'm just going to keep it white as I think that looks good great so we can change the header we can change the footer if we want to add one to this we can change the Border radius the Border there's literally so so much that we can do so perhaps while I'm here I'm just going to go ahead and change the Border radius of this to have the Border color that is the same okay so let's just go with this I'm just going to drag it to be somewhere up here great and then we can of course override it to be exact as well okay so that's our first container now I'm going to use the tabbed component so just this one right here and drag it in and we're going to have different tabs as I said the first one is going to be to see all the orders so let's go ahead and call this orders we can either give an icon if we wish so I'm just going to go ahead and just give it a little crown because they are one orders so I think that is kind of cute and then for view two we're going to have the inventory so that our employees can see the inventory in our shop so inventory and again just choose an item so I'm just going to go ahead with this one right here that kind of makes sense for an inventory and the third one I'm gonna have is for employees so the employees can also see other employees that work here and here I'm just gonna find one of a person so just like so great so if I click on any of these it should open a different tab but of course we need to put the content of that tab in here so I know that the first one is going to be a table so let's go ahead and drag that in and this is the default information that is being fed to our table we're going to delete all of this and actually feed in our data from a database so just go ahead and delete that to see we can start fresh with the inventory so if you click on here I'm going to show all the products in our company however I'm going to choose to Showcase another component for you and that is list view which will show us all the items as a list so let's go ahead and search for list view so I'm just going to drag that in here like so and this is cool because we can now drag other components into here so for example if I drag an image then we'll have loads of different images this is kind of the equivalent of mapping in JavaScript okay so let's have an image I'm also going to have let's put some text for example so we can put some text here this could be a title and then we can also have some text for a description if we wish as well there's maybe some other text for you know the price of the item as well as how much we have the product so let's go out and put that here so I've done that just so you could see how this is being mapped out to all the other list items and our list items so let's go ahead and select the list view component are actually just hard coded to number three but we can of course change this dynamically too once we get our data feeding in so we'll come back to this perhaps let's also I'm just going to change this for now we can use HTML elements in here if we want so I can use the h2 tag and this could be the product name for example so that is just an example of something we can do or we can make it smaller if we want so if we choose an H3 tag that'll just be that tiny bit smaller too here we're going to have the price so we can make it bold simply by using these two stars like so so I can just put USD and just hard code this as zero to start with but we know that the price is going to go in here okay and if we don't want to do it this way we can also just put an H five this time perhaps let's see what H5 looks like Okay so let's use an H5 element for that and here we're just going to again I'm just going to use an H5 element for this just to keep it consistent on both sides visually and let's go ahead and put the product ID as well as the stock level so that is something that we will have here and I'm just gonna make that a little bit longer for us so just like that and of course this is going to be a description of the product so I'm just going to put this is a description for now wonderful so this is just for us to have an idea of what's going to go in here what kind of data let's move on the last thing we're going to do is employees and once again for this one I'm going to have a table so let's go ahead and create and then find our table component and just drag it in here at the moment as I said it has default data just hard coded into here so it's an array of objects I'm just going to delete that so you can feed our own data in later on great now the next thing I want to do is say that when we have our orders and when we select a line from the orders we want to actually view the order visually along with the product pictures so I'm just gonna for now drag in another container so just like so and I'm going to get rid of the title this time I don't want it there and we can do so easily so if we click on the container too and we can do so easily by simply hiding the Heather like sir okay great so at the moment we're just using the default names however we can change this so perhaps let's go ahead and do that I'm going to name this to management container and let's change this to display container this tabbed container I'm just going to put management tab container okay so there we go and then I'm happy with all these tabs one times two times three that makes sense and table one well this is going to be for the orders so let's go ahead and maybe change that order table the inventory list so this list view I'm gonna put invin Tori list and the employees I'm going to change this to to just make sure to click on employees that's table two let's read in table two to be employees table just so that when people look at our code that we will be writing later it will be more readable and make more sense okay so there we go we've renamed all these components so feel free to do that you of course don't have to I just wanted to show you that it is possible okay wonderful so in here when I click on a line I essentially want to be able to view the order number so let's go ahead and delete this I'm going to use an H Four Element for this this time so let's put the closing tag and I'm going to put you are viewing order number and then we're going to put the order number in here okay so whatever it is that will show up perhaps let's make this a little bit smaller while we're at it I'm going to make this an H5 and great now when we select an order I essentially want the order to show up right but what if an order has more than one product so for this we're going to have to get the list view again because we're going to map that data on to the list view so just go ahead and drop that in here drop that in the container just like so and in here maybe let's rename this to something more readable I'm going to go ahead and rename this to order list View and in here I'm just going to drag in the image of what the order is so just like that I'm just going to make it bigger and then I'm also going to drop in some text because I want to display what this actually is so I'm going to make this an H 3 element this time and I'm just going to show the product name and then I'm also going to just drop in the description okay just so it's really visible to the employee this is a description cool and then we should probably also have the product ID as well so let's go ahead and drop that in here so product ID and we're going to put that right there wonderful so I think this is looking good we can space this out if we want so I can put a divider if I wish just to make it really obvious that you know the next item has started great so this is what it looks like now we can also actually hard code the height of this display container so I would do so by adding the height as being fixed and now if I just go ahead and change the height of this great and now I could just scroll through them with the height of this component being fixed rather than being Dynamic based on how many items we have in the list view that expands the components okay let's carry on before we get going to creating the refunds and notification section that I want to have here I think let's start with actually importing the data that we can work with and to do this I've actually gone ahead and created this file for you so you can literally copy it and drop it into your app okay so for the purposes of this tutorial we are going to be using a manage database on retour however of course in a real life situation you'd probably want to hook this up to actual real database I've gone ahead and written some code to create a table for the customer so each customer is going to be represented by a customer ID or contact name title address where they live and a way to contact them I've also done one for the employee which is kind of like the customer however it has more information as each employee at my company has employee ID a fast name last name title we also store that buff that you know just for fun if we want to send them some value notifications that higher date as well as where they live and how to contact them as well as their company photo next we have the product so all the products in our inventory which we have given an ID a product name a description how much they cost and how many units of these we have in stock as well as a photo of the product next we have the actual order so when a customer makes an order we actually use the employee ID that we assign to our employee to find out which employee is in charge of that order or took the order the customer ID that we made earlier to find out which customer made this order and then we also have the order date the required date by which they need the order by the ship date the ship address as well as the charge ID that is going to come from stripe so that we can make the refunds if we want okay and lastly we just have the order detail as this is the sales order but we don't actually know how many items are in the order or anything so here we have the product ID the unit price and how many of that product we got as well as if there was a discount applied so this is just of course sample data for this tutorial please feel free to use it it's nothing serious this is just for tutorial purposes it's a fake database that I have made okay so every order can have as many order details as I want next up we go about inserting data into each of these tables so this is how you would do it you would use the insert into keyword you'd select the table you then pick out all the columns essentially that you want to insert data into and then you do it by using the values keyword and inserting the data in the same order as the above okay so I did this for the employees table the products table the customer table the sales order table as well as the order detail table now I won't be going into how to write these SQL queries as this is not an SQL tutorial okay if you want to check that out there's plenty of resources on the free codecam channel for you to have a look at so please go right ahead okay so all I'm going to ask you to do as I said is just copy all of this like I'm doing right now to copy it and then back in here let's get up the bottom Tab and I want you to write a new resource query this time it's going to be to the manage database so go ahead and search for the manage database you should have one in your retour and just go ahead and paste it all in like so and hit save and run okay so I'm just going to make this a little bit bigger for you and great you should see a pop-up that says query one has ran successfully and you will see the related tables in here so those are all the tables in your manage database I have a few more as I've added some tables to a different tutorial but as long as you have these that should be fine that should have worked so all your tables should be in here along with all the columns that essentially make them up okay so that's quite useful for us let's just go ahead and rename this to add data so it's very easy for us to know which query is for doing which thing so great we've written our query to our data and We've ran it so we've added it to the manage database this is good now that we've actually added our data we need to retrieve that data we need to get data and I want to do it by writing another query so new resource query this time I'm going to call this get let's get the orders as that is the first table that we created so get orders like so or we can call it get sales orders to be more precise as that is what our table is called so there we go I've just chosen to call it the same as the table you don't have to but I've done it because we're going to get that table so make sure you're on the manage DB resource and all I'm going to do is write select all from so this is SQL sales order right because that was what our table was called so if I now save this and run it you will see the table show up right here so those are all our orders cool so that is how you would get a table from a database now to actually use this I would select the table that I want to populate with this data in this case it's the order table and in here you're going to use this a lot we're going to get two Kylie braces so this is something associated with retool these two Kylie braces and we're gonna get sales order data so we're simply getting whatever the query is called which is get sales orders and we're getting the data associated with it and there we go you've now populated this table with all our orders wonderful another thing that's handy if you don't know the structure of your data is to use this Explorer Tab and look at the state so as you will see here you will see get sales orders and if I open this up you'll see data which is an object and then you'll see all the columns that we can use as arrays cool so I'm just going to minimize that again now another cool thing that we can do for this table yes of course we can customize it so I can change the colors if I wish so I can go ahead and make the header background blue perhaps you know to really match the vibe of this overall component or what I can also do which is probably more useful instead of using the table names that come with our database we can actually visually change them to the user so we're not going to be changing the database at all we're just changing them visually to our users okay so I can change this to order ID so it doesn't have to be just all one word so just like so and let's go ahead and do the same for the customer ID so customer ID the employee ID employee ID so once again we are not changing anything in the database we're simply changing what it looks like on this UI it's also have the required date D shift date the shipped dress we can just have a dress really region postal code country and we don't really want the charge ID to be visible so I can go ahead and hide it like so that is an option for us too so I've just gone ahead and hidden it so now it won't be visible in our table anymore if I scroll through okay it finishes that country great so this is looking good I'm just going to go ahead and do the same thing for the employees tables so this is a bit of repetition for you what we did before is create a new resource query let's go ahead and call this get employees and then I'm going to select all from the table employee so just like so and hit save and run which will give me back all my employees when this stops running and then I'm simply going to select the employees table and under data I'm going to use the two curly braces get the employees ID so whatever we called our query and get the data from it so here's a preview and here we see that data wonderful so once again we can choose to hide as much as we want as this is the employee tab I'm going to hide these sensitive information as well as the photo so I'm going to hide this I'm going to hide where they live so just like that as well as a dress and the birthday but I am going to keep that higher date a phone number for contact as well as their first name and employee ID wonderful so that we go and of course we can change these dynamically if we wish to so I'm also gonna while I'm here just change this to be employee ID last name first name a title so we have CEO vice president sales manager that hired date and of course that phone number for contacting them if we need great so this is looking wonderful lastly I'm just going to do the inventory so once again let's make a new resource query I'm going to call this get inventory just like that and then we're going to select all from you guessed it product this time so we're going to get all the products save and run great so now I'm going to highlight the list view this time so the inventory list and the number of rows we're going to change this dynamically so get up your cardi braces use the get inventory data and then I'm going to select something that I want to pin my length to I think that should be the product ID as that is always going to be unique or should be unique and I'm going to get the length of this array okay great so there we have it as we've only got three items in our inventory that has been mapped out to three items in my inventory list okay great so now how do I feed data into this imagery list well what I would do is I would go ahead and select one of these so here is the image and I would go ahead and get the curly braces up again use the query get inventory data get the photo and we're going to Loop over each photo in our array by putting in an i okay so there we go we've looped over everything in our array so there's our three items and we're going to do the same for the product name so just in between the H3 tags that we added I'm going to use the two Kylie braces I'm going to use the get inventory data query so they're getting into a query to get the data and then I'm going to get the product name and loop over everything in my array and the price as well so I'm just going to go ahead and use the two Kylie braces here you see the space between USD the USD get inventory query to get the data that comes back and I'm going to get the unit price and once again open up an array and use the I to Loop over everything in our array do the same for the description so two curly braces get inventory query get the data from it get the product description open up our two brackets and pass through an eye so we Loop over everything great and then finally for the product ID well it's the same thing two curly braces get inventory data then we get the product ID and we Loop over by passing through an i into an array and finally get inventory data this time it's the units in stock and once again we pass through an eye great so this is looking really wonderful I'm happy with this perhaps we can just move this down a little bit so it's a bit more centered just like so as I think that might look a little bit better for the next products in line wonderful okay so this is looking good let's move on so under orders what I said is that if I select a row I actually want to show the orders that are associated with the order ID so let's go ahead and do that next so what I'm going to do is just select this title instead of having XX I'm going to go into this table which is called order table so just type out order table like so and this time we're going to get these selected row so just find selected Row from the drop down select did row we're going to get the data order ID okay so now whatever row we select this will change as you can see it's changing as I select a different right wonderful and now using the same approach we did for the inventory we're going to Loop over all of these list items in order to show all the products associated with this order number so to do this we're going to have to write another query this time to get one product so the resource query I'm going to call get products so just one product and the SQL I need to write for this it's going to be select all from the product table where the product i d equals any and then we're going to pass through the product ID that's associated with the order and we know we can get that data from the order detail table so let's go ahead and write a query for that so let's save this as it is this won't work at the moment but let's make a new query this is going to be called get sales order detail I'm going to do select all from order detail where the order ID equals and I'm going to enter this table called order table I'm going to get this selected row data order ID so just get the order ID great so save this and run it so if we select on this one right here you will see that the order associated with it has the product ID of three you'll see its price we'll see how many of them are ordered and we'll see the discount price and if I select a different row you will see that change and the order details of this order will change okay so now we're going to use this query in order to find out what product IDs are associated with which order ID and so to do this I'm just going to use get sales order detail data product ID okay and just make sure that this is in parenthesis and save and run it and great so that's all working well we've now linked up the actual product table to the sales order table so now I can just click on here and go into the get product query so this one that we wrote right here to get this photo URL so get product data dot photo we're going to just Loop over that by passing through and I just like so okay great so now let's go ahead and just try click on any one of these rows and you will see the order number here changes as well as the picture as this Samsung Galaxy is associated with this order but you wouldn't know that from looking at this line it's only thanks to us getting the product and searching for the product by the order ID that we're able to get all of this extra information so now I can use this extra information to finish this out so I'm going to go into the get product query again and get its data and this time get the product name as well as the description so get product data product description as well as the product ID okay so I'm just going to get product data product ID and loop over like so great and perhaps align it to the right now one thing what I have to do is we've obviously hard coded the length of this list so go ahead and click on the list order list View and we're just going to change this to be however long the get sales order detail data product ID length okay so in this case it will be one as only one product is associated with this order but if I go ahead and click on order 10 2 5 1 you will see there are two items associated with this order okay wonderful so this is looking great okay so I think what it is done for this section I'm just actually going to hard code the height of this as well so the order table I want it to be a fixed height so that is fixed to around about there which means that I also want to just change the height of this just so they're both kind of equal when we load the app to get started okay I just think visually that's a bit better but once again that is totally up to you that is a choice that you can make next up I want to focus on getting refunds and notifications about this refunds by using the strike API and the SMTP API in order to send emails so let's do it I'm just going to drag in the container like so so here we go and this is going to be for refunds notifications okay so this time I'm just going to change the header to be a kind of reddish color so just go ahead and select the container I'm going to rename this to refund container and then let's make the header background I'm going to make it like a red so maybe something around here is quite nice and I'm going to hard code the text to be white so that doesn't give us the default color that it wants I'm also going to actually add a image here to represent the Mobi company so this is just the kind of logo that I made feel free to not use it but I'm going to show you that you can also upload pictures into here so to do that just go ahead and drag in an image like so so that's what I have done and there we go so there is my company logo that I have made it's nothing special but I think for this tutorial it will do I'm just going to make this a little bit smaller and move it right back up here where it was before so now the refund container well as we know we're going to have to create refunds right and to do this I actually want to Auto populate a tab for the employee to see exactly what their refunding so it's really easy to read for them when they're on the phone perhaps and when they're composing emails so for this I'm going to put in another container just like so I'm not going to have a header for this so I'm just going to go ahead and hide the header so just like that and in here what I'm just going to call this text display container just like that and it's going to hold the text that we need to see so I think the employee should have something that says create refund for and then we're gonna have to get the customer associated with this order number right so just like we did with the product we're going to use that order number to fetch data from another table which is the customer table I'm going to create a new query I'm going to call this get customer and then we're going to select all from the table customer where the cost ID equals the table so the order tables sorry because that's what we call this customer ID so actually we can just use the custom ID we don't need to use the order number so that makes our life easier so let's get the order table selected row data cost ID okay so now let's save and run this and wonderful so there we go if we change the selected row it will get us a different customer based on the customer ID so in here now I'm going to use that I'm going to use the query we wrote called get customer data and get the contact name great I'm just going to add an S order just like so and then in here well we can also use markdown if we wish so I can choose to use markdown for this just to show you a different way of doing things and I'm also going to use an emotic con which is a cute little arrow okay so this is just some styling that I think is a bit fun great and this text well I want the text to be dark so let's just go ahead and change that okay so now let's move that out so create reason for Alan Michael's order or you can change the name that was totally up to us we just have to change the selected row and this query will automatically run okay because we're changing the selected run next up I'm just gonna essentially give instructions to an employee on what to do so I'm just going to put in some text I'm just going to go ahead and put in some text under here like so and this text is going to say so I'm just going to use these as it's easy for me uh I'm gonna have a one which is to check order details so you're telling the employee to check the order details and we can actually show them so this is for order number and we're going to go enter the order table selected row data and get the order ID so it's really obvious which order they're looking at and the text I'm just going to do this dark color again then we're going to have made on and then we're going to use the date that this order was made on so we're going to go into the order table selected row order date however it will show it in this format as a default we're going to pass it through into the new day object and change it to a date string so I'm going to do so by getting the new date JavaScript object and passing through the whole thing so the order date and then using the method of two date string on it okay so there we go that's a much more readable format for us and let's just go ahead and put a dot now I can use a space I can space this out Simply by adding this snippet of code so if you feel the need to do that just go ahead and add that okay great we can do the same here now the other piece of text that I want to add is the when the order was shipped so I'm going to put this order was shipped on V and once again I'm actually just going to get the new date objects as I now know I need to use it in order to change the format of the date and I'm going to go into the order table I'm going to get this selected row I'm going to get that data and I'm going to get the ship date so shipped date so there we go and I'm going to use the method of two date string on it in order to change it to a readable format without the time so that's when the order was shipped to and then we're going to put the address so we're going to once again go into the order table selectory data and get the ship address however it was spelled on the original database okay not what we changed it to here great so that's where it was shipped to and then we're going to also have the ship City so once again the order table selected row data shipped City and then as well as the country so just go ahead and add the country too okay so order table select little data ship country wonderful so I think this is looking really good the next thing I want to do is actually show the items associated with the order again just in a smaller way so once again we're going to use the list View so let's just drag and drop that in here let's call this order mini list here and this time I think we'll just show the picture but a really small picture in here so I'm just going to drag in an image like so as well as some text for the title I'm also going to have the unit price and the quantity as well so I'm just going to change that to be an individual text on right here okay so not as good to looping I'm just going to use the get product query again so I'm going to get product data photo open up I and loop and do the same for the title so get product data product name and loop and I'm just going to change the text to be a darker color so we can read it as perhaps also make this in bold so I'm just going to put it in these two stars and then we're gonna get the product so once again use the Stars get product data unit price and loop just finish that off change the text to be darker and I'm just going to put unit price in front of this so unit price just like so and then we're also going to have the quantity so maybe we move that down just so we can put this on one line like this and then the quantity we'll put here or perhaps if we want let's actually make this smaller so I don't really think it needs to be that big which means we can move all of these up to two I think that makes more sense for what we are really building here okay it's just a tiny little checkup for our employees so they don't have to go looking through all the data okay and this time we're actually going to get the sales order so get sales order detail data quantity to find out how much of each product was bought okay so let's just go ahead and put quantity here quantity and then let's change the color of the text great so this is looking wonderful and of course we want the order mini list view to change dynamically based on the get sales order detail data product ID length great so now if we click on this order which I know has two products we should get the two products associated with it on a phone next up we're going to select the refund type so for this I'm actually going to do a select drop down so I'm just going to drag this in here this is a new component that we haven't used yet and it's going to allow us to select something from a drop down that we can use in order to populate our email okay so there we go I'm going to position the label to be at the top I'm going to change the default text to be a dark color and now we can also change the label text itself so here's the label and this is going to say two select refund type okay and now we're going to put in the options for this so I can choose to do this manually or I can just choose to do the mapped version and I'm going to put an array that has the options of late in core correct and unsatisfactory and now for the label well let's just go ahead and get up our Kylie braces open up an array and we're going to actually show what the labels of these options are the first one is going to say order was late by over 10. days then the second one is going to say incorrect damaged order and the third one is going to say unsatisf Factory and we're gonna Loop I'm also going to choose to have the default option as being late okay and once again I'm just going to change the text of this to be a dark color so wonderful and we also need to change some other texts it would seem like highlighted foreground just make it dark so there we go so now if we select one it should show up here and this is looking good and then we can select other ones too and of course we can change this as much as we want okay great let's move on the next thing I want to put in is the refund amount and I'm going to do so with a number input this time so just go ahead and select one of these we can put a number we can actually put currency so perhaps let's go ahead and put currency as I feel that makes more sense so just drag that in and this should say amount to be refunded so amount to refund [Music] and then people can just select the amount in U.S dollars okay so feel free to change the currency if you wish I'm happy working in American dollars for this project next I'm just going to do a little quick recap so a little summary so I'm just going to put refund summary like so okay and then I'm just going to under this refund summary just display the actual refund amount to refund amount and then whatever the number input or the currency input value is I want to just display here as a quick summary and let's put that in bold and I'm just going to put US dollars okay so there we go we can even have US dollars in here to make that bold too great and once we've kind of checked all this I just want to have a button so I'm going to add in a button to actually commit the refund so let the refund happen so let's just go ahead and put a button in here and put in a button let's call this refund and I'm just going to make it green okay so let me make it green perhaps let's make it a little bit lighter too so there we have our refund button and let's also change the text to be white wonderful so I feel this is done I'm quite happy with this okay great now let's use this information to compose an email so we can send an email as well as well as come at the refund and we'll be using the stripe API in order to hook this up to the refund button to actually make that refund happen back onto the charge but first like I said let's do the email so let's put on another container I'm just going to work in a container in here once again I'm just going to get rid of the heading so we don't need to show the header for this I'm going to search for a component called text input so I'm just going to use the text input folders just like so change the label to be at the top so I'm just going to change the position to be top and I'm just going to essentially change the label to be three compose email as step number three for the employee okay and let's also go ahead and put another input for the actual email so it's going to be a text input this time just going to whack that in here and this is just going to say email and we're gonna have a placeholder that just says info at test.com okay great so there we go I want to change the color of this container in fact this should probably be called email container so email can container and the color of this so I'm just going to make a really light red so just like so wonderful and now I don't want this to be Auto I want it to be fixed I'm just going to drag it so it's always the same length just like that okay let's move a little bit bigger and that means I can move this down to the bottom and I'm also going to have a big button so let's go ahead and create and add a button here and this button is going to span all the way here I'm going to change the text to send email and I'm going to change this to be red okay so all of this section is kind of red and in here well I'm actually going to write a JavaScript transformer for the email text because we're gonna have to write a few things in here so I'm going to change this to the email text and what I'm going to do is I'm going to define a message that we're going to return okay so my message is going to be I'm just going to use some back ticks for this dear and then we're going to get the get customer data contacts name for comma I am sorry that your order was and then we're gonna have a reason from our selected option so whatever we select so I'm going to actually get it from the select I'm going to call this the refund select input so now we can actually grab the refund select input and get it to Value so we can display it making sure that this is actually in three curly braces this time okay so just make sure that looks like that otherwise it won't get picked up properly and then let's put please rest assured that your refund of and then once again on a kind of basis double quality braces now so it should be three in total and we're gonna get the refund amount of the number input so currency one value US Dollars has been also authorized and shall be with you in one to five working days okay and then let's put have a wonderful day great so that is our full message and now let's go ahead and just return the message okay so that's what will be returned when we use the email text Transformer great so I think we actually need to space this out from the Kali braces like so so just like touch okay so now it's being picked up so let's save this and now all I'm going to do is in here under the default text I'm going to get the email text value great perhaps the text area is actually better for this so let's go ahead and do that and once again get the email text value okay so I think maybe that's a bit better so just go ahead and delete that text input and I'm also going to hard code Auto growth with content so I'm going to change this to be 14 just so it's a little bit bigger and just move it up here and I'll change this label to be three compost email wonderful so this is looking so so much better and just align that email to go to the right okay so that is looking good we could of course mess around with this as much as we want that part is totally up to us and our house let's just make that water great now let's get to hooking this up so the first thing I'm going to do is just go to stripe so if you haven't used stripe before please go ahead and sign up to the developer portal I'm just going to go ahead and sign in so just go ahead and sign in like that this is what it should look like once you've signed up and you are returning back as a user and under here so here's the URL that you should be able to see and the test data tab is where we're going to be doing our magic so under payments is where you can actually create a new payment and you will do so by selecting this here so for example I can make a fake payment of 340 pounds and then we can actually just go ahead and put in some test card information so if you go ahead and search for stripe test cards then this should come up with this documentation right here and we can essentially use this fake card number so copy that and then paste it in here and then just for anything in the future so I'm going to put 20 25 just like so and put one two three okay so the future will be 25. so oops we need a description so mobile phone as well as the ZIP code and click submit okay great and then if you view the details so just go ahead and view the detail you will see a fake charge ID so the ID that we need is this one right here this is the charge ID it starts with ch and if you look in here I've actually given the same charge ID to all of my sales orders okay so this charge ID is what we're going to be using to make a refund so hopefully you understand how I got that charge ID now so I'm just going to go ahead and go back to here and I'm going to create a new resource query and I'm just going to go ahead and create a new resource I'm just going to go back in here create new resource and look for stripe now I'm just going to call this Moby app stripe and then the API Key Well to get this we're going to have to find our API key right so let's go ahead and shut this down I'm going to search for API developer API keys and here is my key so this is the one I'm going to need I'm going to copy this one so copy it please go ahead and make your own of course and I am just going to under here paste that in and test the connection and connection successful I'm going to create a resource okay so great I'm going to go back to resources go back to my app hit refresh as we're going to need to load that new resource in here create a new resource query search for the Mobi app stripe resource and under here we're going to search for an operation that is going to be a post to a refund so I'm just going to search for that in here it's a post request I'm going to post a refund so that should probably be down here just make sure to find the correct one as there is a lot in here is this poster charges getting the charge refund okay and the charge well it's going to be we're going to go into the order table I'm going to get the selected row data and the charge ID okay so at the moment as it says demo all our charge IDs are the same but each one of these rules should really have a different charge ID in the real life and then we're gonna have to send through the amount we want to refund so we're going to use the currency one value so this components of value okay and we're just going to save that and I'm just going to rename this to post refund and to on success so we want to know that this works I'm going to add just a confetti okay so so confetti will be thrown in the air if this works so let's go ahead and try this out I'm just going to go ahead and select an order so the first one this is for this order and as you can see there's one item of quantity one and then the unit price so I'm just going to go ahead and refund let's say 100 from it and then of course we need to link this up to the query that we wrote so I'm just going to go ahead and on the button I'm going to add an event handler which is to control the query post refund so now let's go ahead and click that button and ta-da that has worked as the confetti has run and if you look down here you will see amazing so this is the response that we get let's go ahead and try another one so I'm just going to select perhaps this line so there we go we have the unit price of course this unit price does not correlate to the charge ID because we just put on a random number however I'm just showing you how this works and if I was to refund fifty dollars this time to whatever the charge ID has on it and refund Tada that has worked and you will see that a refund has been made to the same charge ID essentially like I said this is not realistic I'm using test data you will see that that has worked okay that is actually the total amount refunded now because I refunded 100 earlier I just 350 and I refunded 100 earlier when I was testing this out as well so that is the total amount refunded and that was the original amount that we had great so that is not working let's carry on so we've hooked this up to the stripe API next I want to hook this up to actually sending an email so let's do that next I'm just going to minimize all of this right now okay and we don't need this anymore either okay so to do this we're going to get another new resource this time I'm going to use the Gmail resource so let's go ahead and actually go in here and create that resource specifically for this project I'm going to create a new resource and then we're going to search for the SMTP resource let's call this Mobi mailing SMTP the host for this is going to be SMTP gmail.com the port is 465 and then I'm just going to use Anya at freecodecamp.org okay so this is the email that it's going to be sent out from essentially and that I'm gonna have to put in my password okay so just go ahead and do that too okay and just test the connection you might get some errors even though you're putting your correct password so just check your email and just confirm it with you and then just go a