1 00:00:01,010 --> 00:00:03,730 ‫Conferencista: Y ahora para terminar este 2 00:00:03,730 --> 00:00:06,593 ‫proyecto, terminemos esta integración de Stripe con webhooks. 3 00:00:09,310 --> 00:00:12,040 ‫Comencemos a recordar cómo funciona realmente nuestra integración 4 00:00:12,040 --> 00:00:14,210 ‫de Stripe en este momento. 5 00:00:14,210 --> 00:00:16,750 ‫Tenemos este extremo de la sesión de 6 00:00:16,750 --> 00:00:19,540 ‫pago, al que se llama desde nuestro front-end. 7 00:00:19,540 --> 00:00:22,293 ‫Esto luego llamará a la función getCheckoutSession, así 8 00:00:23,440 --> 00:00:25,100 ‫que básicamente esta aquí, 9 00:00:25,100 --> 00:00:28,180 ‫que creará una sesión de pago en el servidor 10 00:00:28,180 --> 00:00:30,300 ‫usando toda esta información aquí, y 11 00:00:30,300 --> 00:00:32,750 ‫luego la enviará de vuelta al cliente. 12 00:00:32,750 --> 00:00:35,170 ‫Luego, después de que Stripe haya realizado 13 00:00:35,170 --> 00:00:37,280 ‫con éxito el procesamiento del pago, 14 00:00:37,280 --> 00:00:40,990 ‫redirigir al usuario a esta URL exitosa, por lo que 15 00:00:40,990 --> 00:00:42,483 ‫esta que creamos. 16 00:00:44,210 --> 00:00:48,120 ‫Recuerde que en esta URL agregamos el ID del tour, el 17 00:00:48,120 --> 00:00:50,920 ‫ID de usuario y también el precio. 18 00:00:50,920 --> 00:00:55,040 ‫Lo hicimos para que una vez que se llame a esta URL aquí, 19 00:00:55,040 --> 00:00:57,920 ‫nuestra aplicación creara un nuevo documento de reserva en 20 00:00:57,920 --> 00:00:59,680 ‫nuestra base de datos. 21 00:00:59,680 --> 00:01:01,047 ‫¿Cómo funcionó eso? 22 00:01:01,047 --> 00:01:04,743 ‫En la ruta my-tours, tenemos un middleware para eso. 23 00:01:06,040 --> 00:01:09,940 ‫Recuerde, aquí en viewRoutes, en my-tours, 24 00:01:09,940 --> 00:01:12,467 ‫tenemos este createBookingCheckout. 25 00:01:14,770 --> 00:01:18,628 ‫Esta función aquí, que básicamente de la consulta toma el recorrido, 26 00:01:18,628 --> 00:01:21,440 ‫el usuario y el precio, y crea 27 00:01:21,440 --> 00:01:25,023 ‫una entrada en la base de datos usando esos datos. 28 00:01:26,350 --> 00:01:29,160 ‫Básicamente, colocamos estos datos en la URL 29 00:01:29,160 --> 00:01:32,500 ‫cada vez que Stripe procesa con éxito un pago. 30 00:01:32,500 --> 00:01:34,990 ‫Y luego, esta función de middleware que tenemos 31 00:01:34,990 --> 00:01:38,570 ‫aquí recoge los datos y crea una nueva reserva en nuestro sistema 32 00:01:38,570 --> 00:01:39,960 ‫utilizando esos datos. 33 00:01:39,960 --> 00:01:42,790 ‫Y luego, básicamente, redirigimos aquí a 34 00:01:42,790 --> 00:01:45,763 ‫la URL original sin la cadena de consulta. 35 00:01:46,770 --> 00:01:50,150 ‫Ahora, el problema con esto es que no es realmente seguro. 36 00:01:50,150 --> 00:01:52,963 ‫Entonces, todos los que conocen esta estructura de URL, 37 00:01:54,010 --> 00:01:57,670 ‫por lo que este de aquí, qué recorrido, usuario y precio en 38 00:01:57,670 --> 00:02:00,700 ‫la cadena de consulta, básicamente pueden crear una reserva en 39 00:02:01,761 --> 00:02:03,850 ‫nuestro sistema sin pagar realmente. 40 00:02:03,850 --> 00:02:07,120 ‫Entonces, todo lo que tendríamos que hacer es abrir esta 41 00:02:07,120 --> 00:02:08,500 ‫URL con algunos 42 00:02:08,500 --> 00:02:11,680 ‫datos allí y luego, desde allí, crear automáticamente una 43 00:02:11,680 --> 00:02:14,193 ‫reserva sin pasar por el proceso de Stripe. 44 00:02:15,540 --> 00:02:18,630 ‫Recuerda que en ese entonces dije que arreglaríamos 45 00:02:18,630 --> 00:02:20,853 ‫esto usando algo llamado webhooks. 46 00:02:22,090 --> 00:02:23,120 ‫Entonces, lo hacemos ahora. 47 00:02:23,120 --> 00:02:24,090 ‫Porque para 48 00:02:24,090 --> 00:02:27,140 ‫eso, realmente necesitamos que nuestro sitio web esté implementado. 49 00:02:27,140 --> 00:02:29,350 ‫Ahora, en este punto, ese es realmente el caso. 50 00:02:29,350 --> 00:02:31,833 ‫Entonces, ahora podemos implementar estos webhooks. 51 00:02:33,240 --> 00:02:35,663 ‫Para eso, vayamos a nuestro panel de Stripe. 52 00:02:37,400 --> 00:02:39,750 ‫Y de hecho ya tengo eso abierto aquí. 53 00:02:39,750 --> 00:02:43,903 ‫Y luego vaya aquí a los desarrolladores, luego elija webhooks, y 54 00:02:45,070 --> 00:02:47,970 ‫aquí, agregue un nuevo punto final. 55 00:02:47,970 --> 00:02:52,149 ‫Ahora bien, ¿qué es este punto final aquí y este webhook? 56 00:02:52,149 --> 00:02:55,380 ‫Básicamente, aquí especificaremos una URL a la que 57 00:02:55,380 --> 00:02:59,500 ‫Stripe enviará automáticamente una solicitud POST cada vez que una sesión 58 00:02:59,500 --> 00:03:02,800 ‫de pago se haya completado con éxito, básicamente, siempre 59 00:03:02,800 --> 00:03:05,740 ‫que un pago se haya realizado correctamente. 60 00:03:05,740 --> 00:03:09,920 ‫Con esa solicitud POST, Stripe enviará de vuelta los datos de 61 00:03:09,920 --> 00:03:13,230 ‫la sesión original que creamos en el primer paso 62 00:03:13,230 --> 00:03:15,623 ‫cuando creamos esa sesión de pago. 63 00:03:17,540 --> 00:03:20,130 ‫Esa es la razón por la que realmente necesitábamos que 64 00:03:20,130 --> 00:03:23,010 ‫nuestro sitio web se implementara aquí porque ahora necesitamos especificar esa 65 00:03:23,010 --> 00:03:24,923 ‫URL de la vida real aquí. 66 00:03:27,170 --> 00:03:28,573 ‫Tomemos eso de 67 00:03:31,290 --> 00:03:34,150 ‫aquí, y luego agreguemos nuestra ruta aquí básicamente. 68 00:03:34,150 --> 00:03:36,930 ‫Voy a llamar a esto un webhook-checkout. 69 00:03:41,620 --> 00:03:45,350 ‫No está en la API y no está dentro de las reservas. 70 00:03:45,350 --> 00:03:47,593 ‫Verá en un momento por qué es así. 71 00:03:49,130 --> 00:03:51,210 ‫Nuevamente, cuando un pago se realizó correctamente, 72 00:03:51,210 --> 00:03:53,280 ‫Stripe publicará automáticamente los datos 73 00:03:53,280 --> 00:03:55,503 ‫de la sesión original en esta URL. 74 00:03:58,060 --> 00:04:00,380 ‫Ahora también debemos seleccionar el evento. 75 00:04:00,380 --> 00:04:04,740 ‫Y ves que hay toneladas de eventos que podríamos usar aquí. 76 00:04:04,740 --> 00:04:09,667 ‫El que estamos usando es checkout_session_completed. 77 00:04:11,767 --> 00:04:12,650 ‫Agrega eso. 78 00:04:12,650 --> 00:04:15,083 ‫Ahora debe ingresar su contraseña aquí nuevamente. 79 00:04:17,100 --> 00:04:19,110 ‫Y luego ahí vamos. 80 00:04:19,110 --> 00:04:22,665 ‫Este webhook también tiene un secreto aquí. 81 00:04:22,665 --> 00:04:25,850 ‫Este, también lo necesitaremos en un segundo 82 00:04:25,850 --> 00:04:29,063 ‫cuando realmente creemos nuestra ruta para esta URL aquí. 83 00:04:29,980 --> 00:04:32,430 ‫De hecho, eso es exactamente lo que haremos a continuación. 84 00:04:33,750 --> 00:04:35,600 ‫Básicamente, en nuestro sistema, 85 00:04:35,600 --> 00:04:38,840 ‫por supuesto, ahora necesitamos una ruta para esto aquí, 86 00:04:39,960 --> 00:04:43,840 ‫de modo que cuando Stripe publique los datos en nuestra 87 00:04:43,840 --> 00:04:46,233 ‫aplicación, podamos hacer algo con ellos. 88 00:04:48,120 --> 00:04:52,233 ‫Regresemos aquí y abramos nuestra aplicación. 89 00:04:54,740 --> 00:04:57,743 ‫De hecho, agregaremos esta ruta aquí. 90 00:04:59,610 --> 00:05:03,100 ‫Nuevamente, te explicaré por qué en un segundo. 91 00:05:03,100 --> 00:05:04,350 ‫Entonces, app. post 92 00:05:06,320 --> 00:05:08,850 ‫y ruta estándar y luego, por supuesto, necesitamos 93 00:05:08,850 --> 00:05:10,810 ‫una función de controlador para eso. 94 00:05:10,810 --> 00:05:14,720 ‫Vamos a crearlo rápidamente aquí en nuestro bookingController. 95 00:05:14,720 --> 00:05:19,013 ‫Déjame llamar a eso exportación. webhookCheckout. 96 00:05:31,360 --> 00:05:36,360 ‫Ahora tendré que importar este controlador a la aplicación. js. 97 00:05:39,210 --> 00:05:42,110 ‫Hagamos eso justo aquí después del bookingRouter en 98 00:05:45,150 --> 00:05:47,133 ‫realidad, entonces este y este, controlador 99 00:05:49,440 --> 00:05:51,383 ‫y aquí también controlador. 100 00:05:54,580 --> 00:05:56,050 ‫Está bien. 101 00:05:56,050 --> 00:06:01,050 ‫Ahora aquí abajo, eso es bookingController. webhookCheckout. 102 00:06:04,800 --> 00:06:08,820 ‫Ahora, ¿por qué definimos este webhook-checkout aquí mismo 103 00:06:08,820 --> 00:06:12,410 ‫en la aplicación? js en lugar de 104 00:06:12,410 --> 00:06:14,440 ‫hacerlo, por ejemplo, en bookingRouter. 105 00:06:14,440 --> 00:06:17,950 ‫La razón de esto es que en esta función de controlador, 106 00:06:17,950 --> 00:06:20,677 ‫cuando recibimos el cuerpo de Stripe, la función 107 00:06:20,677 --> 00:06:22,850 ‫de Stripe que luego usaremos 108 00:06:22,850 --> 00:06:26,780 ‫para leer realmente el cuerpo necesita este cuerpo en forma cruda, así 109 00:06:26,780 --> 00:06:29,633 ‫que básicamente como una cadena y no como JSON. 110 00:06:31,370 --> 00:06:34,140 ‫Nuevamente, en esta ruta aquí, necesitamos que 111 00:06:34,140 --> 00:06:37,555 ‫el cuerpo que viene con la solicitud no esté en 112 00:06:37,555 --> 00:06:40,600 ‫JSON, de lo contrario, esto no funcionará en absoluto. 113 00:06:40,600 --> 00:06:43,700 ‫Ahora bien, la cuestión es que tan pronto como una 114 00:06:43,700 --> 00:06:46,710 ‫solicitud llegue a este middleware aquí, el cuerpo se analizará 115 00:06:46,710 --> 00:06:48,563 ‫y se convertirá a JSON. 116 00:06:49,700 --> 00:06:54,650 ‫Luego se pondrá a pedido. body como un objeto JSON simple. 117 00:06:54,650 --> 00:06:57,520 ‫De nuevo con eso, este controlador de 118 00:06:57,520 --> 00:06:59,180 ‫ruta aquí no funcionaría. 119 00:06:59,180 --> 00:07:02,520 ‫Esa es la razón por la que necesitamos poner esta ruta aquí 120 00:07:02,520 --> 00:07:04,557 ‫antes de llamar al analizador corporal. 121 00:07:05,580 --> 00:07:08,260 ‫Ahora todavía necesitamos analizar el cuerpo, pero en 122 00:07:08,260 --> 00:07:10,120 ‫el llamado formato sin formato. 123 00:07:10,120 --> 00:07:13,690 ‫En el momento en que estaba grabando este video, 124 00:07:13,690 --> 00:07:17,220 ‫no podíamos hacerlo con Express listo para usar. 125 00:07:17,220 --> 00:07:21,500 ‫Entonces, en este video, descargamos el analizador corporal de npm y lo 126 00:07:21,500 --> 00:07:24,220 ‫usamos como lo muestro en el video. 127 00:07:24,220 --> 00:07:28,340 ‫Sin embargo, como cinco días después de que grabé 128 00:07:28,340 --> 00:07:32,770 ‫este video, Express también agregó el analizador sin procesar a Express. 129 00:07:32,770 --> 00:07:37,000 ‫Ahora podemos usar express. raw en lugar de tener que 130 00:07:37,000 --> 00:07:39,523 ‫instalar el analizador corporal o el middleware desde npm. 131 00:07:40,530 --> 00:07:44,610 ‫Nuevamente, en este video, ahora instalaré el analizador corporal, pero 132 00:07:44,610 --> 00:07:46,440 ‫realmente no es necesario. 133 00:07:46,440 --> 00:07:49,293 ‫Puedes usar express. crudo en su lugar. 134 00:07:51,590 --> 00:07:52,700 ‫Npm instala 135 00:07:54,480 --> 00:07:55,403 ‫body-parser. 136 00:07:58,950 --> 00:08:02,120 ‫Probablemente todo esto suene un poco enfocado, y 137 00:08:02,120 --> 00:08:04,350 ‫lo entiendo totalmente, pero así es 138 00:08:04,350 --> 00:08:08,050 ‫como funciona la documentación de Stripe y nos obliga 139 00:08:08,890 --> 00:08:10,893 ‫a hacerlo, de verdad. 140 00:08:15,210 --> 00:08:17,100 ‫Volvamos aquí a nuestra ruta. 141 00:08:17,100 --> 00:08:20,453 ‫En esta ruta, necesitamos que el cuerpo esté en formato raw. 142 00:08:21,460 --> 00:08:25,330 ‫Podemos agregar eso como un middleware aquí entre la ruta y 143 00:08:25,330 --> 00:08:26,673 ‫el controlador final. 144 00:08:28,654 --> 00:08:31,013 ‫Aquí decimos bodyParser. raw, y 145 00:08:34,830 --> 00:08:37,490 ‫también necesitamos especificar aquí el 146 00:08:39,450 --> 00:08:43,127 ‫tipo muy rápido como application / json. 147 00:08:48,130 --> 00:08:52,660 ‫Ahora agregamos este análisis de cuerpo como un cuerpo sin procesar aquí en 148 00:08:52,660 --> 00:08:54,183 ‫esta pila de middleware. 149 00:08:55,964 --> 00:08:58,150 ‫Todo esto realmente comenzará a juntarse 150 00:08:58,150 --> 00:09:00,970 ‫una vez que comencemos a implementar esta función. 151 00:09:00,970 --> 00:09:02,543 ‫De hecho, hagámoslo ahora, 152 00:09:03,820 --> 00:09:05,210 ‫aquí mismo. 153 00:09:05,210 --> 00:09:07,100 ‫Pero antes de hacer 154 00:09:07,100 --> 00:09:09,780 ‫eso, eliminemos todo el código que escribimos 155 00:09:09,780 --> 00:09:11,680 ‫para que funcione ahora mismo. 156 00:09:11,680 --> 00:09:14,420 ‫Entonces, básicamente esta función de middleware, 157 00:09:14,420 --> 00:09:16,350 ‫ya no la necesitamos. 158 00:09:16,350 --> 00:09:18,480 ‫También aquí en 159 00:09:18,480 --> 00:09:21,980 ‫viewRoutes, ya no lo necesitamos aquí. 160 00:09:21,980 --> 00:09:24,770 ‫Y finalmente, en bookingController, también 161 00:09:24,770 --> 00:09:28,153 ‫volvamos a configurar nuestra URL a la normalidad. 162 00:09:31,080 --> 00:09:33,180 ‫Dejaré todo esto aquí para que 163 00:09:33,180 --> 00:09:35,233 ‫pueda tenerlo como referencia. 164 00:09:37,390 --> 00:09:40,863 ‫Pero ahora la URL correcta debería ser esta. 165 00:09:43,090 --> 00:09:45,400 ‫Básicamente, después de una reserva exitosa, 166 00:09:45,400 --> 00:09:48,090 ‫todavía queremos volver a my-tours pero sin 167 00:09:48,090 --> 00:09:50,350 ‫todos estos parámetros de 168 00:09:51,350 --> 00:09:54,580 ‫consulta porque ahora ya no es esta función aquí, 169 00:09:54,580 --> 00:09:57,430 ‫que se encargará de crear la reserva, sino 170 00:09:57,430 --> 00:09:59,770 ‫que es esta función aquí, que 171 00:09:59,770 --> 00:10:02,060 ‫es de Por supuesto, el que 172 00:10:02,060 --> 00:10:05,633 ‫se llama una vez que Stripe llama a nuestro webhook. 173 00:10:07,140 --> 00:10:08,470 ‫Implementemos ahora esto. 174 00:10:08,470 --> 00:10:10,140 ‫Lo primero que debemos 175 00:10:10,140 --> 00:10:13,763 ‫hacer es eliminar esta firma de Stripe de nuestros encabezados, 176 00:10:15,780 --> 00:10:19,840 ‫así que firma y luego solicita. encabezados 177 00:10:21,500 --> 00:10:26,373 ‫y luego desde allí stripe-signature. 178 00:10:28,220 --> 00:10:30,710 ‫Básicamente, cuando Stripe llama a nuestro webhook, 179 00:10:30,710 --> 00:10:32,830 ‫agregará un encabezado a esa 180 00:10:32,830 --> 00:10:36,280 ‫solicitud que contiene una firma especial para nuestro webhook. 181 00:10:38,480 --> 00:10:40,700 ‫Si estás pensando que estás siguiendo ciegamente 182 00:10:40,700 --> 00:10:42,590 ‫lo que estoy haciendo aquí, 183 00:10:42,590 --> 00:10:45,070 ‫bueno, (risas) eso es exactamente lo que hice 184 00:10:45,070 --> 00:10:47,050 ‫también en las documentaciones de Stripe. 185 00:10:47,050 --> 00:10:50,320 ‫Una vez más, así es como funciona Stripe, y no 186 00:10:50,320 --> 00:10:52,973 ‫hay nada que podamos hacer contra eso. 187 00:10:54,350 --> 00:10:57,453 ‫De todos modos, a continuación, creemos un 188 00:10:59,310 --> 00:11:03,690 ‫evento Stripe, por lo que el evento const es igual a stripe. 189 00:11:03,690 --> 00:11:07,410 ‫Para eso, por supuesto, necesitamos la biblioteca Stripe 190 00:11:07,410 --> 00:11:09,573 ‫instalada, que tenemos aquí. 191 00:11:12,650 --> 00:11:14,350 ‫Entonces, raya. webhooks. contructEvent. 192 00:11:20,378 --> 00:11:23,210 ‫Ahora aquí es donde finalmente entra en juego ese 193 00:11:23,210 --> 00:11:26,520 ‫cuerpo, así que pídelo. cuerpo. 194 00:11:26,520 --> 00:11:28,370 ‫Y recuerde que este cuerpo aquí debe 195 00:11:28,370 --> 00:11:30,220 ‫estar en forma sin procesar, por 196 00:11:30,220 --> 00:11:32,083 ‫lo que básicamente está disponible como una cadena. 197 00:11:33,130 --> 00:11:36,340 ‫Una vez más, es por eso que colocamos esa ruta 198 00:11:36,340 --> 00:11:38,110 ‫antes que todas nuestras otras 199 00:11:38,110 --> 00:11:41,580 ‫rutas y especialmente antes de que el analizador corporal pueda hacer 200 00:11:41,580 --> 00:11:44,863 ‫su trabajo de convertir nuestro cuerpo en un objeto JSON. 201 00:11:46,170 --> 00:11:51,050 ‫Luego, además de ese cuerpo, para el evento, necesitamos una firma, así que básicamente 202 00:11:51,050 --> 00:11:53,370 ‫la firma que se envió junto 203 00:11:53,370 --> 00:11:56,763 ‫con el encabezado, y finalmente nuestro secreto de webhook. 204 00:11:57,710 --> 00:12:00,653 ‫Consigamos eso de aquí, cópielo. 205 00:12:01,585 --> 00:12:05,610 ‫Como es un secreto, deberíamos, como siempre, agregarlo aquí 206 00:12:05,610 --> 00:12:07,143 ‫a nuestro 207 00:12:10,460 --> 00:12:12,737 ‫archivo de configuración, así STRIPE_WEBHOOK_SECRET. 208 00:12:16,650 --> 00:12:19,380 ‫Y luego, por supuesto, no olvide agregar esto 209 00:12:19,380 --> 00:12:21,663 ‫también a nuestra configuración de Heroku. 210 00:12:26,100 --> 00:12:27,330 ‫Usemos eso ahora. 211 00:12:27,330 --> 00:12:28,767 ‫Agregar proceso. env. 212 00:12:30,330 --> 00:12:31,830 ‫Debería haberlo copiado aquí 213 00:12:35,690 --> 00:12:36,573 ‫mismo. 214 00:12:37,752 --> 00:12:41,200 ‫Verá, todo esto es realmente para hacer que el 215 00:12:41,200 --> 00:12:43,450 ‫proceso sea súper, súper seguro. 216 00:12:43,450 --> 00:12:45,970 ‫Necesitamos todos estos datos, como la 217 00:12:45,970 --> 00:12:49,450 ‫firma y también el secreto, para validar básicamente los 218 00:12:49,450 --> 00:12:51,640 ‫datos que vienen en 219 00:12:51,640 --> 00:12:54,433 ‫el cuerpo para que nadie pueda manipularlos. 220 00:12:55,870 --> 00:12:58,050 ‫Ahora, durante la creación de este evento, 221 00:12:58,050 --> 00:12:59,280 ‫puede haber algunos 222 00:12:59,280 --> 00:13:01,420 ‫errores, por ejemplo, si la firma 223 00:13:01,420 --> 00:13:03,900 ‫es incorrecta o si el secreto es incorrecto. 224 00:13:03,900 --> 00:13:07,813 ‫Y entonces, envuelvamos esto en un bloque try-catch. 225 00:13:16,290 --> 00:13:17,850 ‫Bueno. 226 00:13:17,850 --> 00:13:19,500 ‫Por supuesto, ahora necesitamos la captura. 227 00:13:22,150 --> 00:13:23,410 ‫En caso de 228 00:13:23,410 --> 00:13:26,053 ‫que haya un error, queremos enviar un error 229 00:13:27,880 --> 00:13:32,450 ‫a Stripe, así que devuelva res. status 400 y luego simplemente use 230 00:13:33,756 --> 00:13:35,657 ‫send webhook error 231 00:13:40,140 --> 00:13:44,023 ‫y luego agreguemos el error. mensaje. 232 00:13:45,714 --> 00:13:49,220 ‫Entonces, es Stripe quien recibirá esta respuesta aquí porque nuevamente 233 00:13:49,220 --> 00:13:53,230 ‫es Stripe quien realmente llamará a la URL, por lo que 234 00:13:53,230 --> 00:13:56,603 ‫nuestro webhook, que luego llamará a esta función. 235 00:13:58,520 --> 00:14:02,420 ‫Ahora, por supuesto, también debemos declarar este evento aquí 236 00:14:02,420 --> 00:14:04,610 ‫fuera del bloque try-catch porque, 237 00:14:04,610 --> 00:14:07,623 ‫de lo contrario, no podremos usarlo allí. 238 00:14:08,660 --> 00:14:13,160 ‫Entonces, deje el evento y luego reasigne aquí porque recuerde que 239 00:14:13,160 --> 00:14:15,430 ‫ES6 const y let tienen 240 00:14:15,430 --> 00:14:17,450 ‫un alcance de bloque. 241 00:14:17,450 --> 00:14:20,480 ‫Por tanto, esta variable no estaría disponible fuera de 242 00:14:20,480 --> 00:14:21,473 ‫este bloque. 243 00:14:23,180 --> 00:14:25,830 ‫Ahora usemos ese evento. 244 00:14:25,830 --> 00:14:29,090 ‫En primer lugar, debemos probar si este es realmente el evento 245 00:14:29,090 --> 00:14:29,923 ‫que queremos. 246 00:14:30,810 --> 00:14:34,240 ‫Entonces, podemos hacer event. tipo es igual 247 00:14:34,240 --> 00:14:38,973 ‫a pago. sesión. completo. 248 00:14:42,080 --> 00:14:44,370 ‫Recuerde que en nuestro panel 249 00:14:44,370 --> 00:14:48,090 ‫de Stripe, ese es exactamente el tipo que definimos aquí. 250 00:14:48,090 --> 00:14:49,260 ‫Entonces, ese es el tipo de evento. 251 00:14:49,260 --> 00:14:52,183 ‫Ahora estamos verificando si ese es realmente 252 00:14:52,183 --> 00:14:56,287 ‫el evento que estamos recibiendo aquí solo para estar 100% seguros. 253 00:14:56,287 --> 00:14:59,780 ‫Si es así, queremos utilizar el evento para crear nuestra 254 00:14:59,780 --> 00:15:02,053 ‫reserva en nuestra base de datos. 255 00:15:03,860 --> 00:15:06,280 ‫De hecho, hagámoslo en una función separada 256 00:15:06,280 --> 00:15:08,983 ‫y no aquí dentro de todo este lío. 257 00:15:10,517 --> 00:15:12,590 ‫Para eso, crearé una función. 258 00:15:12,590 --> 00:15:13,640 ‫De hecho, déjame 259 00:15:13,640 --> 00:15:15,990 ‫darle exactamente el mismo nombre, así que createBookingCheckout. 260 00:15:17,487 --> 00:15:19,490 ‫En realidad, era un buen nombre, 261 00:15:19,490 --> 00:15:21,450 ‫pero ahora no puede ser un 262 00:15:21,450 --> 00:15:23,250 ‫middleware, sino una función normal. 263 00:15:26,080 --> 00:15:28,823 ‫Esta función aceptará los datos de la sesión. 264 00:15:31,080 --> 00:15:35,310 ‫Y recuerde que los datos de la sesión son exactamente esta sesión 265 00:15:35,310 --> 00:15:37,513 ‫que creamos aquí en primer lugar. 266 00:15:41,404 --> 00:15:43,730 ‫Si este es el evento correcto, 267 00:15:43,730 --> 00:15:45,743 ‫entonces llamemos a esa función, 268 00:15:46,680 --> 00:15:49,500 ‫entonces creeBookingCheckout con la sesión, que está en 269 00:15:49,500 --> 00:15:53,057 ‫el evento. datos. objeto. 270 00:15:57,447 --> 00:15:58,320 ‫Y 271 00:15:58,320 --> 00:16:01,333 ‫finalmente, enviemos una respuesta a Stripe. 272 00:16:02,450 --> 00:16:03,840 ‫Entonces, el estado 200 273 00:16:05,780 --> 00:16:07,480 ‫y luego digamos que alguna recepción 274 00:16:10,300 --> 00:16:11,823 ‫json se establece en verdadero. 275 00:16:13,200 --> 00:16:14,033 ‫¿Tiene sentido? 276 00:16:16,000 --> 00:16:18,490 ‫Una vez más, todo este código se 277 00:16:18,490 --> 00:16:21,390 ‫ejecutará siempre que un pago se haya realizado correctamente. 278 00:16:21,390 --> 00:16:25,380 ‫Stripe llamará a nuestro webhook, que es la URL, que 279 00:16:25,380 --> 00:16:27,420 ‫llamará a esta función. 280 00:16:27,420 --> 00:16:30,600 ‫Y así, esta función recibe un cuerpo de la solicitud 281 00:16:30,600 --> 00:16:34,330 ‫y luego, junto con la firma y / o el secreto del 282 00:16:34,330 --> 00:16:37,110 ‫webhook, crea un evento, que contendrá la sesión. 283 00:16:37,110 --> 00:16:39,190 ‫Y luego, utilizando los datos de la 284 00:16:39,190 --> 00:16:41,963 ‫sesión, podemos crear nuestra nueva reserva en la base de datos. 285 00:16:43,987 --> 00:16:45,660 ‫Y entonces, eso será bastante similar a 286 00:16:45,660 --> 00:16:47,143 ‫lo que teníamos aquí antes. 287 00:16:48,400 --> 00:16:51,790 ‫Entonces, necesitaremos esta línea de código aquí nuevamente. 288 00:16:51,790 --> 00:16:53,923 ‫Entonces, esta también será una función asíncrona. 289 00:16:58,497 --> 00:17:00,530 ‫Y entonces, esto es exactamente lo mismo. 290 00:17:00,530 --> 00:17:02,260 ‫Ahora, lo que necesitamos 291 00:17:02,260 --> 00:17:06,690 ‫aquí, por supuesto, es tener acceso al recorrido, al usuario y al precio. 292 00:17:06,690 --> 00:17:10,550 ‫Pero esos datos una vez más se almacenan en esa sesión. 293 00:17:10,550 --> 00:17:12,400 ‫Entonces, comencemos con el recorrido. 294 00:17:12,400 --> 00:17:14,780 ‫Y recuerde cómo aquí, cuando creamos 295 00:17:14,780 --> 00:17:17,100 ‫por primera vez esta 296 00:17:17,100 --> 00:17:20,040 ‫función de controlador, especifiqué este campo client_reference_id 297 00:17:20,040 --> 00:17:22,370 ‫y agregué el tourId a eso. 298 00:17:22,370 --> 00:17:23,840 ‫¿Recuérdalo? 299 00:17:23,840 --> 00:17:25,700 ‫Hice eso porque, en ese 300 00:17:25,700 --> 00:17:29,840 ‫momento, ya sabía que necesitaríamos esta identificación de gira un poco más tarde. 301 00:17:29,840 --> 00:17:32,490 ‫Ahora es el momento en el que realmente necesitamos 302 00:17:32,490 --> 00:17:35,333 ‫la identificación del tour para poder crear esa nueva reserva. 303 00:17:36,732 --> 00:17:38,490 ‫Y así, ahora el ID de recorrido 304 00:17:38,490 --> 00:17:41,670 ‫que necesitamos está en el ID de referencia del cliente de punto de sesión. 305 00:17:41,670 --> 00:17:44,770 ‫Entonces, copiemos esto y digamos 306 00:17:47,870 --> 00:17:48,703 ‫sesión. 307 00:17:49,660 --> 00:17:53,823 ‫Y, por supuesto, aquí tenemos que decir gira. 308 00:17:55,670 --> 00:17:57,040 ‫Entonces, esa es la identificación de la gira. 309 00:17:57,040 --> 00:17:59,150 ‫A continuación, necesitamos la identificación de usuario. 310 00:17:59,150 --> 00:18:01,240 ‫Ahora la información que tenemos en nuestra 311 00:18:01,240 --> 00:18:03,973 ‫sesión sobre el usuario es el correo electrónico del usuario. 312 00:18:05,630 --> 00:18:07,170 ‫Entonces, ahora lo que 313 00:18:07,170 --> 00:18:10,500 ‫tenemos que hacer es básicamente obtener la identificación del usuario. 314 00:18:10,500 --> 00:18:12,793 ‫Para eso, consultaremos por correo electrónico. 315 00:18:13,720 --> 00:18:16,810 ‫Eso no es un problema porque el correo electrónico también es único. 316 00:18:16,810 --> 00:18:19,353 ‫En base a eso, podemos encontrar la identificación única. 317 00:18:20,370 --> 00:18:24,183 ‫Entonces, el usuario constante está en espera. 318 00:18:25,570 --> 00:18:27,660 ‫Y creo que ya tenemos al usuario aquí. 319 00:18:27,660 --> 00:18:28,493 ‫¿No? 320 00:18:29,520 --> 00:18:30,570 ‫No, en realidad no lo hago. 321 00:18:31,890 --> 00:18:33,290 ‫Entonces, hagamos eso aquí. 322 00:18:35,490 --> 00:18:37,973 ‫Y usuario aquí también. 323 00:18:41,070 --> 00:18:41,903 ‫Bueno. 324 00:18:41,903 --> 00:18:46,890 ‫Entonces, User. findOne y luego consulta por correo electrónico, que 325 00:18:47,990 --> 00:18:51,330 ‫está en el punto de sesión, y creo que es el 326 00:18:51,330 --> 00:18:53,780 ‫correo electrónico del cliente o algo así. 327 00:18:55,200 --> 00:18:56,200 ‫Es customer_email. 328 00:18:59,860 --> 00:19:00,693 ‫Bueno. 329 00:19:02,070 --> 00:19:04,970 ‫Pero eso devolverá el documento completo, pero en 330 00:19:04,970 --> 00:19:06,910 ‫realidad queremos la identificación. 331 00:19:06,910 --> 00:19:09,780 ‫Entonces, envuelvamos todo esto aquí entre paréntesis 332 00:19:10,730 --> 00:19:14,743 ‫y luego llamemos al ID allí o leamos el ID. 333 00:19:16,620 --> 00:19:17,960 ‫Eso es todo. 334 00:19:17,960 --> 00:19:19,233 ‫Y finalmente, el precio. 335 00:19:22,350 --> 00:19:24,023 ‫¿Dónde se almacena el precio? 336 00:19:25,320 --> 00:19:26,833 ‫Bueno, está aquí en line_items. 337 00:19:27,880 --> 00:19:30,610 ‫Eso es una matriz, entonces en el 338 00:19:30,610 --> 00:19:33,553 ‫elemento cero, y luego la cantidad dividida por 100. 339 00:19:34,580 --> 00:19:38,210 ‫Entonces, lo multiplicamos aquí por 100 para obtener centavos, pero 340 00:19:38,210 --> 00:19:41,590 ‫ahora, por supuesto, lo queremos de vuelta en dólares. 341 00:19:41,590 --> 00:19:44,700 ‫Entonces, básicamente tenemos que dividir eso. 342 00:19:44,700 --> 00:19:48,550 ‫Y así, sesión. line_items y luego la 343 00:19:49,460 --> 00:19:54,460 ‫cantidad de puntos del primer elemento si estoy en lo cierto. 344 00:19:55,950 --> 00:19:56,783 ‫Sí. 345 00:19:56,783 --> 00:20:01,710 ‫Entonces, cantidad dividida por 100. 346 00:20:01,710 --> 00:20:04,010 ‫Eso debería ser realmente. 347 00:20:04,010 --> 00:20:06,630 ‫Confirmemos ahora nuestros cambios en el repositorio 348 00:20:06,630 --> 00:20:08,740 ‫y enviémoslo a Stripe. 349 00:20:08,740 --> 00:20:12,840 ‫Entonces, git add all, por supuesto, 350 00:20:12,840 --> 00:20:16,600 ‫y luego git commit message 351 00:20:18,090 --> 00:20:21,633 ‫Implementación de stripe 352 00:20:24,960 --> 00:20:29,960 ‫mejorada, y luego git push heroku master. 353 00:20:31,190 --> 00:20:33,273 ‫Una vez más, esto llevará algún tiempo. 354 00:20:33,273 --> 00:20:35,263 ‫Te veré cuando termine. 355 00:20:36,200 --> 00:20:37,033 ‫Está bien. 356 00:20:37,033 --> 00:20:40,323 ‫Ahora no olvide configurar esa nueva variable de entorno. 357 00:20:41,610 --> 00:20:46,610 ‫Entonces, ese es el conjunto de dos puntos de configuración de heroku, 358 00:20:46,750 --> 00:20:49,433 ‫y luego simplemente cópielo desde aquí. 359 00:20:53,590 --> 00:20:54,720 ‫Bueno. 360 00:20:54,720 --> 00:20:56,800 ‫Eso luego reinicia la aplicación. 361 00:20:56,800 --> 00:20:58,173 ‫Y eso es. 362 00:20:59,570 --> 00:21:02,723 ‫Entonces, vayamos ahora a probarlo. 363 00:21:04,980 --> 00:21:05,813 ‫Está bien. 364 00:21:07,050 --> 00:21:09,480 ‫Todavía estamos aquí en nuestra aplicación. 365 00:21:09,480 --> 00:21:12,883 ‫Veamos qué tours ya ha reservado Laura. 366 00:21:14,100 --> 00:21:15,370 ‫Ella tiene el Forest Hiker. 367 00:21:15,370 --> 00:21:19,823 ‫Esa reserva todavía se hizo utilizando el método anterior. 368 00:21:21,050 --> 00:21:24,240 ‫Pero ese viejo método ya no funciona. 369 00:21:24,240 --> 00:21:27,047 ‫Ahora, si hacemos otra reserva y 370 00:21:27,047 --> 00:21:29,490 ‫funciona, bueno, eso significará 371 00:21:29,490 --> 00:21:32,773 ‫que, por supuesto, nuestra nueva implementación funciona. 372 00:21:34,730 --> 00:21:35,780 ‫Probemos eso aquí. 373 00:21:39,760 --> 00:21:41,493 ‫Como siempre, 4242. 374 00:21:50,420 --> 00:21:51,683 ‫Ahora esperemos. 375 00:21:52,730 --> 00:21:55,740 ‫Bueno, aparentemente eso no salió tan bien porque, de 376 00:21:55,740 --> 00:21:58,520 ‫lo contrario, nuestra segunda nueva gira ya debería 377 00:21:58,520 --> 00:22:00,743 ‫estar aquí en nuestras reservas. 378 00:22:02,230 --> 00:22:04,203 ‫Veamos aquí en nuestro panel de control. 379 00:22:05,860 --> 00:22:06,983 ‫Si ahora 380 00:22:12,150 --> 00:22:15,893 ‫recargamos esto, entonces realmente vemos que hubo un evento exitoso. 381 00:22:17,407 --> 00:22:20,320 ‫Entonces, ese es el evento que acabamos de 382 00:22:20,320 --> 00:22:23,170 ‫crear y que envió este cuerpo aquí 383 00:22:23,170 --> 00:22:25,380 ‫y luego recibió esta respuesta. 384 00:22:25,380 --> 00:22:27,560 ‫Entonces, esta recepción establecida en verdadero es 385 00:22:27,560 --> 00:22:30,663 ‫exactamente lo que hicimos aquí en nuestro código, así que 386 00:22:31,670 --> 00:22:32,633 ‫esto aquí. 387 00:22:34,060 --> 00:22:36,000 ‫Entonces, esa es la respuesta que 388 00:22:36,000 --> 00:22:39,770 ‫enviamos y el cuerpo en el que obtuvimos fue toda esta información. 389 00:22:39,770 --> 00:22:42,810 ‫Y así, podemos ver aquí la sesión 390 00:22:42,810 --> 00:22:46,460 ‫con el precio, con el correo electrónico, con el tour. 391 00:22:46,460 --> 00:22:49,483 ‫Entonces, no estoy seguro de por qué no funcionó. 392 00:22:51,000 --> 00:22:53,163 ‫Entonces, recarguemos rápidamente esto aquí. 393 00:22:55,780 --> 00:22:59,050 ‫Entonces, en realidad, nuestra implementación de Stripe debería ser correcta, pero, 394 00:22:59,050 --> 00:23:02,013 ‫por alguna razón, nuestra nueva reserva no se creó. 395 00:23:03,120 --> 00:23:05,020 ‫Comprobemos eso también aquí en Compass. 396 00:23:07,460 --> 00:23:09,970 ‫Y de hecho, no está ahí. 397 00:23:09,970 --> 00:23:12,123 ‫Entonces, volvamos a nuestro código aquí. 398 00:23:13,410 --> 00:23:17,360 ‫Ah, y un error que veo de inmediato está aquí. 399 00:23:17,360 --> 00:23:20,393 ‫Entonces, debería completarse así. 400 00:23:22,090 --> 00:23:24,480 ‫Entonces, ese es un error estúpido. 401 00:23:24,480 --> 00:23:26,950 ‫Veamos si puede 402 00:23:26,950 --> 00:23:30,050 ‫haber otro error aquí en createBookingCheckout. 403 00:23:30,050 --> 00:23:30,883 ‫Aquí tenemos 404 00:23:32,750 --> 00:23:33,583 ‫line_items. 405 00:23:33,583 --> 00:23:35,093 ‫Veamos si eso es correcto. 406 00:23:36,110 --> 00:23:38,170 ‫Y sí, parece serlo. 407 00:23:38,170 --> 00:23:41,123 ‫También podemos confirmarlo aquí de nuevo en nuestro Stripe. 408 00:23:43,110 --> 00:23:45,290 ‫En realidad, aquí se llama display_items. 409 00:23:46,590 --> 00:23:47,423 ‫Eso es raro. 410 00:23:48,367 --> 00:23:52,140 ‫Solo para asegurarnos, llamémoslo también display_items aquí en 411 00:23:52,140 --> 00:23:54,363 ‫nuestro código aquí mismo. 412 00:23:55,980 --> 00:23:57,580 ‫Ahora, otra cosa que noté 413 00:23:58,750 --> 00:24:00,350 ‫ahora cuando eché otro vistazo 414 00:24:00,350 --> 00:24:03,510 ‫aquí es que todavía tenemos esta imagen codificada para estos 415 00:24:03,510 --> 00:24:05,763 ‫otros natours. dev. 416 00:24:07,587 --> 00:24:11,380 ‫Ahora solucionemos eso porque en este punto, por supuesto, nuestro 417 00:24:11,380 --> 00:24:14,580 ‫sitio web ya está activo e implementado. 418 00:24:14,580 --> 00:24:16,600 ‫Y así, básicamente podemos reemplazar eso con 419 00:24:16,600 --> 00:24:18,100 ‫lo mismo que tenemos aquí. 420 00:24:20,900 --> 00:24:23,430 ‫Entonces, usamos esta parte aquí muchas veces. 421 00:24:23,430 --> 00:24:25,480 ‫Entonces, es hora de usar eso nuevamente aquí. 422 00:24:32,672 --> 00:24:33,505 ‫Sí. 423 00:24:33,505 --> 00:24:35,353 ‫Intentemos volver a implementar esto. 424 00:24:36,380 --> 00:24:38,113 ‫Entonces, agrega todo de nuevo. 425 00:24:40,420 --> 00:24:42,070 ‫Y llamémoslo aquí 426 00:24:42,070 --> 00:24:44,430 ‫Implementación de banda mejorada dos. 427 00:24:44,430 --> 00:24:47,693 ‫Y luego empújelo de nuevo a Heroku. 428 00:24:51,580 --> 00:24:52,560 ‫Bueno. 429 00:24:52,560 --> 00:24:54,253 ‫Intentémoslo una vez más. 430 00:24:55,830 --> 00:24:57,023 ‫Regresemos aquí. 431 00:25:00,630 --> 00:25:04,063 ‫Ahora intentemos reservar de nuevo en Park Camper. 432 00:25:15,760 --> 00:25:16,683 ‫Está bien. 433 00:25:17,920 --> 00:25:21,530 ‫Debería ver la imagen apareciendo aquí en el lado izquierdo. 434 00:25:21,530 --> 00:25:24,200 ‫Eso significa que nuestra nueva integración de 435 00:25:24,200 --> 00:25:25,753 ‫imágenes también funcionó bien. 436 00:25:27,220 --> 00:25:28,283 ‫Ahora está procesando. 437 00:25:29,382 --> 00:25:31,380 ‫Ah, ahora está aquí. 438 00:25:31,380 --> 00:25:32,320 ‫Excelente. 439 00:25:32,320 --> 00:25:33,533 ‫Eso es hermoso. 440 00:25:34,420 --> 00:25:36,850 ‫Ahora realmente tenemos una implementación de 441 00:25:36,850 --> 00:25:39,940 ‫Stripe segura y mucho más profesional en 442 00:25:39,940 --> 00:25:41,173 ‫nuestra aplicación. 443 00:25:42,070 --> 00:25:43,520 ‫Eso es genial. 444 00:25:43,520 --> 00:25:45,570 ‫Por supuesto, si vuelve 445 00:25:45,570 --> 00:25:49,500 ‫a cargar aquí, entonces debería ver este nuevo evento aquí, así 446 00:25:49,500 --> 00:25:52,050 ‫que esta nueva llamada a nuestro webhook, 447 00:25:52,050 --> 00:25:54,593 ‫que por supuesto nuevamente fue un éxito. 448 00:25:55,840 --> 00:25:57,690 ‫Eso es simplemente genial. 449 00:25:57,690 --> 00:26:00,740 ‫Ahora solo hay una última cosa que quiero hacer, que 450 00:26:00,740 --> 00:26:04,420 ‫es básicamente darle al usuario algunos comentarios en forma de uno de 451 00:26:04,420 --> 00:26:06,980 ‫estos mensajes verdes que usamos también, por ejemplo, 452 00:26:06,980 --> 00:26:09,123 ‫en el inicio de sesión. 453 00:26:10,650 --> 00:26:12,930 ‫En este momento, nuestra aplicación no 454 00:26:12,930 --> 00:26:16,476 ‫da ningún tipo de retroalimentación cuando se reservó un nuevo recorrido. 455 00:26:16,476 --> 00:26:18,650 ‫Ahora quiero cambiar eso. 456 00:26:18,650 --> 00:26:21,900 ‫Sin embargo, hacer esto no es realmente sencillo 457 00:26:21,900 --> 00:26:23,990 ‫porque recuerde que estos 458 00:26:23,990 --> 00:26:26,750 ‫mensajes son realmente mostrados por JavaScript. 459 00:26:26,750 --> 00:26:30,280 ‫Entonces, en los otros casos, hicimos una llamada HTTP a nuestra API. 460 00:26:30,280 --> 00:26:33,070 ‫Y luego, cuando lo hicimos, usamos JavaScript para 461 00:26:33,070 --> 00:26:34,840 ‫mostrar algún tipo de mensaje. 462 00:26:34,840 --> 00:26:36,970 ‫Pero ahora no lo hacemos así. 463 00:26:36,970 --> 00:26:40,710 ‫Y entonces, el mensaje ya debería estar en algún lugar del 464 00:26:40,710 --> 00:26:42,380 ‫HTML tan pronto como se 465 00:26:42,380 --> 00:26:45,400 ‫cargue la página para que luego nuestro JavaScript 466 00:26:45,400 --> 00:26:49,070 ‫pueda recoger ese mensaje del HTML y mostrarlo bien en uno 467 00:26:49,070 --> 00:26:50,463 ‫de estos banners. 468 00:26:51,610 --> 00:26:54,510 ‫Entonces, la forma en que voy a poner estas 469 00:26:54,510 --> 00:26:58,223 ‫alertas en el HTML es una vez más usando una propiedad de datos. 470 00:26:59,450 --> 00:27:03,000 ‫Comencemos implementando esta función allí mismo en nuestra 471 00:27:03,000 --> 00:27:04,363 ‫plantilla principal. 472 00:27:06,610 --> 00:27:09,273 ‫Eso es aquí en vistas, base. 473 00:27:11,160 --> 00:27:13,630 ‫De hecho, agregaré ese mensaje de alerta directamente 474 00:27:13,630 --> 00:27:15,663 ‫en el elemento del cuerpo. 475 00:27:17,110 --> 00:27:19,963 ‫Aquí tendremos una propiedad de alerta de datos, que 476 00:27:21,860 --> 00:27:24,000 ‫en realidad solo debería establecerse 477 00:27:24,000 --> 00:27:26,563 ‫si la variable de alerta está disponible aquí. 478 00:27:27,480 --> 00:27:31,460 ‫Entonces, usemos ES6, una cadena de plantilla, y digamos 479 00:27:31,460 --> 00:27:35,060 ‫si hay una alerta, luego use alert 480 00:27:35,060 --> 00:27:38,713 ‫aquí, y de lo contrario, una cadena vacía. 481 00:27:39,980 --> 00:27:43,370 ‫Y entonces, esta alerta aquí será el mensaje 482 00:27:43,370 --> 00:27:47,230 ‫de alerta que JavaScript luego recogerá y mostrará en la página. 483 00:27:47,230 --> 00:27:50,230 ‫Ahora bien, ¿cómo termina este mensaje de alerta como una 484 00:27:50,230 --> 00:27:52,513 ‫variable de alerta aquí en nuestra plantilla? 485 00:27:53,360 --> 00:27:56,448 ‫Bueno, se me ocurrió una solución que es reutilizable 486 00:27:56,448 --> 00:27:59,250 ‫para que podamos usarla en toda nuestra aplicación. 487 00:27:59,250 --> 00:28:01,840 ‫Es decir, en la cadena de consulta, agregaremos alguna 488 00:28:01,840 --> 00:28:03,890 ‫palabra clave de alerta y luego tendremos 489 00:28:03,890 --> 00:28:05,820 ‫un middleware, que tomará esa 490 00:28:05,820 --> 00:28:08,560 ‫palabra clave de la URL y, de acuerdo con la 491 00:28:08,560 --> 00:28:10,910 ‫palabra clave que coloquemos allí, luego pondrá un 492 00:28:10,910 --> 00:28:15,050 ‫mensaje de alerta completo en respuesta. . lugareños. 493 00:28:15,050 --> 00:28:19,000 ‫Y así, recuerde que todo lo que está en respuesta. locals está disponible 494 00:28:19,000 --> 00:28:22,483 ‫como variable en todas nuestras plantillas. 495 00:28:23,450 --> 00:28:25,630 ‫Entonces, en realidad lo usamos antes 496 00:28:25,630 --> 00:28:27,563 ‫en nuestro authController, creo. 497 00:28:29,480 --> 00:28:32,567 ‫Muy rápido, déjame mostrarte eso. 498 00:28:33,530 --> 00:28:37,060 ‫Aquí mismo, dijimos respuesta. local. usuario y 499 00:28:37,060 --> 00:28:39,074 ‫ponga el usuario actual allí. 500 00:28:39,074 --> 00:28:41,720 ‫Luego, automáticamente en todas las plantillas, tenemos 501 00:28:41,720 --> 00:28:44,283 ‫acceso a esa variable de usuario. 502 00:28:47,430 --> 00:28:50,070 ‫Entonces, ahora implementemos lo que acabo de 503 00:28:50,070 --> 00:28:52,597 ‫decir y empecemos con la URL. 504 00:28:54,330 --> 00:28:57,540 ‫Lo que voy a hacer aquí es agregar esa cadena de consulta aquí 505 00:28:57,540 --> 00:28:59,097 ‫a la URL de éxito. 506 00:28:59,970 --> 00:29:04,573 ‫Aquí, diré alerta igual reserva. 507 00:29:05,970 --> 00:29:10,310 ‫Ahora podría, en todas las demás URL, agregar también alguna alerta y luego con 508 00:29:10,310 --> 00:29:12,863 ‫una palabra clave diferente aquí, por supuesto. 509 00:29:14,350 --> 00:29:18,100 ‫Y lo haremos aquí realmente para esta reserva. 510 00:29:18,100 --> 00:29:21,793 ‫Pero de nuevo creé aquí una especie de solución reutilizable. 511 00:29:23,340 --> 00:29:27,470 ‫De todos modos, ahora en nuestras rutas, necesitamos básicamente un middleware, que 512 00:29:27,470 --> 00:29:29,920 ‫se ejecutará para todas las solicitudes. 513 00:29:29,920 --> 00:29:32,270 ‫Y es ese middleware, que recogerá la alerta 514 00:29:32,270 --> 00:29:35,240 ‫de la cadena de consulta y pondrá un mensaje de alerta 515 00:29:35,240 --> 00:29:37,453 ‫en nuestra respuesta. lugareños. 516 00:29:41,457 --> 00:29:42,624 ‫Entonces, enrutador. 517 00:29:45,040 --> 00:29:48,233 ‫use viewsController. alertas. 518 00:29:50,290 --> 00:29:52,320 ‫Y entonces, esta es una función de 519 00:29:52,320 --> 00:29:56,200 ‫middleware, que básicamente se ejecutará para todas y cada una de las solicitudes 520 00:29:56,200 --> 00:29:58,130 ‫que ingresan a este enrutador, 521 00:29:58,130 --> 00:30:01,063 ‫básicamente para todas las solicitudes a nuestro sitio web. 522 00:30:02,370 --> 00:30:04,870 ‫Ahora creemos ese middleware en 523 00:30:04,870 --> 00:30:06,020 ‫nuestro viewsController. 524 00:30:10,460 --> 00:30:12,380 ‫Entonces, exportaciones. solicitud 525 00:30:14,480 --> 00:30:17,283 ‫de alertas, respuesta y siguiente. 526 00:30:19,650 --> 00:30:20,730 ‫Y entonces, 527 00:30:22,760 --> 00:30:26,300 ‫la alerta es solicitud. consulta. alerta. 528 00:30:26,300 --> 00:30:29,873 ‫Entonces, usemos esta estructuración aquí una vez más. 529 00:30:32,020 --> 00:30:36,553 ‫Y luego digamos que si alerta es igual a reservar, entonces 530 00:30:39,030 --> 00:30:42,653 ‫la alerta que ponemos aquí en la cadena de 531 00:30:44,670 --> 00:30:46,070 ‫consulta, bueno, en 532 00:30:46,070 --> 00:30:50,970 ‫ese caso, digamos respuesta. lugareños. alerta será que su 533 00:30:52,830 --> 00:30:53,780 ‫reserva 534 00:30:56,910 --> 00:30:57,970 ‫fue exitosa, 535 00:30:59,850 --> 00:31:01,023 ‫por favor 536 00:31:03,790 --> 00:31:06,883 ‫revise su correo electrónico para una confirmación. 537 00:31:10,330 --> 00:31:13,090 ‫Y también deberíamos agregar alguna 538 00:31:13,090 --> 00:31:17,960 ‫otra frase, que es esta, si su reserva no lo hace, 539 00:31:24,070 --> 00:31:27,743 ‫seleccione esta, no aparece aquí de inmediato, vuelva 540 00:31:33,270 --> 00:31:34,523 ‫más tarde. 541 00:31:36,140 --> 00:31:37,230 ‫Y esta última 542 00:31:37,230 --> 00:31:39,920 ‫parte se debe a que Stripe dice muy 543 00:31:39,920 --> 00:31:43,620 ‫específicamente en su documentación que a veces se llama al webhook un 544 00:31:43,620 --> 00:31:46,880 ‫poco después de que se llama a la URL de éxito. 545 00:31:46,880 --> 00:31:49,810 ‫En ese caso, esa URL correcta mostraría todos los 546 00:31:49,810 --> 00:31:52,677 ‫recorridos actuales, pero solo después de eso, se 547 00:31:52,677 --> 00:31:54,300 ‫llamaría al webhook y 548 00:31:54,300 --> 00:31:57,270 ‫se crearía el recorrido en nuestra base de datos. 549 00:31:57,270 --> 00:32:00,040 ‫Por lo tanto, la nueva reserva no aparecerá de 550 00:32:00,040 --> 00:32:01,953 ‫inmediato en la página Mis reservas. 551 00:32:02,850 --> 00:32:06,220 ‫Pero, por supuesto, todo funcionó bien en ese caso. 552 00:32:06,220 --> 00:32:09,583 ‫Entonces, simplemente recargo, pero luego solucionaremos ese problema. 553 00:32:12,340 --> 00:32:15,080 ‫Ahora solo necesitamos llamar al siguiente middleware. 554 00:32:15,080 --> 00:32:17,160 ‫Y eso es todo. 555 00:32:17,160 --> 00:32:21,390 ‫Nuevamente, solo hicimos esto aquí para la alerta igual a la reserva, pero 556 00:32:21,390 --> 00:32:24,090 ‫ahora podríamos usar esto en todo el lugar 557 00:32:24,090 --> 00:32:27,070 ‫en nuestro sitio web estableciendo diferentes palabras clave de 558 00:32:27,070 --> 00:32:28,982 ‫alerta y cadenas de consulta. 559 00:32:28,982 --> 00:32:33,982 ‫Con esto, ponemos este mensaje aquí en res. lugareños. alerta. 560 00:32:35,600 --> 00:32:38,940 ‫Nuevamente, nuestra plantilla base lo recogerá y lo 561 00:32:38,940 --> 00:32:42,320 ‫mostrará aquí en esta propiedad de alerta de datos. 562 00:32:42,320 --> 00:32:46,440 ‫Entonces, todo lo que queda por hacer ahora es ir a nuestro índice. js y lea 563 00:32:46,440 --> 00:32:49,890 ‫la alerta desde aquí y luego muéstrela. 564 00:32:49,890 --> 00:32:52,100 ‫Y entonces, eso debería ser bastante fácil. 565 00:32:52,100 --> 00:32:56,230 ‫Aquí en público, hagámoslo bien en el índice. 566 00:32:56,230 --> 00:33:00,260 ‫Y lo primero es que realmente necesitamos importar la función 567 00:33:00,260 --> 00:33:01,343 ‫de alertas. 568 00:33:06,480 --> 00:33:08,160 ‫Esa no es una aplicación. 569 00:33:08,160 --> 00:33:09,343 ‫Está aquí en index. 570 00:33:10,920 --> 00:33:12,090 ‫Bueno. 571 00:33:12,090 --> 00:33:15,883 ‫Y luego aquí abajo, básicamente leamos esa alerta. 572 00:33:17,290 --> 00:33:22,133 ‫Entonces, const alertMessage, digamos, es 573 00:33:23,250 --> 00:33:25,320 ‫document. querySelector, luego el 574 00:33:28,742 --> 00:33:31,327 ‫elemento body, dot dataset. alerta. 575 00:33:35,350 --> 00:33:37,673 ‫Y así, solo si hay una 576 00:33:39,760 --> 00:33:42,020 ‫alerta, por supuesto, muestre la alerta 577 00:33:43,160 --> 00:33:44,250 ‫con éxito 578 00:33:45,840 --> 00:33:48,000 ‫y el mensaje de alerta. 579 00:33:48,000 --> 00:33:50,640 ‫Y ahora, una pequeña cosa que quiero 580 00:33:50,640 --> 00:33:54,630 ‫hacer es cambiar un poco esta función showAlert aquí porque 581 00:33:54,630 --> 00:33:57,210 ‫en realidad tenemos mucho texto ahora. 582 00:33:57,210 --> 00:33:59,780 ‫Y el tiempo estándar en el que se 583 00:33:59,780 --> 00:34:03,163 ‫muestra la alerta no sería suficiente para leer todo el texto. 584 00:34:04,210 --> 00:34:06,880 ‫Entonces, puede ver aquí que después de cinco segundos, 585 00:34:06,880 --> 00:34:08,373 ‫la alerta está oculta. 586 00:34:10,126 --> 00:34:11,760 ‫Dejemos que el usuario especifique 587 00:34:11,760 --> 00:34:14,253 ‫la cantidad de segundos que se muestra la alerta. 588 00:34:16,810 --> 00:34:20,320 ‫Lo haremos por defecto de cinco segundos. 589 00:34:20,320 --> 00:34:24,810 ‫Aquí, simplemente multiplicamos el tiempo por 1,000 para convertirlo 590 00:34:24,810 --> 00:34:26,483 ‫a milisegundos. 591 00:34:27,976 --> 00:34:30,690 ‫Así, todas las funciones funcionarán en todas 592 00:34:30,690 --> 00:34:32,270 ‫partes con cinco segundos. 593 00:34:32,270 --> 00:34:34,790 ‫De hecho, hagámoslo siete segundos si 594 00:34:34,790 --> 00:34:36,600 ‫no especificamos nada. 595 00:34:36,600 --> 00:34:39,980 ‫Pero si queremos, podemos anular este siete. 596 00:34:39,980 --> 00:34:42,040 ‫Entonces, lo haré ahora 597 00:34:42,040 --> 00:34:45,370 ‫aquí y lo pondré 20 segundos en la pantalla. 598 00:34:45,370 --> 00:34:46,203 ‫Está bien. 599 00:34:47,360 --> 00:34:49,240 ‫Creo que debería ser así. 600 00:34:49,240 --> 00:34:51,060 ‫Espero que tenga sentido. 601 00:34:51,060 --> 00:34:53,993 ‫Ahora compilemos nuestro paquete muy rápidamente. 602 00:34:55,360 --> 00:35:00,343 ‫Eso es npm run build, luego toque autocompletar. 603 00:35:03,480 --> 00:35:05,990 ‫Eso también lleva un poco de tiempo. 604 00:35:05,990 --> 00:35:07,373 ‫Pero ahora está hecho. 605 00:35:12,030 --> 00:35:14,340 ‫Implementémoslo ahora por última vez con la esperanza 606 00:35:15,580 --> 00:35:17,083 ‫de que realmente funcione. 607 00:35:18,250 --> 00:35:19,083 ‫Entonces, git commit. 608 00:35:25,840 --> 00:35:27,513 ‫Entonces, mensajes de Stripe. 609 00:35:29,670 --> 00:35:34,670 ‫Y una última vez, git push heroku master. 610 00:35:37,451 --> 00:35:41,403 ‫Probemos ahora comprando otro tour aquí. 611 00:35:42,830 --> 00:35:44,963 ‫Consigamos al City Wanderer esta vez. 612 00:35:46,490 --> 00:35:49,683 ‫Oh, acabo de ver que ya hay un mensaje aquí. 613 00:35:50,810 --> 00:35:51,783 ‫Eso no es bueno. 614 00:35:54,530 --> 00:35:58,500 ‫Y ves que desapareció después de 20 segundos. 615 00:35:58,500 --> 00:36:00,240 ‫Entonces, parece que ahora, de 616 00:36:00,240 --> 00:36:02,993 ‫forma predeterminada, siempre pondrá esta clase de alerta aquí. 617 00:36:06,028 --> 00:36:06,861 ‫(risas) 618 00:36:06,861 --> 00:36:07,694 ‫Sí. 619 00:36:07,694 --> 00:36:09,990 ‫Eso es porque aquí debería ser alertMessage y 620 00:36:09,990 --> 00:36:11,063 ‫no solo alerta. 621 00:36:12,810 --> 00:36:16,800 ‫Pero de todos modos, probemos ahora si el 622 00:36:16,800 --> 00:36:20,433 ‫mensaje es correcto cuando reservamos el tour. 623 00:36:24,410 --> 00:36:25,243 ‫Bueno. 624 00:36:32,470 --> 00:36:34,880 ‫Ahora esperemos. 625 00:36:34,880 --> 00:36:36,330 ‫Aquí vamos. 626 00:36:36,330 --> 00:36:39,163 ‫De hecho, ahí está nuestro mensaje. 627 00:36:40,130 --> 00:36:41,460 ‫Tan hermoso. 628 00:36:41,460 --> 00:36:44,420 ‫Además, nuestro recorrido se muestra aquí. 629 00:36:44,420 --> 00:36:48,510 ‫Y ves que realmente se queda aquí por mucho tiempo. 630 00:36:48,510 --> 00:36:49,853 ‫Entonces, eso también funciona. 631 00:36:51,532 --> 00:36:52,832 ‫Vamos muy rápido ... 632 00:36:55,840 --> 00:36:59,383 ‫Y primero, necesitamos reconstruir el paquete aquí. 633 00:37:03,877 --> 00:37:07,170 ‫Luego podemos agregar todo a nuestra 634 00:37:13,580 --> 00:37:18,490 ‫área de preparación, corrección de errores de alerta de mensaje. 635 00:37:18,490 --> 00:37:19,670 ‫Entonces, estos 636 00:37:19,670 --> 00:37:23,500 ‫son algunos (risas) mensajes que suenan realmente profesionales aquí. 637 00:37:23,500 --> 00:37:26,313 ‫Ahora un último empujón a Heroku. 638 00:37:29,670 --> 00:37:32,580 ‫Ahora, cuando cargamos nuestra página, no deberíamos 639 00:37:32,580 --> 00:37:34,740 ‫ver ningún mensaje de alerta. 640 00:37:34,740 --> 00:37:37,250 ‫Y de hecho, ahora todo está limpio. 641 00:37:37,250 --> 00:37:40,470 ‫Entonces, ahora puedo decir que al menos por 642 00:37:40,470 --> 00:37:42,977 ‫ahora, este proyecto está realmente terminado. 643 00:37:42,977 --> 00:37:46,490 ‫Una vez más, gran trabajo, felicitaciones y enhorabuena por 644 00:37:46,490 --> 00:37:51,100 ‫ser probablemente una de las pocas personas que realmente está llegando 645 00:37:51,100 --> 00:37:54,350 ‫al final del proyecto y realmente está 646 00:37:54,350 --> 00:37:58,370 ‫construyendo este hermoso sitio web y también la API que 647 00:37:58,370 --> 00:38:01,780 ‫ahora puede poner en su cartera. y mostrar 648 00:38:01,780 --> 00:38:02,923 ‫al mundo.