All language subtitles for 015 Processing Payments on the Front-End_Downloadly.ir_en

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.