‫In this lecture we gonna learn
‫how to process payments with stripe,
‫on the front-end whenever a user clicks a button.
‫And to start let's actually configure it that button
‫so that it only appears whenever a user
‫is actually logged in.
‫So here on the tour detail page,
‫right now we have a user logged in,
‫and so that button says book tour now,
‫but it should only be like this
‫when there is a currently logged in user,
‫and otherwise,
‫it would then redirect us to the login page.
‫Okay?
‫So let's implement that in the tour template.
‫And so that's actually right here,
‫so that is this button.
‫Alright?
‫Now if there is currently a user logged in,
‫then that means that we have access to the user variable,
‫and so we can do if user well than this.
‫And if there is no user, so else,
‫well then we simply want to display a button,
‫which brings us to the login page.
‫And so ,
‫login to book tour,
‫and this one should actually be a link,
‫and so we need an A element for anchor.
‫Let's then also specify the hf property,
‫which again will point us to the login page,
‫alright?
‫Now here we also need to add an ID,
‫book tour so that we can then select it in our JavaScript,
‫and also something very important,
‫is that we should put the current tour ID
‫right here in this element, Okay?
‫Now why is that so important?
‫Well remember how the API endpoint that we just created.
‫So this one here needs the tour ID,
‫and so that tour ID needs to come from somewhere basically,
‫and so right now we don't have that information
‫anywhere on this page,
‫and so we will put it here right on this element,
‫so that then or JavaScript file can grab it from here,
‫and send it along with the request
‫to the checkout session route, okay?
‫So just like we did here with a map,
‫we are going to use a data attribute,
‫and so that's data-,
‫and then basically whatever a variable name
‫we want to define.
‫And so that's tour id in this case.
‫So tour.id, alright?
‫So give to the safe,
‫and let's actually try that out now.
‫So reload the page,
‫and first of all let's inspect it
‫to see if the idea is actually there,
‫and indeed here we go.
‫And now if we log out.
‫Then let's see what we have,
‫and indeed now it says,
‫login to book the tour.
‫Great, and let's do that actually.
‫Now Okay?
‫And So now next up let's create a script
‫in which we will actually do the request,
‫and process the payment on the front end.
‫And so just like before that will be in public,
‫and then JavaScript.
‫So one more script here.
‫And I'm gonna call it stripe.js.
‫And now here we actually need access
‫to the stripe library again,
‫but that package that we just installed before,
‫so remember that stripe MPM package that we used here.
‫So this one only works for the back end,
‫and what we need to do on the front end
‫is to actually include a script in the HTML,
‫and since we only need that script here on the tour page,
‫we will do it just like we did with the map box script.
‫So this one,
‫we will put it here in this head block,
‫alright?
‫Now which script do we actually need?
‫Well that we can very simply get from the documentation
‫that we already took a look at before,
‫and I hope you didn't close that one, alright?
‫And so again this one here explains
‫how we use the checkout product
‫both on the client and the server.
‫So here we see that we have two steps,
‫first creating the checkout session on the server,
‫and so this is very similar
‫to what we did before in the last video,
‫and so now we need to also add it to our front end.
‫And so that script that we need is this one, alright?
‫So let's copy that and let's go back.
‫And now we need to adapt this a little bit.
‫Now right?
‫So this was an expose a stripe object to the global scope,
‫and so now in this file we can use that.
‫So we say,
‫const stripe =,
‫and then this is that object
‫that we get from the script that we just included,
‫and then here we need our public key, alright?
‫So we already used our secret key on the backend,
‫now it's time to use our public key.
‫So let's go back to the dashboard,
‫and actually if you're in the documentation,
‫it will already show up here for you,
‫so this is a really nice feature
‫of the stripe documentations.
‫So whenever you're logged in,
‫then this key that you have here
‫is actually your public key.
‫But if you're not on that page,
‫you can of course also get your API key
‫by going to the homepage,
‫or the developers page,
‫let's actually try that one.
‫Then here on API keys,
‫you have your public test key right here.
‫So grab that,
‫and then let's go back and pass it here.
‫And just as before,
‫I want to quickly disable eslint here.
‫Okay?
‫And now let's then finally create a function,
‫that I'm gonna call book tour.
‫Okay?
‫And so this function will take in a tour ID.
‫And so the tour ID is the one that's gonna be coming
‫right here from this user interface.
‫So right from here, okay?
‫So just as before,
‫we gonna get that one from index.js
‫where we will then also call this book Tour,
‫okay?
‫So very similar to what we did before.
‫Anyway, let's now once more specify the steps
‫that we gonna take here.
‫So the first step is to actually get the session
‫from the server,
‫and so that is where now this route here comes in, Okay?
‫So this is the point where we are going to use
‫this endpoint to really get our checkout session
‫on to the client side.
‫Okay?
‫So get checked out session.
‫From endpoint or from API it doesn't really matter.
‫That done as a second step,
‫we will use our stripe object
‫to basically automatically create the checkout form,
‫+ process or let's say + charge,
‫the credit card for us, Okay?
‫And that's actually it,
‫so only two simple steps,
‫and you will see that they are actually pretty simple.
‫So let's store the session into a variable called session.
‫And then we're going to await an HTTP request,
‫which once more we will do with axios.
‫Alright?
‫So I need to grab that here.
‫So import axios,
‫and once more I'm using the ES6 module syntax.
‫Remember that,
‫from axios.
‫So just like we did for example in login,
‫or in update settings, right?
‫Now we also need to mark this function here as async.
‫Okay?
‫And then into axios,
‫we can simply just pass the URL,
‫when all we want to do is a simple GET request.
‫Okay?
‫So up until this point
‫we have always specified the method,
‫and the URL and the data,
‫but now we're only doing a GET request,
‫and so that's then much simpler.
‫Let's just grab the URL here,
‫so that we don't lose more time.
‫Then here it's api/v1/bookings.
‫Then check out session.
‫And then the tour id.
‫So that's this one here,
‫which is gonna get passed into dysfunction,
‫okay?
‫And let's actually take a look
‫at this session object in our console,
‫just to see if everything works,
‫okay?
‫So now in our index.js
‫we will basically connect the green button with dysfunction
‫that we just created inside of stripe.js.
‫So import.
‫Book tour from stripe.
‫Then as always let's select our element from the web page.
‫So book button is = to document. get element by ID,
‫and the ID remember is,
‫book tour I believe.
‫So yeah,
‫so that's the ID that we just added before book ID.
‫And so now we can add that event handler to it.
‫So if there is a book button,
‫then bookBtn.addeventlistener,
‫waiting for a click
‫then we need the event as well,
‫and now we need to get that tour ID from that button,
‫So that's tourid =,
‫and now when I streak here which is e.target,
‫and maybe you're familiar with that,
‫so event.target is basically the element which was clicked,
‫so the one that triggered this event listener here
‫to be fired, alright?
‫And so that will be of course this button.
‫Then in there we have tour ID,
‫and so in JavaScript,
‫that will then actually be called tour,
‫so like this let me just write it out.
‫So tour ID,
‫so whenever there is a -,
‫it will automatically get converted
‫to this CamelCase notation.
‫Okay?
‫So e.target.dataset.tourid.
‫But now since this name is exactly the same as this one,
‫we can simply use the structuring on that.
‫So once more using this nice trick.
‫And then we call book tour with that tour ID.
‫And another nice thing that we can do here,
‫is to change the text of the button
‫to something like processing,
‫and so let's do again e.target.
‫So again the element that was clicked,
‫so that's the button.textcontent
‫which we used before up hear,
‫so to change the text in an element,
‫and let's change that to processing,
‫okay?
‫And so with this
‫I think we have everything correctly connected.
‫So we click on that button,
‫then we change the text on that button,
‫then we get the tour ID
‫from the data attribute that's on the button,
‫and call book tour with that ID,
‫okay?
‫And so that ID will then get passed on to this URL,
‫which in turn should return a checkout session,
‫okay?
‫And then here we gonna take a look at that,
‫just like this.
‫Now at this point we will not create
‫the checkout form just yet,
‫so we gonna leave that for the last step of this video.
‫But for now I want to take a look at this,
‫let's just see if parcel
‫is still running here in the background,
‫so bundling all our scripts together,
‫and it looks like it is,
‫and so let's not actually test this out.
‫So we are logged in,
‫let's now try to Park Camper.
‫Down here, click this button.
‫And it seems like we don't get any error,
‫so that's good,
‫now let's take a look at our console,
‫and we have an object,
‫and so that is the result of this axios call,
‫so axios always creates an object like this,
‫where in there is an object called data,
‫which is the actual response.
‫And so here you see that we indeed have our session.
‫So you see we have the customer email,
‫we have the current tour ID,
‫we have now let's see if we have,
‫(mumbles)
‫So here we have some data about the tour.
‫And so now everything looks correct here.
‫Alright?
‫So let's close that,
‫and now as the last step,
‫let's then actually create basically the checkout form,
‫and charge the credit card.
‫Alright?
‫And actually let's also wrap all of this here
‫into a try catch block.
‫Because of course we have some asynchronous calls here,
‫and both have one more in a second,
‫and so it's a good practice.
‫To have a try catch block.
‫Alright?
‫But let's not waste a lot of time with these errors.
‫But I'm still going to show actually an alert
‫in case there is an error,
‫so for example with this API call,
‫okay?
‫So that the user basically can see
‫that something went wrong.
‫So let's simply grab this alerts import.
‫Alright?
‫And then say Show alert,
‫specifying that it's an error,
‫and then just the error itself as the message basically.
‫Alright?
‫Anyway in order to now do this last step,
‫it's actually very, very simple,
‫all we have to do is to await.
‫stripe.redirectTocheck out,
‫let me see if I got this wrong,
‫and let me see if I got that right,
‫So redirect to check out.
‫Alright?
‫And then options but only one option,
‫which is the session ID,
‫and so that's going to be coming from session,
‫and remember how the session was inside of data,
‫so there was a data object created in there by axios,
‫remember and so that is then all response itself.
‫And so in there we have session.id.
‫And that's it,
‫okay?
‫And so now comes the greatest part of all,
‫which is to actually check out if this works.
‫So we are still logged in,
‫let's just one more time we load this.
‫Click a button and now wait for it.
‫And indeed we get to our checkout page,
‫and also we get this nice image here,
‫we get all Nature's logo here,
‫we get here all icon,
‫so all the stuff that we specified before,
‫we have the price that we also specified
‫in our checkout session,
‫and really all the other details.
‫So the name, the summary,
‫and of course the image.
‫That's really amazing, right?
‫Then here another great thing that I mentioned before,
‫is that the email address
‫is already automatically prefilled,
‫so that's another really nice feature.
‫And so now here all we need to do
‫is to put in this credit card information,
‫and so we stripe when we're testing the credit card number
‫is just four two four two four two four two ,
‫and so on until we're done, okay?
‫Then here any month and any year works,
‫So let's just put two two two.
‫So anything in the future, alright?
‫So if you're watching this course after February 2022,
‫then this date is not gonna work,
‫so then just put something later,
‫okay?
‫Until any number works as well,
‫here any name works as well,
‫let just put Laura,
‫the country of course also doesn't really matter,
‫people automatically pre-fill based on your IP location,
‫so I'm in Portugal,
‫and so that's what I get.
‫And now you see this nice green button here,
‫and it has this nice effect,
‫and so now when we click it,
‫it's processing and we're done.
‫Great, then this is actually the success URL
‫that we also specified in our checkout session, right?
‫So we defined that,
‫that in the event of a success,
‫we move back to this home URL.
‫And we gonna change that here a bit later,
‫but for now this is really what we wanted,
‫and so it worked perfectly fine.
‫Well at least I hope so,
‫so let's take a look at all payments now.
‫And indeed,
‫this is the one that we just made.
‫So we successfully received this payment
‫right in our account now.
‫So you see the email address the name,
‫and indeed the park Camper Tour that we just purchased.
‫Great, that's really awesome.
‫So down here you can then see the fees that stripe takes,
‫so of course they also need to make money,
‫and so therefore they take a cut,
‫which I think is like 2.9% or something like that,
‫But of course all that stuff you can check out
‫on their website.
‫Then you also got the payment method here,
‫so the data that we just put in,
‫and you get some nice data on the session,
‫and probably she should also show up here in your customers.
‫And yeah, indeed here she is,
‫And so yeah,
‫I think that is pretty successful now.
‫Oh and another thing that I forgot to mention
‫is that your users will actually also
‫automatically get an email.
‫So I think that should be the default
‫here in email receipts,
‫so go to your settings email receipts,
‫and then here you have email customers about
‫successful payments.
‫And so that's also a really nice feature,
‫meaning that we do not have to manually send out emails
‫whenever a user successfully purchased a tour, alright?
‫So one more thing that stripe takes away from us,
‫Fantastic, so let's now just take a quick minute to recap
‫the entire process that we just went through.
‫So we started by creating this checkout session,
‫which needs as an input the tour ID,
‫so that we can then store a bunch of details about the tour
‫in that session.
‫So stuff about the tour name,
‫the summary also the price images.
‫So all that stuff that we want to show up
‫on the checkout page,
‫but also in our dashboard.
‫Then we also include the email so that the user doesn't need
‫to fill it out in the checkout,
‫and then a bunch of other data.
‫So remember this client reference ID,
‫which will make a lot more sense
‫once we actually get to use it.
‫So we create this session
‫whenever someone hits this check out session route, alright?
‫And so that's exactly what we then do on our front end,
‫right here in stripe.js.
‫So we get our session here,
‫and then from there we create a checkout,
‫and charge the credit card using
‫stripe.redirectTocheckout,
‫and the stripe object here
‫is simply using the stripe library
‫with our public key, okay?
‫Now where does this tour ID come from?
‫Well, it is stored here right on the button
‫where the user clicks to book a new tour.
‫That ID is then read right here in index.js,
‫whenever someone hits the booking button, Okay?
‫So we store that into tour ID,
‫and pass it into book tour,
‫which again is this function here,
‫which takes care of really processing the payments
‫on the front end.
‫And so the result of all this
‫is what we just saw before
‫where the user really get charged the credit card,
‫and purchased the tour,
‫so perfect.
‫Now what's missing here
‫is that actually whenever there is a new booking,
‫we want to create a new booking document in our database.
‫So just as we discussed way back
‫when we talked about all data model
‫in this application, right?
‫And so to that end,
‫we're gonna create the bookings model
‫right in the next video ,
‫sort it after that,
‫we can then create new tours
‫whenever there is a successful purchase.