1
00:00:01,010 --> 00:00:02,600
‫Istruttore: In questa lezione impareremo

2
00:00:02,600 --> 00:00:04,910
‫come elaborare i pagamenti con lo stripe, sul

3
00:00:04,910 --> 00:00:08,203
‫front-end ogni volta che un utente fa clic su un pulsante.

4
00:00:09,840 --> 00:00:12,860
‫E per iniziare, configuriamolo con quel pulsante in modo che

5
00:00:12,860 --> 00:00:15,350
‫appaia solo ogni volta che un utente ha

6
00:00:15,350 --> 00:00:16,563
‫effettivamente effettuato l'accesso.

7
00:00:17,920 --> 00:00:19,763
‫Quindi qui nella pagina dei

8
00:00:21,260 --> 00:00:23,540
‫dettagli del tour, in questo momento

9
00:00:23,540 --> 00:00:27,250
‫abbiamo un utente connesso, e quindi quel pulsante dice prenota

10
00:00:27,250 --> 00:00:29,180
‫tour ora, ma dovrebbe essere

11
00:00:29,180 --> 00:00:31,450
‫così solo quando c'è un utente

12
00:00:31,450 --> 00:00:32,430
‫attualmente connesso,

13
00:00:32,430 --> 00:00:36,129
‫e in caso contrario, ci reindirizzerebbe alla pagina di accesso.

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

15
00:00:37,240 --> 00:00:40,463
‫Quindi implementiamolo nel modello del tour.

16
00:00:43,210 --> 00:00:45,570
‫E quindi è proprio qui, quindi

17
00:00:45,570 --> 00:00:47,313
‫questo è questo pulsante.

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

19
00:00:49,380 --> 00:00:52,300
‫Ora, se al momento c'è un

20
00:00:52,300 --> 00:00:55,860
‫utente connesso, significa che abbiamo accesso alla variabile

21
00:00:55,860 --> 00:01:00,860
‫utente, e quindi possiamo fare se l'utente è ben oltre questo.

22
00:01:02,440 --> 00:01:05,390
‫E se non c'è un utente, altrimenti, beh, allora

23
00:01:05,390 --> 00:01:08,260
‫vogliamo semplicemente visualizzare un pulsante, che ci porta

24
00:01:08,260 --> 00:01:10,143
‫alla pagina di accesso.

25
00:01:13,490 --> 00:01:16,540
‫E quindi, accedi per prenotare

26
00:01:16,540 --> 00:01:20,610
‫il tour, e questo dovrebbe essere in realtà

27
00:01:20,610 --> 00:01:23,060
‫un collegamento, quindi abbiamo

28
00:01:23,060 --> 00:01:26,583
‫bisogno di un elemento A per l'ancora.

29
00:01:27,801 --> 00:01:31,970
‫Specifichiamo quindi anche la proprietà hf, che di nuovo

30
00:01:31,970 --> 00:01:34,873
‫ci indirizzerà alla pagina di login,

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

32
00:01:35,990 --> 00:01:39,173
‫Ora qui dobbiamo anche aggiungere un ID, prenotare il

33
00:01:41,710 --> 00:01:46,200
‫tour in modo che possiamo selezionarlo nel nostro JavaScript, e anche qualcosa

34
00:01:46,200 --> 00:01:47,860
‫di molto importante,

35
00:01:47,860 --> 00:01:50,700
‫è che dovremmo mettere l'ID del tour corrente

36
00:01:50,700 --> 00:01:53,020
‫proprio qui in questo elemento, ok?

37
00:01:53,020 --> 00:01:55,200
‫Perché è così importante?

38
00:01:55,200 --> 00:01:58,913
‫Bene, ricorda come l'endpoint API che abbiamo appena creato.

39
00:01:59,780 --> 00:02:02,840
‫Quindi questo qui ha bisogno dell'ID del tour, e

40
00:02:02,840 --> 00:02:06,970
‫quindi quell'ID del tour deve provenire da qualche parte fondamentalmente, e quindi

41
00:02:06,970 --> 00:02:09,470
‫in questo momento non abbiamo quell'informazione da

42
00:02:09,470 --> 00:02:11,410
‫nessuna parte in questa pagina,

43
00:02:11,410 --> 00:02:14,380
‫quindi la metteremo qui proprio su questo elemento, quindi

44
00:02:14,380 --> 00:02:17,440
‫che allora o il file JavaScript può prenderlo da

45
00:02:17,440 --> 00:02:19,050
‫qui e inviarlo insieme

46
00:02:19,050 --> 00:02:22,140
‫alla richiesta al percorso della sessione di checkout, ok?

47
00:02:22,140 --> 00:02:24,700
‫Quindi, proprio come abbiamo fatto qui con una

48
00:02:24,700 --> 00:02:27,170
‫mappa, useremo un attributo di dati, e

49
00:02:27,170 --> 00:02:28,417
‫quindi questo è data-,

50
00:02:29,548 --> 00:02:31,880
‫e quindi praticamente qualunque nome di variabile

51
00:02:31,880 --> 00:02:32,913
‫vogliamo definire.

52
00:02:33,940 --> 00:02:36,753
‫E quindi questo è l'id del tour in questo caso.

53
00:02:40,810 --> 00:02:44,113
‫Quindi tour. id, va bene?

54
00:02:45,380 --> 00:02:47,010
‫Quindi dai

55
00:02:47,010 --> 00:02:50,210
‫alla cassaforte e proviamolo ora.

56
00:02:50,210 --> 00:02:52,400
‫Quindi ricaricate la pagina, e

57
00:02:52,400 --> 00:02:53,960
‫prima di tutto

58
00:02:53,960 --> 00:02:56,640
‫ispezioniamola per vedere se l'idea c'è

59
00:02:56,640 --> 00:02:58,950
‫davvero, e infatti ci siamo.

60
00:02:58,950 --> 00:03:00,793
‫E ora se ci disconnettiamo.

61
00:03:04,240 --> 00:03:06,160
‫Allora vediamo cosa abbiamo, e infatti ora

62
00:03:06,160 --> 00:03:07,740
‫c'è scritto, effettua il login

63
00:03:07,740 --> 00:03:09,183
‫per prenotare il tour.

64
00:03:10,080 --> 00:03:13,153
‫Ottimo, e facciamolo davvero.

65
00:03:19,080 --> 00:03:20,490
‫Ora va bene?

66
00:03:20,490 --> 00:03:23,130
‫E quindi ora creiamo uno script in

67
00:03:23,130 --> 00:03:25,320
‫cui eseguiremo effettivamente la richiesta

68
00:03:25,320 --> 00:03:27,603
‫ed elaboreremo il pagamento sul front-end.

69
00:03:28,580 --> 00:03:32,690
‫E così, proprio come prima, sarà in pubblico,

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

71
00:03:35,510 --> 00:03:36,943
‫Quindi un altro script qui.

72
00:03:38,550 --> 00:03:41,233
‫E lo chiamerò striscia. js.

73
00:03:44,440 --> 00:03:46,540
‫E ora qui abbiamo effettivamente

74
00:03:46,540 --> 00:03:49,650
‫bisogno di accedere di nuovo alla libreria stripe, ma

75
00:03:49,650 --> 00:03:52,500
‫quel pacchetto che abbiamo appena installato prima,

76
00:03:52,500 --> 00:03:56,293
‫quindi ricorda quel pacchetto stripe MPM che abbiamo usato qui.

77
00:03:57,240 --> 00:04:00,080
‫Quindi questo funziona solo per il back-end, e

78
00:04:00,080 --> 00:04:01,930
‫quello che dobbiamo fare sul

79
00:04:01,930 --> 00:04:05,720
‫front-end è includere effettivamente uno script nell'HTML, e poiché abbiamo solo bisogno

80
00:04:05,720 --> 00:04:09,160
‫di quello script qui nella pagina del tour, lo faremo

81
00:04:09,160 --> 00:04:12,643
‫proprio come noi fatto con lo script della casella della mappa.

82
00:04:13,740 --> 00:04:14,860
‫Quindi questo, lo

83
00:04:14,860 --> 00:04:18,170
‫metteremo qui in questo blocco di testa, va

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

85
00:04:19,260 --> 00:04:21,760
‫Ora di quale script abbiamo effettivamente bisogno?

86
00:04:21,760 --> 00:04:25,330
‫Bene, questo possiamo semplicemente ricavarlo dalla documentazione che abbiamo

87
00:04:25,330 --> 00:04:27,600
‫già visto prima, e

88
00:04:27,600 --> 00:04:30,850
‫spero che tu non l'abbia chiusa, va bene?

89
00:04:30,850 --> 00:04:33,830
‫E così di nuovo questo qui spiega come utilizziamo

90
00:04:33,830 --> 00:04:36,040
‫il prodotto di pagamento sia sul

91
00:04:36,040 --> 00:04:37,740
‫client che sul server.

92
00:04:38,940 --> 00:04:41,090
‫Quindi qui vediamo che abbiamo due

93
00:04:41,090 --> 00:04:44,120
‫passaggi, prima la creazione della sessione di checkout sul

94
00:04:44,120 --> 00:04:45,630
‫server, e quindi questo

95
00:04:45,630 --> 00:04:48,170
‫è molto simile a quello che abbiamo fatto

96
00:04:48,170 --> 00:04:52,140
‫prima nell'ultimo video, e quindi ora dobbiamo aggiungerlo anche al nostro front-end.

97
00:04:52,140 --> 00:04:56,760
‫E quindi lo script di cui abbiamo bisogno è questo, va bene?

98
00:04:56,760 --> 00:04:59,513
‫Quindi copiamolo e torniamo indietro.

99
00:05:02,980 --> 00:05:05,143
‫E ora dobbiamo adattarci un po'.

100
00:05:12,940 --> 00:05:14,280
‫Adesso giusto?

101
00:05:14,280 --> 00:05:18,790
‫Quindi si trattava di esporre un oggetto stripe all'ambito globale,

102
00:05:18,790 --> 00:05:21,960
‫quindi ora in questo file possiamo usarlo.

103
00:05:21,960 --> 00:05:22,863
‫Quindi diciamo,

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

105
00:05:27,510 --> 00:05:29,300
‫poi questo è quell'oggetto che

106
00:05:29,300 --> 00:05:31,940
‫otteniamo dallo script che abbiamo appena incluso, e

107
00:05:31,940 --> 00:05:35,410
‫poi qui abbiamo bisogno della nostra chiave pubblica, va bene?

108
00:05:35,410 --> 00:05:38,180
‫Quindi abbiamo già usato la nostra chiave segreta sul

109
00:05:38,180 --> 00:05:41,040
‫backend, ora è il momento di usare la nostra chiave pubblica.

110
00:05:41,040 --> 00:05:43,620
‫Quindi torniamo alla dashboard, e in

111
00:05:43,620 --> 00:05:45,910
‫realtà se sei nella documentazione, verrà

112
00:05:45,910 --> 00:05:48,530
‫già mostrata qui per te, quindi questa

113
00:05:48,530 --> 00:05:50,290
‫è una caratteristica

114
00:05:50,290 --> 00:05:52,310
‫davvero interessante delle documentazioni stripe.

115
00:05:52,310 --> 00:05:53,467
‫Quindi, ogni volta

116
00:05:53,467 --> 00:05:55,350
‫che accedi, questa chiave che hai

117
00:05:55,350 --> 00:05:57,850
‫qui è in realtà la tua chiave pubblica.

118
00:05:57,850 --> 00:06:00,220
‫Ma se non sei su quella

119
00:06:00,220 --> 00:06:03,078
‫pagina, puoi ovviamente anche ottenere la tua

120
00:06:03,078 --> 00:06:05,510
‫chiave API andando alla homepage o

121
00:06:05,510 --> 00:06:07,440
‫alla pagina degli sviluppatori,

122
00:06:07,440 --> 00:06:09,200
‫proviamo effettivamente quella.

123
00:06:09,200 --> 00:06:11,020
‫Quindi qui sulle chiavi

124
00:06:11,020 --> 00:06:14,450
‫API, hai la tua chiave di prova pubblica proprio qui.

125
00:06:14,450 --> 00:06:16,210
‫Quindi prendilo e

126
00:06:16,210 --> 00:06:18,983
‫poi torniamo indietro e passiamolo qui.

127
00:06:22,080 --> 00:06:23,470
‫E proprio

128
00:06:23,470 --> 00:06:26,603
‫come prima, voglio disabilitare rapidamente eslint qui.

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

130
00:06:32,053 --> 00:06:35,503
‫E ora creiamo finalmente una funzione,

131
00:06:36,860 --> 00:06:39,343
‫che chiamerò book tour.

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

133
00:06:41,510 --> 00:06:44,763
‫E quindi questa funzione avrà un ID tour.

134
00:06:46,220 --> 00:06:50,030
‫E quindi l'ID del tour è quello che arriverà

135
00:06:50,030 --> 00:06:52,870
‫proprio qui da questa interfaccia utente.

136
00:06:52,870 --> 00:06:57,160
‫Quindi proprio da qui, ok?

137
00:06:57,160 --> 00:06:58,430
‫Quindi, proprio come

138
00:06:58,430 --> 00:07:01,420
‫prima, lo prenderemo da index. js

139
00:07:01,420 --> 00:07:06,393
‫dove chiameremo anche questo libro Tour, ok?

140
00:07:06,393 --> 00:07:08,960
‫Quindi molto simile a quello che abbiamo fatto prima.

141
00:07:08,960 --> 00:07:11,850
‫Ad ogni modo, ora specifichiamo ancora una volta i

142
00:07:11,850 --> 00:07:13,550
‫passi che faremo qui.

143
00:07:13,550 --> 00:07:16,150
‫Quindi il primo passo è ottenere effettivamente

144
00:07:16,150 --> 00:07:17,860
‫la sessione dal

145
00:07:17,860 --> 00:07:22,580
‫server, ed è qui che entra in gioco questo percorso, ok?

146
00:07:22,580 --> 00:07:25,260
‫Quindi questo è il punto in cui utilizzeremo

147
00:07:25,260 --> 00:07:28,040
‫questo endpoint per portare davvero la nostra sessione di

148
00:07:28,040 --> 00:07:29,443
‫checkout sul lato client.

149
00:07:31,550 --> 00:07:32,383
‫Va bene?

150
00:07:33,230 --> 00:07:36,573
‫Quindi controlla la sessione.

151
00:07:39,810 --> 00:07:43,933
‫Dall'endpoint o dall'API non importa.

152
00:07:45,600 --> 00:07:47,410
‫Fatto ciò come

153
00:07:47,410 --> 00:07:49,260
‫secondo passaggio, utilizzeremo il

154
00:07:49,260 --> 00:07:54,260
‫nostro oggetto stripe per creare fondamentalmente automaticamente il modulo di pagamento,

155
00:07:57,657 --> 00:08:01,023
‫+ processo o diciamo + addebito, la

156
00:08:02,490 --> 00:08:05,110
‫carta di credito per noi, ok?

157
00:08:05,110 --> 00:08:06,350
‫Ed è proprio

158
00:08:06,350 --> 00:08:08,020
‫così, quindi solo due semplici

159
00:08:08,020 --> 00:08:11,023
‫passaggi e vedrai che in realtà sono piuttosto semplici.

160
00:08:12,200 --> 00:08:16,983
‫Quindi memorizziamo la sessione in una variabile chiamata sessione.

161
00:08:17,850 --> 00:08:21,500
‫E poi aspetteremo una richiesta HTTP, che ancora

162
00:08:21,500 --> 00:08:24,323
‫una volta faremo con axios.

163
00:08:26,170 --> 00:08:27,130
‫Bene?

164
00:08:27,130 --> 00:08:28,793
‫Quindi devo prenderlo qui.

165
00:08:29,840 --> 00:08:32,260
‫Quindi importa axios e ancora

166
00:08:32,260 --> 00:08:35,810
‫una volta sto usando la sintassi del modulo ES6.

167
00:08:35,810 --> 00:08:40,200
‫Ricordatelo, da axios.

168
00:08:40,200 --> 00:08:43,620
‫Quindi, proprio come abbiamo fatto ad esempio nel login

169
00:08:43,620 --> 00:08:46,033
‫o nelle impostazioni di aggiornamento, giusto?

170
00:08:47,440 --> 00:08:50,093
‫Ora dobbiamo anche contrassegnare questa funzione come asincrona.

171
00:08:52,240 --> 00:08:53,240
‫Va bene?

172
00:08:53,240 --> 00:08:54,660
‫E poi in

173
00:08:54,660 --> 00:08:57,300
‫axios, possiamo semplicemente passare l'URL, quando tutto

174
00:08:57,300 --> 00:09:00,660
‫ciò che vogliamo fare è una semplice richiesta GET.

175
00:09:00,660 --> 00:09:01,493
‫Va bene?

176
00:09:01,493 --> 00:09:02,420
‫Quindi fino

177
00:09:02,420 --> 00:09:04,510
‫a questo punto abbiamo sempre specificato

178
00:09:04,510 --> 00:09:06,740
‫il metodo, l'URL ei dati, ma

179
00:09:06,740 --> 00:09:09,110
‫ora stiamo solo eseguendo una richiesta GET,

180
00:09:09,110 --> 00:09:11,053
‫quindi è molto più semplice.

181
00:09:13,220 --> 00:09:15,520
‫Prendiamo l'URL qui, in

182
00:09:15,520 --> 00:09:18,413
‫modo da non perdere altro tempo.

183
00:09:19,840 --> 00:09:23,693
‫Allora ecco api/v1/bookings.

184
00:09:26,550 --> 00:09:27,993
‫Quindi controlla la sessione.

185
00:09:30,360 --> 00:09:32,273
‫E poi l'id del tour.

186
00:09:33,690 --> 00:09:35,680
‫Quindi questo è

187
00:09:35,680 --> 00:09:38,203
‫questo qui, che diventerà disfunzionale,

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

189
00:09:41,440 --> 00:09:43,170
‫E diamo un'occhiata a

190
00:09:43,170 --> 00:09:45,623
‫questo oggetto sessione nella nostra console,

191
00:09:46,630 --> 00:09:48,850
‫solo per vedere se tutto

192
00:09:48,850 --> 00:09:49,840
‫funziona, ok?

193
00:09:49,840 --> 00:09:52,490
‫Quindi ora nel nostro indice. js fondamentalmente collegheremo

194
00:09:52,490 --> 00:09:56,013
‫il pulsante verde con la disfunzione che abbiamo appena

195
00:09:56,013 --> 00:09:59,263
‫creato all'interno di stripe. js.

196
00:10:01,650 --> 00:10:02,633
‫Quindi importa.

197
00:10:05,330 --> 00:10:08,097
‫Prenota tour da stripe.

198
00:10:11,760 --> 00:10:16,323
‫Poi come sempre selezioniamo il nostro elemento dalla pagina web.

199
00:10:18,240 --> 00:10:23,213
‫Quindi il pulsante del libro è = per documentare. ottieni l'elemento per ID e l'ID

200
00:10:24,290 --> 00:10:26,313
‫da ricordare è, credo che

201
00:10:28,680 --> 00:10:30,423
‫prenota il tour.

202
00:10:31,450 --> 00:10:32,390
‫Quindi sì,

203
00:10:32,390 --> 00:10:35,623
‫questo è l'ID che abbiamo appena aggiunto prima dell'ID del libro.

204
00:10:39,770 --> 00:10:43,023
‫E così ora possiamo aggiungere quel gestore di eventi ad esso.

205
00:10:44,800 --> 00:10:48,047
‫Quindi, se c'è un pulsante per prenotare,

206
00:10:49,986 --> 00:10:52,486
‫allora bookBtn. addeventlistener, in

207
00:10:55,430 --> 00:10:57,310
‫attesa di un clic, abbiamo

208
00:10:57,310 --> 00:10:59,720
‫bisogno anche dell'evento, e ora dobbiamo ottenere

209
00:10:59,720 --> 00:11:02,990
‫l'ID del tour da quel pulsante, quindi questo è

210
00:11:02,990 --> 00:11:05,170
‫tourid =, e ora quando striscio

211
00:11:08,820 --> 00:11:12,230
‫qui che è e. target,

212
00:11:12,230 --> 00:11:14,170
‫e forse lo

213
00:11:14,170 --> 00:11:18,860
‫conosci, quindi event. target è fondamentalmente l'elemento su cui è stato

214
00:11:18,860 --> 00:11:21,700
‫fatto clic, quindi quello che ha attivato questo listener di eventi

215
00:11:21,700 --> 00:11:23,530
‫qui per essere attivato, va bene?

216
00:11:23,530 --> 00:11:26,273
‫E così sarà ovviamente questo pulsante.

217
00:11:27,910 --> 00:11:30,210
‫Quindi lì dentro abbiamo l'ID del tour,

218
00:11:30,210 --> 00:11:31,400
‫e quindi in

219
00:11:31,400 --> 00:11:33,573
‫JavaScript, che verrà effettivamente chiamato tour,

220
00:11:35,270 --> 00:11:37,860
‫quindi in questo modo lascia che lo scriva.

221
00:11:37,860 --> 00:11:39,420
‫Quindi l'ID del tour,

222
00:11:39,420 --> 00:11:40,750
‫quindi ogni volta

223
00:11:40,750 --> 00:11:42,640
‫che c'è un -, verrà automaticamente

224
00:11:42,640 --> 00:11:44,363
‫convertito in questa notazione CamelCase.

225
00:11:46,040 --> 00:11:47,100
‫Va bene?

226
00:11:47,100 --> 00:11:51,297
‫Quindi e. obbiettivo. insieme di dati. turistico.

227
00:11:53,820 --> 00:11:57,660
‫Ma ora dal momento che questo nome è esattamente lo stesso di questo,

228
00:11:57,660 --> 00:11:59,793
‫possiamo semplicemente usare la strutturazione su quello.

229
00:12:02,700 --> 00:12:05,313
‫Quindi ancora una volta usando questo bel trucco.

230
00:12:07,630 --> 00:12:12,203
‫E poi chiamiamo book tour con quell'ID tour.

231
00:12:13,400 --> 00:12:15,470
‫E un'altra cosa carina che possiamo

232
00:12:15,470 --> 00:12:18,140
‫fare qui, è cambiare il testo del

233
00:12:18,140 --> 00:12:20,920
‫pulsante in qualcosa come l'elaborazione, e quindi facciamo

234
00:12:20,920 --> 00:12:24,230
‫di nuovo e. obbiettivo.

235
00:12:24,230 --> 00:12:26,960
‫Quindi di nuovo l'elemento su cui è stato fatto clic,

236
00:12:26,960 --> 00:12:30,190
‫quindi questo è il pulsante. textcontent che

237
00:12:30,190 --> 00:12:33,070
‫abbiamo usato prima di ascoltare,

238
00:12:33,070 --> 00:12:35,450
‫quindi per cambiare il

239
00:12:35,450 --> 00:12:40,310
‫testo in un elemento e cambiarlo in elaborazione,

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

241
00:12:41,143 --> 00:12:41,976
‫E quindi

242
00:12:41,976 --> 00:12:45,190
‫con questo penso che abbiamo tutto collegato correttamente.

243
00:12:45,190 --> 00:12:46,680
‫Quindi facciamo clic su

244
00:12:46,680 --> 00:12:49,840
‫quel pulsante, quindi cambiamo il testo su quel

245
00:12:49,840 --> 00:12:52,110
‫pulsante, quindi otteniamo l'ID del tour

246
00:12:52,110 --> 00:12:54,570
‫dall'attributo dei dati che è sul

247
00:12:54,570 --> 00:12:58,170
‫pulsante e chiamiamo il tour del libro con quell'ID,

248
00:12:58,170 --> 00:12:59,003
‫ok?

249
00:12:59,003 --> 00:13:02,143
‫E così quell'ID verrà quindi passato a questo

250
00:13:03,000 --> 00:13:06,520
‫URL, che a sua volta dovrebbe restituire una sessione di

251
00:13:06,520 --> 00:13:07,353
‫pagamento, ok?

252
00:13:07,353 --> 00:13:09,243
‫E poi qui daremo un'occhiata a

253
00:13:10,450 --> 00:13:11,620
‫questo, proprio così.

254
00:13:11,620 --> 00:13:14,010
‫A questo punto non creeremo

255
00:13:14,010 --> 00:13:16,770
‫ancora il modulo di pagamento, quindi

256
00:13:16,770 --> 00:13:20,133
‫lo lasceremo per l'ultimo passaggio di questo video.

257
00:13:21,400 --> 00:13:23,950
‫Ma per ora voglio dare un'occhiata a

258
00:13:23,950 --> 00:13:25,330
‫questo, vediamo solo

259
00:13:25,330 --> 00:13:27,960
‫se il pacchetto è ancora in esecuzione

260
00:13:27,960 --> 00:13:30,370
‫qui in background, quindi raggruppando tutti

261
00:13:30,370 --> 00:13:32,030
‫i nostri script insieme,

262
00:13:32,030 --> 00:13:35,823
‫e sembra che lo sia, quindi non proviamo effettivamente questo.

263
00:13:37,320 --> 00:13:38,830
‫Quindi abbiamo effettuato l'accesso,

264
00:13:38,830 --> 00:13:40,603
‫ora proviamo a Park Camper.

265
00:13:42,740 --> 00:13:45,793
‫Qui sotto, fai clic su questo pulsante.

266
00:13:47,120 --> 00:13:50,240
‫E sembra che non riceviamo alcun errore, quindi

267
00:13:50,240 --> 00:13:52,070
‫va bene, ora diamo

268
00:13:52,070 --> 00:13:54,073
‫un'occhiata alla nostra console e

269
00:13:54,970 --> 00:13:57,230
‫abbiamo un oggetto, e questo

270
00:13:57,230 --> 00:14:00,350
‫è il risultato di questa chiamata axios, quindi

271
00:14:00,350 --> 00:14:03,140
‫axios crea sempre un oggetto come questo

272
00:14:03,140 --> 00:14:06,560
‫, dove c'è un oggetto chiamato data, che è

273
00:14:06,560 --> 00:14:08,230
‫la risposta effettiva.

274
00:14:08,230 --> 00:14:11,623
‫E così qui vedete che abbiamo davvero la nostra sessione.

275
00:14:12,830 --> 00:14:15,330
‫Quindi vedete, abbiamo l'e-mail

276
00:14:15,330 --> 00:14:18,090
‫del cliente, abbiamo l'attuale ID

277
00:14:18,090 --> 00:14:22,138
‫del tour, ora vediamo se abbiamo, (borbotta) Quindi

278
00:14:22,138 --> 00:14:23,100
‫qui

279
00:14:23,100 --> 00:14:25,653
‫abbiamo alcuni dati sul tour.

280
00:14:26,670 --> 00:14:29,953
‫E così ora tutto sembra corretto qui.

281
00:14:31,240 --> 00:14:32,610
‫Bene?

282
00:14:32,610 --> 00:14:34,290
‫Quindi chiudiamolo e ora,

283
00:14:34,290 --> 00:14:36,070
‫come ultimo passaggio, creiamo

284
00:14:36,070 --> 00:14:39,310
‫fondamentalmente il modulo di pagamento e addebitiamo la

285
00:14:39,310 --> 00:14:40,893
‫carta di credito.

286
00:14:44,950 --> 00:14:46,250
‫Bene?

287
00:14:46,250 --> 00:14:48,650
‫E in realtà avvolgiamo anche tutto questo

288
00:14:48,650 --> 00:14:51,043
‫qui in un blocco try catch.

289
00:14:52,080 --> 00:14:55,750
‫Perché ovviamente abbiamo alcune chiamate asincrone qui, ed entrambe ne

290
00:14:55,750 --> 00:14:57,830
‫hanno un'altra in un

291
00:14:57,830 --> 00:15:00,000
‫secondo, quindi è una buona pratica.

292
00:15:00,000 --> 00:15:01,603
‫Per provare un blocco di cattura.

293
00:15:04,750 --> 00:15:05,610
‫Bene?

294
00:15:05,610 --> 00:15:09,613
‫Ma non perdiamo molto tempo con questi errori.

295
00:15:11,790 --> 00:15:14,590
‫Ma mostrerò comunque un avviso in

296
00:15:14,590 --> 00:15:16,010
‫caso di errore,

297
00:15:16,010 --> 00:15:18,870
‫quindi ad esempio con questa chiamata API,

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

299
00:15:19,703 --> 00:15:21,460
‫In modo che l'utente possa sostanzialmente vedere

300
00:15:21,460 --> 00:15:22,993
‫che qualcosa è andato storto.

301
00:15:24,500 --> 00:15:29,063
‫Quindi prendiamo semplicemente questa importazione di avvisi.

302
00:15:31,530 --> 00:15:32,600
‫Bene?

303
00:15:32,600 --> 00:15:35,633
‫E poi dì Mostra avviso, specificando

304
00:15:38,000 --> 00:15:40,630
‫che si tratta di un

305
00:15:40,630 --> 00:15:44,940
‫errore, e quindi solo l'errore stesso come messaggio in pratica.

306
00:15:44,940 --> 00:15:46,250
‫Bene?

307
00:15:46,250 --> 00:15:49,220
‫Comunque per fare ora quest'ultimo passaggio, in

308
00:15:49,220 --> 00:15:51,460
‫realtà è molto, molto semplice, non

309
00:15:51,460 --> 00:15:53,673
‫ci resta che attendere.

310
00:15:56,060 --> 00:15:58,837
‫banda. redirectTocheck out,

311
00:16:02,950 --> 00:16:04,683
‫fammi vedere se ho

312
00:16:06,360 --> 00:16:08,250
‫sbagliato e fammi vedere se

313
00:16:08,250 --> 00:16:11,700
‫ho capito bene, quindi reindirizza al check out.

314
00:16:11,700 --> 00:16:12,630
‫Bene?

315
00:16:12,630 --> 00:16:15,560
‫E poi le opzioni ma

316
00:16:15,560 --> 00:16:18,870
‫solo un'opzione, che è l'ID sessione, e quindi

317
00:16:18,870 --> 00:16:22,053
‫verrà dalla sessione, e ricorda come la

318
00:16:23,140 --> 00:16:26,280
‫sessione era all'interno dei dati, quindi c'era

319
00:16:26,280 --> 00:16:30,140
‫un oggetto dati creato lì da axios, ricorda e

320
00:16:30,140 --> 00:16:34,020
‫in modo che è quindi tutta la risposta stessa.

321
00:16:34,020 --> 00:16:37,793
‫E così lì dentro abbiamo la sessione. ID.

322
00:16:38,810 --> 00:16:40,430
‫E basta,

323
00:16:40,430 --> 00:16:41,540
‫ok?

324
00:16:41,540 --> 00:16:44,210
‫E così ora arriva la parte

325
00:16:44,210 --> 00:16:48,150
‫più importante di tutte, ovvero verificare effettivamente se funziona.

326
00:16:48,150 --> 00:16:50,620
‫Quindi siamo ancora connessi, carichiamo

327
00:16:50,620 --> 00:16:52,793
‫ancora una volta questo.

328
00:16:54,470 --> 00:16:57,343
‫Fare clic su un pulsante e ora aspettarlo.

329
00:16:59,220 --> 00:17:02,810
‫E infatti arriviamo alla nostra pagina di pagamento, e otteniamo

330
00:17:02,810 --> 00:17:05,590
‫anche questa bella immagine qui, otteniamo tutto

331
00:17:05,590 --> 00:17:08,540
‫il logo di Nature qui, otteniamo qui tutte

332
00:17:08,540 --> 00:17:10,560
‫le icone, quindi tutte le

333
00:17:10,560 --> 00:17:13,270
‫cose che abbiamo specificato prima, abbiamo il

334
00:17:13,270 --> 00:17:15,710
‫prezzo che abbiamo anche specificato nel nostro

335
00:17:15,710 --> 00:17:17,540
‫sessione di checkout

336
00:17:17,540 --> 00:17:19,690
‫e davvero tutti gli altri dettagli.

337
00:17:19,690 --> 00:17:22,550
‫Quindi il nome, il riassunto

338
00:17:22,550 --> 00:17:24,336
‫e, naturalmente, l'immagine.

339
00:17:24,336 --> 00:17:27,610
‫È davvero incredibile, vero?

340
00:17:27,610 --> 00:17:31,230
‫Quindi ecco un'altra cosa grandiosa che ho menzionato prima,

341
00:17:31,230 --> 00:17:32,690
‫è che l'indirizzo

342
00:17:32,690 --> 00:17:35,100
‫email è già automaticamente precompilato, quindi

343
00:17:35,100 --> 00:17:37,463
‫questa è un'altra caratteristica davvero interessante.

344
00:17:38,560 --> 00:17:40,380
‫E quindi ora tutto ciò

345
00:17:40,380 --> 00:17:43,250
‫che dobbiamo fare è inserire queste informazioni sulla carta di

346
00:17:43,250 --> 00:17:46,410
‫credito, e quindi quando testiamo il numero della carta di credito

347
00:17:46,410 --> 00:17:49,640
‫viene visualizzato solo quattro due quattro due quattro due quattro due

348
00:17:49,640 --> 00:17:52,970
‫e così via fino a quando non abbiamo finito , va bene?

349
00:17:52,970 --> 00:17:55,850
‫Allora qui ogni mese e ogni anno va bene,

350
00:17:55,850 --> 00:17:58,290
‫quindi mettiamo solo due due due.

351
00:17:58,290 --> 00:18:01,060
‫Quindi niente in futuro, va bene?

352
00:18:01,060 --> 00:18:05,600
‫Quindi, se guardi questo corso dopo il febbraio 2022,

353
00:18:05,600 --> 00:18:08,120
‫questa data non funzionerà, quindi

354
00:18:08,120 --> 00:18:09,973
‫metti qualcosa dopo,

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

356
00:18:12,343 --> 00:18:14,530
‫Finché non funziona anche qualsiasi numero,

357
00:18:14,530 --> 00:18:16,667
‫qui funziona anche qualsiasi nome, metti

358
00:18:16,667 --> 00:18:18,580
‫Laura, anche il paese ovviamente

359
00:18:18,580 --> 00:18:22,000
‫non ha molta importanza, le persone si precompilano automaticamente

360
00:18:22,000 --> 00:18:25,390
‫in base alla posizione del tuo IP, quindi sono

361
00:18:25,390 --> 00:18:26,580
‫in Portogallo,

362
00:18:26,580 --> 00:18:29,240
‫e quindi questo è quello che ottengo.

363
00:18:29,240 --> 00:18:32,080
‫E ora vedete questo bel pulsante verde qui,

364
00:18:32,080 --> 00:18:34,100
‫e ha questo bell'effetto, quindi

365
00:18:34,100 --> 00:18:35,500
‫ora quando lo

366
00:18:36,870 --> 00:18:39,400
‫clicchiamo, si sta elaborando e abbiamo finito.

367
00:18:39,400 --> 00:18:43,281
‫Ottimo, allora questo è in realtà l'URL di successo che

368
00:18:43,281 --> 00:18:46,880
‫abbiamo anche specificato nella nostra sessione di checkout, giusto?

369
00:18:46,880 --> 00:18:48,893
‫Quindi abbiamo definito che, in

370
00:18:50,390 --> 00:18:52,250
‫caso di successo,

371
00:18:52,250 --> 00:18:54,697
‫torniamo a questo URL di casa.

372
00:18:55,863 --> 00:18:57,780
‫E lo cambieremo qui un po'

373
00:18:57,780 --> 00:19:00,450
‫più tardi, ma per ora questo è davvero quello

374
00:19:00,450 --> 00:19:02,640
‫che volevamo, e quindi ha funzionato perfettamente.

375
00:19:02,640 --> 00:19:04,370
‫Beh, almeno lo

376
00:19:04,370 --> 00:19:07,963
‫spero, quindi diamo un'occhiata a tutti i pagamenti ora.

377
00:19:10,270 --> 00:19:11,330
‫E infatti,

378
00:19:11,330 --> 00:19:13,470
‫questo è quello che abbiamo appena realizzato.

379
00:19:13,470 --> 00:19:15,890
‫Quindi abbiamo ricevuto con successo questo pagamento proprio

380
00:19:15,890 --> 00:19:17,193
‫ora nel nostro account.

381
00:19:19,810 --> 00:19:22,380
‫Quindi vedi l'indirizzo email il nome,

382
00:19:22,380 --> 00:19:26,410
‫e in effetti il parco Camper Tour che abbiamo appena acquistato.

383
00:19:26,410 --> 00:19:28,423
‫Fantastico, è davvero fantastico.

384
00:19:29,370 --> 00:19:32,990
‫Quindi quaggiù puoi vedere le commissioni che prende lo stripe,

385
00:19:32,990 --> 00:19:35,830
‫quindi ovviamente hanno anche bisogno di fare soldi,

386
00:19:35,830 --> 00:19:37,950
‫e quindi quindi prendono un

387
00:19:37,950 --> 00:19:42,440
‫taglio, che penso sia come 2. 9% o qualcosa del genere, ma ovviamente

388
00:19:42,440 --> 00:19:44,800
‫tutte quelle cose che puoi controllare sul loro

389
00:19:44,800 --> 00:19:45,893
‫sito web.

390
00:19:46,770 --> 00:19:49,690
‫Poi hai anche il metodo di pagamento qui, quindi

391
00:19:49,690 --> 00:19:51,313
‫i dati che abbiamo

392
00:19:52,480 --> 00:19:54,823
‫appena inserito, e ottieni dei bei

393
00:19:55,860 --> 00:19:59,763
‫dati sulla sessione, e probabilmente dovrebbe apparire anche qui nei tuoi clienti.

394
00:20:00,770 --> 00:20:04,180
‫E sì, davvero eccola qui, e

395
00:20:04,180 --> 00:20:06,260
‫quindi sì, penso

396
00:20:06,260 --> 00:20:09,033
‫che ora abbia abbastanza successo.

397
00:20:10,880 --> 00:20:14,010
‫Oh, e un'altra cosa che ho dimenticato di

398
00:20:14,010 --> 00:20:16,580
‫menzionare è che anche i tuoi

399
00:20:16,580 --> 00:20:18,600
‫utenti riceveranno automaticamente un'e-mail.

400
00:20:18,600 --> 00:20:22,510
‫Quindi penso che dovrebbe essere l'impostazione predefinita qui nelle ricevute

401
00:20:22,510 --> 00:20:24,540
‫e-mail, quindi vai alle tue

402
00:20:24,540 --> 00:20:27,160
‫impostazioni ricevute e-mail e quindi qui

403
00:20:27,160 --> 00:20:30,240
‫avrai i clienti e-mail sui pagamenti andati

404
00:20:30,240 --> 00:20:31,920
‫a buon fine.

405
00:20:31,920 --> 00:20:34,080
‫E quindi questa è anche una

406
00:20:34,080 --> 00:20:37,730
‫caratteristica davvero interessante, il che significa che non dobbiamo inviare e-mail manualmente

407
00:20:37,730 --> 00:20:41,580
‫ogni volta che un utente ha acquistato con successo un tour, va bene?

408
00:20:41,580 --> 00:20:45,360
‫Quindi c'è un'altra cosa che quella striscia ci

409
00:20:45,360 --> 00:20:50,000
‫toglie, Fantastic, quindi prendiamoci solo un minuto veloce per ricapitolare l'intero

410
00:20:50,000 --> 00:20:52,460
‫processo che abbiamo appena attraversato.

411
00:20:52,460 --> 00:20:55,760
‫Quindi abbiamo iniziato creando questa sessione di checkout, che

412
00:20:55,760 --> 00:20:58,440
‫richiede come input l'ID del tour, in

413
00:20:58,440 --> 00:21:02,270
‫modo da poter memorizzare una serie di dettagli sul tour

414
00:21:02,270 --> 00:21:03,840
‫in quella sessione.

415
00:21:03,840 --> 00:21:05,684
‫Quindi cose sul nome

416
00:21:05,684 --> 00:21:09,460
‫del tour, il riepilogo e anche le immagini dei prezzi.

417
00:21:09,460 --> 00:21:11,610
‫Quindi tutte quelle cose che vogliamo mostrare

418
00:21:11,610 --> 00:21:12,840
‫nella pagina di

419
00:21:12,840 --> 00:21:14,970
‫pagamento, ma anche nella nostra dashboard.

420
00:21:14,970 --> 00:21:17,750
‫Quindi includiamo anche l'e-mail in modo che l'utente non

421
00:21:17,750 --> 00:21:20,040
‫debba compilarla al momento del pagamento e

422
00:21:20,040 --> 00:21:22,190
‫poi un mucchio di altri dati.

423
00:21:22,190 --> 00:21:24,760
‫Quindi ricorda questo ID di riferimento del client,

424
00:21:24,760 --> 00:21:26,510
‫che avrà molto più senso

425
00:21:26,510 --> 00:21:28,443
‫una volta che lo utilizzeremo effettivamente.

426
00:21:29,610 --> 00:21:31,520
‫Quindi creiamo questa sessione ogni

427
00:21:32,500 --> 00:21:36,150
‫volta che qualcuno raggiunge questo percorso della sessione di check-out, va bene?

428
00:21:36,150 --> 00:21:39,770
‫E quindi è esattamente quello che facciamo poi sul nostro front-end,

429
00:21:39,770 --> 00:21:42,610
‫proprio qui a strisce. js.

430
00:21:42,610 --> 00:21:44,230
‫Quindi otteniamo la nostra sessione

431
00:21:44,230 --> 00:21:46,930
‫qui, e poi da lì creiamo un checkout e

432
00:21:46,930 --> 00:21:48,760
‫addebitiamo la carta di credito utilizzando

433
00:21:48,760 --> 00:21:51,017
‫lo stripe. redirectTocheckout, e

434
00:21:52,051 --> 00:21:53,560
‫l'oggetto stripe qui

435
00:21:53,560 --> 00:21:55,800
‫sta semplicemente usando la libreria stripe

436
00:21:55,800 --> 00:21:58,240
‫con la nostra chiave pubblica, ok?

437
00:21:58,240 --> 00:22:01,610
‫Da dove viene questo ID del tour?

438
00:22:01,610 --> 00:22:04,500
‫Bene, è memorizzato qui proprio sul pulsante in cui l'utente

439
00:22:04,500 --> 00:22:07,050
‫fa clic per prenotare un nuovo tour.

440
00:22:07,050 --> 00:22:10,770
‫Quell'ID viene quindi letto proprio qui in index. js, ogni volta

441
00:22:10,770 --> 00:22:14,130
‫che qualcuno preme il pulsante di prenotazione, ok?

442
00:22:14,130 --> 00:22:16,020
‫Quindi lo memorizziamo nell'ID del

443
00:22:16,020 --> 00:22:17,940
‫tour e lo passiamo al

444
00:22:17,940 --> 00:22:20,730
‫tour del libro, che è di nuovo questa

445
00:22:20,730 --> 00:22:23,410
‫funzione qui, che si occupa dell'elaborazione dei

446
00:22:23,410 --> 00:22:24,740
‫pagamenti sul front-end.

447
00:22:24,740 --> 00:22:26,450
‫E quindi il risultato di

448
00:22:26,450 --> 00:22:27,960
‫tutto questo è quello

449
00:22:27,960 --> 00:22:30,480
‫che abbiamo appena visto prima, dove l'utente viene

450
00:22:30,480 --> 00:22:32,380
‫realmente addebitato sulla carta di credito

451
00:22:32,380 --> 00:22:34,420
‫e ha acquistato il tour, quindi perfetto.

452
00:22:34,420 --> 00:22:35,670
‫Ora quello che

453
00:22:35,670 --> 00:22:38,440
‫manca qui è che in realtà ogni volta che

454
00:22:38,440 --> 00:22:42,540
‫c'è una nuova prenotazione, vogliamo creare un nuovo documento di prenotazione nel nostro database.

455
00:22:42,540 --> 00:22:45,060
‫Quindi, proprio come abbiamo discusso tempo fa quando

456
00:22:45,060 --> 00:22:46,940
‫abbiamo parlato di tutti i

457
00:22:46,940 --> 00:22:49,420
‫modelli di dati in questa applicazione, giusto?

458
00:22:49,420 --> 00:22:51,090
‫E così, a tal fine,

459
00:22:51,090 --> 00:22:52,960
‫creeremo il modello di prenotazione proprio

460
00:22:52,960 --> 00:22:54,240
‫nel prossimo video, lo

461
00:22:54,240 --> 00:22:55,250
‫ordineremo dopo,

462
00:22:55,250 --> 00:22:56,970
‫possiamo quindi creare nuovi tour ogni

463
00:22:56,970 --> 00:22:59,193
‫volta che c'è un acquisto di successo.