‫Instructor: Entonces, en este video integremos
‫Stripe en nuestro backend creando ese punto final de API
‫que creará y enviará una sesión de pago de Stripe.
‫Entonces, en este punto, vamos a empezar a crear
‫nuestro próximo recurso.
‫Y esas son las reservas.
‫Y empezaré aquí con las rutas de reserva.
‫Así
‫que reservando rutas. js.
‫Y lo hemos hecho tantas veces ahora.
‫Entonces, seguiré copiando todo este
‫código y lo
‫pondré aquí en las rutas de reserva.
‫Y luego simplemente elimine todo esto.
‫Y también este.
‫Tampoco necesitamos parámetros de combinación y tendremos
‫un controlador de reservas en lugar de un controlador
‫de revisión.
‫Así que el controlador de reservas, vamos a crearlo.
‫Entonces. js que parece
‫correcto e integremos también
‫esto directamente en la aplicación. js.
‫Así que pongámoslo aquí después
‫del enrutador de revisión.
‫Así que aquí
‫son solo reservas nuevamente y luego, por supuesto, aquí abajo
‫integramos eso en nuestra API.
‫Entonces las
‫reservas y aquí las reservas enrutador.
‫Y creo que solo debería estar reservando.
‫Así que arreglemos eso aquí también.
‫Y de hecho lo llamamos router de reserva.
‫Y lo mismo aquí, no se trata de reservas,
‫sino de reservas de rutas.
‫Así que dale una oportunidad.
‫Cierra este y
‫este y este aquí también.
‫Y ahora sigamos adelante y creemos
‫nuestra primera ruta aquí.
‫Así que vamos a enrutar. get y la ruta
‫que creará aquí, una vez más, no seguirá
‫el principio del resto porque este no se trata realmente
‫de crear, obtener o actualizar ninguna reserva.
‫En cambio, esta ruta solo será para que el
‫cliente obtenga una sesión de pago.
‫Así que, de hecho, llamemos a esta
‫única sesión de pago.
‫Luego, debemos proteger esta ruta para
‫que solo los usuarios
‫autenticados puedan obtener una sesión de pago.
‫Entonces eso tiene sentido, ¿verdad?
‫Y luego agregue el controlador de reserva.
‫Vamos a crear un controlador
‫de ruta llamado obtener sesión de pago.
‫Está bien.
‫Copiemos
‫este y creémoslo aquí en las exportaciones. getCheckoutSession luego la solicitud responde a
‫continuación.
‫Y ahora empecemos a trabajar.
‫Ahora, en realidad, hay una cosa más que debemos hacer aquí en
‫las rutas que es especificar un parámetro de URL.
‫Y ese será el ID de la gira.
‫De acuerdo, básicamente queremos que el cliente envíe
‫la identificación del tour que se está comenzando a reservar actualmente.
‫Y eso es para que podamos completar la sesión de pago con
‫todos los datos necesarios, como el nombre del tour y
‫el precio del tour y todo eso.
‫Muy bien, ahora tenemos acceso a la identificación del recorrido en esta
‫función de controlador y, por lo tanto, lo primero que vamos
‫a hacer es encontrar
‫ese recorrido en nuestra base de datos.
‫De acuerdo, para eso necesitamos, por supuesto, el modelo de gira.
‫Así que vayamos aquí al controlador de gira
‫y obtengamos eso desde allí.
‫También vamos a necesitar
‫este catchAsync y realmente todo esto.
‫Así que lo estoy copiando todo e incluso
‫si no lo necesito de inmediato,
‫probablemente lo necesitaré un poco más tarde de todos modos.
‫Está bien.
‫Así que diseñemos nuestros pasos aquí nuevamente.
‫Así que obtén el tour reservado actualmente.
‫Luego, como segundo paso, creamos la sesión de
‫pago y finalmente la enviamos al cliente.
‫Está bien, entonces el primer paso es realmente fácil.
‫Entonces vamos a esperar.
‫Así que gira. findbyId
‫que es req. params. tourId.
‫Bien, ese
‫fue el nombre que le dimos en el parámetro URL.
‫Y, por supuesto, esta es
‫ahora una función asíncrona con un catchAsync además de eso o alrededor de eso, en realidad.
‫Genial, a continuación, creemos esa sesión aquí.
‫Y para eso, necesitamos instalar este paquete
‫NPM de unidad.
‫Así que hagámoslo aquí.
‫NPM instala Stripe.
‫Y mientras tanto, iremos a nuestro tablero de Stripe
‫y obtendremos nuestra clave secreta de aquí.
‫Así que simplemente presione este
‫botón aquí y luego continúe y cópielo.
‫Y ves que aquí en las claves realmente
‫dice prueba.
‫Y nuevamente, estos aquí son
‫solo para pruebas y luego, una vez que tenga su cuenta de
‫Stripe activa, puede obtener sus claves API en vivo.
‫Bien, ahora, como con cualquier otra
‫clave, las pondremos aquí en nuestro archivo de configuración.
‫Entonces, la clave secreta de Stripe es igual
‫a esta.
‫Y esto no es correcto aquí.
‫Muy bien, copie este.
‫Volver a nuestro controlador de reservas.
‫Vamos a requerir ahora que
‫este paquete de unidad se haya instalado correctamente aquí.
‫Y solo con todos los otros paquetes anteriores,
‫asegúrese de estar en la
‫misma versión que yo.
‫Y ves que estoy aquí en el flamante 7. 0. 0.
‫Así que esto es realmente nuevo.
‫Y en realidad eso es
‫porque muchas cosas cambiaron con Stripe hace un par de días.
‫Así que tuve que cambiar un par de estas implementaciones.
‫De todos modos,
‫const stripe equal require y luego stripe.
‫Ahora, esto aquí expondrá una función básicamente.
‫Y, por lo general, lo que hacemos de inmediato es
‫pasar nuestra clave secreta directamente a eso.
‫Y eso nos dará un objeto Stripe con
‫el que podemos trabajar.
‫Así que ahora en proceso. env. STRIPE_SECRET_KEY.
‫Bien, y ahora usemos eso.
‫Entonces decimos Stripe. verificar. sesión. crear.
‫Y luego el objeto habitual de opciones.
‫Muy bien, ahora hay un montón de
‫opciones que podemos configurar aquí.
‫Pero solo se requieren tres de ellos.
‫Entonces, el primero son los tipos de métodos de pago.
‫Entonces, tipos de métodos de pago.
‫Esa es una matriz en la que podemos especificar varios
‫tipos y la tarjeta es para tarjeta de crédito.
‫Y en este momento, esas son todas las
‫opciones de pago que podemos usar para el pago de Stripe.
‫Pero leí que en el futuro agregarán mucho más.
‫Para que pueda informarse con eso.
‫Luego, debemos especificar la URL correcta.
‫Y esa es básicamente la URL a la que
‫se llamará tan pronto como se haya cargado correctamente una tarjeta de crédito.
‫Tan pronto como la compra se haya realizado correctamente,
‫el usuario será redirigido a esta URL.
‫Y por ahora, simplemente especifiquemos eso como nuestra página de inicio.
‫Está bien y lo haremos
‫como antes con req. protocolo: // y
‫luego solicitar. conseguir el anfitrión.
‫Básicamente, solo nuestra URL de inicio.
‫Entonces también necesitamos especificar la URL de cancelación.
‫Así que así.
‫Y este será similar.
‫Básicamente, es la página a la
‫que va el usuario si decide cancelar el pago actual.
‫Y de hecho, hagamos que vayan a la
‫página del recorrido donde estaban anteriormente.
‫Y eso es básicamente tour / tour. babosa.
‫A continuación, también podemos especificar el correo electrónico del cliente.
‫Y eso es muy útil porque, por supuesto, ya tenemos
‫acceso al correo electrónico del cliente.
‫Y así, con esto, podemos ahorrarle al usuario un paso y
‫hacer que la experiencia de pago sea mucho más fluida.
‫Muy bien, recuerda que esta es una ruta protegida.
‫Y así, como siempre, el usuario ya está en la solicitud.
‫Y entonces podemos decir solicitud. usuario. Email.
‫A continuación, también podemos
‫especificar un campo personalizado que se llama ID de referencia del cliente.
‫Y eso suena un poco extraño,
‫pero en realidad será muy importante para nosotros.
‫Entonces, este campo nos
‫permitirá pasar algunos datos sobre la sesión que estamos creando actualmente.
‫Y eso es importante porque más tarde, una vez
‫que la compra se haya realizado
‫correctamente, tendremos acceso al objeto de sesión nuevamente.
‫Y para entonces, queremos crear una nueva reserva
‫en nuestra base de datos.
‫Así que recuerda el diagrama
‫que te mostré en la última conferencia.
‫Básicamente, de lo que estoy hablando
‫aquí es del último paso en ese diagrama.
‫Y recuerde también cómo eso
‫solo funcionará con los sitios web implementados.
‫Pero aún así, preparémonos para eso aquí.
‫De acuerdo, para crear una nueva reserva en nuestra
‫base de datos, necesitaremos la identificación del usuario, la identificación del tour y el precio.
‫¿Recuérdalo?
‫Y en esta sesión
‫ya tenemos acceso al correo electrónico del
‫usuario y desde allí podemos volver
‫a crear la identificación del usuario porque el correo electrónico aquí es único.
‫También especificaremos el precio del tour aquí en
‫un segundo, por lo que todo lo que falta es el ID del tour.
‫Y eso es lo que vamos a especificar aquí
‫básicamente en este campo personalizado.
‫Eso se llama ID de referencia del cliente.
‫Y todo lo que acabo de explicar antes en realidad tendrá mucho
‫más sentido una vez que
‫implementemos ese último paso para crear una
‫reserva en la base de datos, ¿verdad?
‫De todos modos, esa identificación de viaje está a pedido. params. tourId.
‫Muy bien, y ahora finalmente,
‫vamos a especificar algunos detalles sobre el producto en sí.
‫Así que nuestro recorrido en este caso.
‫Y eso se llama
‫elementos de línea que acepta una matriz de objetos.
‫Básicamente, uno por artículo
‫y, en nuestro caso, solo será uno.
‫Entonces, debemos especificar el nombre
‫del producto y eso está en gira. nombre y como siempre también agregamos
‫el tour a ese nombre.
‫Entonces también podemos especificar una descripción.
‫Y todos estos nombres de campo aquí realmente provienen de Stripe.
‫Entonces no podemos crear nuestros propios campos.
‫Entonces, si intenta hacer eso, realmente obtendrá algún error.
‫Muy bien, entonces en la descripción pondré el resumen del
‫recorrido, así que esa bonita frase
‫corta que describirá cada recorrido.
‫Entonces también podemos especificar una matriz de imágenes.
‫Ahora bien, estas imágenes de aquí deben ser imágenes en vivo.
‫Básicamente, imágenes que están alojadas en Internet
‫porque Stripe realmente cargará esta imagen
‫en su propio servidor.
‫Y esta es otra de las cosas que
‫realmente solo podemos hacer una vez que se implementa el sitio web.
‫Pero por ahora, como marcador de posición, básicamente usaré los de
‫nuestro sitio web de ejemplo alojado en natours. dev.
‫Así que vayamos a ese sitio web.
‫Así que ese es este en natours. dev.
‫Y la imagen que voy a elegir es la imagen de portada.
‫Así que inspeccionemos esa imagen.
‫Así que este aquí y copie la dirección del enlace aquí.
‫Está bien.
‫Así que esta es
‫una matriz porque podemos especificar varias imágenes, pero en realidad solo queremos una de ellas.
‫Y de hecho tenemos natours. dev / images / tours y luego
‫el nombre de la imagen.
‫Y este simplemente lo reemplazaré con tour. portada de la imagen.
‫Y eso va a
‫funcionar porque los nombres de las imágenes en natours. dev son exactamente los mismos que tenemos
‫aquí en nuestro proyecto.
‫Así que gira. imageCover.
‫Entonces, esto es una
‫cosa más que realmente necesitamos cambiar una vez que pongamos nuestro sitio web en producción.
‫Y de hecho estoy manteniendo una
‫lista de esas cosas para que no olvidemos nada.
‫De todos modos, lo siguiente es la cantidad.
‫Básicamente, el precio del producto
‫que se está comprando.
‫Así que eso es gira. precio y ahora tenemos
‫que multiplicar eso por 100.
‫Porque se espera que esta cantidad sea en centavos.
‫Entonces, un dólar o un euro o realmente la
‫mayoría de las monedas tienen 100 centavos.
‫Entonces, un dólar equivale a 100 centavos.
‫Entonces, para convertirlo a centavos, simplemente multiplíquelo por 100.
‫Entonces también necesitamos especificar la moneda.
‫Y eso es en este caso USD.
‫Pero también podría ser
‫como, para el euro es EUR y para otras monedas, probablemente
‫debería echar un vistazo a la documentación.
‫Entonces, por supuesto, no
‫puedo cubrir todas las monedas que existen, ¿verdad?
‫De todos modos, finalmente también especificamos la cantidad.
‫Y eso es solo una gira en este caso.
‫Entonces eso es realmente.
‫Básicamente, esta parte aquí
‫es la información sobre la sesión en sí.
‫Y luego aquí está la información
‫sobre el producto que el usuario está a punto de comprar.
‫Muy bien, ahora guardemos la sesión.
‫Así que const session y ahora debemos
‫esperar esto.
‫Entonces, esta creación aquí básicamente devuelve una
‫premisa porque configurar todas estas opciones aquí
‫básicamente hará una llamada
‫API a Stripe y, por supuesto, esa
‫es una función asincrónica que deberíamos esperar aquí.
‫Está bien, pero de todos modos
‫esta es ahora nuestra sesión y, por lo tanto, el último
‫paso es, por supuesto, enviarla de vuelta al cliente.
‫Entonces, como siempre,
‫el estado es el éxito.
‫Y luego simplemente enviemos la sesión así.
‫Muy bien, debería ser así.
‫Nuestro enrutador ya está configurado, por lo
‫que creo que
‫ahora podríamos probar esto en Postman.
‫Muy bien, ahora más
‫tarde, por supuesto, no permitiremos que nadie haga esto usando cartero
‫porque eso no tiene mucho sentido.
‫Pero ahora, dado que solo estamos
‫probando esto, en realidad tiene mucho sentido.
‫Muy bien, vayamos
‫al cartero y creemos una nueva solicitud.
‫Así que eso será
‫en las reservas / uh, no estoy muy seguro.
‫Sí, entonces la sesión de pago y luego / tourId.
‫Muy bien, consigamos nuestros recorridos aquí.
‫Para obtener la identificación de allí básicamente.
‫Así que hagamos el Sea Explorer.
‫Está bien, y eso debería ser suficiente.
‫Oh, espera, por supuesto que no estamos conectados.
‫Así que inicie sesión aquí.
‫Ahora estamos en administración,
‫pero usemos a alguien más aquí.
‫Y creo que usamos Leo
‫antes, así que ahora usemos ese usuario.
‫Ahora tenemos una contraseña incorrecta.
‫Muy bien, veamos qué más tenemos.
‫Entonces, ¿qué otros usuarios podríamos usar?
‫Y de hecho usemos a Monica aquí.
‫¿Por qué no?
‫Así que, con suerte, su contraseña es correcta.
‫Bueno, intentemos reemplazar esto aquí
‫con test1234.
‫Bueno, tal vez cambiamos las
‫contraseñas de todos estos usuarios en algunas otras conferencias antes.
‫Entonces usemos a John aquí.
‫Entonces sé que nunca usamos a John,
‫así que ahora tiene que funcionar.
‫Oh, de hecho veo el error que hice antes.
‫Así que aquí no se trata de natours, debe ser un ejemplo. com.
‫Intentémoslo de nuevo con Monica.
‫O simplemente con John.
‫Esto es más difícil de lo que esperaba.
‫Pero ahora finalmente estamos conectados.
‫Muy bien, y con
‫eso, intentemos obtener nuestra sesión de pago.
‫Nos falta la autorización de aquí.
‫Una vez más, y ahora tenemos un error real aquí.
‫Entonces, algo que realmente proviene del código
‫que acabamos de escribir.
‫Está bien.
‫Así que veamos eso.
‫Y el problema es que aquí son sesiones.
‫Así que raya. verificar. sesiones.
‫Una vez más.
‫Esta vez está tardando mucho más, lo que es una buena señal.
‫Y tenemos otro error.
‫Entonces, la línea 15 no puede leer el slug del nodo.
‫Muy bien, eso sí que es extraño porque debería
‫haber una babosa en esta gira.
‫Así que sí, ves que aquí
‫está realmente.
‫Entonces, tal vez algo
‫salió mal al leer esta gira.
‫Lo que realmente no puedo entender por qué sería eso.
‫Pero intentemos registrar el recorrido en la consola.
‫De acuerdo, y de hecho obtenemos nulos.
‫Lo que probablemente significa que
‫hay un ID de recorrido no definido correctamente.
‫Oh, aquí está el problema.
‫Entonces lo tengo, ID todo en
‫mayúsculas, pero luego aquí en el controlador tengo la D en minúsculas.
‫Así que así.
‫Y ese es el
‫pequeño tipo de errores que ocurren todo el tiempo, obviamente.
‫Así que veamos cuál es el siguiente.
‫Ah, y de hecho esta vez lo hicimos bien.
‫Entonces ves que es la sesión que acabamos de crear.
‫Y edita algunas otras cosas aquí, pero eso realmente no
‫nos importa en este momento.
‫Sin embargo, lo que es realmente interesante de ver
‫es que ahora ya podemos
‫ver este pago, o al menos esta solicitud
‫de pago, digamos en nuestros paneles de control.
‫Entonces, si vamos allí
‫y vamos a los pagos y luego a todos, verán
‫que este último en realidad sucedió ahora mismo.
‫Entonces, si hacemos clic en eso, verá algunos datos al respecto.
‫Entonces ves, por ejemplo, que en realidad se trata
‫del Sea Explorer Tour.
‫También tienes el precio, también tienes la imagen.
‫Probablemente también algunos datos sobre el usuario.
‫Y en realidad no, en realidad no.
‫Pero lo que importa aquí es que dice incompleto.
‫Y eso es porque solo creamos la sesión
‫de pago en el servidor.
‫Y entonces nos
‫estamos perdiendo el segundo paso donde realmente cargamos
‫la tarjeta de crédito en el lado del cliente.
‫Entonces, dado que nos estamos perdiendo
‫eso, hagámoslo bien en el siguiente video.