1
00:00:01,130 --> 00:00:03,770
‫Narrateur : Dans cette dernière partie de la

2
00:00:03,770 --> 00:00:06,160
‫section, nous allons maintenant accepter les paiements

3
00:00:06,160 --> 00:00:08,770
‫par carte de crédit dans notre application utilisant

4
00:00:08,770 --> 00:00:12,233
‫Stripe afin de permettre à nos utilisateurs d'acheter réellement des visites.

5
00:00:14,080 --> 00:00:16,320
‫Et donc, ouvrons un nouvel onglet ici et

6
00:00:18,160 --> 00:00:21,730
‫puis là, ouvrez la bande. com.

7
00:00:21,730 --> 00:00:25,080
‫Stripe est donc la plate-forme logicielle la meilleure, la plus

8
00:00:25,080 --> 00:00:27,910
‫populaire et la plus facile à utiliser

9
00:00:27,910 --> 00:00:30,810
‫pour intégrer les paiements dans n'importe quel site Web.

10
00:00:30,810 --> 00:00:34,210
‫Et beaucoup plus sur la façon dont cela fonctionne réellement

11
00:00:34,210 --> 00:00:38,040
‫un peu plus tard, mais pour l'instant commençons par créer notre compte gratuit.

12
00:00:38,040 --> 00:00:40,540
‫Alors cliquez ici sur compte

13
00:00:40,540 --> 00:00:43,303
‫gratuit, puis ouvrez votre propre compte gratuit.

14
00:00:44,510 --> 00:00:46,810
‫Et une fois que vous êtes connecté avec

15
00:00:46,810 --> 00:00:49,990
‫succès, vous devriez voir un tableau de bord qui ressemble à ceci.

16
00:00:49,990 --> 00:00:52,210
‫Ainsi, lorsque vous ouvrez un tout

17
00:00:52,210 --> 00:00:55,150
‫nouveau compte, vous serez d'abord toujours en mode test.

18
00:00:55,150 --> 00:00:59,250
‫C'est donc ce que vous pouvez voir ici avec ces données de test.

19
00:00:59,250 --> 00:01:01,380
‫Désormais, dès que vous voudrez vraiment

20
00:01:01,380 --> 00:01:04,250
‫commencer à accepter des paiements réels impliquant de

21
00:01:04,250 --> 00:01:07,530
‫l'argent réel de clients réels, vous devrez alors activer

22
00:01:07,530 --> 00:01:08,960
‫votre compte Stripe.

23
00:01:08,960 --> 00:01:11,350
‫Et pour cela, vous devrez ensuite fournir

24
00:01:11,350 --> 00:01:14,220
‫à Stripe un tas de données sur votre entreprise.

25
00:01:14,220 --> 00:01:15,580
‫Mais bien sûr, dans

26
00:01:15,580 --> 00:01:18,360
‫ce projet, nous n'allons pas faire ça, donc nous travaillerons

27
00:01:18,360 --> 00:01:21,680
‫toujours dans ce genre de mode de développement de test, d'accord ?

28
00:01:21,680 --> 00:01:24,010
‫Mais sinon, il vous suffit de

29
00:01:24,010 --> 00:01:26,940
‫cliquer ici pour démarrer ou d'activer votre compte ici.

30
00:01:26,940 --> 00:01:29,980
‫Maintenant, ce tableau de bord est vraiment facile et super

31
00:01:29,980 --> 00:01:31,890
‫intuitif à utiliser à mon avis.

32
00:01:31,890 --> 00:01:35,660
‫Ainsi, vous pouvez voir ici vos paiements, ce qui est encore

33
00:01:35,660 --> 00:01:37,360
‫une fois très simple,

34
00:01:37,360 --> 00:01:40,280
‫et n'oubliez pas qu'il s'agit de données de test.

35
00:01:40,280 --> 00:01:42,270
‫Donc, tous ces montants ici ne sont,

36
00:01:42,270 --> 00:01:44,110
‫bien sûr, que de faux montants.

37
00:01:44,110 --> 00:01:46,460
‫Mais de toute façon, vous pouvez voir votre client

38
00:01:46,460 --> 00:01:48,463
‫ici, vous pouvez voir le montant.

39
00:01:49,490 --> 00:01:52,440
‫Et lorsque vous les ouvrez, vous obtenez encore plus d'informations,

40
00:01:52,440 --> 00:01:55,670
‫comme le mode de paiement ici, donc le numéro de carte de crédit.

41
00:01:55,670 --> 00:01:58,640
‫Et au fait, nous n'avons jamais accès au vrai

42
00:01:58,640 --> 00:02:01,420
‫numéro de carte de crédit du client.

43
00:02:01,420 --> 00:02:04,230
‫Donc, nous ne verrons toujours que ces quatre derniers

44
00:02:04,230 --> 00:02:07,630
‫chiffres, mais jamais le vrai numéro de carte de crédit, d'accord ?

45
00:02:07,630 --> 00:02:09,620
‫Ensuite, vous obtenez également un

46
00:02:09,620 --> 00:02:12,110
‫aperçu de ce qui a été réellement acheté.

47
00:02:12,110 --> 00:02:14,630
‫Ainsi, par exemple, The Snow Adventurer Tour.

48
00:02:14,630 --> 00:02:16,360
‫Et tout cela ici,

49
00:02:16,360 --> 00:02:18,410
‫bien sûr, date du début

50
00:02:18,410 --> 00:02:21,133
‫de la création de l'application Natours, d'accord ?

51
00:02:22,000 --> 00:02:24,570
‫Donc, tous ces achats ne sont que des tests.

52
00:02:24,570 --> 00:02:27,420
‫Ensuite, nous pouvons également voir l'intégralité de notre solde,

53
00:02:27,420 --> 00:02:30,150
‫donc essentiellement tout l'argent que nous avons reçu.

54
00:02:30,150 --> 00:02:33,610
‫Et encore une fois, tout cela ne sont que des données de test.

55
00:02:33,610 --> 00:02:37,060
‫Ensuite, nous avons nos clients avec une belle liste de tous.

56
00:02:37,060 --> 00:02:39,653
‫Et, oui, tout cela fonctionne très bien.

57
00:02:40,650 --> 00:02:42,500
‫Maintenant, avant de pouvoir commencer,

58
00:02:42,500 --> 00:02:44,830
‫nous devons en fait définir quelques paramètres

59
00:02:44,830 --> 00:02:46,400
‫concernant notre compte.

60
00:02:46,400 --> 00:02:48,867
‫Donc, dans votre nouveau compte, vous devriez voir

61
00:02:48,867 --> 00:02:52,120
‫quelque chose comme "Compte sans nom", ou quelque chose comme ça, ici.

62
00:02:52,120 --> 00:02:55,740
‫Et donc, vous devriez également avoir, comme une icône de stylo ou quelque

63
00:02:55,740 --> 00:02:59,010
‫chose où vous pouvez ensuite créer un nom pour le compte.

64
00:02:59,010 --> 00:03:02,160
‫Et donc s'il vous plaît appelez ça "Natours" ou autre chose.

65
00:03:02,160 --> 00:03:04,700
‫Et si vous avez plus d'entreprises, vous

66
00:03:04,700 --> 00:03:08,690
‫pouvez ajouter un compte pour chacune de ces entreprises, d'accord ?

67
00:03:08,690 --> 00:03:11,510
‫Ou si vous n'avez pas l'icône en forme de crayon

68
00:03:11,510 --> 00:03:13,220
‫ici, nous pouvons également accéder

69
00:03:13,220 --> 00:03:15,570
‫aux paramètres, puis aux informations de compte.

70
00:03:15,570 --> 00:03:18,030
‫Et voici donc où vous devez

71
00:03:18,030 --> 00:03:20,610
‫mettre le nom de ce genre d'entreprise.

72
00:03:20,610 --> 00:03:23,150
‫Nous pouvons également définir quelques autres paramètres, définissons

73
00:03:23,150 --> 00:03:25,350
‫donc la marque ici, ce qui fera

74
00:03:25,350 --> 00:03:27,390
‫que les pages Stripe Checkout correspondent

75
00:03:27,390 --> 00:03:29,233
‫à notre marque, en gros.

76
00:03:30,470 --> 00:03:32,383
‫Ajoutons donc nos images.

77
00:03:35,880 --> 00:03:39,850
‫Donc public, image, et puis pour l'icône,

78
00:03:39,850 --> 00:03:41,163
‫utilisons celle-ci.

79
00:03:43,830 --> 00:03:46,140
‫Et nous pouvons également télécharger

80
00:03:46,140 --> 00:03:49,033
‫un logo, et pour cela, utilisons celui-ci.

81
00:03:51,310 --> 00:03:53,913
‫Oh, et maintenant nous avons besoin de notre mot de passe pour continuer.

82
00:03:56,220 --> 00:03:59,033
‫Et maintenant, changeons aussi notre couleur ici.

83
00:04:00,180 --> 00:04:03,640
‫Ouvrez donc rapidement le fichier CSS en public,

84
00:04:04,510 --> 00:04:07,150
‫puis trouvez notre vert typique, qui

85
00:04:07,150 --> 00:04:08,663
‫est celui-ci ici.

86
00:04:12,000 --> 00:04:13,623
‫Donc ça a l'air un peu mieux.

87
00:04:15,570 --> 00:04:16,950
‫Enregistrons-le maintenant ici

88
00:04:19,200 --> 00:04:22,150
‫et avec cela, nous sommes prêts à partir.

89
00:04:22,150 --> 00:04:25,130
‫Ensuite, jetons un coup d'œil à nos clés API.

90
00:04:25,130 --> 00:04:27,660
‫Alors, cliquez ici sur les clés API et si

91
00:04:27,660 --> 00:04:29,550
‫le site Web est un

92
00:04:29,550 --> 00:04:31,690
‫peu différent au moment où vous regardez

93
00:04:31,690 --> 00:04:35,113
‫cette vidéo, alors peut-être que les clés sont ici chez les développeurs.

94
00:04:36,180 --> 00:04:41,180
‫Donc ici, vous avez aussi quelque chose qui s'appelle des clés API, d'accord ?

95
00:04:41,840 --> 00:04:45,860
‫Quoi qu'il en soit, il existe une clé publiable et une clé secrète.

96
00:04:45,860 --> 00:04:48,270
‫Et donc celle-ci est essentiellement une clé

97
00:04:48,270 --> 00:04:50,820
‫publique que nous pouvons utiliser sur le front-end,

98
00:04:50,820 --> 00:04:54,430
‫et une clé secrète est celle qui est nécessaire sur le back-end.

99
00:04:54,430 --> 00:04:56,020
‫Et bien plus à ce sujet

100
00:04:56,020 --> 00:04:58,420
‫une fois que nous commençons réellement à le mettre en œuvre.

101
00:04:58,420 --> 00:05:00,310
‫Et enfin, je voulais

102
00:05:00,310 --> 00:05:04,120
‫aussi jeter un coup d'œil avec vous à la documentation.

103
00:05:04,120 --> 00:05:05,940
‫Et donc c'est ici, et

104
00:05:05,940 --> 00:05:07,390
‫en fait Stripe

105
00:05:07,390 --> 00:05:09,470
‫est connu pour son excellente documentation.

106
00:05:09,470 --> 00:05:11,700
‫Il est vraiment facile de trouver ce que

107
00:05:11,700 --> 00:05:13,170
‫vous cherchez dans cette documentation.

108
00:05:13,170 --> 00:05:15,470
‫Mais bien sûr, lorsque vous ne faites que

109
00:05:15,470 --> 00:05:17,740
‫commencer, il est alors très difficile de savoir

110
00:05:17,740 --> 00:05:19,830
‫ce que vous recherchez, n'est-ce pas ?

111
00:05:19,830 --> 00:05:21,550
‫Et c'est pourquoi nous

112
00:05:21,550 --> 00:05:25,270
‫implémentons cette fonctionnalité de paiement ensemble ici, n'est-ce pas ?

113
00:05:25,270 --> 00:05:28,530
‫Nous allons donc utiliser les fonctionnalités de paiement de Stripe

114
00:05:28,530 --> 00:05:31,000
‫et elles ont plusieurs options différentes.

115
00:05:31,000 --> 00:05:33,630
‫Maintenant, sur le Web, nous pouvons utiliser

116
00:05:33,630 --> 00:05:36,820
‫Stripe Checkout, qui utilise essentiellement une page de paiement préformative.

117
00:05:36,820 --> 00:05:39,170
‫Et c'est donc celui-ci que nous

118
00:05:39,170 --> 00:05:41,800
‫allons utiliser, ou vous pouvez également utiliser des

119
00:05:41,800 --> 00:05:42,633
‫éléments Stripe

120
00:05:42,633 --> 00:05:46,400
‫lorsque vous voulez vraiment créer votre propre expérience de paiement, d'accord ?

121
00:05:46,400 --> 00:05:48,640
‫Mais nous utiliserons simplement ce Checkout qui est en

122
00:05:48,640 --> 00:05:50,110
‫fait tout nouveau et qui

123
00:05:50,110 --> 00:05:52,633
‫est donc vraiment à l'épreuve du temps à ce stade.

124
00:05:53,990 --> 00:05:56,060
‫Ce sont donc les deux options

125
00:05:56,060 --> 00:05:59,850
‫pour le Web, mais vous pouvez également Stripe sur iOS, Android et

126
00:05:59,850 --> 00:06:01,563
‫vraiment toute autre plate-forme.

127
00:06:02,700 --> 00:06:05,840
‫Ensuite, sur Checkout, nous pouvons l'utiliser

128
00:06:05,840 --> 00:06:10,223
‫uniquement sur le client ou avec le serveur, d'accord ?

129
00:06:11,070 --> 00:06:13,593
‫Donc, ici, il y a une comparaison.

130
00:06:14,610 --> 00:06:17,600
‫Et donc, lorsque nous l'utilisons uniquement côté client, nous n'avons

131
00:06:17,600 --> 00:06:20,000
‫même pas besoin d'un serveur du tout.

132
00:06:20,000 --> 00:06:22,890
‫Mais cette façon d'utiliser Stripe n'est vraiment, vraiment, que

133
00:06:22,890 --> 00:06:25,060
‫pour les très, très petits magasins, donc

134
00:06:25,060 --> 00:06:27,600
‫où vous n'avez qu'une poignée de produits qui

135
00:06:27,600 --> 00:06:29,420
‫ne changent jamais leur prix et

136
00:06:29,420 --> 00:06:31,040
‫où vous devez en

137
00:06:31,040 --> 00:06:34,730
‫fait ajouter tous ces produits manuellement à vos tableaux de bord Stripe.

138
00:06:34,730 --> 00:06:37,250
‫Et donc on veut quelque chose d'un

139
00:06:37,250 --> 00:06:41,460
‫peu plus complexe et donc pour ça, on utilise l'intégration serveur, d'accord ?

140
00:06:41,460 --> 00:06:43,160
‫Et donc, bien sûr, nous

141
00:06:43,160 --> 00:06:45,010
‫devons encore faire quelque chose du

142
00:06:45,010 --> 00:06:48,720
‫côté client, mais la plupart du code sera en fait du côté serveur.

143
00:06:48,720 --> 00:06:52,220
‫D'accord, alors vous voyez qu'il y a vraiment beaucoup

144
00:06:52,220 --> 00:06:56,930
‫de choses à faire avec Stripe, et nous pouvons même en faire beaucoup plus.

145
00:06:56,930 --> 00:07:01,210
‫Nous pourrions donc avoir une facturation là où nous avons des abonnements où nous

146
00:07:01,210 --> 00:07:04,050
‫avons des factures et toutes ces bonnes choses.

147
00:07:04,050 --> 00:07:06,040
‫Donc vraiment, vous pouvez créer

148
00:07:06,040 --> 00:07:09,330
‫une énorme entreprise sur Stripe et accepter des abonnements, enregistrer

149
00:07:09,330 --> 00:07:11,350
‫des clients dans des bases de

150
00:07:11,350 --> 00:07:13,543
‫données et tout cela intégré à Stripe.

151
00:07:14,940 --> 00:07:16,850
‫Mais encore une fois, ce que nous

152
00:07:16,850 --> 00:07:19,040
‫allons faire ici, c'est simplement utiliser Checkout, mais

153
00:07:19,040 --> 00:07:21,090
‫la version la plus complète de celui-ci

154
00:07:21,090 --> 00:07:22,963
‫en utilisant le serveur Checkout.

155
00:07:24,640 --> 00:07:27,130
‫D'accord, mais maintenant, avant de commencer à

156
00:07:27,130 --> 00:07:29,690
‫intégrer le produit Stripe Checkout dans notre application,

157
00:07:29,690 --> 00:07:31,210
‫je voulais juste

158
00:07:31,210 --> 00:07:34,353
‫mettre en page rapidement l'ensemble du flux de travail

159
00:07:34,353 --> 00:07:37,920
‫que nous allons implémenter au cours des deux prochaines vidéos.

160
00:07:37,920 --> 00:07:40,200
‫Tout commence donc sur le

161
00:07:40,200 --> 00:07:42,850
‫back-end où nous allons implémenter une route

162
00:07:42,850 --> 00:07:45,600
‫pour créer une session dite Stripe Checkout.

163
00:07:45,600 --> 00:07:48,170
‫Et cette session va contenir un tas

164
00:07:48,170 --> 00:07:50,970
‫de données sur l'objet qui peut être acheté.

165
00:07:50,970 --> 00:07:53,070
‫Et dans notre exemple, c'est la tournée.

166
00:07:53,070 --> 00:07:55,480
‫Ainsi, la session contiendra le prix du

167
00:07:55,480 --> 00:07:59,640
‫voyage, le nom du voyage, une image du produit, ainsi que d'autres

168
00:07:59,640 --> 00:08:01,450
‫détails comme l'e-mail du client.

169
00:08:01,450 --> 00:08:04,530
‫Nous verrons donc cela dans la prochaine vidéo.

170
00:08:04,530 --> 00:08:07,370
‫Ensuite, sur le front-end, nous allons créer une fonction

171
00:08:07,370 --> 00:08:10,580
‫pour demander la session de paiement au serveur une fois que

172
00:08:10,580 --> 00:08:13,120
‫l'utilisateur a cliqué sur le bouton d'achat.

173
00:08:13,120 --> 00:08:14,550
‫Ainsi, une fois que nous

174
00:08:14,550 --> 00:08:16,350
‫avons atteint le point final que nous

175
00:08:16,350 --> 00:08:19,360
‫avons créé sur le back-end, cela créera alors une session et

176
00:08:19,360 --> 00:08:20,720
‫la renverra au client.

177
00:08:20,720 --> 00:08:22,590
‫Ensuite, en fonction de cette

178
00:08:22,590 --> 00:08:26,010
‫session, Stripe créera automatiquement une page de paiement pour nous

179
00:08:26,010 --> 00:08:28,640
‫où l'utilisateur pourra ensuite saisir tous les détails

180
00:08:28,640 --> 00:08:32,670
‫tels que le numéro de carte de crédit, la date d'expiration, etc.

181
00:08:32,670 --> 00:08:34,760
‫Ensuite, encore une fois, en utilisant

182
00:08:34,760 --> 00:08:37,360
‫The Session, nous débiterons enfin la carte de crédit.

183
00:08:37,360 --> 00:08:39,700
‫Et pour ça, on va avoir besoin de la clé

184
00:08:39,700 --> 00:08:41,830
‫publique, donc celle qu'on vient de voir avant.

185
00:08:41,830 --> 00:08:44,270
‫Donc, la clé secrète dont nous aurons besoin sur

186
00:08:44,270 --> 00:08:46,330
‫le serveur comme vous le verrez

187
00:08:46,330 --> 00:08:49,820
‫dans la première étape, et la clé publique sera utilisée sur le front-end.

188
00:08:49,820 --> 00:08:51,730
‫Et ce qui est vraiment important

189
00:08:51,730 --> 00:08:53,180
‫à noter ici, c'est

190
00:08:53,180 --> 00:08:54,930
‫que c'est vraiment Stripe, qui

191
00:08:54,930 --> 00:08:57,480
‫avec The Session, débitera la carte de crédit, et

192
00:08:57,480 --> 00:09:00,720
‫donc, les détails de la carte de crédit n'atteignent même jamais

193
00:09:00,720 --> 00:09:03,800
‫notre serveur, ce qui rend notre vie de développeurs beaucoup plus

194
00:09:03,800 --> 00:09:05,870
‫facile car alors nous n'avons pas à

195
00:09:05,870 --> 00:09:08,500
‫nous occuper de toutes les questions de sécurité liées

196
00:09:08,500 --> 00:09:12,000
‫à la gestion et au stockage des cartes de crédit, d'accord ?

197
00:09:12,000 --> 00:09:14,450
‫Stripe nous enlève donc tout

198
00:09:14,450 --> 00:09:18,030
‫cela, nous utilisons simplement leur API comme ceci.

199
00:09:18,030 --> 00:09:21,840
‫Quoi qu'il en soit, une fois que la carte de crédit a été

200
00:09:21,840 --> 00:09:24,460
‫débitée avec succès, nous pouvons alors utiliser quelque

201
00:09:24,460 --> 00:09:28,210
‫chose appelé Stripe Webhooks sur notre back-end, afin de créer de nouvelles réservations.

202
00:09:28,210 --> 00:09:30,090
‫Désormais, cette partie du flux

203
00:09:30,090 --> 00:09:32,710
‫de travail ne fonctionnera que pour les sites Web

204
00:09:32,710 --> 00:09:35,900
‫déployés, donc les sites Web qui s'exécutent déjà sur un serveur.

205
00:09:35,900 --> 00:09:37,770
‫Et donc cette partie du

206
00:09:37,770 --> 00:09:39,690
‫workflow, nous ne pourrons la mettre en

207
00:09:39,690 --> 00:09:42,830
‫œuvre qu'à la fin de la section suivante, d'accord ?

208
00:09:42,830 --> 00:09:44,310
‫Mais pour l'instant, nous

209
00:09:44,310 --> 00:09:46,270
‫allons en fait trouver une solution de contournement

210
00:09:46,270 --> 00:09:47,770
‫temporaire à cela, qui n'est pas

211
00:09:47,770 --> 00:09:50,870
‫vraiment sécurisée, mais cela fonctionnera très bien pour le moment, d'accord ?

212
00:09:50,870 --> 00:09:54,060
‫Gardez donc ce schéma à l'esprit et également ce concept selon

213
00:09:54,060 --> 00:09:57,410
‫lequel nous utilisons réellement The Session pour débiter une carte de crédit

214
00:09:57,410 --> 00:09:59,940
‫et nous ne le faisons pas vraiment directement.

215
00:09:59,940 --> 00:10:01,803
‫Alors, rendez-vous dans la prochaine vidéo.