1 00:00:01,130 --> 00:00:03,770 ‫In this last part of the section, 2 00:00:03,770 --> 00:00:06,160 ‫we're now gonna accept credit card payments 3 00:00:06,160 --> 00:00:08,770 ‫in our application using Stripe 4 00:00:08,770 --> 00:00:12,233 ‫in order to allow our users to actually buy tours. 5 00:00:14,080 --> 00:00:16,320 ‫And so, let's open up a new tab here 6 00:00:18,160 --> 00:00:21,730 ‫and then on there open stripe.com. 7 00:00:21,730 --> 00:00:25,080 ‫So Stripe is the best and most popular 8 00:00:25,080 --> 00:00:27,910 ‫and also easiest to use software platform 9 00:00:27,910 --> 00:00:30,810 ‫to integrate payments into any website. 10 00:00:30,810 --> 00:00:34,210 ‫And a lot more about how it actually works a bit later, 11 00:00:34,210 --> 00:00:38,040 ‫but for now let's start by creating our free account. 12 00:00:38,040 --> 00:00:40,540 ‫So click here on free account 13 00:00:40,540 --> 00:00:43,303 ‫and then open up your own free account. 14 00:00:44,510 --> 00:00:46,810 ‫And once you are successfully signed in, 15 00:00:46,810 --> 00:00:49,990 ‫you should see a dashboard that looks something like this. 16 00:00:49,990 --> 00:00:52,210 ‫So when you open up a brand new account, 17 00:00:52,210 --> 00:00:55,150 ‫you will initially always be in test mode. 18 00:00:55,150 --> 00:00:59,250 ‫So that's what you can see down here with this test data. 19 00:00:59,250 --> 00:01:01,380 ‫Now, as soon as you really want to start 20 00:01:01,380 --> 00:01:04,250 ‫accepting real payments involving real money 21 00:01:04,250 --> 00:01:07,530 ‫from real customers, you will then have to activate 22 00:01:07,530 --> 00:01:08,960 ‫your Stripe account. 23 00:01:08,960 --> 00:01:11,350 ‫And for that, you will then have to provide Stripe 24 00:01:11,350 --> 00:01:14,220 ‫with a bunch of data about your business. 25 00:01:14,220 --> 00:01:15,580 ‫But of course in this project, 26 00:01:15,580 --> 00:01:18,360 ‫we're not gonna do that, so we will always just work 27 00:01:18,360 --> 00:01:21,680 ‫in this kind of test development mode, okay? 28 00:01:21,680 --> 00:01:24,010 ‫But otherwise, you just click here on start 29 00:01:24,010 --> 00:01:26,940 ‫or activate your account up here. 30 00:01:26,940 --> 00:01:29,980 ‫Now this dashboard is really easy and super intuitive 31 00:01:29,980 --> 00:01:31,890 ‫to use in my opinion. 32 00:01:31,890 --> 00:01:35,660 ‫So here you can see your payments, 33 00:01:35,660 --> 00:01:37,360 ‫which again is very easy, 34 00:01:37,360 --> 00:01:40,280 ‫and remember that this is all test data. 35 00:01:40,280 --> 00:01:42,270 ‫So all of these amounts here are, of course, 36 00:01:42,270 --> 00:01:44,110 ‫just fake amounts. 37 00:01:44,110 --> 00:01:46,460 ‫But anyway, you can see your customer here, 38 00:01:46,460 --> 00:01:48,463 ‫you can see the amount. 39 00:01:49,490 --> 00:01:52,440 ‫And when you open them up, you get even more information, 40 00:01:52,440 --> 00:01:55,670 ‫like the payment method here, so the credit card number. 41 00:01:55,670 --> 00:01:58,640 ‫And by the way, we actually never do get access 42 00:01:58,640 --> 00:02:01,420 ‫to the real credit card number of the customer. 43 00:02:01,420 --> 00:02:04,230 ‫So we will always just see these last four digits, 44 00:02:04,230 --> 00:02:07,630 ‫but never the real credit card number, okay? 45 00:02:07,630 --> 00:02:09,620 ‫Then you also get the overview 46 00:02:09,620 --> 00:02:12,110 ‫about what was actually purchased. 47 00:02:12,110 --> 00:02:14,630 ‫So, for example, The Snow Adventurer Tour. 48 00:02:14,630 --> 00:02:16,360 ‫And all of this here was, of course, 49 00:02:16,360 --> 00:02:18,410 ‫from when I was first building 50 00:02:18,410 --> 00:02:21,133 ‫the Natours application, okay? 51 00:02:22,000 --> 00:02:24,570 ‫So all of these are just test purchases. 52 00:02:24,570 --> 00:02:27,420 ‫Then we can also see our entire balance, 53 00:02:27,420 --> 00:02:30,150 ‫so basically all the money that we received. 54 00:02:30,150 --> 00:02:33,610 ‫And again, all of this is just test data. 55 00:02:33,610 --> 00:02:37,060 ‫Then we have our customers with a nice list of all of them. 56 00:02:37,060 --> 00:02:39,653 ‫And, yeah, all of this works really fine. 57 00:02:40,650 --> 00:02:42,500 ‫Now before we can get started, 58 00:02:42,500 --> 00:02:44,830 ‫we actually need to define a couple of settings 59 00:02:44,830 --> 00:02:46,400 ‫about our account. 60 00:02:46,400 --> 00:02:48,867 ‫So in your new account, you should see something like 61 00:02:48,867 --> 00:02:52,120 ‫"Unnamed Account", or something like that, here. 62 00:02:52,120 --> 00:02:55,740 ‫And so, you should also have, like a pen icon or something 63 00:02:55,740 --> 00:02:59,010 ‫where you can then create a name for the account. 64 00:02:59,010 --> 00:03:02,160 ‫And so please call that "Natours" or something else. 65 00:03:02,160 --> 00:03:04,700 ‫And if you have more businesses, then you can add 66 00:03:04,700 --> 00:03:08,690 ‫one account for each of these businesses, okay? 67 00:03:08,690 --> 00:03:11,510 ‫Or if you don't have the pencil icon here, 68 00:03:11,510 --> 00:03:13,220 ‫we can also go to the settings, 69 00:03:13,220 --> 00:03:15,570 ‫and then account information. 70 00:03:15,570 --> 00:03:18,030 ‫And so here is where you should put in the name 71 00:03:18,030 --> 00:03:20,610 ‫of this kind of business. 72 00:03:20,610 --> 00:03:23,150 ‫We can also define a couple of other settings, 73 00:03:23,150 --> 00:03:25,350 ‫so let's define the branding here, 74 00:03:25,350 --> 00:03:27,390 ‫which will make the Stripe Checkout pages 75 00:03:27,390 --> 00:03:29,233 ‫match our brand, basically. 76 00:03:30,470 --> 00:03:32,383 ‫So let's add our images. 77 00:03:35,880 --> 00:03:39,850 ‫So public, image, and then for the icon, 78 00:03:39,850 --> 00:03:41,163 ‫let's use this one. 79 00:03:43,830 --> 00:03:46,140 ‫And we can also upload a logo, 80 00:03:46,140 --> 00:03:49,033 ‫and for that, let's use this one. 81 00:03:51,310 --> 00:03:53,913 ‫Oh, and now we need our password in order to continue. 82 00:03:56,220 --> 00:03:59,033 ‫And now let's also change our color here. 83 00:04:00,180 --> 00:04:03,640 ‫So quickly open up the CSS file in public 84 00:04:04,510 --> 00:04:07,150 ‫and then find our typical green, 85 00:04:07,150 --> 00:04:08,663 ‫which is this one here. 86 00:04:12,000 --> 00:04:13,623 ‫So that looks a bit better. 87 00:04:15,570 --> 00:04:16,950 ‫Let's now save it here 88 00:04:19,200 --> 00:04:22,150 ‫and so with that, we're good to go. 89 00:04:22,150 --> 00:04:25,130 ‫Next up, let's take a look at our API keys. 90 00:04:25,130 --> 00:04:27,660 ‫So, click here on API keys 91 00:04:27,660 --> 00:04:29,550 ‫and if the website looks a bit different 92 00:04:29,550 --> 00:04:31,690 ‫by the time you're watching this video, 93 00:04:31,690 --> 00:04:35,113 ‫then maybe the keys are here at developers. 94 00:04:36,180 --> 00:04:41,180 ‫So here you also have something called API keys, okay? 95 00:04:41,840 --> 00:04:45,860 ‫Anyway, there is one publishable key and one secret key. 96 00:04:45,860 --> 00:04:48,270 ‫And so this one is basically a public key 97 00:04:48,270 --> 00:04:50,820 ‫that we can use on the front-end, 98 00:04:50,820 --> 00:04:54,430 ‫and a secret key is the one that is needed on the back-end. 99 00:04:54,430 --> 00:04:56,020 ‫And so more about that 100 00:04:56,020 --> 00:04:58,420 ‫once we actually start implementing it. 101 00:04:58,420 --> 00:05:00,310 ‫And finally, I also wanted to 102 00:05:00,310 --> 00:05:04,120 ‫take a quick look together with you at the documentation. 103 00:05:04,120 --> 00:05:05,940 ‫And so that's up here, 104 00:05:05,940 --> 00:05:07,390 ‫and actually Stripe is known 105 00:05:07,390 --> 00:05:09,470 ‫for its excellent documentation. 106 00:05:09,470 --> 00:05:11,700 ‫It's really easy to find what you're looking for 107 00:05:11,700 --> 00:05:13,170 ‫in this documentation. 108 00:05:13,170 --> 00:05:15,470 ‫But of course, when you're only getting started, 109 00:05:15,470 --> 00:05:17,740 ‫then it's very hard to even know 110 00:05:17,740 --> 00:05:19,830 ‫what you're looking for, right? 111 00:05:19,830 --> 00:05:21,550 ‫And so that's why we're implementing 112 00:05:21,550 --> 00:05:25,270 ‫this payment feature together here, right? 113 00:05:25,270 --> 00:05:28,530 ‫So we're gonna use the payment features of Stripe 114 00:05:28,530 --> 00:05:31,000 ‫and they have a couple of different options. 115 00:05:31,000 --> 00:05:33,630 ‫Now on the web, we can use Stripe Checkout 116 00:05:33,630 --> 00:05:36,820 ‫which is basically using a preformative Checkout page. 117 00:05:36,820 --> 00:05:39,170 ‫And so this is the one that we're gonna use, 118 00:05:39,170 --> 00:05:41,800 ‫or you can also use Stripe elements 119 00:05:41,800 --> 00:05:42,633 ‫when you really want to 120 00:05:42,633 --> 00:05:46,400 ‫build your own Checkout experience, okay? 121 00:05:46,400 --> 00:05:48,640 ‫But we will just use this Checkout 122 00:05:48,640 --> 00:05:50,110 ‫which is actually brand new 123 00:05:50,110 --> 00:05:52,633 ‫and so it's really future-proof at this point. 124 00:05:53,990 --> 00:05:56,060 ‫So these are the two options for the web, 125 00:05:56,060 --> 00:05:59,850 ‫but you can also Stripe on iOS, Android, 126 00:05:59,850 --> 00:06:01,563 ‫and really any other platform. 127 00:06:02,700 --> 00:06:05,840 ‫Then on Checkout, we can actually use it 128 00:06:05,840 --> 00:06:10,223 ‫on only the client or together with the server, okay? 129 00:06:11,070 --> 00:06:13,593 ‫So down here there is some comparison. 130 00:06:14,610 --> 00:06:17,600 ‫And so when we only use it on the client side, 131 00:06:17,600 --> 00:06:20,000 ‫then we don't even need a server at all. 132 00:06:20,000 --> 00:06:22,890 ‫But this way of using Stripe is only, really, 133 00:06:22,890 --> 00:06:25,060 ‫for really, really small stores, 134 00:06:25,060 --> 00:06:27,600 ‫so where you only have a handful of products 135 00:06:27,600 --> 00:06:29,420 ‫that never change their price 136 00:06:29,420 --> 00:06:31,040 ‫and where you actually have to 137 00:06:31,040 --> 00:06:34,730 ‫add all these products manually to your Stripe dashboards. 138 00:06:34,730 --> 00:06:37,250 ‫And so we want something a bit more complex 139 00:06:37,250 --> 00:06:41,460 ‫and so for that, we use the server integration, okay? 140 00:06:41,460 --> 00:06:43,160 ‫And so, of course we still need 141 00:06:43,160 --> 00:06:45,010 ‫to do something on the client side, 142 00:06:45,010 --> 00:06:48,720 ‫but most of the code will actually be on the server side. 143 00:06:48,720 --> 00:06:52,220 ‫Okay, so you see that there really is a lot of stuff 144 00:06:52,220 --> 00:06:56,930 ‫to do with Stripe, and we can even do a lot more. 145 00:06:56,930 --> 00:07:01,210 ‫So we could have billing where we have subscriptions 146 00:07:01,210 --> 00:07:04,050 ‫where we have invoices and all that good stuff. 147 00:07:04,050 --> 00:07:06,040 ‫So really, you could build a huge business 148 00:07:06,040 --> 00:07:09,330 ‫on top of Stripe and accept subscriptions, 149 00:07:09,330 --> 00:07:11,350 ‫save customers to databases, 150 00:07:11,350 --> 00:07:13,543 ‫and all that integrated into Stripe. 151 00:07:14,940 --> 00:07:16,850 ‫But again, what we're gonna do here 152 00:07:16,850 --> 00:07:19,040 ‫is to simply use the Checkout, 153 00:07:19,040 --> 00:07:21,090 ‫but the more complete version of it 154 00:07:21,090 --> 00:07:22,963 ‫by using the server Checkout. 155 00:07:24,640 --> 00:07:27,130 ‫Alright, but now before we actually start 156 00:07:27,130 --> 00:07:29,690 ‫to integrate the Stripe Checkout product 157 00:07:29,690 --> 00:07:31,210 ‫into our application, 158 00:07:31,210 --> 00:07:34,353 ‫I just wanted to quickly layout the entire workflow 159 00:07:34,353 --> 00:07:37,920 ‫that we're gonna implement over the next couple of videos. 160 00:07:37,920 --> 00:07:40,200 ‫So it all starts on the back-end 161 00:07:40,200 --> 00:07:42,850 ‫where we're gonna implement a route to create 162 00:07:42,850 --> 00:07:45,600 ‫a so-called Stripe Checkout Session. 163 00:07:45,600 --> 00:07:48,170 ‫And this Session is gonna contain a bunch of data 164 00:07:48,170 --> 00:07:50,970 ‫about the object that can be purchased. 165 00:07:50,970 --> 00:07:53,070 ‫And in our example, that's the tour. 166 00:07:53,070 --> 00:07:55,480 ‫So The Session will contain the tour price, 167 00:07:55,480 --> 00:07:59,640 ‫the tour name, a product image, and also some other details 168 00:07:59,640 --> 00:08:01,450 ‫like the client e-mail. 169 00:08:01,450 --> 00:08:04,530 ‫So we will see that actually in the next video. 170 00:08:04,530 --> 00:08:07,370 ‫Then, on the front-end, we're gonna create a function 171 00:08:07,370 --> 00:08:10,580 ‫to request the Checkout Session from the server 172 00:08:10,580 --> 00:08:13,120 ‫once the user clicks the buy button. 173 00:08:13,120 --> 00:08:14,550 ‫So once we hit the end point 174 00:08:14,550 --> 00:08:16,350 ‫that we created on the back-end, 175 00:08:16,350 --> 00:08:19,360 ‫that will then create a Session and send it back 176 00:08:19,360 --> 00:08:20,720 ‫to the client. 177 00:08:20,720 --> 00:08:22,590 ‫Then, based on that Session, 178 00:08:22,590 --> 00:08:26,010 ‫Stripe will automatically create a Checkout page for us 179 00:08:26,010 --> 00:08:28,640 ‫where the user can then input all the details 180 00:08:28,640 --> 00:08:32,670 ‫like credit card number, expiration date, and all that. 181 00:08:32,670 --> 00:08:34,760 ‫Then, again, using The Session, 182 00:08:34,760 --> 00:08:37,360 ‫we will finally charge the credit card. 183 00:08:37,360 --> 00:08:39,700 ‫And for that, we're gonna need the public key, 184 00:08:39,700 --> 00:08:41,830 ‫so the one that we just saw before. 185 00:08:41,830 --> 00:08:44,270 ‫So the secret key we will need on the server 186 00:08:44,270 --> 00:08:46,330 ‫as you'll see up there in the first step, 187 00:08:46,330 --> 00:08:49,820 ‫and the public key is gonna be used on the front-end. 188 00:08:49,820 --> 00:08:51,730 ‫And what's really important to note here 189 00:08:51,730 --> 00:08:53,180 ‫is that it's really Stripe, 190 00:08:53,180 --> 00:08:54,930 ‫which will together with The Session, 191 00:08:54,930 --> 00:08:57,480 ‫charge the credit card, and so therefore, 192 00:08:57,480 --> 00:09:00,720 ‫the credit card details never even reach our server, 193 00:09:00,720 --> 00:09:03,800 ‫which makes our lives as developers a lot easier 194 00:09:03,800 --> 00:09:05,870 ‫because then we don't have to deal with 195 00:09:05,870 --> 00:09:08,500 ‫all the security stuff that's related with 196 00:09:08,500 --> 00:09:12,000 ‫managing and storing credit cards, okay? 197 00:09:12,000 --> 00:09:14,450 ‫So Stripe takes all that away from us, 198 00:09:14,450 --> 00:09:18,030 ‫we basically just use their API like this. 199 00:09:18,030 --> 00:09:21,840 ‫Anyway, once the credit card has successfully been charged, 200 00:09:21,840 --> 00:09:24,460 ‫we can then use something called Stripe Webhooks 201 00:09:24,460 --> 00:09:28,210 ‫on our back-end, in order to create new bookings. 202 00:09:28,210 --> 00:09:30,090 ‫Now, this part of the workflow 203 00:09:30,090 --> 00:09:32,710 ‫will only work for deployed websites, 204 00:09:32,710 --> 00:09:35,900 ‫so websites that are already running on a server. 205 00:09:35,900 --> 00:09:37,770 ‫And so this part of the workflow, 206 00:09:37,770 --> 00:09:39,690 ‫we're only gonna be able to implement 207 00:09:39,690 --> 00:09:42,830 ‫by the end of the next section, okay? 208 00:09:42,830 --> 00:09:44,310 ‫But for now, we will actually find 209 00:09:44,310 --> 00:09:46,270 ‫a temporary work-around to this, 210 00:09:46,270 --> 00:09:47,770 ‫which is not really secure, 211 00:09:47,770 --> 00:09:50,870 ‫but it's gonna work just fine for now, okay? 212 00:09:50,870 --> 00:09:54,060 ‫So keep this diagram in mind and also this concept 213 00:09:54,060 --> 00:09:57,410 ‫that we actually use The Session to charge a credit card 214 00:09:57,410 --> 00:09:59,940 ‫and we don't really do that directly. 215 00:09:59,940 --> 00:10:01,803 ‫So, see you in the next video.