1
00:00:01,010 --> 00:00:02,600
‫In this lecture we gonna learn

2
00:00:02,600 --> 00:00:04,910
‫how to process payments with stripe,

3
00:00:04,910 --> 00:00:08,203
‫on the front-end whenever a user clicks a button.

4
00:00:09,840 --> 00:00:12,860
‫And to start let's actually configure it that button

5
00:00:12,860 --> 00:00:15,350
‫so that it only appears whenever a user

6
00:00:15,350 --> 00:00:16,563
‫is actually logged in.

7
00:00:17,920 --> 00:00:19,763
‫So here on the tour detail page,

8
00:00:21,260 --> 00:00:23,540
‫right now we have a user logged in,

9
00:00:23,540 --> 00:00:27,250
‫and so that button says book tour now,

10
00:00:27,250 --> 00:00:29,180
‫but it should only be like this

11
00:00:29,180 --> 00:00:31,450
‫when there is a currently logged in user,

12
00:00:31,450 --> 00:00:32,430
‫and otherwise,

13
00:00:32,430 --> 00:00:36,129
‫it would then redirect us to the login page.

14
00:00:36,129 --> 00:00:37,240
‫Okay?

15
00:00:37,240 --> 00:00:40,463
‫So let's implement that in the tour template.

16
00:00:43,210 --> 00:00:45,570
‫And so that's actually right here,

17
00:00:45,570 --> 00:00:47,313
‫so that is this button.

18
00:00:48,300 --> 00:00:49,380
‫Alright?

19
00:00:49,380 --> 00:00:52,300
‫Now if there is currently a user logged in,

20
00:00:52,300 --> 00:00:55,860
‫then that means that we have access to the user variable,

21
00:00:55,860 --> 00:01:00,860
‫and so we can do if user well than this.

22
00:01:02,440 --> 00:01:05,390
‫And if there is no user, so else,

23
00:01:05,390 --> 00:01:08,260
‫well then we simply want to display a button,

24
00:01:08,260 --> 00:01:10,143
‫which brings us to the login page.

25
00:01:13,490 --> 00:01:16,540
‫And so ,

26
00:01:16,540 --> 00:01:20,610
‫login to book tour,

27
00:01:20,610 --> 00:01:23,060
‫and this one should actually be a link,

28
00:01:23,060 --> 00:01:26,583
‫and so we need an A element for anchor.

29
00:01:27,801 --> 00:01:31,970
‫Let's then also specify the hf property,

30
00:01:31,970 --> 00:01:34,873
‫which again will point us to the login page,

31
00:01:34,873 --> 00:01:35,990
‫alright?

32
00:01:35,990 --> 00:01:39,173
‫Now here we also need to add an ID,

33
00:01:41,710 --> 00:01:46,200
‫book tour so that we can then select it in our JavaScript,

34
00:01:46,200 --> 00:01:47,860
‫and also something very important,

35
00:01:47,860 --> 00:01:50,700
‫is that we should put the current tour ID

36
00:01:50,700 --> 00:01:53,020
‫right here in this element, Okay?

37
00:01:53,020 --> 00:01:55,200
‫Now why is that so important?

38
00:01:55,200 --> 00:01:58,913
‫Well remember how the API endpoint that we just created.

39
00:01:59,780 --> 00:02:02,840
‫So this one here needs the tour ID,

40
00:02:02,840 --> 00:02:06,970
‫and so that tour ID needs to come from somewhere basically,

41
00:02:06,970 --> 00:02:09,470
‫and so right now we don't have that information

42
00:02:09,470 --> 00:02:11,410
‫anywhere on this page,

43
00:02:11,410 --> 00:02:14,380
‫and so we will put it here right on this element,

44
00:02:14,380 --> 00:02:17,440
‫so that then or JavaScript file can grab it from here,

45
00:02:17,440 --> 00:02:19,050
‫and send it along with the request

46
00:02:19,050 --> 00:02:22,140
‫to the checkout session route, okay?

47
00:02:22,140 --> 00:02:24,700
‫So just like we did here with a map,

48
00:02:24,700 --> 00:02:27,170
‫we are going to use a data attribute,

49
00:02:27,170 --> 00:02:28,417
‫and so that's data-,

50
00:02:29,548 --> 00:02:31,880
‫and then basically whatever a variable name

51
00:02:31,880 --> 00:02:32,913
‫we want to define.

52
00:02:33,940 --> 00:02:36,753
‫And so that's tour id in this case.

53
00:02:40,810 --> 00:02:44,113
‫So tour.id, alright?

54
00:02:45,380 --> 00:02:47,010
‫So give to the safe,

55
00:02:47,010 --> 00:02:50,210
‫and let's actually try that out now.

56
00:02:50,210 --> 00:02:52,400
‫So reload the page,

57
00:02:52,400 --> 00:02:53,960
‫and first of all let's inspect it

58
00:02:53,960 --> 00:02:56,640
‫to see if the idea is actually there,

59
00:02:56,640 --> 00:02:58,950
‫and indeed here we go.

60
00:02:58,950 --> 00:03:00,793
‫And now if we log out.

61
00:03:04,240 --> 00:03:06,160
‫Then let's see what we have,

62
00:03:06,160 --> 00:03:07,740
‫and indeed now it says,

63
00:03:07,740 --> 00:03:09,183
‫login to book the tour.

64
00:03:10,080 --> 00:03:13,153
‫Great, and let's do that actually.

65
00:03:19,080 --> 00:03:20,490
‫Now Okay?

66
00:03:20,490 --> 00:03:23,130
‫And So now next up let's create a script

67
00:03:23,130 --> 00:03:25,320
‫in which we will actually do the request,

68
00:03:25,320 --> 00:03:27,603
‫and process the payment on the front end.

69
00:03:28,580 --> 00:03:32,690
‫And so just like before that will be in public,

70
00:03:32,690 --> 00:03:34,163
‫and then JavaScript.

71
00:03:35,510 --> 00:03:36,943
‫So one more script here.

72
00:03:38,550 --> 00:03:41,233
‫And I'm gonna call it stripe.js.

73
00:03:44,440 --> 00:03:46,540
‫And now here we actually need access

74
00:03:46,540 --> 00:03:49,650
‫to the stripe library again,

75
00:03:49,650 --> 00:03:52,500
‫but that package that we just installed before,

76
00:03:52,500 --> 00:03:56,293
‫so remember that stripe MPM package that we used here.

77
00:03:57,240 --> 00:04:00,080
‫So this one only works for the back end,

78
00:04:00,080 --> 00:04:01,930
‫and what we need to do on the front end

79
00:04:01,930 --> 00:04:05,720
‫is to actually include a script in the HTML,

80
00:04:05,720 --> 00:04:09,160
‫and since we only need that script here on the tour page,

81
00:04:09,160 --> 00:04:12,643
‫we will do it just like we did with the map box script.

82
00:04:13,740 --> 00:04:14,860
‫So this one,

83
00:04:14,860 --> 00:04:18,170
‫we will put it here in this head block,

84
00:04:18,170 --> 00:04:19,260
‫alright?

85
00:04:19,260 --> 00:04:21,760
‫Now which script do we actually need?

86
00:04:21,760 --> 00:04:25,330
‫Well that we can very simply get from the documentation

87
00:04:25,330 --> 00:04:27,600
‫that we already took a look at before,

88
00:04:27,600 --> 00:04:30,850
‫and I hope you didn't close that one, alright?

89
00:04:30,850 --> 00:04:33,830
‫And so again this one here explains

90
00:04:33,830 --> 00:04:36,040
‫how we use the checkout product

91
00:04:36,040 --> 00:04:37,740
‫both on the client and the server.

92
00:04:38,940 --> 00:04:41,090
‫So here we see that we have two steps,

93
00:04:41,090 --> 00:04:44,120
‫first creating the checkout session on the server,

94
00:04:44,120 --> 00:04:45,630
‫and so this is very similar

95
00:04:45,630 --> 00:04:48,170
‫to what we did before in the last video,

96
00:04:48,170 --> 00:04:52,140
‫and so now we need to also add it to our front end.

97
00:04:52,140 --> 00:04:56,760
‫And so that script that we need is this one, alright?

98
00:04:56,760 --> 00:04:59,513
‫So let's copy that and let's go back.

99
00:05:02,980 --> 00:05:05,143
‫And now we need to adapt this a little bit.

100
00:05:12,940 --> 00:05:14,280
‫Now right?

101
00:05:14,280 --> 00:05:18,790
‫So this was an expose a stripe object to the global scope,

102
00:05:18,790 --> 00:05:21,960
‫and so now in this file we can use that.

103
00:05:21,960 --> 00:05:22,863
‫So we say,

104
00:05:24,760 --> 00:05:26,427
‫const stripe =,

105
00:05:27,510 --> 00:05:29,300
‫and then this is that object

106
00:05:29,300 --> 00:05:31,940
‫that we get from the script that we just included,

107
00:05:31,940 --> 00:05:35,410
‫and then here we need our public key, alright?

108
00:05:35,410 --> 00:05:38,180
‫So we already used our secret key on the backend,

109
00:05:38,180 --> 00:05:41,040
‫now it's time to use our public key.

110
00:05:41,040 --> 00:05:43,620
‫So let's go back to the dashboard,

111
00:05:43,620 --> 00:05:45,910
‫and actually if you're in the documentation,

112
00:05:45,910 --> 00:05:48,530
‫it will already show up here for you,

113
00:05:48,530 --> 00:05:50,290
‫so this is a really nice feature

114
00:05:50,290 --> 00:05:52,310
‫of the stripe documentations.

115
00:05:52,310 --> 00:05:53,467
‫So whenever you're logged in,

116
00:05:53,467 --> 00:05:55,350
‫then this key that you have here

117
00:05:55,350 --> 00:05:57,850
‫is actually your public key.

118
00:05:57,850 --> 00:06:00,220
‫But if you're not on that page,

119
00:06:00,220 --> 00:06:03,078
‫you can of course also get your API key

120
00:06:03,078 --> 00:06:05,510
‫by going to the homepage,

121
00:06:05,510 --> 00:06:07,440
‫or the developers page,

122
00:06:07,440 --> 00:06:09,200
‫let's actually try that one.

123
00:06:09,200 --> 00:06:11,020
‫Then here on API keys,

124
00:06:11,020 --> 00:06:14,450
‫you have your public test key right here.

125
00:06:14,450 --> 00:06:16,210
‫So grab that,

126
00:06:16,210 --> 00:06:18,983
‫and then let's go back and pass it here.

127
00:06:22,080 --> 00:06:23,470
‫And just as before,

128
00:06:23,470 --> 00:06:26,603
‫I want to quickly disable eslint here.

129
00:06:31,220 --> 00:06:32,053
‫Okay?

130
00:06:32,053 --> 00:06:35,503
‫And now let's then finally create a function,

131
00:06:36,860 --> 00:06:39,343
‫that I'm gonna call book tour.

132
00:06:40,670 --> 00:06:41,510
‫Okay?

133
00:06:41,510 --> 00:06:44,763
‫And so this function will take in a tour ID.

134
00:06:46,220 --> 00:06:50,030
‫And so the tour ID is the one that's gonna be coming

135
00:06:50,030 --> 00:06:52,870
‫right here from this user interface.

136
00:06:52,870 --> 00:06:57,160
‫So right from here, okay?

137
00:06:57,160 --> 00:06:58,430
‫So just as before,

138
00:06:58,430 --> 00:07:01,420
‫we gonna get that one from index.js

139
00:07:01,420 --> 00:07:05,560
‫where we will then also call this book Tour,

140
00:07:05,560 --> 00:07:06,393
‫okay?

141
00:07:06,393 --> 00:07:08,960
‫So very similar to what we did before.

142
00:07:08,960 --> 00:07:11,850
‫Anyway, let's now once more specify the steps

143
00:07:11,850 --> 00:07:13,550
‫that we gonna take here.

144
00:07:13,550 --> 00:07:16,150
‫So the first step is to actually get the session

145
00:07:16,150 --> 00:07:17,860
‫from the server,

146
00:07:17,860 --> 00:07:22,580
‫and so that is where now this route here comes in, Okay?

147
00:07:22,580 --> 00:07:25,260
‫So this is the point where we are going to use

148
00:07:25,260 --> 00:07:28,040
‫this endpoint to really get our checkout session

149
00:07:28,040 --> 00:07:29,443
‫on to the client side.

150
00:07:31,550 --> 00:07:32,383
‫Okay?

151
00:07:33,230 --> 00:07:36,573
‫So get checked out session.

152
00:07:39,810 --> 00:07:43,933
‫From endpoint or from API it doesn't really matter.

153
00:07:45,600 --> 00:07:47,410
‫That done as a second step,

154
00:07:47,410 --> 00:07:49,260
‫we will use our stripe object

155
00:07:49,260 --> 00:07:54,260
‫to basically automatically create the checkout form,

156
00:07:57,657 --> 00:08:01,023
‫+ process or let's say + charge,

157
00:08:02,490 --> 00:08:05,110
‫the credit card for us, Okay?

158
00:08:05,110 --> 00:08:06,350
‫And that's actually it,

159
00:08:06,350 --> 00:08:08,020
‫so only two simple steps,

160
00:08:08,020 --> 00:08:11,023
‫and you will see that they are actually pretty simple.

161
00:08:12,200 --> 00:08:16,983
‫So let's store the session into a variable called session.

162
00:08:17,850 --> 00:08:21,500
‫And then we're going to await an HTTP request,

163
00:08:21,500 --> 00:08:24,323
‫which once more we will do with axios.

164
00:08:26,170 --> 00:08:27,130
‫Alright?

165
00:08:27,130 --> 00:08:28,793
‫So I need to grab that here.

166
00:08:29,840 --> 00:08:32,260
‫So import axios,

167
00:08:32,260 --> 00:08:35,810
‫and once more I'm using the ES6 module syntax.

168
00:08:35,810 --> 00:08:36,693
‫Remember that,

169
00:08:38,310 --> 00:08:40,200
‫from axios.

170
00:08:40,200 --> 00:08:43,620
‫So just like we did for example in login,

171
00:08:43,620 --> 00:08:46,033
‫or in update settings, right?

172
00:08:47,440 --> 00:08:50,093
‫Now we also need to mark this function here as async.

173
00:08:52,240 --> 00:08:53,240
‫Okay?

174
00:08:53,240 --> 00:08:54,660
‫And then into axios,

175
00:08:54,660 --> 00:08:57,300
‫we can simply just pass the URL,

176
00:08:57,300 --> 00:09:00,660
‫when all we want to do is a simple GET request.

177
00:09:00,660 --> 00:09:01,493
‫Okay?

178
00:09:01,493 --> 00:09:02,420
‫So up until this point

179
00:09:02,420 --> 00:09:04,510
‫we have always specified the method,

180
00:09:04,510 --> 00:09:06,740
‫and the URL and the data,

181
00:09:06,740 --> 00:09:09,110
‫but now we're only doing a GET request,

182
00:09:09,110 --> 00:09:11,053
‫and so that's then much simpler.

183
00:09:13,220 --> 00:09:15,520
‫Let's just grab the URL here,

184
00:09:15,520 --> 00:09:18,413
‫so that we don't lose more time.

185
00:09:19,840 --> 00:09:23,693
‫Then here it's api/v1/bookings.

186
00:09:26,550 --> 00:09:27,993
‫Then check out session.

187
00:09:30,360 --> 00:09:32,273
‫And then the tour id.

188
00:09:33,690 --> 00:09:35,680
‫So that's this one here,

189
00:09:35,680 --> 00:09:38,203
‫which is gonna get passed into dysfunction,

190
00:09:39,320 --> 00:09:40,153
‫okay?

191
00:09:41,440 --> 00:09:43,170
‫And let's actually take a look

192
00:09:43,170 --> 00:09:45,623
‫at this session object in our console,

193
00:09:46,630 --> 00:09:48,850
‫just to see if everything works,

194
00:09:48,850 --> 00:09:49,840
‫okay?

195
00:09:49,840 --> 00:09:52,490
‫So now in our index.js

196
00:09:52,490 --> 00:09:56,013
‫we will basically connect the green button with dysfunction

197
00:09:56,013 --> 00:09:59,263
‫that we just created inside of stripe.js.

198
00:10:01,650 --> 00:10:02,633
‫So import.

199
00:10:05,330 --> 00:10:08,097
‫Book tour from stripe.

200
00:10:11,760 --> 00:10:16,323
‫Then as always let's select our element from the web page.

201
00:10:18,240 --> 00:10:23,213
‫So book button is = to document. get element by ID,

202
00:10:24,290 --> 00:10:26,313
‫and the ID remember is,

203
00:10:28,680 --> 00:10:30,423
‫book tour I believe.

204
00:10:31,450 --> 00:10:32,390
‫So yeah,

205
00:10:32,390 --> 00:10:35,623
‫so that's the ID that we just added before book ID.

206
00:10:39,770 --> 00:10:43,023
‫And so now we can add that event handler to it.

207
00:10:44,800 --> 00:10:48,047
‫So if there is a book button,

208
00:10:49,986 --> 00:10:52,486
‫then bookBtn.addeventlistener,

209
00:10:55,430 --> 00:10:57,310
‫waiting for a click

210
00:10:57,310 --> 00:10:59,720
‫then we need the event as well,

211
00:10:59,720 --> 00:11:02,990
‫and now we need to get that tour ID from that button,

212
00:11:02,990 --> 00:11:05,170
‫So that's tourid =,

213
00:11:08,820 --> 00:11:12,230
‫and now when I streak here which is e.target,

214
00:11:12,230 --> 00:11:14,170
‫and maybe you're familiar with that,

215
00:11:14,170 --> 00:11:18,860
‫so event.target is basically the element which was clicked,

216
00:11:18,860 --> 00:11:21,700
‫so the one that triggered this event listener here

217
00:11:21,700 --> 00:11:23,530
‫to be fired, alright?

218
00:11:23,530 --> 00:11:26,273
‫And so that will be of course this button.

219
00:11:27,910 --> 00:11:30,210
‫Then in there we have tour ID,

220
00:11:30,210 --> 00:11:31,400
‫and so in JavaScript,

221
00:11:31,400 --> 00:11:33,573
‫that will then actually be called tour,

222
00:11:35,270 --> 00:11:37,860
‫so like this let me just write it out.

223
00:11:37,860 --> 00:11:39,420
‫So tour ID,

224
00:11:39,420 --> 00:11:40,750
‫so whenever there is a -,

225
00:11:40,750 --> 00:11:42,640
‫it will automatically get converted

226
00:11:42,640 --> 00:11:44,363
‫to this CamelCase notation.

227
00:11:46,040 --> 00:11:47,100
‫Okay?

228
00:11:47,100 --> 00:11:51,297
‫So e.target.dataset.tourid.

229
00:11:53,820 --> 00:11:57,660
‫But now since this name is exactly the same as this one,

230
00:11:57,660 --> 00:11:59,793
‫we can simply use the structuring on that.

231
00:12:02,700 --> 00:12:05,313
‫So once more using this nice trick.

232
00:12:07,630 --> 00:12:12,203
‫And then we call book tour with that tour ID.

233
00:12:13,400 --> 00:12:15,470
‫And another nice thing that we can do here,

234
00:12:15,470 --> 00:12:18,140
‫is to change the text of the button

235
00:12:18,140 --> 00:12:20,920
‫to something like processing,

236
00:12:20,920 --> 00:12:24,230
‫and so let's do again e.target.

237
00:12:24,230 --> 00:12:26,960
‫So again the element that was clicked,

238
00:12:26,960 --> 00:12:30,190
‫so that's the button.textcontent

239
00:12:30,190 --> 00:12:33,070
‫which we used before up hear,

240
00:12:33,070 --> 00:12:35,450
‫so to change the text in an element,

241
00:12:35,450 --> 00:12:40,310
‫and let's change that to processing,

242
00:12:40,310 --> 00:12:41,143
‫okay?

243
00:12:41,143 --> 00:12:41,976
‫And so with this

244
00:12:41,976 --> 00:12:45,190
‫I think we have everything correctly connected.

245
00:12:45,190 --> 00:12:46,680
‫So we click on that button,

246
00:12:46,680 --> 00:12:49,840
‫then we change the text on that button,

247
00:12:49,840 --> 00:12:52,110
‫then we get the tour ID

248
00:12:52,110 --> 00:12:54,570
‫from the data attribute that's on the button,

249
00:12:54,570 --> 00:12:58,170
‫and call book tour with that ID,

250
00:12:58,170 --> 00:12:59,003
‫okay?

251
00:12:59,003 --> 00:13:02,143
‫And so that ID will then get passed on to this URL,

252
00:13:03,000 --> 00:13:06,520
‫which in turn should return a checkout session,

253
00:13:06,520 --> 00:13:07,353
‫okay?

254
00:13:07,353 --> 00:13:09,243
‫And then here we gonna take a look at that,

255
00:13:10,450 --> 00:13:11,620
‫just like this.

256
00:13:11,620 --> 00:13:14,010
‫Now at this point we will not create

257
00:13:14,010 --> 00:13:16,770
‫the checkout form just yet,

258
00:13:16,770 --> 00:13:20,133
‫so we gonna leave that for the last step of this video.

259
00:13:21,400 --> 00:13:23,950
‫But for now I want to take a look at this,

260
00:13:23,950 --> 00:13:25,330
‫let's just see if parcel

261
00:13:25,330 --> 00:13:27,960
‫is still running here in the background,

262
00:13:27,960 --> 00:13:30,370
‫so bundling all our scripts together,

263
00:13:30,370 --> 00:13:32,030
‫and it looks like it is,

264
00:13:32,030 --> 00:13:35,823
‫and so let's not actually test this out.

265
00:13:37,320 --> 00:13:38,830
‫So we are logged in,

266
00:13:38,830 --> 00:13:40,603
‫let's now try to Park Camper.

267
00:13:42,740 --> 00:13:45,793
‫Down here, click this button.

268
00:13:47,120 --> 00:13:50,240
‫And it seems like we don't get any error,

269
00:13:50,240 --> 00:13:52,070
‫so that's good,

270
00:13:52,070 --> 00:13:54,073
‫now let's take a look at our console,

271
00:13:54,970 --> 00:13:57,230
‫and we have an object,

272
00:13:57,230 --> 00:14:00,350
‫and so that is the result of this axios call,

273
00:14:00,350 --> 00:14:03,140
‫so axios always creates an object like this,

274
00:14:03,140 --> 00:14:06,560
‫where in there is an object called data,

275
00:14:06,560 --> 00:14:08,230
‫which is the actual response.

276
00:14:08,230 --> 00:14:11,623
‫And so here you see that we indeed have our session.

277
00:14:12,830 --> 00:14:15,330
‫So you see we have the customer email,

278
00:14:15,330 --> 00:14:18,090
‫we have the current tour ID,

279
00:14:18,090 --> 00:14:22,138
‫we have now let's see if we have,

280
00:14:22,138 --> 00:14:23,100
‫(mumbles)

281
00:14:23,100 --> 00:14:25,653
‫So here we have some data about the tour.

282
00:14:26,670 --> 00:14:29,953
‫And so now everything looks correct here.

283
00:14:31,240 --> 00:14:32,610
‫Alright?

284
00:14:32,610 --> 00:14:34,290
‫So let's close that,

285
00:14:34,290 --> 00:14:36,070
‫and now as the last step,

286
00:14:36,070 --> 00:14:39,310
‫let's then actually create basically the checkout form,

287
00:14:39,310 --> 00:14:40,893
‫and charge the credit card.

288
00:14:44,950 --> 00:14:46,250
‫Alright?

289
00:14:46,250 --> 00:14:48,650
‫And actually let's also wrap all of this here

290
00:14:48,650 --> 00:14:51,043
‫into a try catch block.

291
00:14:52,080 --> 00:14:55,750
‫Because of course we have some asynchronous calls here,

292
00:14:55,750 --> 00:14:57,830
‫and both have one more in a second,

293
00:14:57,830 --> 00:15:00,000
‫and so it's a good practice.

294
00:15:00,000 --> 00:15:01,603
‫To have a try catch block.

295
00:15:04,750 --> 00:15:05,610
‫Alright?

296
00:15:05,610 --> 00:15:09,613
‫But let's not waste a lot of time with these errors.

297
00:15:11,790 --> 00:15:14,590
‫But I'm still going to show actually an alert

298
00:15:14,590 --> 00:15:16,010
‫in case there is an error,

299
00:15:16,010 --> 00:15:18,870
‫so for example with this API call,

300
00:15:18,870 --> 00:15:19,703
‫okay?

301
00:15:19,703 --> 00:15:21,460
‫So that the user basically can see

302
00:15:21,460 --> 00:15:22,993
‫that something went wrong.

303
00:15:24,500 --> 00:15:29,063
‫So let's simply grab this alerts import.

304
00:15:31,530 --> 00:15:32,600
‫Alright?

305
00:15:32,600 --> 00:15:35,633
‫And then say Show alert,

306
00:15:38,000 --> 00:15:40,630
‫specifying that it's an error,

307
00:15:40,630 --> 00:15:44,940
‫and then just the error itself as the message basically.

308
00:15:44,940 --> 00:15:46,250
‫Alright?

309
00:15:46,250 --> 00:15:49,220
‫Anyway in order to now do this last step,

310
00:15:49,220 --> 00:15:51,460
‫it's actually very, very simple,

311
00:15:51,460 --> 00:15:53,673
‫all we have to do is to await.

312
00:15:56,060 --> 00:15:58,837
‫stripe.redirectTocheck out,

313
00:16:02,950 --> 00:16:04,683
‫let me see if I got this wrong,

314
00:16:06,360 --> 00:16:08,250
‫and let me see if I got that right,

315
00:16:08,250 --> 00:16:11,700
‫So redirect to check out.

316
00:16:11,700 --> 00:16:12,630
‫Alright?

317
00:16:12,630 --> 00:16:15,560
‫And then options but only one option,

318
00:16:15,560 --> 00:16:18,870
‫which is the session ID,

319
00:16:18,870 --> 00:16:22,053
‫and so that's going to be coming from session,

320
00:16:23,140 --> 00:16:26,280
‫and remember how the session was inside of data,

321
00:16:26,280 --> 00:16:30,140
‫so there was a data object created in there by axios,

322
00:16:30,140 --> 00:16:34,020
‫remember and so that is then all response itself.

323
00:16:34,020 --> 00:16:37,793
‫And so in there we have session.id.

324
00:16:38,810 --> 00:16:40,430
‫And that's it,

325
00:16:40,430 --> 00:16:41,540
‫okay?

326
00:16:41,540 --> 00:16:44,210
‫And so now comes the greatest part of all,

327
00:16:44,210 --> 00:16:48,150
‫which is to actually check out if this works.

328
00:16:48,150 --> 00:16:50,620
‫So we are still logged in,

329
00:16:50,620 --> 00:16:52,793
‫let's just one more time we load this.

330
00:16:54,470 --> 00:16:57,343
‫Click a button and now wait for it.

331
00:16:59,220 --> 00:17:02,810
‫And indeed we get to our checkout page,

332
00:17:02,810 --> 00:17:05,590
‫and also we get this nice image here,

333
00:17:05,590 --> 00:17:08,540
‫we get all Nature's logo here,

334
00:17:08,540 --> 00:17:10,560
‫we get here all icon,

335
00:17:10,560 --> 00:17:13,270
‫so all the stuff that we specified before,

336
00:17:13,270 --> 00:17:15,710
‫we have the price that we also specified

337
00:17:15,710 --> 00:17:17,540
‫in our checkout session,

338
00:17:17,540 --> 00:17:19,690
‫and really all the other details.

339
00:17:19,690 --> 00:17:22,550
‫So the name, the summary,

340
00:17:22,550 --> 00:17:24,336
‫and of course the image.

341
00:17:24,336 --> 00:17:27,610
‫That's really amazing, right?

342
00:17:27,610 --> 00:17:31,230
‫Then here another great thing that I mentioned before,

343
00:17:31,230 --> 00:17:32,690
‫is that the email address

344
00:17:32,690 --> 00:17:35,100
‫is already automatically prefilled,

345
00:17:35,100 --> 00:17:37,463
‫so that's another really nice feature.

346
00:17:38,560 --> 00:17:40,380
‫And so now here all we need to do

347
00:17:40,380 --> 00:17:43,250
‫is to put in this credit card information,

348
00:17:43,250 --> 00:17:46,410
‫and so we stripe when we're testing the credit card number

349
00:17:46,410 --> 00:17:49,640
‫is just four two four two four two four two ,

350
00:17:49,640 --> 00:17:52,970
‫and so on until we're done, okay?

351
00:17:52,970 --> 00:17:55,850
‫Then here any month and any year works,

352
00:17:55,850 --> 00:17:58,290
‫So let's just put two two two.

353
00:17:58,290 --> 00:18:01,060
‫So anything in the future, alright?

354
00:18:01,060 --> 00:18:05,600
‫So if you're watching this course after February 2022,

355
00:18:05,600 --> 00:18:08,120
‫then this date is not gonna work,

356
00:18:08,120 --> 00:18:09,973
‫so then just put something later,

357
00:18:11,510 --> 00:18:12,343
‫okay?

358
00:18:12,343 --> 00:18:14,530
‫Until any number works as well,

359
00:18:14,530 --> 00:18:16,667
‫here any name works as well,

360
00:18:16,667 --> 00:18:18,580
‫let just put Laura,

361
00:18:18,580 --> 00:18:22,000
‫the country of course also doesn't really matter,

362
00:18:22,000 --> 00:18:25,390
‫people automatically pre-fill based on your IP location,

363
00:18:25,390 --> 00:18:26,580
‫so I'm in Portugal,

364
00:18:26,580 --> 00:18:29,240
‫and so that's what I get.

365
00:18:29,240 --> 00:18:32,080
‫And now you see this nice green button here,

366
00:18:32,080 --> 00:18:34,100
‫and it has this nice effect,

367
00:18:34,100 --> 00:18:35,500
‫and so now when we click it,

368
00:18:36,870 --> 00:18:39,400
‫it's processing and we're done.

369
00:18:39,400 --> 00:18:43,281
‫Great, then this is actually the success URL

370
00:18:43,281 --> 00:18:46,880
‫that we also specified in our checkout session, right?

371
00:18:46,880 --> 00:18:48,893
‫So we defined that,

372
00:18:50,390 --> 00:18:52,250
‫that in the event of a success,

373
00:18:52,250 --> 00:18:54,697
‫we move back to this home URL.

374
00:18:55,863 --> 00:18:57,780
‫And we gonna change that here a bit later,

375
00:18:57,780 --> 00:19:00,450
‫but for now this is really what we wanted,

376
00:19:00,450 --> 00:19:02,640
‫and so it worked perfectly fine.

377
00:19:02,640 --> 00:19:04,370
‫Well at least I hope so,

378
00:19:04,370 --> 00:19:07,963
‫so let's take a look at all payments now.

379
00:19:10,270 --> 00:19:11,330
‫And indeed,

380
00:19:11,330 --> 00:19:13,470
‫this is the one that we just made.

381
00:19:13,470 --> 00:19:15,890
‫So we successfully received this payment

382
00:19:15,890 --> 00:19:17,193
‫right in our account now.

383
00:19:19,810 --> 00:19:22,380
‫So you see the email address the name,

384
00:19:22,380 --> 00:19:26,410
‫and indeed the park Camper Tour that we just purchased.

385
00:19:26,410 --> 00:19:28,423
‫Great, that's really awesome.

386
00:19:29,370 --> 00:19:32,990
‫So down here you can then see the fees that stripe takes,

387
00:19:32,990 --> 00:19:35,830
‫so of course they also need to make money,

388
00:19:35,830 --> 00:19:37,950
‫and so therefore they take a cut,

389
00:19:37,950 --> 00:19:42,440
‫which I think is like 2.9% or something like that,

390
00:19:42,440 --> 00:19:44,800
‫But of course all that stuff you can check out

391
00:19:44,800 --> 00:19:45,893
‫on their website.

392
00:19:46,770 --> 00:19:49,690
‫Then you also got the payment method here,

393
00:19:49,690 --> 00:19:51,313
‫so the data that we just put in,

394
00:19:52,480 --> 00:19:54,823
‫and you get some nice data on the session,

395
00:19:55,860 --> 00:19:59,763
‫and probably she should also show up here in your customers.

396
00:20:00,770 --> 00:20:04,180
‫And yeah, indeed here she is,

397
00:20:04,180 --> 00:20:06,260
‫And so yeah,

398
00:20:06,260 --> 00:20:09,033
‫I think that is pretty successful now.

399
00:20:10,880 --> 00:20:14,010
‫Oh and another thing that I forgot to mention

400
00:20:14,010 --> 00:20:16,580
‫is that your users will actually also

401
00:20:16,580 --> 00:20:18,600
‫automatically get an email.

402
00:20:18,600 --> 00:20:22,510
‫So I think that should be the default

403
00:20:22,510 --> 00:20:24,540
‫here in email receipts,

404
00:20:24,540 --> 00:20:27,160
‫so go to your settings email receipts,

405
00:20:27,160 --> 00:20:30,240
‫and then here you have email customers about

406
00:20:30,240 --> 00:20:31,920
‫successful payments.

407
00:20:31,920 --> 00:20:34,080
‫And so that's also a really nice feature,

408
00:20:34,080 --> 00:20:37,730
‫meaning that we do not have to manually send out emails

409
00:20:37,730 --> 00:20:41,580
‫whenever a user successfully purchased a tour, alright?

410
00:20:41,580 --> 00:20:45,360
‫So one more thing that stripe takes away from us,

411
00:20:45,360 --> 00:20:50,000
‫Fantastic, so let's now just take a quick minute to recap

412
00:20:50,000 --> 00:20:52,460
‫the entire process that we just went through.

413
00:20:52,460 --> 00:20:55,760
‫So we started by creating this checkout session,

414
00:20:55,760 --> 00:20:58,440
‫which needs as an input the tour ID,

415
00:20:58,440 --> 00:21:02,270
‫so that we can then store a bunch of details about the tour

416
00:21:02,270 --> 00:21:03,840
‫in that session.

417
00:21:03,840 --> 00:21:05,684
‫So stuff about the tour name,

418
00:21:05,684 --> 00:21:09,460
‫the summary also the price images.

419
00:21:09,460 --> 00:21:11,610
‫So all that stuff that we want to show up

420
00:21:11,610 --> 00:21:12,840
‫on the checkout page,

421
00:21:12,840 --> 00:21:14,970
‫but also in our dashboard.

422
00:21:14,970 --> 00:21:17,750
‫Then we also include the email so that the user doesn't need

423
00:21:17,750 --> 00:21:20,040
‫to fill it out in the checkout,

424
00:21:20,040 --> 00:21:22,190
‫and then a bunch of other data.

425
00:21:22,190 --> 00:21:24,760
‫So remember this client reference ID,

426
00:21:24,760 --> 00:21:26,510
‫which will make a lot more sense

427
00:21:26,510 --> 00:21:28,443
‫once we actually get to use it.

428
00:21:29,610 --> 00:21:31,520
‫So we create this session

429
00:21:32,500 --> 00:21:36,150
‫whenever someone hits this check out session route, alright?

430
00:21:36,150 --> 00:21:39,770
‫And so that's exactly what we then do on our front end,

431
00:21:39,770 --> 00:21:42,610
‫right here in stripe.js.

432
00:21:42,610 --> 00:21:44,230
‫So we get our session here,

433
00:21:44,230 --> 00:21:46,930
‫and then from there we create a checkout,

434
00:21:46,930 --> 00:21:48,760
‫and charge the credit card using

435
00:21:48,760 --> 00:21:51,017
‫stripe.redirectTocheckout,

436
00:21:52,051 --> 00:21:53,560
‫and the stripe object here

437
00:21:53,560 --> 00:21:55,800
‫is simply using the stripe library

438
00:21:55,800 --> 00:21:58,240
‫with our public key, okay?

439
00:21:58,240 --> 00:22:01,610
‫Now where does this tour ID come from?

440
00:22:01,610 --> 00:22:04,500
‫Well, it is stored here right on the button

441
00:22:04,500 --> 00:22:07,050
‫where the user clicks to book a new tour.

442
00:22:07,050 --> 00:22:10,770
‫That ID is then read right here in index.js,

443
00:22:10,770 --> 00:22:14,130
‫whenever someone hits the booking button, Okay?

444
00:22:14,130 --> 00:22:16,020
‫So we store that into tour ID,

445
00:22:16,020 --> 00:22:17,940
‫and pass it into book tour,

446
00:22:17,940 --> 00:22:20,730
‫which again is this function here,

447
00:22:20,730 --> 00:22:23,410
‫which takes care of really processing the payments

448
00:22:23,410 --> 00:22:24,740
‫on the front end.

449
00:22:24,740 --> 00:22:26,450
‫And so the result of all this

450
00:22:26,450 --> 00:22:27,960
‫is what we just saw before

451
00:22:27,960 --> 00:22:30,480
‫where the user really get charged the credit card,

452
00:22:30,480 --> 00:22:32,380
‫and purchased the tour,

453
00:22:32,380 --> 00:22:34,420
‫so perfect.

454
00:22:34,420 --> 00:22:35,670
‫Now what's missing here

455
00:22:35,670 --> 00:22:38,440
‫is that actually whenever there is a new booking,

456
00:22:38,440 --> 00:22:42,540
‫we want to create a new booking document in our database.

457
00:22:42,540 --> 00:22:45,060
‫So just as we discussed way back

458
00:22:45,060 --> 00:22:46,940
‫when we talked about all data model

459
00:22:46,940 --> 00:22:49,420
‫in this application, right?

460
00:22:49,420 --> 00:22:51,090
‫And so to that end,

461
00:22:51,090 --> 00:22:52,960
‫we're gonna create the bookings model

462
00:22:52,960 --> 00:22:54,240
‫right in the next video ,

463
00:22:54,240 --> 00:22:55,250
‫sort it after that,

464
00:22:55,250 --> 00:22:56,970
‫we can then create new tours

465
00:22:56,970 --> 00:22:59,193
‫whenever there is a successful purchase.