How to build a store with Rails & Stripe Checkout (11-minute guide)

welcome to the 11 minute guide to building and launching an online store in this tutorial we're going to build a store using Ruby on Rails stripe checker dodges and then deploy to Heroku so let's get started by first making a new rails app using the rails new command I'm gonna use Postgres as the database so we'll set that as a default by in the beginning and then let's CD into the directory and then generate our first controller and action we'll call it a store controller and we'll have an index view in action and we'll set that as a root path of the app once that's done let's start the server and you can see the app running here and pointing to the default index view of the store controller so now let's edit that index view and add the markup for a store so I'm just going to paste in a header to start with the stores called stickers or Twain and we're gonna sell stickers let me just add some styles so that the store looks decent so let's say a pack of five stickers for $5.00 and will provide free shipping everywhere in the world and then we're gonna display our sticker inside a stick a clasp and it's just going to be an image tag react all the things so we're not actually going to use react in this tutorial but this will be fun thing to sell okay let me just add that image here in the app assets images directory and now if you look at the page there are page loads with all the styles and the description and title for the product now for the fun part let's add a Buy Now button using stripe check out yes stripe check out is a cool javascript library which takes care of the front end payment forms you still need a back-end system to charge the customer but stripe check out takes care of the front end and stripe has a very good guide for integrating checkout with rails so that's what we're gonna follow let's start off by installing the stripe gem so we'll add it to our gem file run bundle and then the next step is to generate a controller for creating charges so we'll use the generator and say real sea controller charges this is where the code for charging the customer will go so let's copy this create method from the stripe check our documentation and paste it into our charges controller we set the amount we want to charge and then we make two API calls to stripe one for creating a new customer and another for charging that customer and we go to make a post call to this action from the stripe checkout form that we will add to our page now it's very important to set and check the charge amount on the server do not accept a trust value for this amount from the client because anyone could tamper with it and submit bogus values and our sticker business will go up in flames before it even takes off when we make a stripe charge we can send some metadata with that so for example here we can change this description so let's change it to a pack of five stickers one other thing we want to do is this error handling code we want to redirect the user to the root path we don't actually have a new charges path our our homepage is where we're going to display any errors okay the next bit is to add the form on the page so let's take this mark up from here and I'm just going to paste it into our index page of the store controller and let's change this to a product description pack of five stickers and the other thing we need to do is to add charges as a resource in our conflict routes dot RB file then let's configure the stripe API keys there are two keys the public key and the secret key so we saved that in config initializers as stripe dot RB let's add a prefix stripe to these keys so that we can differentiate them from any other keys in our environment and then we need to store these in our environment now on localhost you can put them in your bash profile dot bash profile file which lives in your user home directory ok so here you can just say export stripe secret key equals the value that you get from stripe and then expert public so I publishable key and the value and remember this is the test environment value not the live one okay so that's done and then you can load that using source bash profile or if you just open a new terminal window it'll automatically load that now since we added the configure a change the initializer file we also need to restart the server anyway so let's do that and now if we lower the page we can see a pay with card button and when we click that a payment fall appears so let's try that out now so we can fill in all the details email address name address and the payment card info you can use some tests cos I provides lots of them since this 4 to 4 to 1 is a test card which results in a successful payment enter a valid expiry date and just any numbers in the CBC and then submit the form and that takes a few seconds and the payment is successful but nothing happens here because we haven't done anything to handle define what happens when the surcharge is successful we'll do that in a moment but first I want to show you that this charge was created on the swipe dashboard so this is my test swipe dashboard and you can see there is a 5 dollar amount charged to this customer at this address and the great thing about using stripe in this way is that you don't even need to store all this address data in your database we can directly use this and just send the product to the customer and this address so this saves us from having to deal with all this data in our database and for a very simple store that's good enough we don't need to worry about it okay now let's handle the successful payment scenario so we are going to add a new view called create dot html' or ARB which is what the user will see once the charge is successful so we can show them a thank you message and say that your shipment is on the way so let's create it under the charges directory and we'll say thanks for your purchase and let's save it as create dot HTML RDR be your stickers are on the way and we'll show them a nice gif just for fun one small change I want to make now is to move the header with the title and the link to the home page from the store index file into the application layout so that it's just available on all pages okay now let's try the form once more okay just fill in the payment form in Flook wickley pay and this time we should get redirected to our new success page okay there we go so that works fine as well now let's just add a link back to the home page right so this header should link to the home page so that the user can easily go back so I'm just going to add a link to root here and let's style the link make sure it doesn't get an ugly blue color or underlined okay let's also change the text on the button instead of favorite card we're going to say bye now okay that's better let's just start a little bit of spacing under there so I'm just gonna give a clasp to this form and then we'll add a little bit of margin do that okay that looks like slightly neater let's just add another link back to the home page below this if and let's also change these image assets to some images from s3 so that we don't have to check them into the repo I'm going to delete the images from the assets folder let's just add a h3 tag here so that it's on a new line let's change the image on the home page as well the sticker image and instead use a an image from s3 you can use a CDN or whatever online host you prefer okay now we are ready to check in our code into gate and deploy to Heroku so let's say git add git commit our new online store okay now we need to create a new Heroku app so I'm assuming you've already installed the Heroku toolbelt if not just go to Heroku dot-com and download it okay we will say Hiroko create stickers win and then get push Heroku master I'll take a few seconds once that's done this is the moment of truth Heroku opened hey okay our store loads and we can load a form but you see this is still in test mode and we actually want to make it production but before we do that I just want to show you something so let's just try this form let's fill it in with some example data and then when I click pay it doesn't work because we haven't actually set the stripe keys in the environment so that's what we need to do first so we can do that using the Heroku config set method so we can say Heroku config set and then the - key so first we'll do stripe publishable key equals and you copy and paste your production or test environment key which all wrong you want to do on this app and then the stripe secret key and we press ENTER and the Heroku dynos will restart and then you can load yep now I'm actually going to just set my live production keys now I'm gonna actually use the store and make a purchase and show you that it actually works okay so now the store is running with my life published with my life stripe keys so let's actually make a purchase so I'm gonna click the Buy Now button fill in the details I'm just blurring these out because these are my real personal details when the car details and click pay and it's accepted and boom done alright so I made my first patches on my new sticker store now I want to show you the transaction on my stripe dashboard on my live stripe dashboard okay there it is so five dollars charge to me using the new star just created and that's the email receipt both as the owner of the store and II and the customer and you can try this right now you go to stickers dot win and you'll be taken to my life heroku store and you can purchase a pack of stickers and I will actually ship you a pack of five stickers thanks for watching

Channel: Learnetto Free Programming Tutorials & Courses

Views: 6,081

Keywords: rails, rubyonrails, ruby on rails, stripe

Id: BjXsB88fTtQ

Length: 10min 42sec (642 seconds)

Published: Sun Sep 10 2017