‫Instructor: En esta lección,
‫aprenderemos cómo procesar pagos con stripe, en el
‫front-end cada vez que un usuario hace clic en un botón.
‫Y para comenzar, configurémoslo ese botón para que
‫solo aparezca cuando un usuario está
‫realmente conectado.
‫Entonces, aquí en la página
‫de detalles del recorrido, ahora tenemos un
‫usuario que inició sesión, por lo que ese botón dice reservar
‫recorrido ahora, pero solo debería ser
‫así cuando hay un usuario actualmente conectado
‫y, de
‫lo contrario, nos redirigiría a la página de inicio de sesión.
‫¿Okey?
‫Así que implementemos eso en la plantilla del recorrido.
‫Y eso es realmente aquí, ese
‫es este botón.
‫¿Bien?
‫Ahora bien, si actualmente hay un usuario
‫conectado, eso significa que tenemos acceso a la variable
‫de usuario, por lo que podemos hacerlo si el usuario está bien que esto.
‫Y si no hay ningún usuario, entonces, bueno, simplemente
‫queremos mostrar un botón, que nos lleva a la
‫página de inicio de sesión.
‫Entonces, inicie sesión para reservar
‫un recorrido, y este debería ser un enlace,
‫por lo que necesitamos
‫un elemento A para el ancla.
‫Luego, especifiquemos también la propiedad hf, que nuevamente nos dirigirá
‫a la página de inicio de sesión,
‫¿de acuerdo?
‫Ahora, aquí también necesitamos agregar una ID, reservar un
‫recorrido para que luego podamos seleccionarlo en nuestro JavaScript, y también algo muy
‫importante, es que
‫deberíamos poner el ID del recorrido actual aquí
‫mismo en este elemento, ¿de acuerdo?
‫Ahora bien, ¿por qué es eso tan importante?
‫Bueno, recuerda cómo es el punto final de la API que acabamos de crear.
‫Entonces, este de aquí necesita el ID del recorrido, y
‫ese ID del recorrido debe provenir básicamente de algún lugar, por lo que en
‫este momento no tenemos esa información en ninguna
‫parte de esta página, por lo que
‫la pondremos aquí, en este elemento, por lo que ese
‫entonces o el archivo JavaScript puede tomarlo desde aquí y
‫enviarlo junto con la
‫solicitud a la ruta de la sesión de pago, ¿de acuerdo?
‫Así que, al igual que hicimos aquí con un
‫mapa, vamos a usar un atributo de datos,
‫y eso es datos,
‫y luego básicamente cualquier nombre de variable que
‫queramos definir.
‫Y esa es la identificación de la gira en este caso.
‫Así que gira. id, ¿de acuerdo?
‫Así que dale
‫a la caja fuerte y probémoslo ahora.
‫Así que vuelva a cargar la
‫página y, en primer
‫lugar, inspeccionémosla para ver si la idea está
‫realmente ahí y, de hecho, aquí vamos.
‫Y ahora si nos desconectamos.
‫Entonces veamos lo que tenemos, y de
‫hecho ahora dice, inicie sesión
‫para reservar el recorrido.
‫Genial, y hagámoslo en realidad.
‫¿Ahora bien?
‫Y ahora, a continuación, creemos un script en
‫el que realmente haremos la solicitud
‫y procesaremos el pago en el front-end.
‫Y así, como antes, estará en público, y luego
‫en JavaScript.
‫Así que un guión más aquí.
‫Y lo llamaré raya. js.
‫Y ahora aquí en realidad
‫necesitamos acceso a la biblioteca de bandas nuevamente, pero
‫ese paquete que acabamos de instalar antes,
‫así que recuerde ese paquete MPM de bandas que usamos aquí.
‫Entonces, este solo funciona para el back-end, y lo que
‫tenemos que hacer en el
‫front-end es incluir un script en el HTML, y dado que solo necesitamos
‫ese script aquí en la página del recorrido, lo haremos tal como
‫lo hicimos hizo con la secuencia de comandos del cuadro de mapa.
‫Entonces este, lo
‫pondremos aquí en este bloque de cabeza, ¿de
‫acuerdo?
‫Ahora bien, ¿qué secuencia de comandos necesitamos realmente?
‫Bueno, podemos simplemente obtener de la documentación que
‫ya vimos antes, y
‫espero que no la hayas cerrado, ¿de acuerdo?
‫Y, de nuevo, este explica cómo usamos el producto
‫de pago tanto en el cliente
‫como en el servidor.
‫Entonces, aquí vemos que tenemos dos
‫pasos, primero creando la sesión de pago en el
‫servidor, y esto es
‫muy similar a lo que hicimos antes en
‫el último video, por lo que ahora también debemos agregarlo a nuestra interfaz.
‫Y ese guión que necesitamos es este, ¿de acuerdo?
‫Copiemos eso y retrocedamos.
‫Y ahora tenemos que adaptar esto un poco.
‫¿Ahora a la derecha?
‫Así que esto fue una exposición de un objeto de banda al alcance
‫global, y ahora en este archivo podemos usar eso.
‫Entonces decimos,
‫const stripe =, y
‫luego este es el objeto
‫que obtenemos del script que acabamos de
‫incluir, y aquí necesitamos nuestra clave pública, ¿de acuerdo?
‫Entonces ya usamos nuestra clave secreta en el
‫backend, ahora es el momento de usar nuestra clave pública.
‫Así que volvamos al panel de control y,
‫de hecho, si está en la documentación,
‫ya se mostrará aquí, por lo que esta
‫es una característica muy
‫buena de las documentaciones de bandas.
‫Entonces, cada vez
‫que inicie sesión, esta clave que
‫tiene aquí es en realidad su clave pública.
‫Pero si no está en esa
‫página, por supuesto, también puede obtener su clave
‫API yendo a la página de
‫inicio o la página de
‫desarrolladores, intentemos esa.
‫Luego, aquí en las
‫claves de API, tiene su clave de prueba pública aquí.
‫Así que agarra
‫eso, y luego regresemos y pasémoslo aquí.
‫Y al igual
‫que antes, quiero desactivar rápidamente eslint aquí.
‫¿Okey?
‫Y ahora, finalmente creemos una función, a
‫la que llamaré reservar tour.
‫¿Okey?
‫Por tanto, esta función incluirá un ID de recorrido.
‫Entonces, el ID del recorrido es el que vendrá
‫aquí desde esta interfaz de usuario.
‫Así que desde aquí, ¿de acuerdo?
‫Así que, al igual
‫que antes, lo obtendremos de index. js, donde
‫también llamaremos Tour a este libro, ¿de
‫acuerdo?
‫Muy similar a lo que hicimos antes.
‫De todos modos, ahora especifiquemos una vez más los pasos
‫que vamos a tomar aquí.
‫Entonces, el primer paso es obtener
‫la sesión del
‫servidor, y ahí es donde entra ahora esta ruta, ¿de acuerdo?
‫Así que este es el punto en el que vamos
‫a utilizar este punto final para llevar nuestra sesión de pago
‫al lado del cliente.
‫¿Okey?
‫Así que echa un vistazo a la sesión.
‫Desde el punto final o desde la API, realmente no importa.
‫Hecho como segundo
‫paso, usaremos nuestro objeto
‫de banda para crear básicamente automáticamente el formulario de pago, +
‫proceso o digamos + cargo, la tarjeta
‫de crédito para nosotros, ¿de acuerdo?
‫Y eso es
‫todo, así que solo dos
‫pasos simples, y verá que en realidad son bastante simples.
‫Así que almacenemos la sesión en una variable llamada sesión.
‫Y luego esperaremos una solicitud HTTP, que una
‫vez más haremos con axios.
‫¿Bien?
‫Así que necesito agarrar eso aquí.
‫Así que importa axios, y una
‫vez más estoy usando la sintaxis del módulo ES6.
‫Recuerda
‫eso, de axios.
‫Así como lo hicimos, por ejemplo, en el inicio de sesión
‫o en la configuración de actualización, ¿verdad?
‫Ahora también necesitamos marcar esta función aquí como asíncrona.
‫¿Okey?
‫Y luego, en
‫axios, simplemente podemos pasar la URL, cuando
‫todo lo que queremos hacer es una simple solicitud GET.
‫¿Okey?
‫Entonces, hasta
‫este punto, siempre hemos especificado el
‫método, la URL y los datos, pero
‫ahora solo estamos haciendo una solicitud GET,
‫y eso es mucho más simple.
‫Tomemos la URL aquí,
‫para que no perdamos más tiempo.
‫Entonces aquí está api / v1 / bookings.
‫Entonces echa un vistazo a la sesión.
‫Y luego la identificación de la gira.
‫Así que ese es este
‫de aquí, que se convertirá en disfunción,
‫¿de acuerdo?
‫Y echemos un vistazo a
‫este objeto de sesión en nuestra consola,
‫solo para ver si todo funciona,
‫¿de acuerdo?
‫Así que ahora en nuestro índice. js, básicamente conectaremos
‫el botón verde con la disfunción que acabamos de
‫crear dentro de stripe. js.
‫Así que importa.
‫Reservar tour desde stripe.
‫Entonces, como siempre, seleccionemos nuestro elemento de la página web.
‫Entonces el botón de libro es = documentar. obtener el elemento por ID, y
‫el ID recuerda es, creo
‫que reservar recorrido.
‫Así que sí,
‫esa es la identificación que acabamos de agregar antes de la identificación del libro.
‫Y ahora podemos agregarle ese controlador de eventos.
‫Entonces, si hay un botón de libro,
‫entonces bookBtn. addeventlistener, esperando
‫un clic, entonces también necesitamos el
‫evento, y ahora necesitamos obtener esa ID
‫de gira de ese botón, así que eso es tourid
‫=, y ahora cuando hago una
‫racha aquí, que es e. target, y
‫tal vez esté familiarizado
‫con eso, así que event. el objetivo es básicamente el elemento en el que
‫se hizo clic, así que el que activó este oyente de
‫eventos aquí para ser disparado, ¿de acuerdo?
‫Y ese será, por supuesto, este botón.
‫Luego, tenemos el ID del
‫tour, y
‫en JavaScript, que luego se
‫llamará tour, así que déjame escribirlo.
‫Entonces, el ID del recorrido,
‫por lo que
‫siempre que haya un -, se
‫convertirá automáticamente a esta notación CamelCase.
‫¿Okey?
‫Entonces e. objetivo. conjunto de datos. tourid.
‫Pero ahora que este nombre es exactamente el mismo que este, podemos
‫simplemente usar la estructura en eso.
‫Así que una vez más usando este buen truco.
‫Y luego llamamos a reservar recorrido con esa identificación de recorrido.
‫Y otra cosa buena que podemos
‫hacer aquí, es cambiar el texto del
‫botón a algo como procesamiento, y hagámoslo
‫de nuevo e. objetivo.
‫Entonces, nuevamente, el elemento en el que se hizo
‫clic, ese es el botón. textcontent que usamos
‫antes de escuchar, así que
‫para cambiar el texto
‫en un elemento, y cambiemos eso a procesamiento, ¿de
‫acuerdo?
‫Y entonces
‫con esto creo que tenemos todo correctamente conectado.
‫Entonces hacemos clic en
‫ese botón, luego cambiamos el texto en ese botón,
‫luego obtenemos el ID del tour
‫del atributo de datos que está en
‫el botón, y llamamos al tour del libro con ese ID,
‫¿de acuerdo?
‫Y entonces esa identificación se pasará a esta URL,
‫que a su vez debería devolver una sesión de pago,
‫¿de acuerdo?
‫Y luego aquí vamos a echar un vistazo a
‫eso, así como así.
‫Ahora, en este punto, no crearemos
‫el formulario de pago todavía, así que
‫lo dejaremos para el último paso de este video.
‫Pero por ahora quiero echar un vistazo
‫a esto, veamos
‫si el paquete todavía se está ejecutando
‫aquí en segundo plano, por lo
‫que agrupamos todos nuestros
‫scripts, y parece que sí, así que no probemos esto.
‫Así que hemos iniciado
‫sesión, ahora intentemos aparcar Camper.
‫Aquí abajo, haga clic en este botón.
‫Y parece que no obtenemos ningún error, así que
‫está bien, ahora echemos un
‫vistazo a nuestra consola, y
‫tenemos un objeto, y ese es
‫el resultado de esta llamada de axios, por
‫lo que axios siempre crea un objeto como
‫este , donde hay un objeto llamado datos, que es
‫la respuesta real.
‫Y aquí ven que de hecho tenemos nuestra sesión.
‫Como ve, tenemos el correo electrónico
‫del cliente, tenemos la identificación actual del
‫tour, ahora tenemos, veamos si lo tenemos, (murmura) Así que
‫aquí
‫tenemos algunos datos sobre el tour.
‫Y ahora todo parece correcto aquí.
‫¿Bien?
‫Así que cerremos eso,
‫y ahora, como último paso,
‫creemos básicamente el formulario de pago y carguemos la
‫tarjeta de crédito.
‫¿Bien?
‫Y de hecho, vamos a envolver también todo
‫esto aquí en un bloque try catch.
‫Porque, por supuesto, tenemos algunas llamadas asincrónicas aquí, y ambas tienen
‫una más en un segundo,
‫por lo que es una buena práctica.
‫Para tener un bloque de captura de prueba.
‫¿Bien?
‫Pero no perdamos mucho tiempo con estos errores.
‫Pero todavía voy a mostrar una alerta en caso
‫de que haya un error,
‫así que, por ejemplo, con esta llamada a la API,
‫¿de acuerdo?
‫Para que el usuario básicamente pueda
‫ver que algo salió mal.
‫Así que simplemente tomemos esta importación de alertas.
‫¿Bien?
‫Y luego diga Mostrar alerta, especificando
‫que es un error, y
‫luego solo el error en sí como el mensaje básicamente.
‫¿Bien?
‫De todos modos, para hacer ahora este último paso, en
‫realidad es muy, muy simple, todo lo
‫que tenemos que hacer es esperar.
‫raya. redirectTocheck out,
‫déjame ver si me
‫equivoqué, y déjame ver si
‫lo hice bien, así que redirige para verificar.
‫¿Bien?
‫Y luego las opciones, pero solo una
‫opción, que es el ID de sesión, y eso
‫vendrá de la sesión, y recuerde cómo estaba
‫la sesión dentro de los datos, así que
‫hubo un objeto de datos creado allí por axios, recuerde
‫y entonces es entonces toda la respuesta en sí misma.
‫Y ahí dentro tenemos sesión. identificación.
‫Y eso es todo,
‫¿de acuerdo?
‫Y ahora viene la mayor
‫parte de todo, que es comprobar si esto funciona.
‫Así que todavía estamos conectados, carguemos
‫esto una vez más.
‫Haga clic en un botón y espere.
‫Y, de hecho, llegamos a nuestra página de pago, y
‫también obtenemos esta bonita imagen aquí, obtenemos todos
‫los logotipos de Nature aquí, obtenemos aquí todos
‫los íconos, por lo que
‫todas las cosas que especificamos antes, tenemos
‫el precio que también especificamos en nuestro
‫sesión de pago,
‫y realmente todos los demás detalles.
‫Entonces el nombre, el resumen y, por
‫supuesto, la imagen.
‫Eso es realmente asombroso, ¿verdad?
‫Luego, aquí otra gran cosa que mencioné antes, es que la
‫dirección de correo
‫electrónico ya está precargada automáticamente, por lo
‫que esa es otra característica realmente agradable.
‫Y ahora aquí, todo lo
‫que tenemos que hacer es ingresar la información de esta
‫tarjeta de crédito, y así marcamos cuando estamos probando el número
‫de la tarjeta de crédito es solo cuatro dos cuatro dos
‫cuatro dos cuatro dos, y así sucesivamente hasta que terminemos , ¿okey?
‫Entonces aquí cualquier mes y cualquier año funciona,
‫así que pongamos dos dos dos.
‫Entonces, algo en el futuro, ¿de acuerdo?
‫Entonces, si está viendo este curso después de febrero de 2022,
‫esta fecha no funcionará, así que
‫ponga algo más tarde, ¿de
‫acuerdo?
‫Hasta que cualquier número funcione también,
‫aquí cualquier nombre también funciona,
‫digamos Laura, el país, por
‫supuesto, tampoco importa realmente, la gente se completa automáticamente
‫según la ubicación de su IP, así que estoy
‫en Portugal,
‫y así eso es lo que obtengo.
‫Y ahora ves este bonito botón verde aquí, y
‫tiene este bonito efecto, así que
‫ahora, cuando hacemos clic
‫en él, se está procesando y hemos terminado.
‫Genial, entonces esta es en realidad la URL de éxito
‫que también especificamos en nuestra sesión de pago, ¿verdad?
‫Así que definimos que, en
‫caso de éxito,
‫volvemos a esta URL de inicio.
‫Y cambiaremos eso aquí un
‫poco más tarde, pero por ahora esto es realmente
‫lo que queríamos, y funcionó perfectamente bien.
‫Bueno, al menos eso
‫espero, así que echemos un vistazo a todos los pagos ahora.
‫Y de hecho,
‫este es el que acabamos de hacer.
‫Así que ahora recibimos este pago con éxito
‫en nuestra cuenta.
‫Entonces ves la dirección de correo electrónico,
‫el nombre y, de hecho, el parque Camper Tour que acabamos de comprar.
‫Genial, eso es realmente asombroso.
‫Entonces aquí abajo puede ver las tarifas que cobra la franja, por
‫lo que, por supuesto, también necesitan ganar dinero y,
‫por lo tanto, toman un
‫recorte, que creo que es como 2. 9% o algo así, pero, por supuesto,
‫todas esas cosas se pueden consultar en su
‫sitio web.
‫Luego también obtuviste el método de pago aquí, por lo
‫que los datos que
‫acabamos de ingresar, y obtienes algunos datos agradables
‫sobre la sesión, y probablemente ella también debería aparecer aquí en tus clientes.
‫Y sí, de hecho aquí está, y
‫sí, creo que
‫eso es bastante exitoso ahora.
‫Ah, y otra cosa que olvidé mencionar
‫es que sus usuarios también recibirán
‫automáticamente un correo electrónico.
‫Así que creo que debería ser el valor predeterminado aquí en los
‫recibos por correo electrónico, así que
‫vaya a la configuración de recibos por correo
‫electrónico, y luego aquí tiene a los clientes por correo
‫electrónico sobre pagos exitosos.
‫Y esa también es una característica
‫realmente agradable, lo que significa que no tenemos que enviar correos electrónicos
‫manualmente cada vez que un usuario compra con éxito un recorrido, ¿de acuerdo?
‫Entonces, una cosa más que nos quita esa raya, Fantástico,
‫así que tomemos un minuto rápido para recapitular todo el proceso por
‫el que acabamos de pasar.
‫Así que comenzamos creando esta sesión de pago, que
‫necesita como entrada el ID del recorrido,
‫para que luego podamos almacenar un montón de detalles sobre el
‫recorrido en esa sesión.
‫Así que cosas sobre el
‫nombre de la gira, el resumen y las imágenes de precios.
‫Entonces, todas esas cosas que queremos que aparezcan
‫en la página de
‫pago, pero también en nuestro panel de control.
‫Luego también incluimos el correo electrónico para que el usuario no
‫tenga que completarlo en el proceso de pago
‫y luego un montón de otros datos.
‫Así que recuerde este ID de referencia de
‫cliente, que tendrá mucho más
‫sentido una vez que lo usemos.
‫Así que creamos esta sesión cada
‫vez que alguien llega a esta ruta de sesión de verificación, ¿de acuerdo?
‫Y eso es exactamente lo que hacemos en nuestra interfaz, aquí
‫mismo en rayas. js.
‫Entonces obtenemos nuestra sesión aquí,
‫y luego desde allí creamos un pago y
‫cargamos la tarjeta de crédito
‫usando stripe. redirectTocheckout, y
‫el objeto stripe
‫aquí simplemente está usando la biblioteca
‫stripe con nuestra clave pública, ¿de acuerdo?
‫Ahora bien, ¿de dónde viene este ID de gira?
‫Bueno, se almacena aquí, justo en el botón donde el
‫usuario hace clic para reservar un nuevo recorrido.
‫Ese ID se lee aquí mismo en index. js, siempre que
‫alguien presione el botón de reserva, ¿de acuerdo?
‫Así que lo almacenamos en el
‫ID del tour y lo pasamos
‫a Book Tour, que de nuevo es esta función
‫aquí, que se encarga de procesar realmente los pagos
‫en el front-end.
‫Y así, el resultado de
‫todo esto es lo
‫que acabamos de ver antes, donde al usuario
‫realmente le cobraron la tarjeta de
‫crédito y compró el recorrido, tan perfecto.
‫Ahora, lo que falta
‫aquí es que, en realidad, cada vez que hay
‫una nueva reserva, queremos crear un nuevo documento de reserva en nuestra base de datos.
‫Entonces, tal como lo discutimos hace mucho tiempo
‫cuando hablamos de todos los
‫modelos de datos en esta aplicación, ¿verdad?
‫Y con ese fin, crearemos
‫el modelo de reservas directamente en
‫el siguiente video, lo
‫clasificaremos después
‫de eso, luego podremos crear nuevos
‫recorridos cada vez que haya una compra exitosa.