1
00:00:01,010 --> 00:00:02,600
‫Instructor: En esta lección,

2
00:00:02,600 --> 00:00:04,910
‫aprenderemos cómo procesar pagos con stripe, en el

3
00:00:04,910 --> 00:00:08,203
‫front-end cada vez que un usuario hace clic en un botón.

4
00:00:09,840 --> 00:00:12,860
‫Y para comenzar, configurémoslo ese botón para que

5
00:00:12,860 --> 00:00:15,350
‫solo aparezca cuando un usuario está

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

7
00:00:17,920 --> 00:00:19,763
‫Entonces, aquí en la página

8
00:00:21,260 --> 00:00:23,540
‫de detalles del recorrido, ahora tenemos un

9
00:00:23,540 --> 00:00:27,250
‫usuario que inició sesión, por lo que ese botón dice reservar

10
00:00:27,250 --> 00:00:29,180
‫recorrido ahora, pero solo debería ser

11
00:00:29,180 --> 00:00:31,450
‫así cuando hay un usuario actualmente conectado

12
00:00:31,450 --> 00:00:32,430
‫y, de

13
00:00:32,430 --> 00:00:36,129
‫lo contrario, nos redirigiría a la página de inicio de sesión.

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

15
00:00:37,240 --> 00:00:40,463
‫Así que implementemos eso en la plantilla del recorrido.

16
00:00:43,210 --> 00:00:45,570
‫Y eso es realmente aquí, ese

17
00:00:45,570 --> 00:00:47,313
‫es este botón.

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

19
00:00:49,380 --> 00:00:52,300
‫Ahora bien, si actualmente hay un usuario

20
00:00:52,300 --> 00:00:55,860
‫conectado, eso significa que tenemos acceso a la variable

21
00:00:55,860 --> 00:01:00,860
‫de usuario, por lo que podemos hacerlo si el usuario está bien que esto.

22
00:01:02,440 --> 00:01:05,390
‫Y si no hay ningún usuario, entonces, bueno, simplemente

23
00:01:05,390 --> 00:01:08,260
‫queremos mostrar un botón, que nos lleva a la

24
00:01:08,260 --> 00:01:10,143
‫página de inicio de sesión.

25
00:01:13,490 --> 00:01:16,540
‫Entonces, inicie sesión para reservar

26
00:01:16,540 --> 00:01:20,610
‫un recorrido, y este debería ser un enlace,

27
00:01:20,610 --> 00:01:23,060
‫por lo que necesitamos

28
00:01:23,060 --> 00:01:26,583
‫un elemento A para el ancla.

29
00:01:27,801 --> 00:01:31,970
‫Luego, especifiquemos también la propiedad hf, que nuevamente nos dirigirá

30
00:01:31,970 --> 00:01:34,873
‫a la página de inicio de sesión,

31
00:01:34,873 --> 00:01:35,990
‫¿de acuerdo?

32
00:01:35,990 --> 00:01:39,173
‫Ahora, aquí también necesitamos agregar una ID, reservar un

33
00:01:41,710 --> 00:01:46,200
‫recorrido para que luego podamos seleccionarlo en nuestro JavaScript, y también algo muy

34
00:01:46,200 --> 00:01:47,860
‫importante, es que

35
00:01:47,860 --> 00:01:50,700
‫deberíamos poner el ID del recorrido actual aquí

36
00:01:50,700 --> 00:01:53,020
‫mismo en este elemento, ¿de acuerdo?

37
00:01:53,020 --> 00:01:55,200
‫Ahora bien, ¿por qué es eso tan importante?

38
00:01:55,200 --> 00:01:58,913
‫Bueno, recuerda cómo es el punto final de la API que acabamos de crear.

39
00:01:59,780 --> 00:02:02,840
‫Entonces, este de aquí necesita el ID del recorrido, y

40
00:02:02,840 --> 00:02:06,970
‫ese ID del recorrido debe provenir básicamente de algún lugar, por lo que en

41
00:02:06,970 --> 00:02:09,470
‫este momento no tenemos esa información en ninguna

42
00:02:09,470 --> 00:02:11,410
‫parte de esta página, por lo que

43
00:02:11,410 --> 00:02:14,380
‫la pondremos aquí, en este elemento, por lo que ese

44
00:02:14,380 --> 00:02:17,440
‫entonces o el archivo JavaScript puede tomarlo desde aquí y

45
00:02:17,440 --> 00:02:19,050
‫enviarlo junto con la

46
00:02:19,050 --> 00:02:22,140
‫solicitud a la ruta de la sesión de pago, ¿de acuerdo?

47
00:02:22,140 --> 00:02:24,700
‫Así que, al igual que hicimos aquí con un

48
00:02:24,700 --> 00:02:27,170
‫mapa, vamos a usar un atributo de datos,

49
00:02:27,170 --> 00:02:28,417
‫y eso es datos,

50
00:02:29,548 --> 00:02:31,880
‫y luego básicamente cualquier nombre de variable que

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

52
00:02:33,940 --> 00:02:36,753
‫Y esa es la identificación de la gira en este caso.

53
00:02:40,810 --> 00:02:44,113
‫Así que gira. id, ¿de acuerdo?

54
00:02:45,380 --> 00:02:47,010
‫Así que dale

55
00:02:47,010 --> 00:02:50,210
‫a la caja fuerte y probémoslo ahora.

56
00:02:50,210 --> 00:02:52,400
‫Así que vuelva a cargar la

57
00:02:52,400 --> 00:02:53,960
‫página y, en primer

58
00:02:53,960 --> 00:02:56,640
‫lugar, inspeccionémosla para ver si la idea está

59
00:02:56,640 --> 00:02:58,950
‫realmente ahí y, de hecho, aquí vamos.

60
00:02:58,950 --> 00:03:00,793
‫Y ahora si nos desconectamos.

61
00:03:04,240 --> 00:03:06,160
‫Entonces veamos lo que tenemos, y de

62
00:03:06,160 --> 00:03:07,740
‫hecho ahora dice, inicie sesión

63
00:03:07,740 --> 00:03:09,183
‫para reservar el recorrido.

64
00:03:10,080 --> 00:03:13,153
‫Genial, y hagámoslo en realidad.

65
00:03:19,080 --> 00:03:20,490
‫¿Ahora bien?

66
00:03:20,490 --> 00:03:23,130
‫Y ahora, a continuación, creemos un script en

67
00:03:23,130 --> 00:03:25,320
‫el que realmente haremos la solicitud

68
00:03:25,320 --> 00:03:27,603
‫y procesaremos el pago en el front-end.

69
00:03:28,580 --> 00:03:32,690
‫Y así, como antes, estará en público, y luego

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

71
00:03:35,510 --> 00:03:36,943
‫Así que un guión más aquí.

72
00:03:38,550 --> 00:03:41,233
‫Y lo llamaré raya. js.

73
00:03:44,440 --> 00:03:46,540
‫Y ahora aquí en realidad

74
00:03:46,540 --> 00:03:49,650
‫necesitamos acceso a la biblioteca de bandas nuevamente, pero

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

76
00:03:52,500 --> 00:03:56,293
‫así que recuerde ese paquete MPM de bandas que usamos aquí.

77
00:03:57,240 --> 00:04:00,080
‫Entonces, este solo funciona para el back-end, y lo que

78
00:04:00,080 --> 00:04:01,930
‫tenemos que hacer en el

79
00:04:01,930 --> 00:04:05,720
‫front-end es incluir un script en el HTML, y dado que solo necesitamos

80
00:04:05,720 --> 00:04:09,160
‫ese script aquí en la página del recorrido, lo haremos tal como

81
00:04:09,160 --> 00:04:12,643
‫lo hicimos hizo con la secuencia de comandos del cuadro de mapa.

82
00:04:13,740 --> 00:04:14,860
‫Entonces este, lo

83
00:04:14,860 --> 00:04:18,170
‫pondremos aquí en este bloque de cabeza, ¿de

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

85
00:04:19,260 --> 00:04:21,760
‫Ahora bien, ¿qué secuencia de comandos necesitamos realmente?

86
00:04:21,760 --> 00:04:25,330
‫Bueno, podemos simplemente obtener de la documentación que

87
00:04:25,330 --> 00:04:27,600
‫ya vimos antes, y

88
00:04:27,600 --> 00:04:30,850
‫espero que no la hayas cerrado, ¿de acuerdo?

89
00:04:30,850 --> 00:04:33,830
‫Y, de nuevo, este explica cómo usamos el producto

90
00:04:33,830 --> 00:04:36,040
‫de pago tanto en el cliente

91
00:04:36,040 --> 00:04:37,740
‫como en el servidor.

92
00:04:38,940 --> 00:04:41,090
‫Entonces, aquí vemos que tenemos dos

93
00:04:41,090 --> 00:04:44,120
‫pasos, primero creando la sesión de pago en el

94
00:04:44,120 --> 00:04:45,630
‫servidor, y esto es

95
00:04:45,630 --> 00:04:48,170
‫muy similar a lo que hicimos antes en

96
00:04:48,170 --> 00:04:52,140
‫el último video, por lo que ahora también debemos agregarlo a nuestra interfaz.

97
00:04:52,140 --> 00:04:56,760
‫Y ese guión que necesitamos es este, ¿de acuerdo?

98
00:04:56,760 --> 00:04:59,513
‫Copiemos eso y retrocedamos.

99
00:05:02,980 --> 00:05:05,143
‫Y ahora tenemos que adaptar esto un poco.

100
00:05:12,940 --> 00:05:14,280
‫¿Ahora a la derecha?

101
00:05:14,280 --> 00:05:18,790
‫Así que esto fue una exposición de un objeto de banda al alcance

102
00:05:18,790 --> 00:05:21,960
‫global, y ahora en este archivo podemos usar eso.

103
00:05:21,960 --> 00:05:22,863
‫Entonces decimos,

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

105
00:05:27,510 --> 00:05:29,300
‫luego este es el objeto

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

107
00:05:31,940 --> 00:05:35,410
‫incluir, y aquí necesitamos nuestra clave pública, ¿de acuerdo?

108
00:05:35,410 --> 00:05:38,180
‫Entonces ya usamos nuestra clave secreta en el

109
00:05:38,180 --> 00:05:41,040
‫backend, ahora es el momento de usar nuestra clave pública.

110
00:05:41,040 --> 00:05:43,620
‫Así que volvamos al panel de control y,

111
00:05:43,620 --> 00:05:45,910
‫de hecho, si está en la documentación,

112
00:05:45,910 --> 00:05:48,530
‫ya se mostrará aquí, por lo que esta

113
00:05:48,530 --> 00:05:50,290
‫es una característica muy

114
00:05:50,290 --> 00:05:52,310
‫buena de las documentaciones de bandas.

115
00:05:52,310 --> 00:05:53,467
‫Entonces, cada vez

116
00:05:53,467 --> 00:05:55,350
‫que inicie sesión, esta clave que

117
00:05:55,350 --> 00:05:57,850
‫tiene aquí es en realidad su clave pública.

118
00:05:57,850 --> 00:06:00,220
‫Pero si no está en esa

119
00:06:00,220 --> 00:06:03,078
‫página, por supuesto, también puede obtener su clave

120
00:06:03,078 --> 00:06:05,510
‫API yendo a la página de

121
00:06:05,510 --> 00:06:07,440
‫inicio o la página de

122
00:06:07,440 --> 00:06:09,200
‫desarrolladores, intentemos esa.

123
00:06:09,200 --> 00:06:11,020
‫Luego, aquí en las

124
00:06:11,020 --> 00:06:14,450
‫claves de API, tiene su clave de prueba pública aquí.

125
00:06:14,450 --> 00:06:16,210
‫Así que agarra

126
00:06:16,210 --> 00:06:18,983
‫eso, y luego regresemos y pasémoslo aquí.

127
00:06:22,080 --> 00:06:23,470
‫Y al igual

128
00:06:23,470 --> 00:06:26,603
‫que antes, quiero desactivar rápidamente eslint aquí.

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

130
00:06:32,053 --> 00:06:35,503
‫Y ahora, finalmente creemos una función, a

131
00:06:36,860 --> 00:06:39,343
‫la que llamaré reservar tour.

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

133
00:06:41,510 --> 00:06:44,763
‫Por tanto, esta función incluirá un ID de recorrido.

134
00:06:46,220 --> 00:06:50,030
‫Entonces, el ID del recorrido es el que vendrá

135
00:06:50,030 --> 00:06:52,870
‫aquí desde esta interfaz de usuario.

136
00:06:52,870 --> 00:06:57,160
‫Así que desde aquí, ¿de acuerdo?

137
00:06:57,160 --> 00:06:58,430
‫Así que, al igual

138
00:06:58,430 --> 00:07:01,420
‫que antes, lo obtendremos de index. js, donde

139
00:07:01,420 --> 00:07:05,560
‫también llamaremos Tour a este libro, ¿de

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

141
00:07:06,393 --> 00:07:08,960
‫Muy similar a lo que hicimos antes.

142
00:07:08,960 --> 00:07:11,850
‫De todos modos, ahora especifiquemos una vez más los pasos

143
00:07:11,850 --> 00:07:13,550
‫que vamos a tomar aquí.

144
00:07:13,550 --> 00:07:16,150
‫Entonces, el primer paso es obtener

145
00:07:16,150 --> 00:07:17,860
‫la sesión del

146
00:07:17,860 --> 00:07:22,580
‫servidor, y ahí es donde entra ahora esta ruta, ¿de acuerdo?

147
00:07:22,580 --> 00:07:25,260
‫Así que este es el punto en el que vamos

148
00:07:25,260 --> 00:07:28,040
‫a utilizar este punto final para llevar nuestra sesión de pago

149
00:07:28,040 --> 00:07:29,443
‫al lado del cliente.

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

151
00:07:33,230 --> 00:07:36,573
‫Así que echa un vistazo a la sesión.

152
00:07:39,810 --> 00:07:43,933
‫Desde el punto final o desde la API, realmente no importa.

153
00:07:45,600 --> 00:07:47,410
‫Hecho como segundo

154
00:07:47,410 --> 00:07:49,260
‫paso, usaremos nuestro objeto

155
00:07:49,260 --> 00:07:54,260
‫de banda para crear básicamente automáticamente el formulario de pago, +

156
00:07:57,657 --> 00:08:01,023
‫proceso o digamos + cargo, la tarjeta

157
00:08:02,490 --> 00:08:05,110
‫de crédito para nosotros, ¿de acuerdo?

158
00:08:05,110 --> 00:08:06,350
‫Y eso es

159
00:08:06,350 --> 00:08:08,020
‫todo, así que solo dos

160
00:08:08,020 --> 00:08:11,023
‫pasos simples, y verá que en realidad son bastante simples.

161
00:08:12,200 --> 00:08:16,983
‫Así que almacenemos la sesión en una variable llamada sesión.

162
00:08:17,850 --> 00:08:21,500
‫Y luego esperaremos una solicitud HTTP, que una

163
00:08:21,500 --> 00:08:24,323
‫vez más haremos con axios.

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

165
00:08:27,130 --> 00:08:28,793
‫Así que necesito agarrar eso aquí.

166
00:08:29,840 --> 00:08:32,260
‫Así que importa axios, y una

167
00:08:32,260 --> 00:08:35,810
‫vez más estoy usando la sintaxis del módulo ES6.

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

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

170
00:08:40,200 --> 00:08:43,620
‫Así como lo hicimos, por ejemplo, en el inicio de sesión

171
00:08:43,620 --> 00:08:46,033
‫o en la configuración de actualización, ¿verdad?

172
00:08:47,440 --> 00:08:50,093
‫Ahora también necesitamos marcar esta función aquí como asíncrona.

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

174
00:08:53,240 --> 00:08:54,660
‫Y luego, en

175
00:08:54,660 --> 00:08:57,300
‫axios, simplemente podemos pasar la URL, cuando

176
00:08:57,300 --> 00:09:00,660
‫todo lo que queremos hacer es una simple solicitud GET.

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

178
00:09:01,493 --> 00:09:02,420
‫Entonces, hasta

179
00:09:02,420 --> 00:09:04,510
‫este punto, siempre hemos especificado el

180
00:09:04,510 --> 00:09:06,740
‫método, la URL y los datos, pero

181
00:09:06,740 --> 00:09:09,110
‫ahora solo estamos haciendo una solicitud GET,

182
00:09:09,110 --> 00:09:11,053
‫y eso es mucho más simple.

183
00:09:13,220 --> 00:09:15,520
‫Tomemos la URL aquí,

184
00:09:15,520 --> 00:09:18,413
‫para que no perdamos más tiempo.

185
00:09:19,840 --> 00:09:23,693
‫Entonces aquí está api / v1 / bookings.

186
00:09:26,550 --> 00:09:27,993
‫Entonces echa un vistazo a la sesión.

187
00:09:30,360 --> 00:09:32,273
‫Y luego la identificación de la gira.

188
00:09:33,690 --> 00:09:35,680
‫Así que ese es este

189
00:09:35,680 --> 00:09:38,203
‫de aquí, que se convertirá en disfunción,

190
00:09:39,320 --> 00:09:40,153
‫¿de acuerdo?

191
00:09:41,440 --> 00:09:43,170
‫Y echemos un vistazo a

192
00:09:43,170 --> 00:09:45,623
‫este objeto de sesión en nuestra consola,

193
00:09:46,630 --> 00:09:48,850
‫solo para ver si todo funciona,

194
00:09:48,850 --> 00:09:49,840
‫¿de acuerdo?

195
00:09:49,840 --> 00:09:52,490
‫Así que ahora en nuestro índice. js, básicamente conectaremos

196
00:09:52,490 --> 00:09:56,013
‫el botón verde con la disfunción que acabamos de

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

198
00:10:01,650 --> 00:10:02,633
‫Así que importa.

199
00:10:05,330 --> 00:10:08,097
‫Reservar tour desde stripe.

200
00:10:11,760 --> 00:10:16,323
‫Entonces, como siempre, seleccionemos nuestro elemento de la página web.

201
00:10:18,240 --> 00:10:23,213
‫Entonces el botón de libro es = documentar. obtener el elemento por ID, y

202
00:10:24,290 --> 00:10:26,313
‫el ID recuerda es, creo

203
00:10:28,680 --> 00:10:30,423
‫que reservar recorrido.

204
00:10:31,450 --> 00:10:32,390
‫Así que sí,

205
00:10:32,390 --> 00:10:35,623
‫esa es la identificación que acabamos de agregar antes de la identificación del libro.

206
00:10:39,770 --> 00:10:43,023
‫Y ahora podemos agregarle ese controlador de eventos.

207
00:10:44,800 --> 00:10:48,047
‫Entonces, si hay un botón de libro,

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

209
00:10:55,430 --> 00:10:57,310
‫un clic, entonces también necesitamos el

210
00:10:57,310 --> 00:10:59,720
‫evento, y ahora necesitamos obtener esa ID

211
00:10:59,720 --> 00:11:02,990
‫de gira de ese botón, así que eso es tourid

212
00:11:02,990 --> 00:11:05,170
‫=, y ahora cuando hago una

213
00:11:08,820 --> 00:11:12,230
‫racha aquí, que es e. target, y

214
00:11:12,230 --> 00:11:14,170
‫tal vez esté familiarizado

215
00:11:14,170 --> 00:11:18,860
‫con eso, así que event. el objetivo es básicamente el elemento en el que

216
00:11:18,860 --> 00:11:21,700
‫se hizo clic, así que el que activó este oyente de

217
00:11:21,700 --> 00:11:23,530
‫eventos aquí para ser disparado, ¿de acuerdo?

218
00:11:23,530 --> 00:11:26,273
‫Y ese será, por supuesto, este botón.

219
00:11:27,910 --> 00:11:30,210
‫Luego, tenemos el ID del

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

221
00:11:31,400 --> 00:11:33,573
‫en JavaScript, que luego se

222
00:11:35,270 --> 00:11:37,860
‫llamará tour, así que déjame escribirlo.

223
00:11:37,860 --> 00:11:39,420
‫Entonces, el ID del recorrido,

224
00:11:39,420 --> 00:11:40,750
‫por lo que

225
00:11:40,750 --> 00:11:42,640
‫siempre que haya un -, se

226
00:11:42,640 --> 00:11:44,363
‫convertirá automáticamente a esta notación CamelCase.

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

228
00:11:47,100 --> 00:11:51,297
‫Entonces e. objetivo. conjunto de datos. tourid.

229
00:11:53,820 --> 00:11:57,660
‫Pero ahora que este nombre es exactamente el mismo que este, podemos

230
00:11:57,660 --> 00:11:59,793
‫simplemente usar la estructura en eso.

231
00:12:02,700 --> 00:12:05,313
‫Así que una vez más usando este buen truco.

232
00:12:07,630 --> 00:12:12,203
‫Y luego llamamos a reservar recorrido con esa identificación de recorrido.

233
00:12:13,400 --> 00:12:15,470
‫Y otra cosa buena que podemos

234
00:12:15,470 --> 00:12:18,140
‫hacer aquí, es cambiar el texto del

235
00:12:18,140 --> 00:12:20,920
‫botón a algo como procesamiento, y hagámoslo

236
00:12:20,920 --> 00:12:24,230
‫de nuevo e. objetivo.

237
00:12:24,230 --> 00:12:26,960
‫Entonces, nuevamente, el elemento en el que se hizo

238
00:12:26,960 --> 00:12:30,190
‫clic, ese es el botón. textcontent que usamos

239
00:12:30,190 --> 00:12:33,070
‫antes de escuchar, así que

240
00:12:33,070 --> 00:12:35,450
‫para cambiar el texto

241
00:12:35,450 --> 00:12:40,310
‫en un elemento, y cambiemos eso a procesamiento, ¿de

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

243
00:12:41,143 --> 00:12:41,976
‫Y entonces

244
00:12:41,976 --> 00:12:45,190
‫con esto creo que tenemos todo correctamente conectado.

245
00:12:45,190 --> 00:12:46,680
‫Entonces hacemos clic en

246
00:12:46,680 --> 00:12:49,840
‫ese botón, luego cambiamos el texto en ese botón,

247
00:12:49,840 --> 00:12:52,110
‫luego obtenemos el ID del tour

248
00:12:52,110 --> 00:12:54,570
‫del atributo de datos que está en

249
00:12:54,570 --> 00:12:58,170
‫el botón, y llamamos al tour del libro con ese ID,

250
00:12:58,170 --> 00:12:59,003
‫¿de acuerdo?

251
00:12:59,003 --> 00:13:02,143
‫Y entonces esa identificación se pasará a esta URL,

252
00:13:03,000 --> 00:13:06,520
‫que a su vez debería devolver una sesión de pago,

253
00:13:06,520 --> 00:13:07,353
‫¿de acuerdo?

254
00:13:07,353 --> 00:13:09,243
‫Y luego aquí vamos a echar un vistazo a

255
00:13:10,450 --> 00:13:11,620
‫eso, así como así.

256
00:13:11,620 --> 00:13:14,010
‫Ahora, en este punto, no crearemos

257
00:13:14,010 --> 00:13:16,770
‫el formulario de pago todavía, así que

258
00:13:16,770 --> 00:13:20,133
‫lo dejaremos para el último paso de este video.

259
00:13:21,400 --> 00:13:23,950
‫Pero por ahora quiero echar un vistazo

260
00:13:23,950 --> 00:13:25,330
‫a esto, veamos

261
00:13:25,330 --> 00:13:27,960
‫si el paquete todavía se está ejecutando

262
00:13:27,960 --> 00:13:30,370
‫aquí en segundo plano, por lo

263
00:13:30,370 --> 00:13:32,030
‫que agrupamos todos nuestros

264
00:13:32,030 --> 00:13:35,823
‫scripts, y parece que sí, así que no probemos esto.

265
00:13:37,320 --> 00:13:38,830
‫Así que hemos iniciado

266
00:13:38,830 --> 00:13:40,603
‫sesión, ahora intentemos aparcar Camper.

267
00:13:42,740 --> 00:13:45,793
‫Aquí abajo, haga clic en este botón.

268
00:13:47,120 --> 00:13:50,240
‫Y parece que no obtenemos ningún error, así que

269
00:13:50,240 --> 00:13:52,070
‫está bien, ahora echemos un

270
00:13:52,070 --> 00:13:54,073
‫vistazo a nuestra consola, y

271
00:13:54,970 --> 00:13:57,230
‫tenemos un objeto, y ese es

272
00:13:57,230 --> 00:14:00,350
‫el resultado de esta llamada de axios, por

273
00:14:00,350 --> 00:14:03,140
‫lo que axios siempre crea un objeto como

274
00:14:03,140 --> 00:14:06,560
‫este , donde hay un objeto llamado datos, que es

275
00:14:06,560 --> 00:14:08,230
‫la respuesta real.

276
00:14:08,230 --> 00:14:11,623
‫Y aquí ven que de hecho tenemos nuestra sesión.

277
00:14:12,830 --> 00:14:15,330
‫Como ve, tenemos el correo electrónico

278
00:14:15,330 --> 00:14:18,090
‫del cliente, tenemos la identificación actual del

279
00:14:18,090 --> 00:14:22,138
‫tour, ahora tenemos, veamos si lo tenemos, (murmura) Así que

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

281
00:14:23,100 --> 00:14:25,653
‫tenemos algunos datos sobre el tour.

282
00:14:26,670 --> 00:14:29,953
‫Y ahora todo parece correcto aquí.

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

284
00:14:32,610 --> 00:14:34,290
‫Así que cerremos eso,

285
00:14:34,290 --> 00:14:36,070
‫y ahora, como último paso,

286
00:14:36,070 --> 00:14:39,310
‫creemos básicamente el formulario de pago y carguemos la

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

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

289
00:14:46,250 --> 00:14:48,650
‫Y de hecho, vamos a envolver también todo

290
00:14:48,650 --> 00:14:51,043
‫esto aquí en un bloque try catch.

291
00:14:52,080 --> 00:14:55,750
‫Porque, por supuesto, tenemos algunas llamadas asincrónicas aquí, y ambas tienen

292
00:14:55,750 --> 00:14:57,830
‫una más en un segundo,

293
00:14:57,830 --> 00:15:00,000
‫por lo que es una buena práctica.

294
00:15:00,000 --> 00:15:01,603
‫Para tener un bloque de captura de prueba.

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

296
00:15:05,610 --> 00:15:09,613
‫Pero no perdamos mucho tiempo con estos errores.

297
00:15:11,790 --> 00:15:14,590
‫Pero todavía voy a mostrar una alerta en caso

298
00:15:14,590 --> 00:15:16,010
‫de que haya un error,

299
00:15:16,010 --> 00:15:18,870
‫así que, por ejemplo, con esta llamada a la API,

300
00:15:18,870 --> 00:15:19,703
‫¿de acuerdo?

301
00:15:19,703 --> 00:15:21,460
‫Para que el usuario básicamente pueda

302
00:15:21,460 --> 00:15:22,993
‫ver que algo salió mal.

303
00:15:24,500 --> 00:15:29,063
‫Así que simplemente tomemos esta importación de alertas.

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

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

306
00:15:38,000 --> 00:15:40,630
‫que es un error, y

307
00:15:40,630 --> 00:15:44,940
‫luego solo el error en sí como el mensaje básicamente.

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

309
00:15:46,250 --> 00:15:49,220
‫De todos modos, para hacer ahora este último paso, en

310
00:15:49,220 --> 00:15:51,460
‫realidad es muy, muy simple, todo lo

311
00:15:51,460 --> 00:15:53,673
‫que tenemos que hacer es esperar.

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

313
00:16:02,950 --> 00:16:04,683
‫déjame ver si me

314
00:16:06,360 --> 00:16:08,250
‫equivoqué, y déjame ver si

315
00:16:08,250 --> 00:16:11,700
‫lo hice bien, así que redirige para verificar.

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

317
00:16:12,630 --> 00:16:15,560
‫Y luego las opciones, pero solo una

318
00:16:15,560 --> 00:16:18,870
‫opción, que es el ID de sesión, y eso

319
00:16:18,870 --> 00:16:22,053
‫vendrá de la sesión, y recuerde cómo estaba

320
00:16:23,140 --> 00:16:26,280
‫la sesión dentro de los datos, así que

321
00:16:26,280 --> 00:16:30,140
‫hubo un objeto de datos creado allí por axios, recuerde

322
00:16:30,140 --> 00:16:34,020
‫y entonces es entonces toda la respuesta en sí misma.

323
00:16:34,020 --> 00:16:37,793
‫Y ahí dentro tenemos sesión. identificación.

324
00:16:38,810 --> 00:16:40,430
‫Y eso es todo,

325
00:16:40,430 --> 00:16:41,540
‫¿de acuerdo?

326
00:16:41,540 --> 00:16:44,210
‫Y ahora viene la mayor

327
00:16:44,210 --> 00:16:48,150
‫parte de todo, que es comprobar si esto funciona.

328
00:16:48,150 --> 00:16:50,620
‫Así que todavía estamos conectados, carguemos

329
00:16:50,620 --> 00:16:52,793
‫esto una vez más.

330
00:16:54,470 --> 00:16:57,343
‫Haga clic en un botón y espere.

331
00:16:59,220 --> 00:17:02,810
‫Y, de hecho, llegamos a nuestra página de pago, y

332
00:17:02,810 --> 00:17:05,590
‫también obtenemos esta bonita imagen aquí, obtenemos todos

333
00:17:05,590 --> 00:17:08,540
‫los logotipos de Nature aquí, obtenemos aquí todos

334
00:17:08,540 --> 00:17:10,560
‫los íconos, por lo que

335
00:17:10,560 --> 00:17:13,270
‫todas las cosas que especificamos antes, tenemos

336
00:17:13,270 --> 00:17:15,710
‫el precio que también especificamos en nuestro

337
00:17:15,710 --> 00:17:17,540
‫sesión de pago,

338
00:17:17,540 --> 00:17:19,690
‫y realmente todos los demás detalles.

339
00:17:19,690 --> 00:17:22,550
‫Entonces el nombre, el resumen y, por

340
00:17:22,550 --> 00:17:24,336
‫supuesto, la imagen.

341
00:17:24,336 --> 00:17:27,610
‫Eso es realmente asombroso, ¿verdad?

342
00:17:27,610 --> 00:17:31,230
‫Luego, aquí otra gran cosa que mencioné antes, es que la

343
00:17:31,230 --> 00:17:32,690
‫dirección de correo

344
00:17:32,690 --> 00:17:35,100
‫electrónico ya está precargada automáticamente, por lo

345
00:17:35,100 --> 00:17:37,463
‫que esa es otra característica realmente agradable.

346
00:17:38,560 --> 00:17:40,380
‫Y ahora aquí, todo lo

347
00:17:40,380 --> 00:17:43,250
‫que tenemos que hacer es ingresar la información de esta

348
00:17:43,250 --> 00:17:46,410
‫tarjeta de crédito, y así marcamos cuando estamos probando el número

349
00:17:46,410 --> 00:17:49,640
‫de la tarjeta de crédito es solo cuatro dos cuatro dos

350
00:17:49,640 --> 00:17:52,970
‫cuatro dos cuatro dos, y así sucesivamente hasta que terminemos , ¿okey?

351
00:17:52,970 --> 00:17:55,850
‫Entonces aquí cualquier mes y cualquier año funciona,

352
00:17:55,850 --> 00:17:58,290
‫así que pongamos dos dos dos.

353
00:17:58,290 --> 00:18:01,060
‫Entonces, algo en el futuro, ¿de acuerdo?

354
00:18:01,060 --> 00:18:05,600
‫Entonces, si está viendo este curso después de febrero de 2022,

355
00:18:05,600 --> 00:18:08,120
‫esta fecha no funcionará, así que

356
00:18:08,120 --> 00:18:09,973
‫ponga algo más tarde, ¿de

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

358
00:18:12,343 --> 00:18:14,530
‫Hasta que cualquier número funcione también,

359
00:18:14,530 --> 00:18:16,667
‫aquí cualquier nombre también funciona,

360
00:18:16,667 --> 00:18:18,580
‫digamos Laura, el país, por

361
00:18:18,580 --> 00:18:22,000
‫supuesto, tampoco importa realmente, la gente se completa automáticamente

362
00:18:22,000 --> 00:18:25,390
‫según la ubicación de su IP, así que estoy

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

364
00:18:26,580 --> 00:18:29,240
‫y así eso es lo que obtengo.

365
00:18:29,240 --> 00:18:32,080
‫Y ahora ves este bonito botón verde aquí, y

366
00:18:32,080 --> 00:18:34,100
‫tiene este bonito efecto, así que

367
00:18:34,100 --> 00:18:35,500
‫ahora, cuando hacemos clic

368
00:18:36,870 --> 00:18:39,400
‫en él, se está procesando y hemos terminado.

369
00:18:39,400 --> 00:18:43,281
‫Genial, entonces esta es en realidad la URL de éxito

370
00:18:43,281 --> 00:18:46,880
‫que también especificamos en nuestra sesión de pago, ¿verdad?

371
00:18:46,880 --> 00:18:48,893
‫Así que definimos que, en

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

373
00:18:52,250 --> 00:18:54,697
‫volvemos a esta URL de inicio.

374
00:18:55,863 --> 00:18:57,780
‫Y cambiaremos eso aquí un

375
00:18:57,780 --> 00:19:00,450
‫poco más tarde, pero por ahora esto es realmente

376
00:19:00,450 --> 00:19:02,640
‫lo que queríamos, y funcionó perfectamente bien.

377
00:19:02,640 --> 00:19:04,370
‫Bueno, al menos eso

378
00:19:04,370 --> 00:19:07,963
‫espero, así que echemos un vistazo a todos los pagos ahora.

379
00:19:10,270 --> 00:19:11,330
‫Y de hecho,

380
00:19:11,330 --> 00:19:13,470
‫este es el que acabamos de hacer.

381
00:19:13,470 --> 00:19:15,890
‫Así que ahora recibimos este pago con éxito

382
00:19:15,890 --> 00:19:17,193
‫en nuestra cuenta.

383
00:19:19,810 --> 00:19:22,380
‫Entonces ves la dirección de correo electrónico,

384
00:19:22,380 --> 00:19:26,410
‫el nombre y, de hecho, el parque Camper Tour que acabamos de comprar.

385
00:19:26,410 --> 00:19:28,423
‫Genial, eso es realmente asombroso.

386
00:19:29,370 --> 00:19:32,990
‫Entonces aquí abajo puede ver las tarifas que cobra la franja, por

387
00:19:32,990 --> 00:19:35,830
‫lo que, por supuesto, también necesitan ganar dinero y,

388
00:19:35,830 --> 00:19:37,950
‫por lo tanto, toman un

389
00:19:37,950 --> 00:19:42,440
‫recorte, que creo que es como 2. 9% o algo así, pero, por supuesto,

390
00:19:42,440 --> 00:19:44,800
‫todas esas cosas se pueden consultar en su

391
00:19:44,800 --> 00:19:45,893
‫sitio web.

392
00:19:46,770 --> 00:19:49,690
‫Luego también obtuviste el método de pago aquí, por lo

393
00:19:49,690 --> 00:19:51,313
‫que los datos que

394
00:19:52,480 --> 00:19:54,823
‫acabamos de ingresar, y obtienes algunos datos agradables

395
00:19:55,860 --> 00:19:59,763
‫sobre la sesión, y probablemente ella también debería aparecer aquí en tus clientes.

396
00:20:00,770 --> 00:20:04,180
‫Y sí, de hecho aquí está, y

397
00:20:04,180 --> 00:20:06,260
‫sí, creo que

398
00:20:06,260 --> 00:20:09,033
‫eso es bastante exitoso ahora.

399
00:20:10,880 --> 00:20:14,010
‫Ah, y otra cosa que olvidé mencionar

400
00:20:14,010 --> 00:20:16,580
‫es que sus usuarios también recibirán

401
00:20:16,580 --> 00:20:18,600
‫automáticamente un correo electrónico.

402
00:20:18,600 --> 00:20:22,510
‫Así que creo que debería ser el valor predeterminado aquí en los

403
00:20:22,510 --> 00:20:24,540
‫recibos por correo electrónico, así que

404
00:20:24,540 --> 00:20:27,160
‫vaya a la configuración de recibos por correo

405
00:20:27,160 --> 00:20:30,240
‫electrónico, y luego aquí tiene a los clientes por correo

406
00:20:30,240 --> 00:20:31,920
‫electrónico sobre pagos exitosos.

407
00:20:31,920 --> 00:20:34,080
‫Y esa también es una característica

408
00:20:34,080 --> 00:20:37,730
‫realmente agradable, lo que significa que no tenemos que enviar correos electrónicos

409
00:20:37,730 --> 00:20:41,580
‫manualmente cada vez que un usuario compra con éxito un recorrido, ¿de acuerdo?

410
00:20:41,580 --> 00:20:45,360
‫Entonces, una cosa más que nos quita esa raya, Fantástico,

411
00:20:45,360 --> 00:20:50,000
‫así que tomemos un minuto rápido para recapitular todo el proceso por

412
00:20:50,000 --> 00:20:52,460
‫el que acabamos de pasar.

413
00:20:52,460 --> 00:20:55,760
‫Así que comenzamos creando esta sesión de pago, que

414
00:20:55,760 --> 00:20:58,440
‫necesita como entrada el ID del recorrido,

415
00:20:58,440 --> 00:21:02,270
‫para que luego podamos almacenar un montón de detalles sobre el

416
00:21:02,270 --> 00:21:03,840
‫recorrido en esa sesión.

417
00:21:03,840 --> 00:21:05,684
‫Así que cosas sobre el

418
00:21:05,684 --> 00:21:09,460
‫nombre de la gira, el resumen y las imágenes de precios.

419
00:21:09,460 --> 00:21:11,610
‫Entonces, todas esas cosas que queremos que aparezcan

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

421
00:21:12,840 --> 00:21:14,970
‫pago, pero también en nuestro panel de control.

422
00:21:14,970 --> 00:21:17,750
‫Luego también incluimos el correo electrónico para que el usuario no

423
00:21:17,750 --> 00:21:20,040
‫tenga que completarlo en el proceso de pago

424
00:21:20,040 --> 00:21:22,190
‫y luego un montón de otros datos.

425
00:21:22,190 --> 00:21:24,760
‫Así que recuerde este ID de referencia de

426
00:21:24,760 --> 00:21:26,510
‫cliente, que tendrá mucho más

427
00:21:26,510 --> 00:21:28,443
‫sentido una vez que lo usemos.

428
00:21:29,610 --> 00:21:31,520
‫Así que creamos esta sesión cada

429
00:21:32,500 --> 00:21:36,150
‫vez que alguien llega a esta ruta de sesión de verificación, ¿de acuerdo?

430
00:21:36,150 --> 00:21:39,770
‫Y eso es exactamente lo que hacemos en nuestra interfaz, aquí

431
00:21:39,770 --> 00:21:42,610
‫mismo en rayas. js.

432
00:21:42,610 --> 00:21:44,230
‫Entonces obtenemos nuestra sesión aquí,

433
00:21:44,230 --> 00:21:46,930
‫y luego desde allí creamos un pago y

434
00:21:46,930 --> 00:21:48,760
‫cargamos la tarjeta de crédito

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

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

437
00:21:53,560 --> 00:21:55,800
‫aquí simplemente está usando la biblioteca

438
00:21:55,800 --> 00:21:58,240
‫stripe con nuestra clave pública, ¿de acuerdo?

439
00:21:58,240 --> 00:22:01,610
‫Ahora bien, ¿de dónde viene este ID de gira?

440
00:22:01,610 --> 00:22:04,500
‫Bueno, se almacena aquí, justo en el botón donde el

441
00:22:04,500 --> 00:22:07,050
‫usuario hace clic para reservar un nuevo recorrido.

442
00:22:07,050 --> 00:22:10,770
‫Ese ID se lee aquí mismo en index. js, siempre que

443
00:22:10,770 --> 00:22:14,130
‫alguien presione el botón de reserva, ¿de acuerdo?

444
00:22:14,130 --> 00:22:16,020
‫Así que lo almacenamos en el

445
00:22:16,020 --> 00:22:17,940
‫ID del tour y lo pasamos

446
00:22:17,940 --> 00:22:20,730
‫a Book Tour, que de nuevo es esta función

447
00:22:20,730 --> 00:22:23,410
‫aquí, que se encarga de procesar realmente los pagos

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

449
00:22:24,740 --> 00:22:26,450
‫Y así, el resultado de

450
00:22:26,450 --> 00:22:27,960
‫todo esto es lo

451
00:22:27,960 --> 00:22:30,480
‫que acabamos de ver antes, donde al usuario

452
00:22:30,480 --> 00:22:32,380
‫realmente le cobraron la tarjeta de

453
00:22:32,380 --> 00:22:34,420
‫crédito y compró el recorrido, tan perfecto.

454
00:22:34,420 --> 00:22:35,670
‫Ahora, lo que falta

455
00:22:35,670 --> 00:22:38,440
‫aquí es que, en realidad, cada vez que hay

456
00:22:38,440 --> 00:22:42,540
‫una nueva reserva, queremos crear un nuevo documento de reserva en nuestra base de datos.

457
00:22:42,540 --> 00:22:45,060
‫Entonces, tal como lo discutimos hace mucho tiempo

458
00:22:45,060 --> 00:22:46,940
‫cuando hablamos de todos los

459
00:22:46,940 --> 00:22:49,420
‫modelos de datos en esta aplicación, ¿verdad?

460
00:22:49,420 --> 00:22:51,090
‫Y con ese fin, crearemos

461
00:22:51,090 --> 00:22:52,960
‫el modelo de reservas directamente en

462
00:22:52,960 --> 00:22:54,240
‫el siguiente video, lo

463
00:22:54,240 --> 00:22:55,250
‫clasificaremos después

464
00:22:55,250 --> 00:22:56,970
‫de eso, luego podremos crear nuevos

465
00:22:56,970 --> 00:22:59,193
‫recorridos cada vez que haya una compra exitosa.