Ruby on Rails #9 Stripe API - Shopping Cart, Checkout Multiple Products

okay so previously we have implemented a buy now for each product that we have and then we press the buy now button they are redirected to a checkout page where we can pay for this specific product and now we are going to add a shopping cart into which we are going to be able to add a few products and we are going to be able to pay for all the products at once so you don't have to pay for each product separately you'll be able to add products and remove products from your shopping cart and pay for products all at a time so let's do it now first of all you don't have to just type all the code after me you can either find this comment in the github repository and the copy from there or you can go to the readme this specific work that we are going to do now is also available in the readme in the chapter session based shopping cart so you can also feel free to copy from there you just don't have to type everything if you don't want to so let's do it okay first of all we're going to add a button to add to cart in our products index so let's go to our products index and here we are going to add the new header shopping cart okay and table description and here we will say if our shopping cart includes this current product then we will have a button to remove the product from the code and it is going to be a method delete go into the remove from card path and we're going to have a button to add the product to the card so let's see if it works i add these two buttons and of course it doesn't work it doesn't work on the place where we say add card dot include because we did not define what the card is so we are going to define what this card is now we are going to keep all the information about the code in the session so we are going to go to our application controller and add a code object to our session so i'm going to say before action initialize session and before action load cop now in initialize session i'm saying that our session is going to have a called a card object and by default it is going to be an empty array and we are going to find the add code as the projects as the products that belong to this card okay let's refresh and we don't have the error that we don't have a code anymore but we have this problem we don't have a method add to code well it is because we did not define the root so let's go to our roots and define a route for adding to the card now again i will copy it from here they're going to have two routes one for adding an item to the card and the other for removing an item from the card so we're going to have a post to products add to code and we're going to get the id of the product so here we're going to add a product with a specific id and it will go to the products controller add to cart action and we're going to have a similar thing but for deleting a product from the code and we're going to go to the products controller remove from code action so let's refresh and we have this add to cart button i will press the button add to code and it says the action at the card could not be found in the products controller so we are going to add the action add to cart let's go to our products controller and here we are going to add the action add to cart and remove from code okay products controller and here we're going to have two actions one to add an item to the code and the other one to remove an item from the card so we are just finding the id of the product that we press the add to cart full then we go to the session card object and add this id of the product unless this id is already present in the shopping cart so you can't add the same product device and we are going to redirect to the products path and similarly for session called deleting a product and the directing to the products path so let us see if this works now i will press add to cart okay i added to the cart added another product to the cart i can refresh and you see both products are in the card but i don't see the card anywhere let's also display the shopping cart somewhere so for example in the navigation i will go to application html and say that on top of everything i will display the shopping cart okay here i'm going to have the shopping cart and then i'm going to just call the add cart from the application controller let's see i will say equals at code okay and i see all the products and the product details that were added to the code i will remove one product from the code i will remove another product of the card and we have an empty array so this way we can add and remove items in the cart looks quite nice to me now let's make this look a bit better so let's say we will say card dot each do product and we will say equals product dot name and an end statement like this and here we have two products that were added to the code i will remove one product and we have on this macbook pro added to the card so looks really nice to me and that's basically it that is how we can add and remove products to the code and next we are going to work on having one buy now button for all the products in the cart but not for each product individually but for now let us save our changes so i will say git status git add all get commit main and i will say session based shopping cart okay looks good now let's start the server once again and see so at the moment when we press the buy now button we do vote we pass the id of the product and redirect to the checkout create path so i go to the checkouts controller i find the product and in the line items for the price i find the price of this product now we are not going to look for the product anymore we are going to get all the products from the shopping cart so i will remove the product here i will remove uh this params id here we don't need just one specific product we need all the products from our shopping cart and actually we will have this checkout button or buy now button also in the shopping cart not next to each product so i will take it out of here and i will add this payment button in our application html under the shopping cart here is the new place for the buy now button inside the shopping cart okay so now we have the buy now button inside the shopping cart and uh let's say we will remove all the items from the shopping cart and we still have the buy now button visible we don't want it so let's make the buy now button visible only if the code is present if there are any items in the card let's say if add code dot present then we will have the buy now button else they will not have the buy now button so you see now we have no by now button but if we add one or two products to the code we are going to have this by now button visible so looks nice to me what if we press this buy now button we get an error why is that because previously we got the price from the current product from the selected product stripe price id but now we get the an error and defined local variable method product well because we don't define one product we want to get let's say all the items in the code so instead of saying just one line item that is one product we would want to add a few line items so here's one line item here is another line item and each of them is going to have their own stripe price id so we can as well just try to call the code all the code add code line items equals add code let's try i press buy now and nothing happens why is that i go to the logs and and invalid request error in create because i need to pass the line items in the correct format so what does that have to be there has to be a price and a quantity but i'm just passing the card and what is the card let's go to our application html and show just what the code is let's say equals at code so add code but instead of this we need to say quantity 1 and price equals this price id so to format our selected products into the right format we are going to use rails jbuilder so here is an example of jbuilder and we are going to kind of make a json out of each product that we have in our cart and pass the json array the formatted json array into our shopping in to our checkouts controller so i already have this prepared i will go to our products dot rb there are our products are b the modal product rb and here i'm going to say define to builder and i'm going to create a new jbuilder object and i'm going to say that the stripe price id is the product price and the quantity will be one for now at all times okay and now we are going to try to call the to builder method on our card let's go to our application and say card.toolbuilder what will happen uh nothing will happen what we need to do is uh say card collect item so the item is kind of the product and we're going to turn each product into uh this correct json format that was defined by stripe that we defined in our product rb and we're going to say dot attributes so it is all from the jbuilder documentation and i refresh and here we have this already formatted list of items in our card i remove an item from the code and it's not here so to the stripe checkout we're just going to pass the price as the strike price id and the quantity as fun and we can have a few items in our array or hash forever okay so let's try to pass this kind of data to our shopping cart i will take this card collect and move it to right here so line items and we take the code and run this command to format the code into the format that the stripe accepts let's try to press the buy now button and it's working so you see we have two products a disney movie and a samsung s7 i go back you see it was cancelled i go to products i remove a product from the code i have just one product let's try to press buy now and you see it works now i will try to add three products so i add this product i add this product i press buy now and you see i have three products that i can pay for at the same time i can input my card some information and pay and i will have successfully made a transaction where i purchased three different products in the same checkout session and i managed to select all the products in to our shopping cart so success looks nice to me so what have we just done basically we have said that in our line items in our checkout session we are going to pass all the items from the card and this is the main point so now let's change our save our changes and push the heroku and this is all for this lecture so feel free to ask questions comment and like the video thank you

Channel: SupeRails

Views: 1,323

Keywords: screencast, rails, ruby on rails, tutorial, programming, ruby

Id: Qu9LCbB2HmM

Length: 15min 43sec (943 seconds)

Published: Mon Mar 29 2021