1
00:00:01,010 --> 00:00:02,600
‫Instructeur : Dans cette conférence,

2
00:00:02,600 --> 00:00:04,910
‫nous allons apprendre à traiter les paiements avec

3
00:00:04,910 --> 00:00:08,203
‫Stripe, sur le front-end chaque fois qu'un utilisateur clique sur un bouton.

4
00:00:09,840 --> 00:00:12,860
‫Et pour commencer, configurons-le en fait ce bouton

5
00:00:12,860 --> 00:00:15,350
‫afin qu'il n'apparaisse que lorsqu'un utilisateur est

6
00:00:15,350 --> 00:00:16,563
‫réellement connecté.

7
00:00:17,920 --> 00:00:19,763
‫Donc, ici, sur la page

8
00:00:21,260 --> 00:00:23,540
‫de détail de la visite, nous avons

9
00:00:23,540 --> 00:00:27,250
‫actuellement un utilisateur connecté, et donc ce bouton dit réserver la visite

10
00:00:27,250 --> 00:00:29,180
‫maintenant, mais cela ne devrait être

11
00:00:29,180 --> 00:00:31,450
‫comme ça que lorsqu'il y a un

12
00:00:31,450 --> 00:00:32,430
‫utilisateur actuellement

13
00:00:32,430 --> 00:00:36,129
‫connecté, et sinon, il nous redirigerait alors à la page de connexion.

14
00:00:36,129 --> 00:00:37,240
‫D'accord?

15
00:00:37,240 --> 00:00:40,463
‫Implémentons donc cela dans le modèle de visite.

16
00:00:43,210 --> 00:00:45,570
‫Et c'est en fait juste ici,

17
00:00:45,570 --> 00:00:47,313
‫c'est donc ce bouton.

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

19
00:00:49,380 --> 00:00:52,300
‫Maintenant, s'il y a actuellement un utilisateur

20
00:00:52,300 --> 00:00:55,860
‫connecté, cela signifie que nous avons accès à la

21
00:00:55,860 --> 00:01:00,860
‫variable utilisateur, et donc nous pouvons faire si l'utilisateur est bien que cela.

22
00:01:02,440 --> 00:01:05,390
‫Et s'il n'y a pas d'utilisateur, alors sinon, eh bien,

23
00:01:05,390 --> 00:01:08,260
‫nous voulons simplement afficher un bouton, qui nous amène

24
00:01:08,260 --> 00:01:10,143
‫à la page de connexion.

25
00:01:13,490 --> 00:01:16,540
‫Et donc, connectez-vous pour réserver la

26
00:01:16,540 --> 00:01:20,610
‫visite, et celle-ci devrait en fait être un

27
00:01:20,610 --> 00:01:23,060
‫lien, et nous avons

28
00:01:23,060 --> 00:01:26,583
‫donc besoin d'un élément A pour l'ancre.

29
00:01:27,801 --> 00:01:31,970
‫Précisons ensuite également la propriété hf, qui à nouveau nous

30
00:01:31,970 --> 00:01:34,873
‫dirigera vers la page de connexion,

31
00:01:34,873 --> 00:01:35,990
‫d'accord ?

32
00:01:35,990 --> 00:01:39,173
‫Maintenant, ici, nous devons également ajouter un identifiant, réserver une

33
00:01:41,710 --> 00:01:46,200
‫visite afin que nous puissions ensuite la sélectionner dans notre JavaScript, et aussi quelque

34
00:01:46,200 --> 00:01:47,860
‫chose de très important,

35
00:01:47,860 --> 00:01:50,700
‫est-ce que nous devrions mettre l'identifiant de la tournée

36
00:01:50,700 --> 00:01:53,020
‫actuelle ici dans cet élément, d'accord ?

37
00:01:53,020 --> 00:01:55,200
‫Maintenant, pourquoi est-ce si important ?

38
00:01:55,200 --> 00:01:58,913
‫Rappelez-vous bien comment le point de terminaison de l'API que nous venons de créer.

39
00:01:59,780 --> 00:02:02,840
‫Donc celui-ci ici a besoin de l'identifiant de la tournée,

40
00:02:02,840 --> 00:02:06,970
‫et donc cet identifiant de tournée doit provenir de quelque part essentiellement, et donc

41
00:02:06,970 --> 00:02:09,470
‫pour le moment nous n'avons cette information nulle

42
00:02:09,470 --> 00:02:11,410
‫part sur cette page, et donc

43
00:02:11,410 --> 00:02:14,380
‫nous la mettrons ici directement sur cet élément, donc qu'alors

44
00:02:14,380 --> 00:02:17,440
‫ou le fichier JavaScript peut le récupérer à partir d'ici

45
00:02:17,440 --> 00:02:19,050
‫et l'envoyer avec la

46
00:02:19,050 --> 00:02:22,140
‫demande à l'itinéraire de la session de paiement, d'accord ?

47
00:02:22,140 --> 00:02:24,700
‫Donc, tout comme nous l'avons fait ici avec une carte,

48
00:02:24,700 --> 00:02:27,170
‫nous allons utiliser un attribut de données, et c'est

49
00:02:27,170 --> 00:02:28,417
‫donc data-, puis en

50
00:02:29,548 --> 00:02:31,880
‫gros, quel que soit le nom de variable que

51
00:02:31,880 --> 00:02:32,913
‫nous voulons définir.

52
00:02:33,940 --> 00:02:36,753
‫Et c'est donc l'identifiant de tournée dans ce cas.

53
00:02:40,810 --> 00:02:44,113
‫Donc tournée. id, d'accord?

54
00:02:45,380 --> 00:02:47,010
‫Alors donnez

55
00:02:47,010 --> 00:02:50,210
‫au coffre-fort, et essayons cela maintenant.

56
00:02:50,210 --> 00:02:52,400
‫Alors rechargez la page, et

57
00:02:52,400 --> 00:02:53,960
‫tout d'abord examinons-la

58
00:02:53,960 --> 00:02:56,640
‫pour voir si l'idée est réellement là,

59
00:02:56,640 --> 00:02:58,950
‫et en effet c'est parti.

60
00:02:58,950 --> 00:03:00,793
‫Et maintenant si nous nous déconnectons.

61
00:03:04,240 --> 00:03:06,160
‫Voyons ensuite ce que nous avons, et

62
00:03:06,160 --> 00:03:07,740
‫en effet maintenant il est dit,

63
00:03:07,740 --> 00:03:09,183
‫connectez-vous pour réserver la visite.

64
00:03:10,080 --> 00:03:13,153
‫Super, et faisons-le en fait.

65
00:03:19,080 --> 00:03:20,490
‫Maintenant, d'accord ?

66
00:03:20,490 --> 00:03:23,130
‫Et donc maintenant, créons un script dans lequel

67
00:03:23,130 --> 00:03:25,320
‫nous allons réellement faire la demande

68
00:03:25,320 --> 00:03:27,603
‫et traiter le paiement sur le front-end.

69
00:03:28,580 --> 00:03:32,690
‫Et donc, comme avant, ce sera en public, puis

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

71
00:03:35,510 --> 00:03:36,943
‫Donc un autre script ici.

72
00:03:38,550 --> 00:03:41,233
‫Et je vais l'appeler rayure. js.

73
00:03:44,440 --> 00:03:46,540
‫Et maintenant, ici, nous avons

74
00:03:46,540 --> 00:03:49,650
‫à nouveau besoin d'accéder à la bibliothèque Stripe, mais

75
00:03:49,650 --> 00:03:52,500
‫à ce package que nous venons d'installer auparavant,

76
00:03:52,500 --> 00:03:56,293
‫alors souvenez-vous du package Stripe MPM que nous avons utilisé ici.

77
00:03:57,240 --> 00:04:00,080
‫Donc celui-ci ne fonctionne que pour le back-end, et ce

78
00:04:00,080 --> 00:04:01,930
‫que nous devons faire sur le

79
00:04:01,930 --> 00:04:05,720
‫front-end est d'inclure en fait un script dans le HTML, et puisque nous n'avons

80
00:04:05,720 --> 00:04:09,160
‫besoin que de ce script ici sur la page de visite, nous

81
00:04:09,160 --> 00:04:12,643
‫le ferons comme nous fait avec le script de zone de carte.

82
00:04:13,740 --> 00:04:14,860
‫Alors celui-ci, nous

83
00:04:14,860 --> 00:04:18,170
‫le mettrons ici dans ce bloc de tête,

84
00:04:18,170 --> 00:04:19,260
‫d'accord ?

85
00:04:19,260 --> 00:04:21,760
‫De quel script avons-nous réellement besoin ?

86
00:04:21,760 --> 00:04:25,330
‫Eh bien, nous pouvons très simplement obtenir de la documentation

87
00:04:25,330 --> 00:04:27,600
‫que nous avons déjà consultée auparavant,

88
00:04:27,600 --> 00:04:30,850
‫et j'espère que vous n'avez pas fermé celle-ci, d'accord?

89
00:04:30,850 --> 00:04:33,830
‫Et encore une fois, celui-ci explique comment nous utilisons le

90
00:04:33,830 --> 00:04:36,040
‫produit de paiement à la fois sur le

91
00:04:36,040 --> 00:04:37,740
‫client et sur le serveur.

92
00:04:38,940 --> 00:04:41,090
‫Nous voyons donc ici que nous avons deux

93
00:04:41,090 --> 00:04:44,120
‫étapes, d'abord la création de la session de paiement sur le

94
00:04:44,120 --> 00:04:45,630
‫serveur, et cela est

95
00:04:45,630 --> 00:04:48,170
‫donc très similaire à ce que nous avons fait

96
00:04:48,170 --> 00:04:52,140
‫auparavant dans la dernière vidéo, et nous devons donc maintenant l'ajouter à notre front-end.

97
00:04:52,140 --> 00:04:56,760
‫Et donc ce script dont nous avons besoin est celui-ci, d'accord ?

98
00:04:56,760 --> 00:04:59,513
‫Alors copions cela et revenons en arrière.

99
00:05:02,980 --> 00:05:05,143
‫Et maintenant, nous devons adapter un peu cela.

100
00:05:12,940 --> 00:05:14,280
‫Maintenant, n'est-ce pas ?

101
00:05:14,280 --> 00:05:18,790
‫Il s'agissait donc d'exposer un objet stripe à la portée globale, et

102
00:05:18,790 --> 00:05:21,960
‫maintenant, dans ce fichier, nous pouvons l'utiliser.

103
00:05:21,960 --> 00:05:22,863
‫Donc nous

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

105
00:05:27,510 --> 00:05:29,300
‫puis c'est cet objet que nous

106
00:05:29,300 --> 00:05:31,940
‫obtenons du script que nous venons d'inclure, et

107
00:05:31,940 --> 00:05:35,410
‫puis ici nous avons besoin de notre clé publique, d'accord ?

108
00:05:35,410 --> 00:05:38,180
‫Nous avons donc déjà utilisé notre clé secrète sur

109
00:05:38,180 --> 00:05:41,040
‫le backend, il est maintenant temps d'utiliser notre clé publique.

110
00:05:41,040 --> 00:05:43,620
‫Revenons donc au tableau de bord, et

111
00:05:43,620 --> 00:05:45,910
‫en fait, si vous êtes dans la

112
00:05:45,910 --> 00:05:48,530
‫documentation, cela s'affichera déjà ici pour vous,

113
00:05:48,530 --> 00:05:50,290
‫c'est donc une fonctionnalité

114
00:05:50,290 --> 00:05:52,310
‫vraiment intéressante des documentations Stripe.

115
00:05:52,310 --> 00:05:53,467
‫Ainsi, chaque fois

116
00:05:53,467 --> 00:05:55,350
‫que vous êtes connecté, cette clé que

117
00:05:55,350 --> 00:05:57,850
‫vous avez ici est en fait votre clé publique.

118
00:05:57,850 --> 00:06:00,220
‫Mais si vous n'êtes pas sur cette

119
00:06:00,220 --> 00:06:03,078
‫page, vous pouvez bien sûr également obtenir votre clé

120
00:06:03,078 --> 00:06:05,510
‫API en vous rendant sur la page

121
00:06:05,510 --> 00:06:07,440
‫d'accueil, ou la page des développeurs,

122
00:06:07,440 --> 00:06:09,200
‫essayons en fait celle-là.

123
00:06:09,200 --> 00:06:11,020
‫Ensuite, ici sur les

124
00:06:11,020 --> 00:06:14,450
‫clés API, vous avez votre clé de test publique ici.

125
00:06:14,450 --> 00:06:16,210
‫Alors saisissez-le, puis

126
00:06:16,210 --> 00:06:18,983
‫revenons en arrière et passez-le ici.

127
00:06:22,080 --> 00:06:23,470
‫Et comme

128
00:06:23,470 --> 00:06:26,603
‫avant, je veux désactiver rapidement eslint ici.

129
00:06:31,220 --> 00:06:32,053
‫D'accord?

130
00:06:32,053 --> 00:06:35,503
‫Et maintenant créons enfin une fonction, que

131
00:06:36,860 --> 00:06:39,343
‫je vais appeler book tour.

132
00:06:40,670 --> 00:06:41,510
‫D'accord?

133
00:06:41,510 --> 00:06:44,763
‫Et donc cette fonction prendra en compte un identifiant de tournée.

134
00:06:46,220 --> 00:06:50,030
‫Et donc l'identifiant de la tournée est celui qui va

135
00:06:50,030 --> 00:06:52,870
‫venir ici de cette interface utilisateur.

136
00:06:52,870 --> 00:06:57,160
‫Alors d'ici, d'accord ?

137
00:06:57,160 --> 00:06:58,430
‫Donc, comme avant, nous allons

138
00:06:58,430 --> 00:07:01,420
‫obtenir celui-ci à partir de l'index. js où

139
00:07:01,420 --> 00:07:05,560
‫nous appellerons alors aussi ce livre Tour, d'accord

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

141
00:07:06,393 --> 00:07:08,960
‫Donc très similaire à ce que nous faisions avant.

142
00:07:08,960 --> 00:07:11,850
‫Quoi qu'il en soit, précisons maintenant une fois de plus les

143
00:07:11,850 --> 00:07:13,550
‫étapes que nous allons suivre ici.

144
00:07:13,550 --> 00:07:16,150
‫La première étape consiste donc à obtenir

145
00:07:16,150 --> 00:07:17,860
‫la session du

146
00:07:17,860 --> 00:07:22,580
‫serveur, et c'est donc là que cette route entre en jeu, d'accord ?

147
00:07:22,580 --> 00:07:25,260
‫C'est donc le point où nous allons utiliser ce

148
00:07:25,260 --> 00:07:28,040
‫point de terminaison pour vraiment amener notre session de

149
00:07:28,040 --> 00:07:29,443
‫paiement du côté client.

150
00:07:31,550 --> 00:07:32,383
‫D'accord?

151
00:07:33,230 --> 00:07:36,573
‫Alors obtenez une session vérifiée.

152
00:07:39,810 --> 00:07:43,933
‫Du point de terminaison ou de l'API, cela n'a pas vraiment d'importance.

153
00:07:45,600 --> 00:07:47,410
‫Cela fait dans

154
00:07:47,410 --> 00:07:49,260
‫un deuxième temps, nous

155
00:07:49,260 --> 00:07:54,260
‫utiliserons notre objet stripe pour créer automatiquement le formulaire de paiement,

156
00:07:57,657 --> 00:08:01,023
‫+ traiter ou disons + charger, la carte

157
00:08:02,490 --> 00:08:05,110
‫de crédit pour nous, d'accord ?

158
00:08:05,110 --> 00:08:06,350
‫Et c'est en

159
00:08:06,350 --> 00:08:08,020
‫fait tout, donc seulement deux étapes

160
00:08:08,020 --> 00:08:11,023
‫simples, et vous verrez qu'elles sont en fait assez simples.

161
00:08:12,200 --> 00:08:16,983
‫Stockons donc la session dans une variable appelée session.

162
00:08:17,850 --> 00:08:21,500
‫Et puis nous allons attendre une requête HTTP, ce que nous

163
00:08:21,500 --> 00:08:24,323
‫ferons une fois de plus avec axios.

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

165
00:08:27,130 --> 00:08:28,793
‫Je dois donc saisir ça ici.

166
00:08:29,840 --> 00:08:32,260
‫Alors importez axios, et encore

167
00:08:32,260 --> 00:08:35,810
‫une fois j'utilise la syntaxe du module ES6.

168
00:08:35,810 --> 00:08:40,200
‫Rappelez-vous cela, d'axios.

169
00:08:40,200 --> 00:08:43,620
‫Donc, comme nous l'avons fait par exemple dans la connexion ou dans les

170
00:08:43,620 --> 00:08:46,033
‫paramètres de mise à jour, n'est-ce pas ?

171
00:08:47,440 --> 00:08:50,093
‫Maintenant, nous devons également marquer cette fonction ici comme asynchrone.

172
00:08:52,240 --> 00:08:53,240
‫D'accord?

173
00:08:53,240 --> 00:08:54,660
‫Et puis dans axios,

174
00:08:54,660 --> 00:08:57,300
‫nous pouvons simplement passer l'URL, alors que tout

175
00:08:57,300 --> 00:09:00,660
‫ce que nous voulons faire est une simple requête GET.

176
00:09:00,660 --> 00:09:01,493
‫D'accord?

177
00:09:01,493 --> 00:09:02,420
‫Donc, jusqu'à

178
00:09:02,420 --> 00:09:04,510
‫présent, nous avons toujours spécifié la

179
00:09:04,510 --> 00:09:06,740
‫méthode, l'URL et les données, mais maintenant

180
00:09:06,740 --> 00:09:09,110
‫nous ne faisons qu'une requête GET, et

181
00:09:09,110 --> 00:09:11,053
‫c'est donc beaucoup plus simple.

182
00:09:13,220 --> 00:09:15,520
‫Prenons simplement l'URL ici, afin

183
00:09:15,520 --> 00:09:18,413
‫de ne pas perdre plus de temps.

184
00:09:19,840 --> 00:09:23,693
‫Alors voici api/v1/bookings.

185
00:09:26,550 --> 00:09:27,993
‫Ensuite, consultez la session.

186
00:09:30,360 --> 00:09:32,273
‫Et puis l'identifiant de la tournée.

187
00:09:33,690 --> 00:09:35,680
‫C'est donc celui-ci ici,

188
00:09:35,680 --> 00:09:38,203
‫qui va devenir dysfonctionnel, d'accord

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

190
00:09:41,440 --> 00:09:43,170
‫Et jetons un coup d'œil

191
00:09:43,170 --> 00:09:45,623
‫à cet objet de session dans notre

192
00:09:46,630 --> 00:09:48,850
‫console, juste pour voir si tout fonctionne,

193
00:09:48,850 --> 00:09:49,840
‫d'accord ?

194
00:09:49,840 --> 00:09:52,490
‫Alors maintenant dans notre index. js, nous allons essentiellement

195
00:09:52,490 --> 00:09:56,013
‫connecter le bouton vert au dysfonctionnement que nous venons de créer

196
00:09:56,013 --> 00:09:59,263
‫à l'intérieur de la bande. js.

197
00:10:01,650 --> 00:10:02,633
‫Alors importez.

198
00:10:05,330 --> 00:10:08,097
‫Réservez la visite de Stripe.

199
00:10:11,760 --> 00:10:16,323
‫Ensuite, comme toujours, sélectionnons notre élément sur la page Web.

200
00:10:18,240 --> 00:10:23,213
‫Donc, le bouton de livre est = pour documenter. obtenir l'élément par ID, et l'ID,

201
00:10:24,290 --> 00:10:26,313
‫rappelez-vous, est de réserver une

202
00:10:28,680 --> 00:10:30,423
‫visite, je crois.

203
00:10:31,450 --> 00:10:32,390
‫Alors oui,

204
00:10:32,390 --> 00:10:35,623
‫c'est donc l'ID que nous venons d'ajouter avant l'ID du livre.

205
00:10:39,770 --> 00:10:43,023
‫Et maintenant, nous pouvons y ajouter ce gestionnaire d'événements.

206
00:10:44,800 --> 00:10:48,047
‫Donc, s'il y a un bouton de livre,

207
00:10:49,986 --> 00:10:52,486
‫alors bookBtn. addeventlistener, en

208
00:10:55,430 --> 00:10:57,310
‫attendant un clic, nous avons également

209
00:10:57,310 --> 00:10:59,720
‫besoin de l'événement, et maintenant nous devons

210
00:10:59,720 --> 00:11:02,990
‫obtenir cet identifiant de tournée à partir de ce bouton,

211
00:11:02,990 --> 00:11:05,170
‫donc c'est tourid =, et maintenant quand

212
00:11:08,820 --> 00:11:12,230
‫je passe ici, c'est e. cible, et

213
00:11:12,230 --> 00:11:14,170
‫peut-être que vous êtes

214
00:11:14,170 --> 00:11:18,860
‫familier avec cela, donc événement. target est essentiellement l'élément sur lequel on

215
00:11:18,860 --> 00:11:21,700
‫a cliqué, donc celui qui a déclenché cet écouteur

216
00:11:21,700 --> 00:11:23,530
‫d'événement ici, d'accord ?

217
00:11:23,530 --> 00:11:26,273
‫Et ce sera bien sûr ce bouton.

218
00:11:27,910 --> 00:11:30,210
‫Ensuite, là-dedans, nous avons l'identifiant de la

219
00:11:30,210 --> 00:11:31,400
‫tournée, et

220
00:11:31,400 --> 00:11:33,573
‫donc en JavaScript, cela s'appellera en

221
00:11:35,270 --> 00:11:37,860
‫fait tournée, alors comme ça, laissez-moi l'écrire.

222
00:11:37,860 --> 00:11:39,420
‫Donc, l'identifiant de la tournée,

223
00:11:39,420 --> 00:11:40,750
‫donc chaque fois

224
00:11:40,750 --> 00:11:42,640
‫qu'il y a un -, il sera

225
00:11:42,640 --> 00:11:44,363
‫automatiquement converti en cette notation CamelCase.

226
00:11:46,040 --> 00:11:47,100
‫D'accord?

227
00:11:47,100 --> 00:11:51,297
‫Donc e. cibler. base de données. touristique.

228
00:11:53,820 --> 00:11:57,660
‫Mais maintenant, puisque ce nom est exactement le même que celui-ci, nous pouvons

229
00:11:57,660 --> 00:11:59,793
‫simplement utiliser la structuration à ce sujet.

230
00:12:02,700 --> 00:12:05,313
‫Alors encore une fois en utilisant cette belle astuce.

231
00:12:07,630 --> 00:12:12,203
‫Et puis nous appelons réserver une tournée avec cet ID de tournée.

232
00:12:13,400 --> 00:12:15,470
‫Et une autre bonne chose que nous

233
00:12:15,470 --> 00:12:18,140
‫pouvons faire ici, c'est de changer le texte du

234
00:12:18,140 --> 00:12:20,920
‫bouton en quelque chose comme le traitement, et donc

235
00:12:20,920 --> 00:12:24,230
‫faisons à nouveau e. cibler.

236
00:12:24,230 --> 00:12:26,960
‫Donc encore une fois l'élément qui a été cliqué,

237
00:12:26,960 --> 00:12:30,190
‫c'est donc le bouton. textcontent que nous

238
00:12:30,190 --> 00:12:33,070
‫avons utilisé avant d'entendre, donc

239
00:12:33,070 --> 00:12:35,450
‫pour changer le texte

240
00:12:35,450 --> 00:12:40,310
‫dans un élément, et changeons cela en traitement, d'accord

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

242
00:12:41,143 --> 00:12:41,976
‫Et donc

243
00:12:41,976 --> 00:12:45,190
‫avec cela, je pense que nous avons tout correctement connecté.

244
00:12:45,190 --> 00:12:46,680
‫Donc, nous cliquons sur

245
00:12:46,680 --> 00:12:49,840
‫ce bouton, puis nous modifions le texte sur ce bouton,

246
00:12:49,840 --> 00:12:52,110
‫puis nous obtenons l'ID de la tournée

247
00:12:52,110 --> 00:12:54,570
‫à partir de l'attribut de données qui se

248
00:12:54,570 --> 00:12:58,170
‫trouve sur le bouton, et appelons réserver la tournée avec cet ID,

249
00:12:58,170 --> 00:12:59,003
‫d'accord ?

250
00:12:59,003 --> 00:13:02,143
‫Et pour que cet ID soit ensuite transmis à cette

251
00:13:03,000 --> 00:13:06,520
‫URL, qui à son tour devrait renvoyer une session de paiement,

252
00:13:06,520 --> 00:13:07,353
‫d'accord ?

253
00:13:07,353 --> 00:13:09,243
‫Et puis ici, nous allons jeter un œil à

254
00:13:10,450 --> 00:13:11,620
‫cela, juste comme ça.

255
00:13:11,620 --> 00:13:14,010
‫Maintenant, à ce stade, nous ne

256
00:13:14,010 --> 00:13:16,770
‫créerons pas encore le formulaire de paiement, nous allons

257
00:13:16,770 --> 00:13:20,133
‫donc laisser cela pour la dernière étape de cette vidéo.

258
00:13:21,400 --> 00:13:23,950
‫Mais pour l'instant, je veux jeter un œil

259
00:13:23,950 --> 00:13:25,330
‫à cela, voyons

260
00:13:25,330 --> 00:13:27,960
‫simplement si parcel est toujours en cours d'exécution

261
00:13:27,960 --> 00:13:30,370
‫ici en arrière-plan, donc regroupez tous nos

262
00:13:30,370 --> 00:13:32,030
‫scripts ensemble, et il

263
00:13:32,030 --> 00:13:35,823
‫semble que ce soit le cas, et ne testons donc pas cela.

264
00:13:37,320 --> 00:13:38,830
‫Nous sommes donc connectés,

265
00:13:38,830 --> 00:13:40,603
‫essayons maintenant de Park Camper.

266
00:13:42,740 --> 00:13:45,793
‫En bas, cliquez sur ce bouton.

267
00:13:47,120 --> 00:13:50,240
‫Et il semble que nous n'ayons aucune erreur,

268
00:13:50,240 --> 00:13:52,070
‫donc c'est bien, regardons

269
00:13:52,070 --> 00:13:54,073
‫maintenant notre console, et nous

270
00:13:54,970 --> 00:13:57,230
‫avons un objet, et c'est donc

271
00:13:57,230 --> 00:14:00,350
‫le résultat de cet appel axios, donc axios

272
00:14:00,350 --> 00:14:03,140
‫crée toujours un objet comme celui-ci ,

273
00:14:03,140 --> 00:14:06,560
‫où se trouve un objet appelé data, qui est

274
00:14:06,560 --> 00:14:08,230
‫la réponse réelle.

275
00:14:08,230 --> 00:14:11,623
‫Et donc ici vous voyez que nous avons bien notre session.

276
00:14:12,830 --> 00:14:15,330
‫Donc, vous voyez, nous avons l'e-mail

277
00:14:15,330 --> 00:14:18,090
‫du client, nous avons l'ID de la

278
00:14:18,090 --> 00:14:22,138
‫tournée actuelle, nous l'avons maintenant, voyons si nous l'avons, (marmonne) Nous

279
00:14:22,138 --> 00:14:23,100
‫avons donc

280
00:14:23,100 --> 00:14:25,653
‫ici des données sur la tournée.

281
00:14:26,670 --> 00:14:29,953
‫Et maintenant, tout semble correct ici.

282
00:14:31,240 --> 00:14:32,610
‫Bien?

283
00:14:32,610 --> 00:14:34,290
‫Alors fermons cela, et

284
00:14:34,290 --> 00:14:36,070
‫maintenant, comme dernière étape, créons

285
00:14:36,070 --> 00:14:39,310
‫en fait le formulaire de paiement et débitons la

286
00:14:39,310 --> 00:14:40,893
‫carte de crédit.

287
00:14:44,950 --> 00:14:46,250
‫Bien?

288
00:14:46,250 --> 00:14:48,650
‫Et en fait, enveloppons également tout cela

289
00:14:48,650 --> 00:14:51,043
‫ici dans un bloc try catch.

290
00:14:52,080 --> 00:14:55,750
‫Parce que bien sûr, nous avons quelques appels asynchrones ici, et les deux

291
00:14:55,750 --> 00:14:57,830
‫en ont un de plus en

292
00:14:57,830 --> 00:15:00,000
‫une seconde, et c'est donc une bonne pratique.

293
00:15:00,000 --> 00:15:01,603
‫Pour avoir un bloc try catch.

294
00:15:04,750 --> 00:15:05,610
‫Bien?

295
00:15:05,610 --> 00:15:09,613
‫Mais ne perdons pas beaucoup de temps avec ces erreurs.

296
00:15:11,790 --> 00:15:14,590
‫Mais je vais quand même afficher une

297
00:15:14,590 --> 00:15:16,010
‫alerte en cas d'erreur,

298
00:15:16,010 --> 00:15:18,870
‫donc par exemple avec cet appel d'API, d'accord

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

300
00:15:19,703 --> 00:15:21,460
‫Pour que l'utilisateur puisse voir que

301
00:15:21,460 --> 00:15:22,993
‫quelque chose s'est mal passé.

302
00:15:24,500 --> 00:15:29,063
‫Alors saisissons simplement cette importation d'alertes.

303
00:15:31,530 --> 00:15:32,600
‫Bien?

304
00:15:32,600 --> 00:15:35,633
‫Et puis dites Afficher l'alerte, en

305
00:15:38,000 --> 00:15:40,630
‫spécifiant qu'il s'agit d'une

306
00:15:40,630 --> 00:15:44,940
‫erreur, puis uniquement l'erreur elle-même en tant que message.

307
00:15:44,940 --> 00:15:46,250
‫Bien?

308
00:15:46,250 --> 00:15:49,220
‫Quoi qu'il en soit pour faire maintenant cette

309
00:15:49,220 --> 00:15:51,460
‫dernière étape, c'est en fait très,

310
00:15:51,460 --> 00:15:53,673
‫très simple, il suffit d'attendre.

311
00:15:56,060 --> 00:15:58,837
‫Bande. redirigerPour vérifier,

312
00:16:02,950 --> 00:16:04,683
‫laissez-moi voir si je

313
00:16:06,360 --> 00:16:08,250
‫me suis trompé, et laissez-moi

314
00:16:08,250 --> 00:16:11,700
‫voir si j'ai bien compris, alors redirigez pour vérifier.

315
00:16:11,700 --> 00:16:12,630
‫Bien?

316
00:16:12,630 --> 00:16:15,560
‫Et puis des options mais une seule

317
00:16:15,560 --> 00:16:18,870
‫option, qui est l'ID de session, et donc ça

318
00:16:18,870 --> 00:16:22,053
‫va venir de la session, et rappelez-vous comment

319
00:16:23,140 --> 00:16:26,280
‫la session était à l'intérieur des données, donc

320
00:16:26,280 --> 00:16:30,140
‫il y avait un objet de données créé là-dedans par

321
00:16:30,140 --> 00:16:34,020
‫axios, rappelez-vous et ainsi que est alors toute réponse elle-même.

322
00:16:34,020 --> 00:16:37,793
‫Et donc là-dedans, nous avons une session. identifiant.

323
00:16:38,810 --> 00:16:40,430
‫Et c'est tout,

324
00:16:40,430 --> 00:16:41,540
‫d'accord ?

325
00:16:41,540 --> 00:16:44,210
‫Et maintenant vient la plus grande

326
00:16:44,210 --> 00:16:48,150
‫partie de tout, qui est de vérifier si cela fonctionne.

327
00:16:48,150 --> 00:16:50,620
‫Nous sommes donc toujours connectés, chargeons

328
00:16:50,620 --> 00:16:52,793
‫encore une fois ceci.

329
00:16:54,470 --> 00:16:57,343
‫Cliquez sur un bouton et attendez maintenant.

330
00:16:59,220 --> 00:17:02,810
‫Et en effet, nous arrivons à notre page de paiement, et

331
00:17:02,810 --> 00:17:05,590
‫nous obtenons également cette belle image ici, nous obtenons

332
00:17:05,590 --> 00:17:08,540
‫tout le logo de la nature ici, nous obtenons

333
00:17:08,540 --> 00:17:10,560
‫ici toutes les icônes, donc tout

334
00:17:10,560 --> 00:17:13,270
‫ce que nous avons spécifié auparavant, nous avons

335
00:17:13,270 --> 00:17:15,710
‫le prix que nous avons également spécifié

336
00:17:15,710 --> 00:17:17,540
‫dans notre session de

337
00:17:17,540 --> 00:17:19,690
‫paiement, et vraiment tous les autres détails.

338
00:17:19,690 --> 00:17:22,550
‫Donc le nom, le résumé, et

339
00:17:22,550 --> 00:17:24,336
‫bien sûr l'image.

340
00:17:24,336 --> 00:17:27,610
‫C'est vraiment incroyable, non ?

341
00:17:27,610 --> 00:17:31,230
‫Ensuite, voici une autre bonne chose que j'ai mentionnée auparavant,

342
00:17:31,230 --> 00:17:32,690
‫c'est que l'adresse

343
00:17:32,690 --> 00:17:35,100
‫e-mail est déjà pré-remplie automatiquement, c'est

344
00:17:35,100 --> 00:17:37,463
‫donc une autre fonctionnalité très intéressante.

345
00:17:38,560 --> 00:17:40,380
‫Et maintenant, tout ce que nous

346
00:17:40,380 --> 00:17:43,250
‫avons à faire ici est de mettre ces informations de carte

347
00:17:43,250 --> 00:17:46,410
‫de crédit, et donc nous rayons lorsque nous testons le numéro de

348
00:17:46,410 --> 00:17:49,640
‫carte de crédit est juste quatre deux quatre deux quatre deux quatre deux

349
00:17:49,640 --> 00:17:52,970
‫, et ainsi de suite jusqu'à ce que nous ayons terminé , d'accord?

350
00:17:52,970 --> 00:17:55,850
‫Alors ici, n'importe quel mois et n'importe quelle année

351
00:17:55,850 --> 00:17:58,290
‫fonctionne, alors mettons simplement deux deux deux.

352
00:17:58,290 --> 00:18:01,060
‫Donc quelque chose dans le futur, d'accord ?

353
00:18:01,060 --> 00:18:05,600
‫Donc, si vous regardez ce cours après février 2022, alors cette

354
00:18:05,600 --> 00:18:08,120
‫date ne fonctionnera pas, alors mettez

355
00:18:08,120 --> 00:18:09,973
‫quelque chose plus tard, d'accord

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

357
00:18:12,343 --> 00:18:14,530
‫Jusqu'à ce qu'un numéro fonctionne également,

358
00:18:14,530 --> 00:18:16,667
‫ici n'importe quel nom fonctionne également,

359
00:18:16,667 --> 00:18:18,580
‫disons simplement Laura, le pays

360
00:18:18,580 --> 00:18:22,000
‫n'a bien sûr pas vraiment d'importance, les gens pré-remplissent automatiquement

361
00:18:22,000 --> 00:18:25,390
‫en fonction de votre emplacement IP, donc je suis au

362
00:18:25,390 --> 00:18:26,580
‫Portugal, et

363
00:18:26,580 --> 00:18:29,240
‫ainsi de suite c'est ce que j'obtiens.

364
00:18:29,240 --> 00:18:32,080
‫Et maintenant, vous voyez ce joli bouton vert ici, et il

365
00:18:32,080 --> 00:18:34,100
‫a ce bel effet, et donc maintenant,

366
00:18:34,100 --> 00:18:35,500
‫lorsque nous cliquons dessus,

367
00:18:36,870 --> 00:18:39,400
‫le traitement est en cours et nous avons terminé.

368
00:18:39,400 --> 00:18:43,281
‫Super, alors c'est en fait l'URL de réussite que nous avons également

369
00:18:43,281 --> 00:18:46,880
‫spécifiée lors de notre session de paiement, n'est-ce pas ?

370
00:18:46,880 --> 00:18:48,893
‫Nous avons donc défini qu'en

371
00:18:50,390 --> 00:18:52,250
‫cas de succès,

372
00:18:52,250 --> 00:18:54,697
‫nous revenions à cette URL d'accueil.

373
00:18:55,863 --> 00:18:57,780
‫Et nous allons changer cela ici un

374
00:18:57,780 --> 00:19:00,450
‫peu plus tard, mais pour l'instant c'est vraiment ce que

375
00:19:00,450 --> 00:19:02,640
‫nous voulions, et donc cela a parfaitement fonctionné.

376
00:19:02,640 --> 00:19:04,370
‫Eh bien, du moins, je

377
00:19:04,370 --> 00:19:07,963
‫l'espère, alors jetons un coup d'œil à tous les paiements maintenant.

378
00:19:10,270 --> 00:19:11,330
‫Et en effet,

379
00:19:11,330 --> 00:19:13,470
‫c'est celui que nous venons de faire.

380
00:19:13,470 --> 00:19:15,890
‫Nous avons donc reçu avec succès ce paiement

381
00:19:15,890 --> 00:19:17,193
‫directement sur notre compte.

382
00:19:19,810 --> 00:19:22,380
‫Vous voyez donc l'adresse e-mail le

383
00:19:22,380 --> 00:19:26,410
‫nom, et bien le parc Camper Tour que nous venons d'acheter.

384
00:19:26,410 --> 00:19:28,423
‫Super, c'est vraiment génial.

385
00:19:29,370 --> 00:19:32,990
‫Donc, ici, vous pouvez voir les frais que Stripe prend, donc

386
00:19:32,990 --> 00:19:35,830
‫bien sûr, ils doivent aussi gagner de l'argent, et

387
00:19:35,830 --> 00:19:37,950
‫donc ils prennent une coupe,

388
00:19:37,950 --> 00:19:42,440
‫ce qui, je pense, est comme 2. 9% ou quelque chose comme ça, mais

389
00:19:42,440 --> 00:19:44,800
‫bien sûr, vous pouvez consulter tout cela sur

390
00:19:44,800 --> 00:19:45,893
‫leur site Web.

391
00:19:46,770 --> 00:19:49,690
‫Ensuite, vous avez également le mode de paiement ici, donc

392
00:19:49,690 --> 00:19:51,313
‫les données que nous

393
00:19:52,480 --> 00:19:54,823
‫venons de saisir, et vous obtenez de belles

394
00:19:55,860 --> 00:19:59,763
‫données sur la session, et elle devrait probablement aussi apparaître ici chez vos clients.

395
00:20:00,770 --> 00:20:04,180
‫Et oui, en effet la voici, Et

396
00:20:04,180 --> 00:20:06,260
‫donc oui, je

397
00:20:06,260 --> 00:20:09,033
‫pense que c'est plutôt réussi maintenant.

398
00:20:10,880 --> 00:20:14,010
‫Oh et une autre chose que j'ai oublié

399
00:20:14,010 --> 00:20:16,580
‫de mentionner est que vos utilisateurs recevront

400
00:20:16,580 --> 00:20:18,600
‫également automatiquement un e-mail.

401
00:20:18,600 --> 00:20:22,510
‫Je pense donc que cela devrait être la valeur par défaut ici

402
00:20:22,510 --> 00:20:24,540
‫dans les reçus par e-mail,

403
00:20:24,540 --> 00:20:27,160
‫alors allez dans vos paramètres de reçus par

404
00:20:27,160 --> 00:20:30,240
‫e-mail, puis ici vous avez des clients par e-mail

405
00:20:30,240 --> 00:20:31,920
‫sur les paiements réussis.

406
00:20:31,920 --> 00:20:34,080
‫Et c'est aussi une fonctionnalité très

407
00:20:34,080 --> 00:20:37,730
‫intéressante, ce qui signifie que nous n'avons pas à envoyer manuellement des

408
00:20:37,730 --> 00:20:41,580
‫e-mails chaque fois qu'un utilisateur a acheté une visite avec succès, d'accord ?

409
00:20:41,580 --> 00:20:45,360
‫Donc, encore une chose que la rayure nous enlève,

410
00:20:45,360 --> 00:20:50,000
‫Fantastique, alors prenons maintenant une petite minute pour récapituler l'ensemble du processus

411
00:20:50,000 --> 00:20:52,460
‫que nous venons de suivre.

412
00:20:52,460 --> 00:20:55,760
‫Nous avons donc commencé par créer cette session de paiement, qui

413
00:20:55,760 --> 00:20:58,440
‫a besoin en entrée de l'ID de la

414
00:20:58,440 --> 00:21:02,270
‫tournée, afin que nous puissions ensuite stocker un tas de détails sur la

415
00:21:02,270 --> 00:21:03,840
‫tournée dans cette session.

416
00:21:03,840 --> 00:21:05,684
‫Donc des trucs sur le

417
00:21:05,684 --> 00:21:09,460
‫nom de la tournée, le résumé aussi les images de prix.

418
00:21:09,460 --> 00:21:11,610
‫Donc, tout ce que nous voulons afficher sur

419
00:21:11,610 --> 00:21:12,840
‫la page de paiement,

420
00:21:12,840 --> 00:21:14,970
‫mais aussi dans notre tableau de bord.

421
00:21:14,970 --> 00:21:17,750
‫Ensuite, nous incluons également l'e-mail afin que l'utilisateur n'ait

422
00:21:17,750 --> 00:21:20,040
‫pas besoin de le remplir lors du

423
00:21:20,040 --> 00:21:22,190
‫paiement, puis un tas d'autres données.

424
00:21:22,190 --> 00:21:24,760
‫Alors souvenez-vous de cet identifiant de référence client, qui

425
00:21:24,760 --> 00:21:26,510
‫aura beaucoup plus de sens

426
00:21:26,510 --> 00:21:28,443
‫une fois que nous l'utiliserons réellement.

427
00:21:29,610 --> 00:21:31,520
‫Nous créons donc cette session chaque

428
00:21:32,500 --> 00:21:36,150
‫fois que quelqu'un accède à cet itinéraire de session de paiement, d'accord ?

429
00:21:36,150 --> 00:21:39,770
‫Et c'est exactement ce que nous faisons ensuite sur notre face avant,

430
00:21:39,770 --> 00:21:42,610
‫ici même en rayures. js.

431
00:21:42,610 --> 00:21:44,230
‫Nous obtenons donc notre session ici,

432
00:21:44,230 --> 00:21:46,930
‫puis à partir de là, nous créons une caisse

433
00:21:46,930 --> 00:21:48,760
‫et facturons la carte de crédit

434
00:21:48,760 --> 00:21:51,017
‫en utilisant Stripe. redirectTocheckout, et

435
00:21:52,051 --> 00:21:53,560
‫l'objet stripe ici

436
00:21:53,560 --> 00:21:55,800
‫utilise simplement la bibliothèque stripe

437
00:21:55,800 --> 00:21:58,240
‫avec notre clé publique, d'accord ?

438
00:21:58,240 --> 00:22:01,610
‫D'où vient cet identifiant de tournée ?

439
00:22:01,610 --> 00:22:04,500
‫Eh bien, il est stocké ici juste sur le bouton sur

440
00:22:04,500 --> 00:22:07,050
‫lequel l'utilisateur clique pour réserver une nouvelle visite.

441
00:22:07,050 --> 00:22:10,770
‫Cet ID est ensuite lu ici dans index. js, chaque fois que

442
00:22:10,770 --> 00:22:14,130
‫quelqu'un appuie sur le bouton de réservation, d'accord ?

443
00:22:14,130 --> 00:22:16,020
‫Nous stockons donc cela dans l'ID

444
00:22:16,020 --> 00:22:17,940
‫de tournée et le transmettons à

445
00:22:17,940 --> 00:22:20,730
‫la tournée de réservation, qui est encore une fois

446
00:22:20,730 --> 00:22:23,410
‫cette fonction ici, qui s'occupe du traitement réel des

447
00:22:23,410 --> 00:22:24,740
‫paiements en amont.

448
00:22:24,740 --> 00:22:26,450
‫Et donc le résultat de

449
00:22:26,450 --> 00:22:27,960
‫tout cela est ce

450
00:22:27,960 --> 00:22:30,480
‫que nous venons de voir avant où l'utilisateur a

451
00:22:30,480 --> 00:22:32,380
‫vraiment facturé la carte de crédit

452
00:22:32,380 --> 00:22:34,420
‫et a acheté la visite, donc parfaite.

453
00:22:34,420 --> 00:22:35,670
‫Maintenant, ce qui manque

454
00:22:35,670 --> 00:22:38,440
‫ici, c'est qu'en fait, chaque fois qu'il y a une

455
00:22:38,440 --> 00:22:42,540
‫nouvelle réservation, nous voulons créer un nouveau document de réservation dans notre base de données.

456
00:22:42,540 --> 00:22:45,060
‫Donc, tout comme nous en avons discuté il y a

457
00:22:45,060 --> 00:22:46,940
‫longtemps lorsque nous avons parlé de tous

458
00:22:46,940 --> 00:22:49,420
‫les modèles de données dans cette application, n'est-ce pas ?

459
00:22:49,420 --> 00:22:51,090
‫Et donc à cette fin, nous

460
00:22:51,090 --> 00:22:52,960
‫allons créer le modèle de réservation directement

461
00:22:52,960 --> 00:22:54,240
‫dans la vidéo suivante,

462
00:22:54,240 --> 00:22:55,250
‫le trier après

463
00:22:55,250 --> 00:22:56,970
‫cela, nous pouvons ensuite créer de nouvelles

464
00:22:56,970 --> 00:22:59,193
‫visites chaque fois qu'il y a un achat réussi.