1 00:00:01,130 --> 00:00:03,770 ‫Narrador: En esta última parte de la 2 00:00:03,770 --> 00:00:06,160 ‫sección, ahora aceptaremos pagos con 3 00:00:06,160 --> 00:00:08,770 ‫tarjeta de crédito en nuestra aplicación usando 4 00:00:08,770 --> 00:00:12,233 ‫Stripe para permitir que nuestros usuarios realmente compren tours. 5 00:00:14,080 --> 00:00:16,320 ‫Y entonces, abramos una nueva pestaña aquí 6 00:00:18,160 --> 00:00:21,730 ‫y luego una franja abierta. com. 7 00:00:21,730 --> 00:00:25,080 ‫Por lo tanto, Stripe es la mejor y más popular 8 00:00:25,080 --> 00:00:27,910 ‫y también la más fácil de usar plataforma 9 00:00:27,910 --> 00:00:30,810 ‫de software para integrar pagos en cualquier sitio web. 10 00:00:30,810 --> 00:00:34,210 ‫Y mucho más sobre cómo funciona realmente un 11 00:00:34,210 --> 00:00:38,040 ‫poco más tarde, pero por ahora comencemos creando nuestra cuenta gratuita. 12 00:00:38,040 --> 00:00:40,540 ‫Así que haga clic aquí en la 13 00:00:40,540 --> 00:00:43,303 ‫cuenta gratuita y luego abra su propia cuenta gratuita. 14 00:00:44,510 --> 00:00:46,810 ‫Y una vez que haya iniciado sesión 15 00:00:46,810 --> 00:00:49,990 ‫correctamente, debería ver un panel que se parece a esto. 16 00:00:49,990 --> 00:00:52,210 ‫Entonces, cuando abra una cuenta 17 00:00:52,210 --> 00:00:55,150 ‫nueva, inicialmente siempre estará en modo de prueba. 18 00:00:55,150 --> 00:00:59,250 ‫Eso es lo que puede ver aquí abajo con estos datos de prueba. 19 00:00:59,250 --> 00:01:01,380 ‫Ahora, tan pronto como realmente 20 00:01:01,380 --> 00:01:04,250 ‫desee comenzar a aceptar pagos reales que 21 00:01:04,250 --> 00:01:07,530 ‫involucren dinero real de clientes reales, deberá activar su 22 00:01:07,530 --> 00:01:08,960 ‫cuenta de Stripe. 23 00:01:08,960 --> 00:01:11,350 ‫Y para eso, tendrás que proporcionar a 24 00:01:11,350 --> 00:01:14,220 ‫Stripe una gran cantidad de datos sobre tu negocio. 25 00:01:14,220 --> 00:01:15,580 ‫Pero, por supuesto, en 26 00:01:15,580 --> 00:01:18,360 ‫este proyecto, no vamos a hacer eso, así que siempre 27 00:01:18,360 --> 00:01:21,680 ‫trabajaremos en este tipo de modo de desarrollo de pruebas, ¿de acuerdo? 28 00:01:21,680 --> 00:01:24,010 ‫Pero de lo contrario, simplemente haga 29 00:01:24,010 --> 00:01:26,940 ‫clic aquí en iniciar o active su cuenta aquí. 30 00:01:26,940 --> 00:01:29,980 ‫Ahora bien, este panel de control es realmente fácil y súper 31 00:01:29,980 --> 00:01:31,890 ‫intuitivo de usar en mi opinión. 32 00:01:31,890 --> 00:01:35,660 ‫Entonces, aquí puede ver sus pagos, lo que nuevamente es 33 00:01:35,660 --> 00:01:37,360 ‫muy fácil, y recuerde 34 00:01:37,360 --> 00:01:40,280 ‫que todos estos son datos de prueba. 35 00:01:40,280 --> 00:01:42,270 ‫Entonces, todas estas cantidades aquí son, 36 00:01:42,270 --> 00:01:44,110 ‫por supuesto, solo cantidades falsas. 37 00:01:44,110 --> 00:01:46,460 ‫Pero de todos modos, puedes ver a tu 38 00:01:46,460 --> 00:01:48,463 ‫cliente aquí, puedes ver el monto. 39 00:01:49,490 --> 00:01:52,440 ‫Y cuando los abres, obtienes aún más información, como el 40 00:01:52,440 --> 00:01:55,670 ‫método de pago aquí, el número de la tarjeta de crédito. 41 00:01:55,670 --> 00:01:58,640 ‫Y, por cierto, nunca obtenemos acceso al número 42 00:01:58,640 --> 00:02:01,420 ‫real de tarjeta de crédito del cliente. 43 00:02:01,420 --> 00:02:04,230 ‫Así que siempre veremos estos últimos cuatro dígitos, pero 44 00:02:04,230 --> 00:02:07,630 ‫nunca el número real de la tarjeta de crédito, ¿de acuerdo? 45 00:02:07,630 --> 00:02:09,620 ‫Luego, también obtendrá una descripción 46 00:02:09,620 --> 00:02:12,110 ‫general de lo que realmente se compró. 47 00:02:12,110 --> 00:02:14,630 ‫Así, por ejemplo, The Snow Adventurer Tour. 48 00:02:14,630 --> 00:02:16,360 ‫Y todo esto aquí 49 00:02:16,360 --> 00:02:18,410 ‫fue, por supuesto, de la primera 50 00:02:18,410 --> 00:02:21,133 ‫vez que construí la aplicación Natours, ¿de acuerdo? 51 00:02:22,000 --> 00:02:24,570 ‫Entonces, todos estos son solo compras de prueba. 52 00:02:24,570 --> 00:02:27,420 ‫Entonces también podemos ver todo nuestro saldo, 53 00:02:27,420 --> 00:02:30,150 ‫básicamente todo el dinero que recibimos. 54 00:02:30,150 --> 00:02:33,610 ‫Y nuevamente, todo esto son solo datos de prueba. 55 00:02:33,610 --> 00:02:37,060 ‫Luego tenemos a nuestros clientes con una buena lista de todos ellos. 56 00:02:37,060 --> 00:02:39,653 ‫Y sí, todo esto funciona muy bien. 57 00:02:40,650 --> 00:02:42,500 ‫Ahora, antes de que podamos 58 00:02:42,500 --> 00:02:44,830 ‫comenzar, necesitamos definir un par de configuraciones 59 00:02:44,830 --> 00:02:46,400 ‫sobre nuestra cuenta. 60 00:02:46,400 --> 00:02:48,867 ‫Entonces, en su nueva cuenta, debería 61 00:02:48,867 --> 00:02:52,120 ‫ver algo como "Cuenta sin nombre", o algo así, aquí. 62 00:02:52,120 --> 00:02:55,740 ‫Y entonces, también debería tener, como un ícono de bolígrafo o algo 63 00:02:55,740 --> 00:02:59,010 ‫donde luego pueda crear un nombre para la cuenta. 64 00:02:59,010 --> 00:03:02,160 ‫Y así que por favor llámenlo "Natours" o algo más. 65 00:03:02,160 --> 00:03:04,700 ‫Y si tiene más negocios, puede 66 00:03:04,700 --> 00:03:08,690 ‫agregar una cuenta para cada uno de estos negocios, ¿de acuerdo? 67 00:03:08,690 --> 00:03:11,510 ‫O si no tiene el ícono de lápiz aquí, también 68 00:03:11,510 --> 00:03:13,220 ‫podemos ir a la configuración 69 00:03:13,220 --> 00:03:15,570 ‫y luego a la información de la cuenta. 70 00:03:15,570 --> 00:03:18,030 ‫Y aquí es donde debería poner 71 00:03:18,030 --> 00:03:20,610 ‫el nombre de este tipo de negocio. 72 00:03:20,610 --> 00:03:23,150 ‫También podemos definir un par de configuraciones más, así 73 00:03:23,150 --> 00:03:25,350 ‫que definamos la marca aquí, lo que 74 00:03:25,350 --> 00:03:27,390 ‫hará que las páginas de Stripe Checkout 75 00:03:27,390 --> 00:03:29,233 ‫coincidan básicamente con nuestra marca. 76 00:03:30,470 --> 00:03:32,383 ‫Así que agreguemos nuestras imágenes. 77 00:03:35,880 --> 00:03:39,850 ‫Entonces, public, image, y luego para el ícono, 78 00:03:39,850 --> 00:03:41,163 ‫usemos este. 79 00:03:43,830 --> 00:03:46,140 ‫Y también podemos subir 80 00:03:46,140 --> 00:03:49,033 ‫un logo, y para eso, usemos este. 81 00:03:51,310 --> 00:03:53,913 ‫Ah, y ahora necesitamos nuestra contraseña para continuar. 82 00:03:56,220 --> 00:03:59,033 ‫Y ahora cambiemos también nuestro color aquí. 83 00:04:00,180 --> 00:04:03,640 ‫Así que abre rápidamente el archivo CSS en público 84 00:04:04,510 --> 00:04:07,150 ‫y luego encuentra nuestro típico verde, que 85 00:04:07,150 --> 00:04:08,663 ‫es este aquí. 86 00:04:12,000 --> 00:04:13,623 ‫Entonces eso se ve un poco mejor. 87 00:04:15,570 --> 00:04:16,950 ‫Ahora guardémoslo aquí 88 00:04:19,200 --> 00:04:22,150 ‫y con eso, estamos listos para comenzar. 89 00:04:22,150 --> 00:04:25,130 ‫A continuación, echemos un vistazo a nuestras claves API. 90 00:04:25,130 --> 00:04:27,660 ‫Entonces, haga clic aquí en las claves de API y 91 00:04:27,660 --> 00:04:29,550 ‫si el sitio web se ve 92 00:04:29,550 --> 00:04:31,690 ‫un poco diferente en el momento en que 93 00:04:31,690 --> 00:04:35,113 ‫está viendo este video, entonces tal vez las claves estén aquí en los desarrolladores. 94 00:04:36,180 --> 00:04:41,180 ‫Así que aquí también tienes algo llamado claves API, ¿de acuerdo? 95 00:04:41,840 --> 00:04:45,860 ‫De todos modos, hay una clave publicable y una clave secreta. 96 00:04:45,860 --> 00:04:48,270 ‫Y esta es básicamente una clave 97 00:04:48,270 --> 00:04:50,820 ‫pública que podemos usar en el front-end, y 98 00:04:50,820 --> 00:04:54,430 ‫una clave secreta es la que se necesita en el back-end. 99 00:04:54,430 --> 00:04:56,020 ‫Y mucho más sobre 100 00:04:56,020 --> 00:04:58,420 ‫eso una vez que comencemos a implementarlo. 101 00:04:58,420 --> 00:05:00,310 ‫Y finalmente, también quería 102 00:05:00,310 --> 00:05:04,120 ‫echar un vistazo rápido junto con ustedes a la documentación. 103 00:05:04,120 --> 00:05:05,940 ‫Y eso está aquí, y 104 00:05:05,940 --> 00:05:07,390 ‫en realidad Stripe 105 00:05:07,390 --> 00:05:09,470 ‫es conocido por su excelente documentación. 106 00:05:09,470 --> 00:05:11,700 ‫Es muy fácil encontrar lo que busca 107 00:05:11,700 --> 00:05:13,170 ‫en esta documentación. 108 00:05:13,170 --> 00:05:15,470 ‫Pero, por supuesto, cuando recién estás 109 00:05:15,470 --> 00:05:17,740 ‫comenzando, es muy difícil saber lo 110 00:05:17,740 --> 00:05:19,830 ‫que estás buscando, ¿verdad? 111 00:05:19,830 --> 00:05:21,550 ‫Y es por eso 112 00:05:21,550 --> 00:05:25,270 ‫que estamos implementando esta función de pago juntos aquí, ¿verdad? 113 00:05:25,270 --> 00:05:28,530 ‫Entonces, usaremos las funciones de pago de Stripe y 114 00:05:28,530 --> 00:05:31,000 ‫tienen un par de opciones diferentes. 115 00:05:31,000 --> 00:05:33,630 ‫Ahora en la web, podemos usar Stripe 116 00:05:33,630 --> 00:05:36,820 ‫Checkout, que básicamente usa una página de Checkout preformativa. 117 00:05:36,820 --> 00:05:39,170 ‫Y este es el que usaremos, 118 00:05:39,170 --> 00:05:41,800 ‫o también puede usar elementos de Stripe 119 00:05:41,800 --> 00:05:42,633 ‫cuando 120 00:05:42,633 --> 00:05:46,400 ‫realmente desee crear su propia experiencia de Checkout, ¿de acuerdo? 121 00:05:46,400 --> 00:05:48,640 ‫Pero solo usaremos este Checkout, que en realidad 122 00:05:48,640 --> 00:05:50,110 ‫es nuevo y, por lo 123 00:05:50,110 --> 00:05:52,633 ‫tanto, está realmente preparado para el futuro en este momento. 124 00:05:53,990 --> 00:05:56,060 ‫Estas son las dos opciones para la 125 00:05:56,060 --> 00:05:59,850 ‫web, pero también puedes usar Stripe en iOS, Android y, en realidad, 126 00:05:59,850 --> 00:06:01,563 ‫en cualquier otra plataforma. 127 00:06:02,700 --> 00:06:05,840 ‫Luego, en Checkout, podemos usarlo solo 128 00:06:05,840 --> 00:06:10,223 ‫en el cliente o junto con el servidor, ¿de acuerdo? 129 00:06:11,070 --> 00:06:13,593 ‫Así que aquí abajo hay una comparación. 130 00:06:14,610 --> 00:06:17,600 ‫Entonces, cuando solo lo usamos en el lado del cliente, 131 00:06:17,600 --> 00:06:20,000 ‫entonces ni siquiera necesitamos un servidor en absoluto. 132 00:06:20,000 --> 00:06:22,890 ‫Pero esta forma de usar Stripe es solo, realmente, 133 00:06:22,890 --> 00:06:25,060 ‫para tiendas realmente pequeñas, por lo 134 00:06:25,060 --> 00:06:27,600 ‫que solo tiene un puñado de productos 135 00:06:27,600 --> 00:06:29,420 ‫que nunca cambian su precio 136 00:06:29,420 --> 00:06:31,040 ‫y donde realmente tiene 137 00:06:31,040 --> 00:06:34,730 ‫que agregar todos estos productos manualmente a sus paneles de Stripe. 138 00:06:34,730 --> 00:06:37,250 ‫Entonces queremos algo un poco más 139 00:06:37,250 --> 00:06:41,460 ‫complejo y, para eso, usamos la integración del servidor, ¿de acuerdo? 140 00:06:41,460 --> 00:06:43,160 ‫Y así, por supuesto, todavía tenemos 141 00:06:43,160 --> 00:06:45,010 ‫que hacer algo en el lado del 142 00:06:45,010 --> 00:06:48,720 ‫cliente, pero la mayor parte del código estará realmente en el lado del servidor. 143 00:06:48,720 --> 00:06:52,220 ‫Bien, entonces ves que realmente hay muchas 144 00:06:52,220 --> 00:06:56,930 ‫cosas que hacer con Stripe, e incluso podemos hacer muchas más. 145 00:06:56,930 --> 00:07:01,210 ‫Entonces podríamos tener facturación donde tenemos suscripciones donde tenemos facturas 146 00:07:01,210 --> 00:07:04,050 ‫y todas esas cosas buenas. 147 00:07:04,050 --> 00:07:06,040 ‫Entonces, realmente, podría construir 148 00:07:06,040 --> 00:07:09,330 ‫un gran negocio sobre Stripe y aceptar suscripciones, guardar 149 00:07:09,330 --> 00:07:11,350 ‫clientes en bases de datos 150 00:07:11,350 --> 00:07:13,543 ‫y todo eso integrado en Stripe. 151 00:07:14,940 --> 00:07:16,850 ‫Pero nuevamente, lo que vamos 152 00:07:16,850 --> 00:07:19,040 ‫a hacer aquí es simplemente usar 153 00:07:19,040 --> 00:07:21,090 ‫Checkout, pero la versión más completa 154 00:07:21,090 --> 00:07:22,963 ‫usando el servidor Checkout. 155 00:07:24,640 --> 00:07:27,130 ‫Muy bien, pero ahora, antes de 156 00:07:27,130 --> 00:07:29,690 ‫que comencemos a integrar el producto 157 00:07:29,690 --> 00:07:31,210 ‫Stripe Checkout en 158 00:07:31,210 --> 00:07:34,353 ‫nuestra aplicación, solo quería diseñar rápidamente todo el 159 00:07:34,353 --> 00:07:37,920 ‫flujo de trabajo que implementaremos en los próximos videos. 160 00:07:37,920 --> 00:07:40,200 ‫Entonces, todo comienza en el 161 00:07:40,200 --> 00:07:42,850 ‫back-end, donde implementaremos una ruta para crear 162 00:07:42,850 --> 00:07:45,600 ‫la llamada Sesión de pago de Stripe. 163 00:07:45,600 --> 00:07:48,170 ‫Y esta sesión contendrá un montón de 164 00:07:48,170 --> 00:07:50,970 ‫datos sobre el objeto que se puede comprar. 165 00:07:50,970 --> 00:07:53,070 ‫Y en nuestro ejemplo, ese es el recorrido. 166 00:07:53,070 --> 00:07:55,480 ‫Entonces, la sesión contendrá el precio del tour, 167 00:07:55,480 --> 00:07:59,640 ‫el nombre del tour, una imagen del producto y también algunos otros detalles como 168 00:07:59,640 --> 00:08:01,450 ‫el correo electrónico del cliente. 169 00:08:01,450 --> 00:08:04,530 ‫Así que lo veremos en el próximo video. 170 00:08:04,530 --> 00:08:07,370 ‫Luego, en el front-end, crearemos una función para solicitar 171 00:08:07,370 --> 00:08:10,580 ‫la sesión de pago del servidor una vez que el 172 00:08:10,580 --> 00:08:13,120 ‫usuario haga clic en el botón comprar. 173 00:08:13,120 --> 00:08:14,550 ‫Entonces, una vez que lleguemos 174 00:08:14,550 --> 00:08:16,350 ‫al punto final que creamos en 175 00:08:16,350 --> 00:08:19,360 ‫el back-end, eso creará una sesión y la enviará de 176 00:08:19,360 --> 00:08:20,720 ‫vuelta al cliente. 177 00:08:20,720 --> 00:08:22,590 ‫Luego, en función de esa 178 00:08:22,590 --> 00:08:26,010 ‫sesión, Stripe creará automáticamente una página de pago donde el 179 00:08:26,010 --> 00:08:28,640 ‫usuario puede ingresar todos los detalles como el 180 00:08:28,640 --> 00:08:32,670 ‫número de la tarjeta de crédito, la fecha de vencimiento y todo eso. 181 00:08:32,670 --> 00:08:34,760 ‫Luego, nuevamente, usando The 182 00:08:34,760 --> 00:08:37,360 ‫Session, finalmente cargaremos la tarjeta de crédito. 183 00:08:37,360 --> 00:08:39,700 ‫Y para eso, necesitaremos la clave pública, 184 00:08:39,700 --> 00:08:41,830 ‫la que acabamos de ver antes. 185 00:08:41,830 --> 00:08:44,270 ‫Entonces, la clave secreta que necesitaremos en el 186 00:08:44,270 --> 00:08:46,330 ‫servidor, como verá en el 187 00:08:46,330 --> 00:08:49,820 ‫primer paso, y la clave pública se usará en el front-end. 188 00:08:49,820 --> 00:08:51,730 ‫Y lo que es realmente importante tener 189 00:08:51,730 --> 00:08:53,180 ‫en cuenta aquí es 190 00:08:53,180 --> 00:08:54,930 ‫que es realmente Stripe, que junto 191 00:08:54,930 --> 00:08:57,480 ‫con The Session, cargará la tarjeta de crédito y, 192 00:08:57,480 --> 00:09:00,720 ‫por lo tanto, los detalles de la tarjeta de crédito ni siquiera 193 00:09:00,720 --> 00:09:03,800 ‫llegarán a nuestro servidor, lo que hace que nuestra vida como 194 00:09:03,800 --> 00:09:05,870 ‫desarrolladores sea mucho más fácil porque entonces 195 00:09:05,870 --> 00:09:08,500 ‫no tenemos que ocuparnos de todas las cuestiones de seguridad 196 00:09:08,500 --> 00:09:12,000 ‫relacionadas con la gestión y el almacenamiento de tarjetas de crédito, ¿de acuerdo? 197 00:09:12,000 --> 00:09:14,450 ‫Entonces, Stripe nos quita todo 198 00:09:14,450 --> 00:09:18,030 ‫eso, básicamente usamos su API de esta manera. 199 00:09:18,030 --> 00:09:21,840 ‫De todos modos, una vez que se haya cargado correctamente la 200 00:09:21,840 --> 00:09:24,460 ‫tarjeta de crédito, podemos usar algo 201 00:09:24,460 --> 00:09:28,210 ‫llamado Stripe Webhooks en nuestro back-end para crear nuevas reservas. 202 00:09:28,210 --> 00:09:30,090 ‫Ahora, esta parte del flujo 203 00:09:30,090 --> 00:09:32,710 ‫de trabajo solo funcionará para sitios web implementados, es 204 00:09:32,710 --> 00:09:35,900 ‫decir, sitios web que ya se están ejecutando en un servidor. 205 00:09:35,900 --> 00:09:37,770 ‫Entonces, esta parte del 206 00:09:37,770 --> 00:09:39,690 ‫flujo de trabajo, solo podremos 207 00:09:39,690 --> 00:09:42,830 ‫implementarla al final de la siguiente sección, ¿de acuerdo? 208 00:09:42,830 --> 00:09:44,310 ‫Pero por ahora, 209 00:09:44,310 --> 00:09:46,270 ‫encontraremos una solución temporal para 210 00:09:46,270 --> 00:09:47,770 ‫esto, que no es 211 00:09:47,770 --> 00:09:50,870 ‫realmente seguro, pero funcionará bien por ahora, ¿de acuerdo? 212 00:09:50,870 --> 00:09:54,060 ‫Así que tenga en cuenta este diagrama y también este concepto 213 00:09:54,060 --> 00:09:57,410 ‫de que en realidad usamos The Session para cargar una tarjeta de 214 00:09:57,410 --> 00:09:59,940 ‫crédito y realmente no lo hacemos directamente. 215 00:09:59,940 --> 00:10:01,803 ‫Entonces, nos vemos en el siguiente video.