‫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.