All language subtitles for 013 Credit Card Payments with Stripe_Downloadly.ir_en

In this last part of the section,

we're now gonna accept credit card payments

in our application using Stripe

in order to allow our users to actually buy tours.

And so, let's open up a new tab here

and then on there open stripe.com.

So Stripe is the best and most popular

and also easiest to use software platform

to integrate payments into any website.

And a lot more about how it actually works a bit later,

but for now let's start by creating our free account.

So click here on free account

and then open up your own free account.

And once you are successfully signed in,

you should see a dashboard that looks something like this.

So when you open up a brand new account,

you will initially always be in test mode.

So that's what you can see down here with this test data.

Now, as soon as you really want to start

accepting real payments involving real money

from real customers, you will then have to activate

your Stripe account.

And for that, you will then have to provide Stripe

with a bunch of data about your business.

But of course in this project,

we're not gonna do that, so we will always just work

in this kind of test development mode, okay?

But otherwise, you just click here on start

or activate your account up here.

Now this dashboard is really easy and super intuitive

to use in my opinion.

So here you can see your payments,

which again is very easy,

and remember that this is all test data.

So all of these amounts here are, of course,

just fake amounts.

But anyway, you can see your customer here,

you can see the amount.

And when you open them up, you get even more information,

like the payment method here, so the credit card number.

And by the way, we actually never do get access

to the real credit card number of the customer.

So we will always just see these last four digits,

but never the real credit card number, okay?

Then you also get the overview

about what was actually purchased.

So, for example, The Snow Adventurer Tour.

And all of this here was, of course,

from when I was first building

the Natours application, okay?

So all of these are just test purchases.

Then we can also see our entire balance,

so basically all the money that we received.

And again, all of this is just test data.

Then we have our customers with a nice list of all of them.

And, yeah, all of this works really fine.

Now before we can get started,

we actually need to define a couple of settings

about our account.

So in your new account, you should see something like

"Unnamed Account", or something like that, here.

And so, you should also have, like a pen icon or something

where you can then create a name for the account.

And so please call that "Natours" or something else.

And if you have more businesses, then you can add

one account for each of these businesses, okay?

Or if you don't have the pencil icon here,

we can also go to the settings,

and then account information.

And so here is where you should put in the name

of this kind of business.

We can also define a couple of other settings,

so let's define the branding here,

which will make the Stripe Checkout pages

match our brand, basically.

So let's add our images.

So public, image, and then for the icon,

let's use this one.

And we can also upload a logo,

and for that, let's use this one.

Oh, and now we need our password in order to continue.

And now let's also change our color here.

So quickly open up the CSS file in public

and then find our typical green,

which is this one here.

So that looks a bit better.

Let's now save it here

and so with that, we're good to go.

Next up, let's take a look at our API keys.

So, click here on API keys

and if the website looks a bit different

by the time you're watching this video,

then maybe the keys are here at developers.

So here you also have something called API keys, okay?

Anyway, there is one publishable key and one secret key.

And so this one is basically a public key

that we can use on the front-end,

and a secret key is the one that is needed on the back-end.

And so more about that

once we actually start implementing it.

And finally, I also wanted to

take a quick look together with you at the documentation.

And so that's up here,

and actually Stripe is known

for its excellent documentation.

It's really easy to find what you're looking for

in this documentation.

But of course, when you're only getting started,

then it's very hard to even know

what you're looking for, right?

And so that's why we're implementing

this payment feature together here, right?

So we're gonna use the payment features of Stripe

and they have a couple of different options.

Now on the web, we can use Stripe Checkout

which is basically using a preformative Checkout page.

And so this is the one that we're gonna use,

or you can also use Stripe elements

when you really want to

build your own Checkout experience, okay?

But we will just use this Checkout

which is actually brand new

and so it's really future-proof at this point.

So these are the two options for the web,

but you can also Stripe on iOS, Android,

and really any other platform.

Then on Checkout, we can actually use it

on only the client or together with the server, okay?

So down here there is some comparison.

And so when we only use it on the client side,

then we don't even need a server at all.

But this way of using Stripe is only, really,

for really, really small stores,

so where you only have a handful of products

that never change their price

and where you actually have to

add all these products manually to your Stripe dashboards.

And so we want something a bit more complex

and so for that, we use the server integration, okay?

And so, of course we still need

to do something on the client side,

but most of the code will actually be on the server side.

Okay, so you see that there really is a lot of stuff

to do with Stripe, and we can even do a lot more.

So we could have billing where we have subscriptions

where we have invoices and all that good stuff.

So really, you could build a huge business

on top of Stripe and accept subscriptions,

save customers to databases,

and all that integrated into Stripe.

But again, what we're gonna do here

is to simply use the Checkout,

but the more complete version of it

by using the server Checkout.

Alright, but now before we actually start

to integrate the Stripe Checkout product

into our application,

I just wanted to quickly layout the entire workflow

that we're gonna implement over the next couple of videos.

So it all starts on the back-end

where we're gonna implement a route to create

a so-called Stripe Checkout Session.

And this Session is gonna contain a bunch of data

about the object that can be purchased.

And in our example, that's the tour.

So The Session will contain the tour price,

the tour name, a product image, and also some other details

like the client e-mail.

So we will see that actually in the next video.

Then, on the front-end, we're gonna create a function

to request the Checkout Session from the server

once the user clicks the buy button.

So once we hit the end point

that we created on the back-end,

that will then create a Session and send it back

to the client.

Then, based on that Session,

Stripe will automatically create a Checkout page for us

where the user can then input all the details

like credit card number, expiration date, and all that.

Then, again, using The Session,

we will finally charge the credit card.

And for that, we're gonna need the public key,

so the one that we just saw before.

So the secret key we will need on the server

as you'll see up there in the first step,

and the public key is gonna be used on the front-end.

And what's really important to note here

is that it's really Stripe,

which will together with The Session,

charge the credit card, and so therefore,

the credit card details never even reach our server,

which makes our lives as developers a lot easier

because then we don't have to deal with

all the security stuff that's related with

managing and storing credit cards, okay?

So Stripe takes all that away from us,

we basically just use their API like this.

Anyway, once the credit card has successfully been charged,

we can then use something called Stripe Webhooks

on our back-end, in order to create new bookings.

Now, this part of the workflow

will only work for deployed websites,

so websites that are already running on a server.

And so this part of the workflow,

we're only gonna be able to implement

by the end of the next section, okay?

But for now, we will actually find

a temporary work-around to this,

which is not really secure,

but it's gonna work just fine for now, okay?

So keep this diagram in mind and also this concept

that we actually use The Session to charge a credit card

and we don't really do that directly.

So, see you in the next video.