1
00:00:01,010 --> 00:00:02,600
‫Instrutor: Nesta aula aprenderemos

2
00:00:02,600 --> 00:00:04,910
‫como processar pagamentos com stripe, no

3
00:00:04,910 --> 00:00:08,203
‫front-end sempre que um usuário clica em um botão.

4
00:00:09,840 --> 00:00:12,860
‫E para começar, vamos configurar esse botão para

5
00:00:12,860 --> 00:00:15,350
‫que apareça apenas quando um usuário estiver

6
00:00:15,350 --> 00:00:16,563
‫realmente logado.

7
00:00:17,920 --> 00:00:19,763
‫Então, aqui na página

8
00:00:21,260 --> 00:00:23,540
‫de detalhes do tour, agora temos

9
00:00:23,540 --> 00:00:27,250
‫um usuário conectado e esse botão diz reservar tour agora,

10
00:00:27,250 --> 00:00:29,180
‫mas só deve ser assim

11
00:00:29,180 --> 00:00:31,450
‫quando houver um usuário conectado no

12
00:00:31,450 --> 00:00:32,430
‫momento,

13
00:00:32,430 --> 00:00:36,129
‫caso contrário, ele nos redirecionaria para a página de login.

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

15
00:00:37,240 --> 00:00:40,463
‫Então, vamos implementar isso no modelo de passeio.

16
00:00:43,210 --> 00:00:45,570
‫E isso está realmente bem aqui, então

17
00:00:45,570 --> 00:00:47,313
‫este é este botão.

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

19
00:00:49,380 --> 00:00:52,300
‫Agora, se houver um usuário logado

20
00:00:52,300 --> 00:00:55,860
‫no momento, isso significa que temos acesso à

21
00:00:55,860 --> 00:01:00,860
‫variável de usuário e, portanto, podemos fazer isso com o usuário.

22
00:01:02,440 --> 00:01:05,390
‫E se não houver nenhum usuário, então, então,

23
00:01:05,390 --> 00:01:08,260
‫simplesmente queremos exibir um botão, que nos leva

24
00:01:08,260 --> 00:01:10,143
‫à página de login.

25
00:01:13,490 --> 00:01:16,540
‫E então, faça o login

26
00:01:16,540 --> 00:01:20,610
‫para reservar o tour, e este deve ser

27
00:01:20,610 --> 00:01:23,060
‫um link, então precisamos

28
00:01:23,060 --> 00:01:26,583
‫de um elemento A para âncora.

29
00:01:27,801 --> 00:01:31,970
‫Vamos então especificar a propriedade hf, que novamente nos

30
00:01:31,970 --> 00:01:34,873
‫apontará para a página de login,

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

32
00:01:35,990 --> 00:01:39,173
‫Agora também precisamos adicionar um ID, um tour

33
00:01:41,710 --> 00:01:46,200
‫do livro para que possamos selecioná-lo em nosso JavaScript, e também algo

34
00:01:46,200 --> 00:01:47,860
‫muito importante, é

35
00:01:47,860 --> 00:01:50,700
‫que devemos colocar o ID do tour

36
00:01:50,700 --> 00:01:53,020
‫atual bem aqui neste elemento, certo?

37
00:01:53,020 --> 00:01:55,200
‫Agora, por que isso é tão importante?

38
00:01:55,200 --> 00:01:58,913
‫Bem, lembre-se de como o endpoint da API que acabamos de criar.

39
00:01:59,780 --> 00:02:02,840
‫Então, este aqui precisa do ID do passeio

40
00:02:02,840 --> 00:02:06,970
‫e, portanto, esse ID do passeio precisa vir de algum lugar, basicamente,

41
00:02:06,970 --> 00:02:09,470
‫e agora não temos essa informação em

42
00:02:09,470 --> 00:02:11,410
‫nenhum lugar desta página, então

43
00:02:11,410 --> 00:02:14,380
‫vamos colocá-la aqui neste elemento, que então ou

44
00:02:14,380 --> 00:02:17,440
‫o arquivo JavaScript pode pegá-lo daqui e enviá-lo

45
00:02:17,440 --> 00:02:19,050
‫junto com a

46
00:02:19,050 --> 00:02:22,140
‫solicitação para a rota de sessão de checkout, certo?

47
00:02:22,140 --> 00:02:24,700
‫Assim como fizemos aqui com um mapa,

48
00:02:24,700 --> 00:02:27,170
‫vamos usar um atributo de dados, e

49
00:02:27,170 --> 00:02:28,417
‫isso é data-,

50
00:02:29,548 --> 00:02:31,880
‫e basicamente qualquer nome de variável que

51
00:02:31,880 --> 00:02:32,913
‫desejamos definir.

52
00:02:33,940 --> 00:02:36,753
‫E então esse é o ID da turnê neste caso.

53
00:02:40,810 --> 00:02:44,113
‫Então faça um tour. id, certo?

54
00:02:45,380 --> 00:02:47,010
‫Então, doe para

55
00:02:47,010 --> 00:02:50,210
‫o cofre, e vamos tentar fazer isso agora.

56
00:02:50,210 --> 00:02:52,400
‫Portanto, recarregue a página e, em

57
00:02:52,400 --> 00:02:53,960
‫primeiro lugar, vamos

58
00:02:53,960 --> 00:02:56,640
‫inspecioná-la para ver se a ideia realmente

59
00:02:56,640 --> 00:02:58,950
‫existe e, de fato, vamos lá.

60
00:02:58,950 --> 00:03:00,793
‫E agora, se sairmos.

61
00:03:04,240 --> 00:03:06,160
‫Então vamos ver o que temos e,

62
00:03:06,160 --> 00:03:07,740
‫de fato, agora diz, faça login

63
00:03:07,740 --> 00:03:09,183
‫para reservar o passeio.

64
00:03:10,080 --> 00:03:13,153
‫Ótimo, e vamos fazer isso na verdade.

65
00:03:19,080 --> 00:03:20,490
‫Agora está bem?

66
00:03:20,490 --> 00:03:23,130
‫E agora, a seguir, vamos criar um script

67
00:03:23,130 --> 00:03:25,320
‫no qual faremos a solicitação

68
00:03:25,320 --> 00:03:27,603
‫e processaremos o pagamento no front end.

69
00:03:28,580 --> 00:03:32,690
‫E assim como antes, isso será em público, e

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

71
00:03:35,510 --> 00:03:36,943
‫Então, mais um script aqui.

72
00:03:38,550 --> 00:03:41,233
‫E vou chamá-lo de stripe. js.

73
00:03:44,440 --> 00:03:46,540
‫E agora aqui precisamos

74
00:03:46,540 --> 00:03:49,650
‫acessar a biblioteca stripe novamente, mas aquele

75
00:03:49,650 --> 00:03:52,500
‫pacote que acabamos de instalar antes,

76
00:03:52,500 --> 00:03:56,293
‫então lembre-se do pacote MPM stripe que usamos aqui.

77
00:03:57,240 --> 00:04:00,080
‫Portanto, este só funciona para o back-end, e

78
00:04:00,080 --> 00:04:01,930
‫o que precisamos fazer no

79
00:04:01,930 --> 00:04:05,720
‫front-end é realmente incluir um script no HTML e, uma vez que

80
00:04:05,720 --> 00:04:09,160
‫só precisamos desse script aqui na página de passeio, faremos

81
00:04:09,160 --> 00:04:12,643
‫exatamente como fazemos fez com o script da caixa do mapa.

82
00:04:13,740 --> 00:04:14,860
‫Então, esse aqui,

83
00:04:14,860 --> 00:04:18,170
‫vamos colocá-lo aqui neste bloco de cabeça,

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

85
00:04:19,260 --> 00:04:21,760
‫Agora, de qual script realmente precisamos?

86
00:04:21,760 --> 00:04:25,330
‫Bem, isso nós podemos simplesmente pegar a partir da documentação

87
00:04:25,330 --> 00:04:27,600
‫que já vimos antes, e

88
00:04:27,600 --> 00:04:30,850
‫espero que você não tenha fechado essa, certo?

89
00:04:30,850 --> 00:04:33,830
‫E, novamente, este aqui explica como usamos

90
00:04:33,830 --> 00:04:36,040
‫o produto de checkout no cliente

91
00:04:36,040 --> 00:04:37,740
‫e no servidor.

92
00:04:38,940 --> 00:04:41,090
‫Aqui, vemos que temos duas etapas,

93
00:04:41,090 --> 00:04:44,120
‫primeiro criando a sessão de checkout no servidor e,

94
00:04:44,120 --> 00:04:45,630
‫portanto, é muito

95
00:04:45,630 --> 00:04:48,170
‫semelhante ao que fizemos antes no último

96
00:04:48,170 --> 00:04:52,140
‫vídeo e, portanto, agora precisamos adicioná-la também ao nosso front end.

97
00:04:52,140 --> 00:04:56,760
‫E então esse script que precisamos é esse, certo?

98
00:04:56,760 --> 00:04:59,513
‫Então, vamos copiar isso e voltar.

99
00:05:02,980 --> 00:05:05,143
‫E agora precisamos nos adaptar um pouco.

100
00:05:12,940 --> 00:05:14,280
‫Agora está certo?

101
00:05:14,280 --> 00:05:18,790
‫Então, isso foi uma exposição de um objeto stripe para o escopo

102
00:05:18,790 --> 00:05:21,960
‫global, e agora neste arquivo podemos usar isso.

103
00:05:21,960 --> 00:05:22,863
‫Então

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

105
00:05:27,510 --> 00:05:29,300
‫e esse é o objeto

106
00:05:29,300 --> 00:05:31,940
‫que obtemos do script que acabamos de

107
00:05:31,940 --> 00:05:35,410
‫incluir e, então, precisamos de nossa chave pública, certo?

108
00:05:35,410 --> 00:05:38,180
‫Já usamos nossa chave secreta no backend,

109
00:05:38,180 --> 00:05:41,040
‫agora é hora de usar nossa chave pública.

110
00:05:41,040 --> 00:05:43,620
‫Então, vamos voltar ao painel e, na

111
00:05:43,620 --> 00:05:45,910
‫verdade, se você estiver na documentação, ele

112
00:05:45,910 --> 00:05:48,530
‫já aparecerá aqui para você, então esse

113
00:05:48,530 --> 00:05:50,290
‫é um recurso muito

114
00:05:50,290 --> 00:05:52,310
‫bom das documentações de stripe.

115
00:05:52,310 --> 00:05:53,467
‫Então, sempre que

116
00:05:53,467 --> 00:05:55,350
‫você estiver logado, essa chave que

117
00:05:55,350 --> 00:05:57,850
‫você tem aqui é na verdade sua chave pública.

118
00:05:57,850 --> 00:06:00,220
‫Mas se você não estiver nessa

119
00:06:00,220 --> 00:06:03,078
‫página, é claro que também pode obter sua

120
00:06:03,078 --> 00:06:05,510
‫chave de API acessando a página inicial

121
00:06:05,510 --> 00:06:07,440
‫ou a página de desenvolvedores,

122
00:06:07,440 --> 00:06:09,200
‫vamos tentar essa aqui.

123
00:06:09,200 --> 00:06:11,020
‫Então, aqui nas chaves de

124
00:06:11,020 --> 00:06:14,450
‫API, você tem sua chave de teste pública bem aqui.

125
00:06:14,450 --> 00:06:16,210
‫Então pegue isso e,

126
00:06:16,210 --> 00:06:18,983
‫em seguida, vamos voltar e passá-lo aqui.

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

128
00:06:23,470 --> 00:06:26,603
‫antes, quero desabilitar o eslint rapidamente aqui.

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

130
00:06:32,053 --> 00:06:35,503
‫E agora vamos finalmente criar uma função, que

131
00:06:36,860 --> 00:06:39,343
‫chamarei de tour do livro.

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

133
00:06:41,510 --> 00:06:44,763
‫E então esta função terá um tour ID.

134
00:06:46,220 --> 00:06:50,030
‫E então o ID do tour é o que virá bem

135
00:06:50,030 --> 00:06:52,870
‫aqui a partir desta interface do usuário.

136
00:06:52,870 --> 00:06:57,160
‫Então, a partir daqui, ok?

137
00:06:57,160 --> 00:06:58,430
‫Assim como antes,

138
00:06:58,430 --> 00:07:01,420
‫vamos obter esse do índice. js onde

139
00:07:01,420 --> 00:07:05,560
‫também chamaremos esse livro de Tour,

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

141
00:07:06,393 --> 00:07:08,960
‫Muito parecido com o que fizemos antes.

142
00:07:08,960 --> 00:07:11,850
‫De qualquer forma, vamos agora mais uma vez especificar os

143
00:07:11,850 --> 00:07:13,550
‫passos que vamos seguir aqui.

144
00:07:13,550 --> 00:07:16,150
‫Portanto, a primeira etapa é realmente

145
00:07:16,150 --> 00:07:17,860
‫obter a sessão

146
00:07:17,860 --> 00:07:22,580
‫do servidor, e é aí que entra agora essa rota, certo?

147
00:07:22,580 --> 00:07:25,260
‫Portanto, este é o ponto em que vamos usar

148
00:07:25,260 --> 00:07:28,040
‫este endpoint para realmente colocar nossa sessão de checkout

149
00:07:28,040 --> 00:07:29,443
‫no lado do cliente.

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

151
00:07:33,230 --> 00:07:36,573
‫Então dê uma olhada na sessão.

152
00:07:39,810 --> 00:07:43,933
‫Do ponto de extremidade ou da API, isso realmente não importa.

153
00:07:45,600 --> 00:07:47,410
‫Feito isso como

154
00:07:47,410 --> 00:07:49,260
‫uma segunda etapa, usaremos

155
00:07:49,260 --> 00:07:54,260
‫nosso objeto stripe para criar basicamente automaticamente o formulário de pagamento,

156
00:07:57,657 --> 00:08:01,023
‫+ processar ou, digamos, + cobrar o

157
00:08:02,490 --> 00:08:05,110
‫cartão de crédito para nós, certo?

158
00:08:05,110 --> 00:08:06,350
‫E é

159
00:08:06,350 --> 00:08:08,020
‫isso, apenas duas etapas simples

160
00:08:08,020 --> 00:08:11,023
‫e você verá que elas são realmente muito simples.

161
00:08:12,200 --> 00:08:16,983
‫Portanto, vamos armazenar a sessão em uma variável chamada sessão.

162
00:08:17,850 --> 00:08:21,500
‫E então vamos aguardar uma requisição HTTP, que

163
00:08:21,500 --> 00:08:24,323
‫mais uma vez faremos com axios.

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

165
00:08:27,130 --> 00:08:28,793
‫Então eu preciso pegar isso aqui.

166
00:08:29,840 --> 00:08:32,260
‫Portanto, importe axios e, mais

167
00:08:32,260 --> 00:08:35,810
‫uma vez, estou usando a sintaxe do módulo ES6.

168
00:08:35,810 --> 00:08:36,693
‫Lembre-se

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

170
00:08:40,200 --> 00:08:43,620
‫Assim como fizemos, por exemplo, no login ou

171
00:08:43,620 --> 00:08:46,033
‫nas configurações de atualização, certo?

172
00:08:47,440 --> 00:08:50,093
‫Agora também precisamos marcar esta função aqui como assíncrona.

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

174
00:08:53,240 --> 00:08:54,660
‫E então, no

175
00:08:54,660 --> 00:08:57,300
‫axios, podemos simplesmente passar a URL, quando

176
00:08:57,300 --> 00:09:00,660
‫tudo o que queremos fazer é uma simples solicitação GET.

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

178
00:09:01,493 --> 00:09:02,420
‫Até este

179
00:09:02,420 --> 00:09:04,510
‫ponto, sempre especificamos o método, a

180
00:09:04,510 --> 00:09:06,740
‫URL e os dados, mas agora

181
00:09:06,740 --> 00:09:09,110
‫estamos apenas fazendo uma solicitação GET, e

182
00:09:09,110 --> 00:09:11,053
‫isso é muito mais simples.

183
00:09:13,220 --> 00:09:15,520
‫Vamos pegar o URL

184
00:09:15,520 --> 00:09:18,413
‫aqui, para não perdermos mais tempo.

185
00:09:19,840 --> 00:09:23,693
‫Então aqui está api / v1 / bookings.

186
00:09:26,550 --> 00:09:27,993
‫Em seguida, verifique a sessão.

187
00:09:30,360 --> 00:09:32,273
‫E então a identificação do tour.

188
00:09:33,690 --> 00:09:35,680
‫Então é esse aqui,

189
00:09:35,680 --> 00:09:38,203
‫que vai entrar em disfunção,

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

191
00:09:41,440 --> 00:09:43,170
‫E vamos realmente dar uma

192
00:09:43,170 --> 00:09:45,623
‫olhada neste objeto de sessão em nosso

193
00:09:46,630 --> 00:09:48,850
‫console, apenas para ver se tudo

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

195
00:09:49,840 --> 00:09:52,490
‫Então, agora em nosso índice. js vamos basicamente

196
00:09:52,490 --> 00:09:56,013
‫conectar o botão verde com a disfunção que acabamos de

197
00:09:56,013 --> 00:09:59,263
‫criar dentro do stripe. js.

198
00:10:01,650 --> 00:10:02,633
‫Então importe.

199
00:10:05,330 --> 00:10:08,097
‫Reserve o tour da faixa.

200
00:10:11,760 --> 00:10:16,323
‫Então, como sempre, vamos selecionar nosso elemento na página da web.

201
00:10:18,240 --> 00:10:23,213
‫Portanto, o botão de livro é = para documentar. pegue o elemento por ID, e

202
00:10:24,290 --> 00:10:26,313
‫o ID, lembre-se, tour do

203
00:10:28,680 --> 00:10:30,423
‫livro, eu acredito.

204
00:10:31,450 --> 00:10:32,390
‫Então, sim, esse

205
00:10:32,390 --> 00:10:35,623
‫é o ID que acabamos de adicionar antes do ID do livro.

206
00:10:39,770 --> 00:10:43,023
‫E agora podemos adicionar esse manipulador de eventos a ele.

207
00:10:44,800 --> 00:10:48,047
‫Portanto, se houver um botão de livro,

208
00:10:49,986 --> 00:10:52,486
‫então bookBtn. addeventlistener, esperando

209
00:10:55,430 --> 00:10:57,310
‫por um clique, então precisamos do

210
00:10:57,310 --> 00:10:59,720
‫evento também, e agora precisamos obter o

211
00:10:59,720 --> 00:11:02,990
‫ID do tour a partir desse botão, então isso é

212
00:11:02,990 --> 00:11:05,170
‫tourid =, e agora quando eu

213
00:11:08,820 --> 00:11:12,230
‫selecionar aqui que é e. alvo, e

214
00:11:12,230 --> 00:11:14,170
‫talvez você esteja familiarizado

215
00:11:14,170 --> 00:11:18,860
‫com isso, então, evento. target é basicamente o elemento que foi

216
00:11:18,860 --> 00:11:21,700
‫clicado, então aquele que acionou este listener de evento

217
00:11:21,700 --> 00:11:23,530
‫aqui a ser disparado, certo?

218
00:11:23,530 --> 00:11:26,273
‫E então esse será, naturalmente, este botão.

219
00:11:27,910 --> 00:11:30,210
‫Então, temos o ID do

220
00:11:30,210 --> 00:11:31,400
‫tour, e

221
00:11:31,400 --> 00:11:33,573
‫em JavaScript, que será

222
00:11:35,270 --> 00:11:37,860
‫chamado de tour, então, deixe-me escrever.

223
00:11:37,860 --> 00:11:39,420
‫Assim, o ID do

224
00:11:39,420 --> 00:11:40,750
‫tour, sempre que

225
00:11:40,750 --> 00:11:42,640
‫houver um -, ele será convertido

226
00:11:42,640 --> 00:11:44,363
‫automaticamente para esta notação CamelCase.

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

228
00:11:47,100 --> 00:11:51,297
‫Então e. alvo. conjunto de dados. tourid.

229
00:11:53,820 --> 00:11:57,660
‫Mas agora, como este nome é exatamente igual a este, podemos

230
00:11:57,660 --> 00:11:59,793
‫simplesmente usar a estruturação nele.

231
00:12:02,700 --> 00:12:05,313
‫Então, mais uma vez, usando este belo truque.

232
00:12:07,630 --> 00:12:12,203
‫E então chamamos de tour de livro com esse ID de tour.

233
00:12:13,400 --> 00:12:15,470
‫E outra coisa legal que podemos

234
00:12:15,470 --> 00:12:18,140
‫fazer aqui, é mudar o texto do botão

235
00:12:18,140 --> 00:12:20,920
‫para algo como processamento, e então vamos fazer

236
00:12:20,920 --> 00:12:24,230
‫de novo e. alvo.

237
00:12:24,230 --> 00:12:26,960
‫Novamente o elemento que foi clicado, esse

238
00:12:26,960 --> 00:12:30,190
‫é o botão. textcontent que

239
00:12:30,190 --> 00:12:33,070
‫usamos antes de ouvir, então,

240
00:12:33,070 --> 00:12:35,450
‫para alterar o texto

241
00:12:35,450 --> 00:12:40,310
‫em um elemento, vamos mudar isso para processamento,

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

243
00:12:41,143 --> 00:12:41,976
‫E

244
00:12:41,976 --> 00:12:45,190
‫com isso acho que temos tudo conectado corretamente.

245
00:12:45,190 --> 00:12:46,680
‫Então, clicamos nesse botão,

246
00:12:46,680 --> 00:12:49,840
‫alteramos o texto nesse botão, obtemos o ID

247
00:12:49,840 --> 00:12:52,110
‫do tour a partir do atributo

248
00:12:52,110 --> 00:12:54,570
‫de dados que está no botão

249
00:12:54,570 --> 00:12:58,170
‫e chamamos o tour do livro com esse ID,

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

251
00:12:59,003 --> 00:13:02,143
‫E então esse ID será passado para esta

252
00:13:03,000 --> 00:13:06,520
‫URL, que por sua vez deve retornar uma sessão de

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

254
00:13:07,353 --> 00:13:09,243
‫E então vamos dar uma

255
00:13:10,450 --> 00:13:11,620
‫olhada nisso, assim.

256
00:13:11,620 --> 00:13:14,010
‫Agora, neste ponto, não criaremos

257
00:13:14,010 --> 00:13:16,770
‫o formulário de checkout ainda, então

258
00:13:16,770 --> 00:13:20,133
‫vamos deixá-lo para a última etapa deste vídeo.

259
00:13:21,400 --> 00:13:23,950
‫Mas, por enquanto, quero dar uma olhada

260
00:13:23,950 --> 00:13:25,330
‫nisso, vamos apenas

261
00:13:25,330 --> 00:13:27,960
‫ver se parcel ainda está em execução

262
00:13:27,960 --> 00:13:30,370
‫aqui em segundo plano, agrupando todos

263
00:13:30,370 --> 00:13:32,030
‫os nossos scripts juntos,

264
00:13:32,030 --> 00:13:35,823
‫e parece que está, então não vamos realmente testar isso.

265
00:13:37,320 --> 00:13:38,830
‫Então, estamos logados,

266
00:13:38,830 --> 00:13:40,603
‫vamos tentar estacionar o campista.

267
00:13:42,740 --> 00:13:45,793
‫Aqui embaixo, clique neste botão.

268
00:13:47,120 --> 00:13:50,240
‫E parece que não recebemos nenhum erro, então

269
00:13:50,240 --> 00:13:52,070
‫isso é bom, agora vamos

270
00:13:52,070 --> 00:13:54,073
‫dar uma olhada em nosso

271
00:13:54,970 --> 00:13:57,230
‫console, e temos um objeto, e

272
00:13:57,230 --> 00:14:00,350
‫isso é o resultado dessa chamada de axios,

273
00:14:00,350 --> 00:14:03,140
‫então axios sempre cria um objeto como este

274
00:14:03,140 --> 00:14:06,560
‫, onde há um objeto chamado dados, que é

275
00:14:06,560 --> 00:14:08,230
‫a resposta real.

276
00:14:08,230 --> 00:14:11,623
‫E aqui você vê que realmente temos nossa sessão.

277
00:14:12,830 --> 00:14:15,330
‫Então você vê que temos o

278
00:14:15,330 --> 00:14:18,090
‫e-mail do cliente, temos o ID

279
00:14:18,090 --> 00:14:22,138
‫do passeio atual, agora vamos ver se temos, (resmunga) Então,

280
00:14:22,138 --> 00:14:23,100
‫aqui

281
00:14:23,100 --> 00:14:25,653
‫temos alguns dados sobre o passeio.

282
00:14:26,670 --> 00:14:29,953
‫E agora tudo parece correto aqui.

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

284
00:14:32,610 --> 00:14:34,290
‫Então, vamos encerrar isso e,

285
00:14:34,290 --> 00:14:36,070
‫agora, como última etapa, vamos

286
00:14:36,070 --> 00:14:39,310
‫criar basicamente o formulário de checkout e debitar no

287
00:14:39,310 --> 00:14:40,893
‫cartão de crédito.

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

289
00:14:46,250 --> 00:14:48,650
‫E, na verdade, vamos envolver tudo isso

290
00:14:48,650 --> 00:14:51,043
‫aqui em um bloco try catch.

291
00:14:52,080 --> 00:14:55,750
‫Porque é claro que temos algumas chamadas assíncronas aqui, e

292
00:14:55,750 --> 00:14:57,830
‫ambas têm mais uma por

293
00:14:57,830 --> 00:15:00,000
‫segundo, portanto, é uma boa prática.

294
00:15:00,000 --> 00:15:01,603
‫Para ter um bloco try catch.

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

296
00:15:05,610 --> 00:15:09,613
‫Mas não vamos perder muito tempo com esses erros.

297
00:15:11,790 --> 00:15:14,590
‫Mas ainda vou mostrar na verdade um alerta

298
00:15:14,590 --> 00:15:16,010
‫caso haja um erro,

299
00:15:16,010 --> 00:15:18,870
‫então por exemplo com essa chamada de API,

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

301
00:15:19,703 --> 00:15:21,460
‫Para que o usuário basicamente possa

302
00:15:21,460 --> 00:15:22,993
‫ver que algo deu errado.

303
00:15:24,500 --> 00:15:29,063
‫Então, vamos simplesmente pegar essa importação de alertas.

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

305
00:15:32,600 --> 00:15:35,633
‫E diga Mostrar alerta, especificando que

306
00:15:38,000 --> 00:15:40,630
‫é um erro, e

307
00:15:40,630 --> 00:15:44,940
‫apenas o próprio erro como a mensagem basicamente.

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

309
00:15:46,250 --> 00:15:49,220
‫De qualquer forma, para podermos fazer essa última etapa, na

310
00:15:49,220 --> 00:15:51,460
‫verdade é muito, muito simples, tudo o

311
00:15:51,460 --> 00:15:53,673
‫que temos que fazer é aguardar.

312
00:15:56,060 --> 00:15:58,837
‫listra. redirectTocheck para

313
00:16:02,950 --> 00:16:04,683
‫fora, deixe-me ver se

314
00:16:06,360 --> 00:16:08,250
‫entendi errado e deixe-me

315
00:16:08,250 --> 00:16:11,700
‫ver se entendi certo, então redirecione para verificar.

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

317
00:16:12,630 --> 00:16:15,560
‫E então opções, mas apenas uma

318
00:16:15,560 --> 00:16:18,870
‫opção, que é o ID da sessão, e

319
00:16:18,870 --> 00:16:22,053
‫isso virá da sessão, e lembre-se de como

320
00:16:23,140 --> 00:16:26,280
‫a sessão estava dentro dos dados, então

321
00:16:26,280 --> 00:16:30,140
‫havia um objeto de dados criado lá por axios,

322
00:16:30,140 --> 00:16:34,020
‫lembre-se e para que é então toda resposta em si.

323
00:16:34,020 --> 00:16:37,793
‫E aí temos uma sessão. identificação.

324
00:16:38,810 --> 00:16:40,430
‫E é isso,

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

326
00:16:41,540 --> 00:16:44,210
‫E agora vem a maior parte

327
00:16:44,210 --> 00:16:48,150
‫de tudo, que é realmente verificar se isso funciona.

328
00:16:48,150 --> 00:16:50,620
‫Ainda estamos logados, vamos carregar

329
00:16:50,620 --> 00:16:52,793
‫isso mais uma vez.

330
00:16:54,470 --> 00:16:57,343
‫Clique em um botão e aguarde.

331
00:16:59,220 --> 00:17:02,810
‫E de fato chegamos à nossa página de checkout, e

332
00:17:02,810 --> 00:17:05,590
‫também temos essa bela imagem aqui, pegamos

333
00:17:05,590 --> 00:17:08,540
‫todo o logotipo da Nature aqui, pegamos aqui

334
00:17:08,540 --> 00:17:10,560
‫todos os ícones, então todas

335
00:17:10,560 --> 00:17:13,270
‫as coisas que especificamos antes, temos o

336
00:17:13,270 --> 00:17:15,710
‫preço que também especificamos em nosso

337
00:17:15,710 --> 00:17:17,540
‫sessão de checkout,

338
00:17:17,540 --> 00:17:19,690
‫e realmente todos os outros detalhes.

339
00:17:19,690 --> 00:17:22,550
‫Portanto, o nome, o resumo e,

340
00:17:22,550 --> 00:17:24,336
‫claro, a imagem.

341
00:17:24,336 --> 00:17:27,610
‫Isso é realmente incrível, certo?

342
00:17:27,610 --> 00:17:31,230
‫Então aqui está outra grande coisa que mencionei antes, é

343
00:17:31,230 --> 00:17:32,690
‫que o endereço

344
00:17:32,690 --> 00:17:35,100
‫de e-mail já está pré-preenchido automaticamente, então

345
00:17:35,100 --> 00:17:37,463
‫esse é outro recurso muito bom.

346
00:17:38,560 --> 00:17:40,380
‫E agora aqui tudo o

347
00:17:40,380 --> 00:17:43,250
‫que precisamos fazer é colocar essas informações de cartão

348
00:17:43,250 --> 00:17:46,410
‫de crédito, e então fazemos a distribuição quando estamos testando o

349
00:17:46,410 --> 00:17:49,640
‫número do cartão de crédito é apenas quatro dois quatro dois

350
00:17:49,640 --> 00:17:52,970
‫quatro dois quatro dois e assim por diante até terminarmos , OK?

351
00:17:52,970 --> 00:17:55,850
‫Então aqui qualquer mês e qualquer ano funcionam,

352
00:17:55,850 --> 00:17:58,290
‫então vamos colocar dois dois dois.

353
00:17:58,290 --> 00:18:01,060
‫Então, alguma coisa no futuro, certo?

354
00:18:01,060 --> 00:18:05,600
‫Então, se você está assistindo a este curso depois de fevereiro

355
00:18:05,600 --> 00:18:08,120
‫de 2022, essa data não vai

356
00:18:08,120 --> 00:18:09,973
‫funcionar, então coloque algo depois,

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

358
00:18:12,343 --> 00:18:14,530
‫Até que qualquer número funcione bem,

359
00:18:14,530 --> 00:18:16,667
‫aqui qualquer nome também funciona,

360
00:18:16,667 --> 00:18:18,580
‫vamos colocar Laura, o país

361
00:18:18,580 --> 00:18:22,000
‫claro também não importa muito, as pessoas preenchem automaticamente

362
00:18:22,000 --> 00:18:25,390
‫com base na localização do seu IP, então estou

363
00:18:25,390 --> 00:18:26,580
‫em Portugal,

364
00:18:26,580 --> 00:18:29,240
‫e então é isso que eu ganho.

365
00:18:29,240 --> 00:18:32,080
‫E agora você vê este botão verde legal aqui,

366
00:18:32,080 --> 00:18:34,100
‫e ele tem um efeito legal,

367
00:18:34,100 --> 00:18:35,500
‫e agora quando

368
00:18:36,870 --> 00:18:39,400
‫clicamos nele, ele está processando e pronto.

369
00:18:39,400 --> 00:18:43,281
‫Ótimo, então este é realmente o URL de sucesso que

370
00:18:43,281 --> 00:18:46,880
‫também especificamos em nossa sessão de checkout, certo?

371
00:18:46,880 --> 00:18:48,893
‫Assim, definimos que, em

372
00:18:50,390 --> 00:18:52,250
‫caso de sucesso,

373
00:18:52,250 --> 00:18:54,697
‫voltamos para este URL inicial.

374
00:18:55,863 --> 00:18:57,780
‫E vamos mudar isso um

375
00:18:57,780 --> 00:19:00,450
‫pouco mais tarde, mas por enquanto isso é realmente

376
00:19:00,450 --> 00:19:02,640
‫o que queríamos e funcionou perfeitamente bem.

377
00:19:02,640 --> 00:19:04,370
‫Bem, pelo menos espero que

378
00:19:04,370 --> 00:19:07,963
‫sim, então vamos dar uma olhada em todos os pagamentos agora.

379
00:19:10,270 --> 00:19:11,330
‫E, de fato,

380
00:19:11,330 --> 00:19:13,470
‫este é o que acabamos de fazer.

381
00:19:13,470 --> 00:19:15,890
‫Portanto, recebemos com sucesso este pagamento em

382
00:19:15,890 --> 00:19:17,193
‫nossa conta agora.

383
00:19:19,810 --> 00:19:22,380
‫Assim, você vê o endereço de e-mail, o

384
00:19:22,380 --> 00:19:26,410
‫nome e, na verdade, o Camper Tour do parque que acabamos de comprar.

385
00:19:26,410 --> 00:19:28,423
‫Ótimo, isso é realmente incrível.

386
00:19:29,370 --> 00:19:32,990
‫Aqui você pode ver as taxas que o stripe cobra, então

387
00:19:32,990 --> 00:19:35,830
‫é claro que eles também precisam ganhar dinheiro e,

388
00:19:35,830 --> 00:19:37,950
‫portanto, eles recebem um corte,

389
00:19:37,950 --> 00:19:42,440
‫que eu acho que é como 2. 9% ou algo parecido, mas é claro

390
00:19:42,440 --> 00:19:44,800
‫todas essas coisas que você pode verificar no

391
00:19:44,800 --> 00:19:45,893
‫site deles.

392
00:19:46,770 --> 00:19:49,690
‫Então você também tem a forma de pagamento aqui, então

393
00:19:49,690 --> 00:19:51,313
‫os dados que acabamos

394
00:19:52,480 --> 00:19:54,823
‫de inserir, e você obtém alguns dados interessantes

395
00:19:55,860 --> 00:19:59,763
‫sobre a sessão, e provavelmente ela também deve aparecer aqui nos seus clientes.

396
00:20:00,770 --> 00:20:04,180
‫E sim, de fato aqui está ela, E

397
00:20:04,180 --> 00:20:06,260
‫então sim, acho

398
00:20:06,260 --> 00:20:09,033
‫que está fazendo muito sucesso agora.

399
00:20:10,880 --> 00:20:14,010
‫Ah, e outra coisa que esqueci de

400
00:20:14,010 --> 00:20:16,580
‫mencionar é que seus usuários também

401
00:20:16,580 --> 00:20:18,600
‫receberão automaticamente um e-mail.

402
00:20:18,600 --> 00:20:22,510
‫Portanto, acho que esse deve ser o padrão aqui em

403
00:20:22,510 --> 00:20:24,540
‫recibos de e-mail, então vá

404
00:20:24,540 --> 00:20:27,160
‫para suas configurações de recibos de

405
00:20:27,160 --> 00:20:30,240
‫e-mail e aqui você terá clientes de e-mail

406
00:20:30,240 --> 00:20:31,920
‫sobre pagamentos bem-sucedidos.

407
00:20:31,920 --> 00:20:34,080
‫E isso também é um

408
00:20:34,080 --> 00:20:37,730
‫recurso muito bom, o que significa que não temos que enviar

409
00:20:37,730 --> 00:20:41,580
‫e-mails manualmente sempre que um usuário comprou um tour com sucesso, certo?

410
00:20:41,580 --> 00:20:45,360
‫Então, mais uma coisa que o stripe tira de nós,

411
00:20:45,360 --> 00:20:50,000
‫Fantástico, então vamos agora apenas tomar um rápido minuto para recapitular todo

412
00:20:50,000 --> 00:20:52,460
‫o processo que acabamos de passar.

413
00:20:52,460 --> 00:20:55,760
‫Então, começamos criando esta sessão de checkout, que

414
00:20:55,760 --> 00:20:58,440
‫precisa como entrada o ID do tour,

415
00:20:58,440 --> 00:21:02,270
‫para que possamos armazenar um monte de detalhes sobre o

416
00:21:02,270 --> 00:21:03,840
‫tour naquela sessão.

417
00:21:03,840 --> 00:21:05,684
‫Então, coisas sobre o

418
00:21:05,684 --> 00:21:09,460
‫nome do passeio, o resumo e as imagens de preços.

419
00:21:09,460 --> 00:21:11,610
‫Então, todas essas coisas que queremos mostrar

420
00:21:11,610 --> 00:21:12,840
‫na página de

421
00:21:12,840 --> 00:21:14,970
‫checkout, mas também em nosso painel.

422
00:21:14,970 --> 00:21:17,750
‫Em seguida, também incluímos o e-mail para que o

423
00:21:17,750 --> 00:21:20,040
‫usuário não precise preenchê-lo no check-out e,

424
00:21:20,040 --> 00:21:22,190
‫em seguida, vários outros dados.

425
00:21:22,190 --> 00:21:24,760
‫Portanto, lembre-se desse ID de referência do cliente,

426
00:21:24,760 --> 00:21:26,510
‫que fará muito mais

427
00:21:26,510 --> 00:21:28,443
‫sentido quando realmente começarmos a usá-lo.

428
00:21:29,610 --> 00:21:31,520
‫Então, criamos essa sessão sempre

429
00:21:32,500 --> 00:21:36,150
‫que alguém acessa essa rota de sessão de check-out, certo?

430
00:21:36,150 --> 00:21:39,770
‫E isso é exatamente o que fazemos em nossa extremidade dianteira,

431
00:21:39,770 --> 00:21:42,610
‫bem aqui na faixa. js.

432
00:21:42,610 --> 00:21:44,230
‫Então, obtemos nossa sessão aqui

433
00:21:44,230 --> 00:21:46,930
‫e, a partir daí, criamos um check-out e

434
00:21:46,930 --> 00:21:48,760
‫cobramos o cartão de crédito

435
00:21:48,760 --> 00:21:51,017
‫usando tarja. redirectTocheckout, e

436
00:21:52,051 --> 00:21:53,560
‫o objeto stripe

437
00:21:53,560 --> 00:21:55,800
‫aqui está simplesmente usando a biblioteca

438
00:21:55,800 --> 00:21:58,240
‫stripe com nossa chave pública, certo?

439
00:21:58,240 --> 00:22:01,610
‫Agora, de onde vem esse tour ID?

440
00:22:01,610 --> 00:22:04,500
‫Bem, está armazenado aqui mesmo no botão onde o

441
00:22:04,500 --> 00:22:07,050
‫usuário clica para reservar um novo tour.

442
00:22:07,050 --> 00:22:10,770
‫Esse ID é então lido aqui mesmo no índice. js, sempre que

443
00:22:10,770 --> 00:22:14,130
‫alguém aperta o botão de reserva, certo?

444
00:22:14,130 --> 00:22:16,020
‫Então, armazenamos isso no ID

445
00:22:16,020 --> 00:22:17,940
‫do tour e passamos para o

446
00:22:17,940 --> 00:22:20,730
‫tour do livro, que novamente é esta função aqui,

447
00:22:20,730 --> 00:22:23,410
‫que se encarrega de realmente processar os pagamentos

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

449
00:22:24,740 --> 00:22:26,450
‫E então o resultado de

450
00:22:26,450 --> 00:22:27,960
‫tudo isso é o

451
00:22:27,960 --> 00:22:30,480
‫que acabamos de ver onde o usuário realmente

452
00:22:30,480 --> 00:22:32,380
‫recebe uma cobrança no cartão de

453
00:22:32,380 --> 00:22:34,420
‫crédito, e compra o tour, tão perfeito.

454
00:22:34,420 --> 00:22:35,670
‫O que está faltando

455
00:22:35,670 --> 00:22:38,440
‫aqui é que, na verdade, sempre que houver uma

456
00:22:38,440 --> 00:22:42,540
‫nova reserva, queremos criar um novo documento de reserva em nosso banco de dados.

457
00:22:42,540 --> 00:22:45,060
‫Assim como discutimos há muito tempo, quando

458
00:22:45,060 --> 00:22:46,940
‫falamos sobre todos os

459
00:22:46,940 --> 00:22:49,420
‫modelos de dados neste aplicativo, certo?

460
00:22:49,420 --> 00:22:51,090
‫E então, para esse fim,

461
00:22:51,090 --> 00:22:52,960
‫vamos criar o modelo de reservas

462
00:22:52,960 --> 00:22:54,240
‫logo no próximo

463
00:22:54,240 --> 00:22:55,250
‫vídeo, ordená-lo

464
00:22:55,250 --> 00:22:56,970
‫depois disso, podemos criar novos

465
00:22:56,970 --> 00:22:59,193
‫passeios sempre que houver uma compra bem-sucedida.