‫Narrador: En esta última parte de la
‫sección, ahora aceptaremos pagos con
‫tarjeta de crédito en nuestra aplicación usando
‫Stripe para permitir que nuestros usuarios realmente compren tours.
‫Y entonces, abramos una nueva pestaña aquí
‫y luego una franja abierta. com.
‫Por lo tanto, Stripe es la mejor y más popular
‫y también la más fácil de usar plataforma
‫de software para integrar pagos en cualquier sitio web.
‫Y mucho más sobre cómo funciona realmente un
‫poco más tarde, pero por ahora comencemos creando nuestra cuenta gratuita.
‫Así que haga clic aquí en la
‫cuenta gratuita y luego abra su propia cuenta gratuita.
‫Y una vez que haya iniciado sesión
‫correctamente, debería ver un panel que se parece a esto.
‫Entonces, cuando abra una cuenta
‫nueva, inicialmente siempre estará en modo de prueba.
‫Eso es lo que puede ver aquí abajo con estos datos de prueba.
‫Ahora, tan pronto como realmente
‫desee comenzar a aceptar pagos reales que
‫involucren dinero real de clientes reales, deberá activar su
‫cuenta de Stripe.
‫Y para eso, tendrás que proporcionar a
‫Stripe una gran cantidad de datos sobre tu negocio.
‫Pero, por supuesto, en
‫este proyecto, no vamos a hacer eso, así que siempre
‫trabajaremos en este tipo de modo de desarrollo de pruebas, ¿de acuerdo?
‫Pero de lo contrario, simplemente haga
‫clic aquí en iniciar o active su cuenta aquí.
‫Ahora bien, este panel de control es realmente fácil y súper
‫intuitivo de usar en mi opinión.
‫Entonces, aquí puede ver sus pagos, lo que nuevamente es
‫muy fácil, y recuerde
‫que todos estos son datos de prueba.
‫Entonces, todas estas cantidades aquí son,
‫por supuesto, solo cantidades falsas.
‫Pero de todos modos, puedes ver a tu
‫cliente aquí, puedes ver el monto.
‫Y cuando los abres, obtienes aún más información, como el
‫método de pago aquí, el número de la tarjeta de crédito.
‫Y, por cierto, nunca obtenemos acceso al número
‫real de tarjeta de crédito del cliente.
‫Así que siempre veremos estos últimos cuatro dígitos, pero
‫nunca el número real de la tarjeta de crédito, ¿de acuerdo?
‫Luego, también obtendrá una descripción
‫general de lo que realmente se compró.
‫Así, por ejemplo, The Snow Adventurer Tour.
‫Y todo esto aquí
‫fue, por supuesto, de la primera
‫vez que construí la aplicación Natours, ¿de acuerdo?
‫Entonces, todos estos son solo compras de prueba.
‫Entonces también podemos ver todo nuestro saldo,
‫básicamente todo el dinero que recibimos.
‫Y nuevamente, todo esto son solo datos de prueba.
‫Luego tenemos a nuestros clientes con una buena lista de todos ellos.
‫Y sí, todo esto funciona muy bien.
‫Ahora, antes de que podamos
‫comenzar, necesitamos definir un par de configuraciones
‫sobre nuestra cuenta.
‫Entonces, en su nueva cuenta, debería
‫ver algo como "Cuenta sin nombre", o algo así, aquí.
‫Y entonces, también debería tener, como un ícono de bolígrafo o algo
‫donde luego pueda crear un nombre para la cuenta.
‫Y así que por favor llámenlo "Natours" o algo más.
‫Y si tiene más negocios, puede
‫agregar una cuenta para cada uno de estos negocios, ¿de acuerdo?
‫O si no tiene el ícono de lápiz aquí, también
‫podemos ir a la configuración
‫y luego a la información de la cuenta.
‫Y aquí es donde debería poner
‫el nombre de este tipo de negocio.
‫También podemos definir un par de configuraciones más, así
‫que definamos la marca aquí, lo que
‫hará que las páginas de Stripe Checkout
‫coincidan básicamente con nuestra marca.
‫Así que agreguemos nuestras imágenes.
‫Entonces, public, image, y luego para el ícono,
‫usemos este.
‫Y también podemos subir
‫un logo, y para eso, usemos este.
‫Ah, y ahora necesitamos nuestra contraseña para continuar.
‫Y ahora cambiemos también nuestro color aquí.
‫Así que abre rápidamente el archivo CSS en público
‫y luego encuentra nuestro típico verde, que
‫es este aquí.
‫Entonces eso se ve un poco mejor.
‫Ahora guardémoslo aquí
‫y con eso, estamos listos para comenzar.
‫A continuación, echemos un vistazo a nuestras claves API.
‫Entonces, haga clic aquí en las claves de API y
‫si el sitio web se ve
‫un poco diferente en el momento en que
‫está viendo este video, entonces tal vez las claves estén aquí en los desarrolladores.
‫Así que aquí también tienes algo llamado claves API, ¿de acuerdo?
‫De todos modos, hay una clave publicable y una clave secreta.
‫Y esta es básicamente una clave
‫pública que podemos usar en el front-end, y
‫una clave secreta es la que se necesita en el back-end.
‫Y mucho más sobre
‫eso una vez que comencemos a implementarlo.
‫Y finalmente, también quería
‫echar un vistazo rápido junto con ustedes a la documentación.
‫Y eso está aquí, y
‫en realidad Stripe
‫es conocido por su excelente documentación.
‫Es muy fácil encontrar lo que busca
‫en esta documentación.
‫Pero, por supuesto, cuando recién estás
‫comenzando, es muy difícil saber lo
‫que estás buscando, ¿verdad?
‫Y es por eso
‫que estamos implementando esta función de pago juntos aquí, ¿verdad?
‫Entonces, usaremos las funciones de pago de Stripe y
‫tienen un par de opciones diferentes.
‫Ahora en la web, podemos usar Stripe
‫Checkout, que básicamente usa una página de Checkout preformativa.
‫Y este es el que usaremos,
‫o también puede usar elementos de Stripe
‫cuando
‫realmente desee crear su propia experiencia de Checkout, ¿de acuerdo?
‫Pero solo usaremos este Checkout, que en realidad
‫es nuevo y, por lo
‫tanto, está realmente preparado para el futuro en este momento.
‫Estas son las dos opciones para la
‫web, pero también puedes usar Stripe en iOS, Android y, en realidad,
‫en cualquier otra plataforma.
‫Luego, en Checkout, podemos usarlo solo
‫en el cliente o junto con el servidor, ¿de acuerdo?
‫Así que aquí abajo hay una comparación.
‫Entonces, cuando solo lo usamos en el lado del cliente,
‫entonces ni siquiera necesitamos un servidor en absoluto.
‫Pero esta forma de usar Stripe es solo, realmente,
‫para tiendas realmente pequeñas, por lo
‫que solo tiene un puñado de productos
‫que nunca cambian su precio
‫y donde realmente tiene
‫que agregar todos estos productos manualmente a sus paneles de Stripe.
‫Entonces queremos algo un poco más
‫complejo y, para eso, usamos la integración del servidor, ¿de acuerdo?
‫Y así, por supuesto, todavía tenemos
‫que hacer algo en el lado del
‫cliente, pero la mayor parte del código estará realmente en el lado del servidor.
‫Bien, entonces ves que realmente hay muchas
‫cosas que hacer con Stripe, e incluso podemos hacer muchas más.
‫Entonces podríamos tener facturación donde tenemos suscripciones donde tenemos facturas
‫y todas esas cosas buenas.
‫Entonces, realmente, podría construir
‫un gran negocio sobre Stripe y aceptar suscripciones, guardar
‫clientes en bases de datos
‫y todo eso integrado en Stripe.
‫Pero nuevamente, lo que vamos
‫a hacer aquí es simplemente usar
‫Checkout, pero la versión más completa
‫usando el servidor Checkout.
‫Muy bien, pero ahora, antes de
‫que comencemos a integrar el producto
‫Stripe Checkout en
‫nuestra aplicación, solo quería diseñar rápidamente todo el
‫flujo de trabajo que implementaremos en los próximos videos.
‫Entonces, todo comienza en el
‫back-end, donde implementaremos una ruta para crear
‫la llamada Sesión de pago de Stripe.
‫Y esta sesión contendrá un montón de
‫datos sobre el objeto que se puede comprar.
‫Y en nuestro ejemplo, ese es el recorrido.
‫Entonces, la sesión contendrá el precio del tour,
‫el nombre del tour, una imagen del producto y también algunos otros detalles como
‫el correo electrónico del cliente.
‫Así que lo veremos en el próximo video.
‫Luego, en el front-end, crearemos una función para solicitar
‫la sesión de pago del servidor una vez que el
‫usuario haga clic en el botón comprar.
‫Entonces, una vez que lleguemos
‫al punto final que creamos en
‫el back-end, eso creará una sesión y la enviará de
‫vuelta al cliente.
‫Luego, en función de esa
‫sesión, Stripe creará automáticamente una página de pago donde el
‫usuario puede ingresar todos los detalles como el
‫número de la tarjeta de crédito, la fecha de vencimiento y todo eso.
‫Luego, nuevamente, usando The
‫Session, finalmente cargaremos la tarjeta de crédito.
‫Y para eso, necesitaremos la clave pública,
‫la que acabamos de ver antes.
‫Entonces, la clave secreta que necesitaremos en el
‫servidor, como verá en el
‫primer paso, y la clave pública se usará en el front-end.
‫Y lo que es realmente importante tener
‫en cuenta aquí es
‫que es realmente Stripe, que junto
‫con The Session, cargará la tarjeta de crédito y,
‫por lo tanto, los detalles de la tarjeta de crédito ni siquiera
‫llegarán a nuestro servidor, lo que hace que nuestra vida como
‫desarrolladores sea mucho más fácil porque entonces
‫no tenemos que ocuparnos de todas las cuestiones de seguridad
‫relacionadas con la gestión y el almacenamiento de tarjetas de crédito, ¿de acuerdo?
‫Entonces, Stripe nos quita todo
‫eso, básicamente usamos su API de esta manera.
‫De todos modos, una vez que se haya cargado correctamente la
‫tarjeta de crédito, podemos usar algo
‫llamado Stripe Webhooks en nuestro back-end para crear nuevas reservas.
‫Ahora, esta parte del flujo
‫de trabajo solo funcionará para sitios web implementados, es
‫decir, sitios web que ya se están ejecutando en un servidor.
‫Entonces, esta parte del
‫flujo de trabajo, solo podremos
‫implementarla al final de la siguiente sección, ¿de acuerdo?
‫Pero por ahora,
‫encontraremos una solución temporal para
‫esto, que no es
‫realmente seguro, pero funcionará bien por ahora, ¿de acuerdo?
‫Así que tenga en cuenta este diagrama y también este concepto
‫de que en realidad usamos The Session para cargar una tarjeta de
‫crédito y realmente no lo hacemos directamente.
‫Entonces, nos vemos en el siguiente video.