Pagos por Stripe con PHP

1. Introducción: bienvenido a esta clase sobre integrar pagos de huelga con PHP. Autenticación segura de clientes bien cubierta , pagos recurrentes, pagos de una sola vez, carteras digitales en más para empezar. Quieres descargar ese conjunto de instrucciones y asegurarte de que tienes PHP ganando localmente y luego descargar el código de ejemplo que pasará a medida que pasemos por esta clase. Empecemos. 2. ¿Cómo funciona de Stripe Stripe?: en esta lección se verá un resumen de cómo funciona la raya, por lo que probablemente ya estés familiarizado con la raya. Pero son uno de los procesos de pago más grandes del mundo. Permite tomar tarjetas de crédito y débito y sobre los métodos de pago en su página web. Está disponible en Norteamérica, Europa, algunos de Asia Oriental, y siguen expandiéndose. Y es utilizado por sitios web incluyendo booking dot com on drama, slack delivery, UNICEF, UNICEF, montones de grandes empresas internacionales y proveedores de huelga con un montón de herramientas para nuestro sitio web. Entonces tienen la A p I, con la que interactuamos en el back-end. Tienen check out strike, que está completamente alojado. Consulta la solución en su plataforma. Por lo que solo los mandas a stripe y luego vuelven consiguieron strike Js, que es la biblioteca front-end de script Java que hace que suceda toda la magia. Y luego tenemos elementos de raya que son componentes preconstruidos que puedes meter en tu sitio web para facilitarte la vida. Vamos a ver todos estos a lo largo de este curso, por lo que hay dos flujos principales que utilizarías comenzarán el primero es una salida de pista y luego en este caso. Lo que pasa es que construimos una sesión que contiene nuestro carrito de compras. Entonces todo en nuestra canasta lo empaquetamos, enviamos un mensaje a raya diciendo Te vamos a enviar un cliente que tiene todas estas cosas en la canasta. Entonces usamos rayas script Java para realmente enviar al usuario a esa página en sitio web rayado para completar, poniendo los detalles de su tarjeta incompletos y luego strike redirige el uso de back a nuestro sitio web después de que se complete el pago. Entonces piense en esto es como funciona papal. Cuando se desea realizar un pago, se envía al usuario a PayPal. Hacen el pago que regresan. Todo está alojado por raya, así que hay muy poco que hacer. Es fácil y rápido para configurarse en todas las nuevas características striper desplegando el automáticamente relacionado con el check out. Ahora el segundo flujo, que he llamado el flujo de jazz de rayas. A pesar de que en realidad usamos la biblioteca strike Javascript en ambos flujos. Pero en éste todo está alojado en nuestra página web. Entonces, ¿cómo hacemos eso sin hacer nuestro sitio web PC? Cumplo porque todo sucede con los scripts Java del usuario inserta esos detalles de tarjeta de crédito en lo que es nuestra página Web pero que nunca se publique al backend que se envía vía script Java a stripe servidores para realizar el pago. Entonces el flujo aquí es que construimos una página de chequeo en nuestra propia página web en. Probablemente pondríamos un campo de tarjeta de crédito ahí usando elementos de raya de pre construidos, cosas de aspecto muy bonito que llegarán a más adelante. Y luego cuando el usuario pone sus detalles de tarjeta de crédito en la franja, biblioteca Js envía sus detalles de tarjeta de crédito a servidores de stripe para decir, Aquí están los detalles de la tarjeta. Queremos hacer un pago aquí, en el cual Point stripe autorizará esa tarjeta y nos enviará de vuelta un token. Esto es sólo una cadena de números y letras que luego podemos usar para procesar ese pago. Entonces una vez que tengamos ese token de vuelta, entonces podemos enviar el formulario de pago del usuario en nuestra propia página web. Haciendo caso omiso de que los detalles de la tarjeta de crédito nunca estaban guardando esos a nuestro servidor porque no queremos que la PC me moleste de cumplimiento. Todo lo que necesitamos es ese token que cuando el usuario vuelve a nuestro backend, Luego enviamos a golpear una P I Una solicitud en nuestro backend diciendo que esto es lo mucho que queremos construir al usuario. Y aquí está nuestro token para decir en qué tarjeta de crédito Queríamos construir esos los dos flujos disponibles en, y los vamos a ver a ambos en este curso, empezando por check out y luego pasando a la integración más profunda, así que empecemos. 3. Clonar el repo de git: para este proyecto. He creado algún miedo de código de muestra. Por lo que esto te hará empezar y podrás clonar fácilmente esto. Entonces está encendido. Consigue esperanza en su llamada Librería PHP. Pondré esta u R l en la sección de recursos, pero solo necesitas ir aquí e incluso agarrar el clon git. O también podrías descargar el zip. Si eso es fácil para ti en su y en algún lugar de tu computadora, solo quieres que te vuele pastoso. De verdad estás en eso se descargará todo el código de muestra que necesitas una vez te hayas ido, que tenemos que hacer es ejecutar una instalación de compositor y me tomaré un momento en esa tienda de tierra . Toda la dependencia que necesitamos, igual que un proyecto Petri normal. Una vez que hayamos hecho eso, entonces tenemos todo lo que necesitamos para empezar y asumiendo que tenemos el cli sinfónico que podemos obtener de inicio de servicio Symphony y esto arrancará sinfonías, servidor web interno. Se ve bien en. Entonces podemos ir Teoh anfitrión local 8000 Y aquí tenemos el proyecto de muestra de de de correr. Entonces tenemos todos estos libros podemos agregar canasta de librería de la que aparecen aquí, tenemos una cansita. Podemos vaciar eso y devolverle al hogar por la edad. Podemos empezar a añadir libros de nuevo. ¿ A quién le dieron el sistema básico? Y además de esto, podemos construir nuestro check out y procesamiento de pagos. Entonces consigue descargar el código de muestra. Pasa de correr, luego pasaremos a la siguiente lección. 4. Registrar una cuenta de Stripe: Lo siguiente que quieres hacer es listo auto. Dijo una cuenta de raya. Para hacer eso, solo consigue una huelga. Pero vamos y pulsa el botón de inicio ahora y luego solo rellena todos tus datos. Incluso puedes configurarte como empresa si tienes objetos de empresa registrados. Como individuo, técnicamente no necesitas una cuenta de raya. Si estás configurando esto en nombre de otra persona, podrías usar su cuenta de banda, y ni siquiera necesitas acceso siempre y cuando te den las claves correctas. Pero definitivamente ayuda a dedo tener uno, porque entonces se puede verificar todo lo que estamos haciendo y ver las transacciones pasando en raya. Una vez que no tengas nada vieira, deberías llegar al tablero de instrumentos encendido. Eso es todo lo que necesitamos por ahora. Entonces vamos a cubrir todo lo demás en la siguiente lección. 5. Accesoriza tus claves de API: Una vez que te metes en tu cuenta de raya, entonces necesitarás sacar tus llaves A P I para hacer eso. Podemos bajar a este Desarrolladores en una P I claves aquí. Esta es nuestra clave pública aquí mismo Que incluirá en el front end. Y también tenemos la clave secreta de que Egipto golpeó este botón de revelar en que te dará una clave privada que usamos en el back end. Ahora, al hacer esto, quieres asegurarte de que has toggled esta visualización de datos de tareas porque vamos a querer usar nuestras claves de vida en la vida, obviamente. Pero para fines de desarrollo, tol horas para saber, en realidad procesar cualquier pago y utilizar la prueba de huelga Los guardias querrán estar usando los datos de prueba , así que asegúrate de agarrar esas claves de prueba a P I. Si estás usando la cuenta de raya de otra persona, solo puedes conseguir que los saquen por ti. Por esto, te recomiendo tener tu propia cuenta con la que concurre porque y puedes ver las transacciones llegando a través de 6. Instalación de la biblioteca de Stripe: para hacer uso de la raya. AP Necesitaré realmente obtener la raya A p Codigo Onda podemos levantarnos fácilmente del paquete ist. Simplemente va a golpear raya slash PHP? No. En el código de muestra que te he dado aquí, ya está incluido. Entonces si bajamos a los paquetes, ya tenemos instalada la librería recta. Pero si estás trabajando en tu nuevo proyecto, tu propio proyecto, solo necesita lidiar con compositor instalar fuera de este paquete PHP strike y eso te dará a ti o a la funcionalidad A p I que vamos a estar usando a lo largo de este curso. 7. Tarjetas de prueba de stripe: algo más que sería super útil dedo del pie tener a medida que pasamos por este curso es algunas tarjetas de prueba. Entonces cuando estamos probando los pagos, no queremos usar nuestras tarjetas de crédito reales en proveedor de huelga. Las tarjetas de prueba fuera de Siri, que solo Google tarjetas de prueba de huelga, es la forma más fácil de encontrarlas. En Bajo esta sección de pruebas, tenemos montones de tarjetas diferentes. Entonces aquí hay un montón de ejemplos de todos los diferentes proveedores de tarjetas también consiguieron tarjetas internacionales , y cuando llegamos a ver un pago, hay tarjetas para probar eso también. Por lo que es genial tener a mano estos documentos. Además, si utilizas cualquier tipo de sistema de gestión de tarjetas fuera, incluso tu navegador o tu gestor de contraseñas, incluso podrías instalar una de estas tarjetas en. Eso es lo que hago. Y entonces solo permito que eso lo llene cada vez, cualquiera para usar eso como tarjetas. Así que solo mantén esta página a mano. Tan solo debes saber que estas tarjetas están disponibles. Podríamos estar usándolos más adelante 8. Usar el código de ejemplo: medida que pasemos será creando todo el código que necesitamos juntos. Pero si prefieres solo ver los videos y luego codificar más tarde y no quieres tener que estar constantemente pausando el video y escribiendo un poco, o simplemente llegas al final de un proyecto y algo no está funcionando del todo, entonces todo el código que vamos a crear ya está en el get repo que has dado. Entonces vamos a la raíz aquí. En esta carpeta Examples, puedes encontrar todos los ayudantes y plantillas del controlador que vamos a crear juntos ya en su forma terminada. Entonces si obtienes algo y no funciona, entonces un buen lugar para ir estrella es simplemente compararlo con lo que hay en los ejemplos. Una vez que los hayas clonado, esos también estarán disponibles localmente. Entonces en los ejemplos, algo no está funcionando del todo. Simplemente trae el código, y puedes compararlo con lo que has hecho en D. C. Esperemos solucionar problemas y ver dónde está el problema 9. Revisión de Stripe: en este módulo. Nos vamos a integrar con check out rayado. Así que sólo Teoh recap De lo que se trata el strike check out es de una página de check out alojada por Stripes o similar a PayPal. Vamos a mandar al usuario fuera a stripe con un montón de variables para decirles cuánto queremos cobrar. Van a tomar el pago por el cliente y luego enviarlos de vuelta. Si quieres ir directo a una integración completa con strike dondequiera que las cosas guardaran en nuestra página web, entonces siéntete libre de omitir este módulo. Pero si quieres ver cómo funciona esto primero, entonces para continuar así el flujo es vamos a construir una sesión que contenga la canasta de los usuarios . Vamos a mandar eso a raya en la parte trasera. Entonces vamos a recuperar token de raya y usar eso para redirigir al usuario a la página de check out en rayas para que strike sepa quiénes son y qué deberíamos estar mostrando a ellos. Strike entonces tomará el pago y redirigirá al usuario de vuelta a nuestro sitio Web, momento en el que podemos decir algún tipo de orden página completa. Entonces empecemos a implementar esto 10. Crear una sesión de pago: Empecemos a crear este check out para que podamos robar este código del controlador de canasta y crear un nuevo controlador llamado Check out Control. Y tendremos esta función de check out mapeada. Teoh el check out tu todo y vamos a necesitar traer algunas de las librerías de rayas aquí. Entonces vamos a usar el CO encendido y vamos a usar la sesión de check out también. Cuando utilicemos esto más abajo, vamos a deshacernos de este código existente. Está bien, genial. Por lo que ahora podemos empezar a escribir nuestro abrigo. Lo primero que vamos a necesitar hacer es poner a nuestra privada Que Hagamos eso. Entonces la clave del FBI, vamos a sacar esto de una invariable que vamos a carbón raya Clave privada. Vamos a armar esto. Ya está medio configurado en un minuto, pero volveremos atrás y configuraremos en la siguiente lección, y luego empezamos a construir nuestros objetos de sesión que la forma en que lo vamos a hacer es crear un objeto de sesión a de todos los datos en. Entonces vamos a mandar a raya. Entonces cuando el usuario aterriza en el sitio web rayado sabe lo que necesita. Entonces esto va a ser objeto en Vamos a decirle raya que queremos que el usado pague con tarjeta. Crearemos matriz vacía para líneas de pedido porque poblará la de ella. Más abajo. No tuve éxito. También eres Aquí es donde el usuario será redirigido de nuevo en una de las cosas que strike nos da es la capacidad de ser sesión I D o remitentes la sesión I d volver para que podamos poner Lane es un marcador de posición, y strike sabrá en qué hacer eso. Tengamos también un consejo tu más si usan es cancel. Yo quiero que vuelvan a la pantalla de canasta que nos importa. Entonces lo siguiente que queremos hacer es que en realidad necesitamos decirle a raya en qué productos estaban. Entonces para hacer eso cuando un bucle a través de los artículos de la canasta, por favor saca cada libro sobre lo que se agrega a los ítems de línea, vamos a agregar un nuevo objeto aquí, diga el nombre. Escucha como una descripción de título de libro que está pasando el nombre del autor, la cantidad. Entonces cuando hagan algo un poco diferente aquí y tomaremos el precio que se almacena en nuestra pequeña base de datos como precio decimal. Entonces, por ejemplo, 99 en curso lo veces por 100 porque cada vez que pasamos una cantidad a raya, necesita estar en el denominador más bajo. Entonces en nosotros dólares, estamos hablando mandó algo con euros con libras. Estamos hablando de enviar en centavos. Entonces si tienes algo orgulloso con un precio de $9.99 necesitamos enviar más de 999 gallinas iban a decir el precio almacenado en nuestra base de datos y lo veces por 100 y pasó la moneda en. En este caso, vamos a usar libras en finalmente cantidad, y eso va a ser puesto dedo uno. Por lo que hemos desarrollado los datos de esta sesión, y adicionalmente, hemos construido toda la lista fuera de productos también en. Por último, tenemos toda la información que necesitamos. Y así este punto, podemos llamar a una franja del FBI para crear la sesión de día. Vamos a renderizar esto a una plantilla en. El único que necesitamos pasar a esta plantilla es la sesión que d que obtenemos de raya. Está bien, eso se ve bien. Por lo que ahora tenemos nuestro controlador, pero necesitamos obtener una plantilla y necesitamos resolver estas claves también 11. Instalación de las claves de API: en el controlador de salida. Utilizamos esta variable ambiental para obtener son clave raya privada on. Vamos a hacer algo similar en el front end en nuestra plantilla. De hecho, eso ya está conectado, listo para ser utilizado. Por lo que necesitamos establecer eso porque eso será diferente para cada uno de nosotros cuando el archivo dot m ya haya creado estas variables aquí. Pero porque no queremos que estas claves se comprometan dedo del pie, consigo repo porque van a ser diferentes por ambiente en secreto. Entonces tal vez no Todos teniendo acceso a ellos que queremos hacer es crear un archivo local dot m dot y tenemos que hacer en Aquí está esta una línea de comentarios en copiar y pegar estas dos líneas aquí y luego simplemente pegar tus claves reales después de ellas aquí en asume tú lo haces, estarán listos y disponibles para usar así creado dot m dot llaves de pastelería locales en y no lo hagas 12. Redirigir al pago de compra: con gran nuestro controlador. Pero ahora necesitamos crear esta plantilla que realmente vamos a renderizar los redireccionamientos. Hagamos eso. Ahora Haz eso cuando vayas a usar el directorio de plantillas. Yo estaba como copiar y pegar código para hacerlo más fácil, pero realmente todo esto en Llamamos a este check out y lo primero que vamos a hacer es incluir el código de stripe Js para que puedas copiar y pegar esto desde el sitio web de strike. Pero es bastante simple. La chica y vamos a seguir adelante en crear bloque de guión donde vamos a poner nuestro código en un par de cosas que hacemos aquí es crear raya Instancia aquí Necesito poner ah raya para pero Kyan que creamos como variable ambiental. Entonces esta es nuestra clave pública en el código terroso de control que el usuario no ve ahí estaban usando una clave privada. No mezcles esos dos arriba y entonces todo lo que vamos a hacer es llamar a la función de redirección. Andi aquí solo necesitamos pasar en la sesión que d que rendimos en nuestro controlador y eso es literalmente o tenemos que hacer por ese check out, redirigir. Entonces vamos a guardar eso como plantilla en. Ahí vamos. Vamos a ejecutarlo y a ver qué pasa. 13. Dirigir el viaje: estamos casi listos para correr este viaje. Hemos rallado tan último cosita, tenemos que hacerlo. Ha renombrado a este controlador, que me perdí antes. Una vez que hayamos hecho eso, podemos conseguir que nuestro servicio sinfónico muriera. Entonces ya tengo mi mañana aquí. Pero si no, es sólo el inicio de colon del servidor de espacio sinfonía y eso se pondrá la mañana superior en el host local 8000. También debes estar accediendo a ella aquí. Onda. Podemos crear cestas. Ya tengo dos libros en mente, pero podríamos ir y tener algunos diferentes. Eso es en esta y esta que tiene un par de libros de Steinback. Ahora cuando vayamos a checar, deberíamos ser redirigidos a raya. Está bien, Perfecto. Genial. Y tenemos nuestros libros aquí abajo listados con Price y la oferta. Entonces vamos a llenar algunos detalles. Tomemos una tarjeta de prueba de huelga. Este caso es una MasterCard y podemos usar cualquier fecha con ella y simplemente maquillar algunos números . Podríamos hacer una propuesta de obtener como bien hit pay, y ojalá esto deba cobrar y enviarnos de vuelta a la página de éxito que acabamos crear una librería Vale, genial. Por lo que ahí tenemos. Es sin duda centros atrás. ¿ Ha hecho la transacción? Bueno, echemos un vistazo. Subiremos a nuestro tablero de huelga. Nos hemos puesto a prueba demasiado encendido y refrescaríamos la página. Sí, y luego obtenemos 18 98. Ella es la transacción que acabamos de hacer. Hemos realizado con éxito un pago el. En este punto, hemos integrado con éxito con Stripe Jack out, lo cual es genial. Si quieres una integración simple de la que ya se ha hecho en futuros módulos mirarán algunas de las integraciones más avanzadas que podemos hacer. 14. Stripe.js y API: este módulo, Vamos a buscar una integración más profunda con raya en la que construimos nuestra propia página de check out en nuestro propio sitio web y usamos strike Js y strike a p I para integrar eso. Y usamos ambas cosas en el viaje de salida también. Pero los vamos a usar mucho. Mawr aquí con esta profunda integración. Entonces todo va a estar en nuestra página web. Pero porque no queremos que nuestra página web Teoh tenga que ser PC, cumplo en. Vamos a mandar los detalles de la tarjeta de crédito a rayas con sus chorros de huelga. biblioteca JavaScript en el flujo se verá algo así. Por lo que construimos esa página de chequeo en nuestra propia página web caerá en un formulario de tarjeta de crédito a partir elementos de banda en cuando el uso que llene esos detalles de tarjeta de crédito que stripe Js enviará esos detalles de tarjeta de crédito a servidores de stripe sin que tengan que ser procesados por nuestro servidor. Todo sucede en el front end en javascript strike. Después envíanos de vuelta un token de autorización de pago que luego enviará a nuestro back end. Entonces todo lo que tenemos es un token y luego hacemos una llamada a rayado AP I decir te voy a cobrar uso de esto y aquí está mi token para decir que el usuario me ha dado autorización para usar esta tarjeta de crédito, y strike luego cobrará. El pago sabrá que lo han hecho y por lo tanto podemos mostrarlos a la página de éxito del pedido sin que el usuario tenga que salir de nuestro sitio web. Entonces hagamos un comienzo integrando esto. 15. Crear un pago de esqueleto: en este módulo vamos a crear check out que está completamente integrado en nuestra página web. Entonces, para empezar, empecemos por crear un esqueleto para ese selecto Toma nuestro controlador existente encendido. Llamemos a este local. Check out Controller on. Todavía vamos a necesitar rayas rayas, pero aquí, pero aquí, vamos a usar carga de rayas en su lugar. Todavía va a querer a Teoh. De hecho, ahora vamos a deshacernos de todo este código. Lenguaje. Se va a seguir adelante y registrar lo que está pasando Este dash local check out Todo este controlador va a hacer es Bridget está renderizar esta plantilla entre ellos. El controlador también. Está bien. Se ve bien a May en entonces. Lo mismo aquí. Vamos a crear yo plantilla de check out local. A la que estamos referenciando aquí. Andi, dices eso en plantilla. Está bien, genial. Aún así ir a checar. Deshacernos de este código. Entonces ahora si conseguimos un check out local, tenemos una página de esqueleto donde podemos empezar a integrarnos. Yo echaría un vistazo 16. Elementos de stripe: pesar de que estamos creando todo el proceso de pago en nuestra propia página web todavía iba a conseguir huelga para hacer algo del levantamiento pesado por nosotros en cuanto a crear la pequeña forma real donde la gente pone los detalles de su tarjeta. Y para ello, vamos a utilizar elementos de raya que se pueden ver desde su página web aquí. Esto sólo nos da algunas formas preconstruidas que realmente agradables y fáciles de llenar, por lo que la gente simplemente pone su número de tarjeta en ella, reconocerá la tarjeta. Será sólo por su ícono correcto, escuchar que les dura para poner su código postal o código postal en, y realmente sólo lo hace súper fácil. Entonces miras esto, por ejemplo, está en el número rial, pero como importamos eso reconoce es una visa. Reconoce a los Guardias de delos Estados Unidos que nos pidieron el zip y también maneja algunas de las cosas más avanzadas, realmente seguras que vamos a hacer después. Entonces es un componente súper útil, y esta es realmente la forma de huelga para pedir a la gente que se integre ahora es mediante el uso de estos elementos preconstruidos . Entonces tomemos esto y lo dejemos caer en nuestra página web 17. Agrega elementos de stripe: Adelante y dejemos caer elementos de huelga en Ah, echa un vistazo. Entonces tenemos alrededor para revisar la página aquí y por un minuto, el código, nuestra plantilla aquí. Y acabamos de empezar por crear no vamos a usar un realmente necesita un método sobre de crear algún CSS preconstruido, así que tendremos la clase check out. Eso puedes comprobarlo en app dot CSS Solo una cosita para que se vea un poco más bonita cuando empecemos. Cuando le demos un I d a y dentro del formulario, vamos a encontrar ese lugar elemento viejo llamará elemento de tarjeta. Sí, se ve bien en. Vamos a crear una gran quemadura yo mismo. Presentar pago. Genial. Ya tenemos nuestro guión aquí en Vamos a traer ese código que inicializar es stripe el A P I también. Y luego vamos a seguir adelante inicializando esto Así que vamos a decir elementos lejanos iguales y luego vamos a crear tarjeta on. Una vez fui elementos go crean a Dios. Y luego finalmente, sólo vamos a montar eso en nuestro elemento de tarjeta. Yo d Está bien, cosas preciosas. Entonces, para recapitular, creamos un poco de forma con este elemento marcador de posición. Hemos inicializado un FBI rayado llamado los Elementos a p I on con gran elemento de descarte. Y ahora, si refrescas la página de Lucky, tenemos estos bonitos elementos de raya pre construidos en un botón grande de envío de pago. Todavía no hace nada, así que vamos a cablear eso. 18. Validar la entrada: lo siguiente que queremos hacer es manejar los errores. Entonces si algo anda mal aquí, queremos poder mostrárselo al usuario. Entonces vámonos. Y en ese ahora festival, eso es agregar otro elemento de positor. Errores de tarjeta Collis. Y luego vamos a cablear esto. Por lo tanto, toma nuestro elemento de tarjeta agregará un monitor de oyente de eventos para el cambio. Entonces dentro de aquí, obtendremos nuestros objetos de errores de tarjeta. Y si hay un evento de error, configura el contenido de esto para mostrar el siempre y si no, vamos a asegurarnos de borrar cualquier error porque, por ejemplo, podrían haber sido un error y luego el usuario lo está arreglando, por lo que no queremos seguir exhibiendo la época. Genial. Por lo que ahora siempre que haya un cambio que echará un vistazo a esos estrechos y de ser así, poblará esta pequeña caja para exhibir el árabe a continuación. Ahora pasemos a realmente conseguir este pago 19. Crear un token: ha discutido la forma en que tomamos el pago con raya es pedimos a la raya a p i un token y exaltado en el lado del cliente para que la información de la tarjeta de crédito nunca tenga que tocar nuestro servidor. Y así no necesitamos ser PC I conformes. Adelante. ¿ Y por qué esto arriba ahora? Por lo que seleccionamos nuestro elemento de forma. Llamamos a forma de pago arriba en la parte superior. Vamos a añadir un oyente de eventos aquí en este es para su presentación. Por lo que esto se llamaría cuando el usuario golpee que envíe el pago, impida la acción predeterminada, y luego vamos a llamar a la franja ap I Así vamos a llamar, crear token, pasarlo el objeto de tarjeta cuando lo primero que 'll do es comprobar si hay un error. Si lo hay, reutilizaremos nuestros errores de tarjeta a través de una amplia. Esto ahora es si recibimos el mensaje de error, lo va a meter en sus asume. El usuario comienza a escribirlo y editarlo. Entonces se puede deshacer de él, que es el código que hicimos anteriormente. Pero si no, entonces estamos todos bien en. Eso significa que tenemos token. Y así queremos manejar ese gay se ve bien a Lo último que necesitamos aquí es escribir esta función que manejará el token. ¿ Deberíamos recibir uno exitoso para hacer eso en la toma? Al crear elemento, vas a ser un mercado de entrada de tipo como nombre oculto dado off token. Pásalo el token que d y lo vamos a levantar. Forma de Teoh. Y luego finalmente, nunca enviamos formulario. Entonces lo estamos haciendo aquí. ¿ Es que recuperamos este token como resultado dentro de crear entrada oculta en este formulario aquí que agregamos nuestro token inter para que se enviara a través cuando el formulario se publique en DWI. Después publica el formulario en ahora hazte mandar al back end y en la siguiente lección, vamos a procesar lo que sucede en el back end. 20. Prueba de nuestro token: Hemos cableado nuestro código para pedir una ficha a huelga. Pero, ¿ha funcionado? Bueno, vamos a averiguarlo. Así que refresca la página. Si aún no lo has hecho, sólo para asegurarte de que tienes la menos puesta. Después abre tu consola de desarrollador. Voy a ir al grifo de la red. Ahora va a enviar el formulario si tiene éxito, y no queremos que haga eso. Entonces volvamos a preservar inicio de sesión para que podamos ver las solicitudes anteriores en. Vamos a seguir adelante y tomar algunos detalles de la tarjeta de prueba en. Póngalos en, maquillarse eso y él está. Podría, sé que son nueve y salieron y sigamos adelante y despejemos eso hacia abajo y luego presentemos el pago. Genial. Por lo que sí publicó con éxito al check out local. A ver si podemos encontrar eso Ahí vamos. Ahí está nuestra solicitud sobre y en los datos del formulario. Envió nuestro token, y ahora podemos usar este token para hacer un pago en el back end. Así que vamos a hacer eso 21. Procesa de pagos con tokens: Ahora que tenemos nuestro token, usémoslo para tomar un pago. Entonces vamos a entrar en un check out local y aquí vamos a comprobar si la solicitud es un post. Entonces es Method post, y si es así, entonces sabremos que estamos tratando de tramitar el pago. Entonces empecemos por arrancar Ah, huelga propiedad. Vamos a meter eso ahí dentro. Y también queremos conseguir el token después de nuestra búsqueda. Hecho, hagámoslo primero. De acuerdo, Anexar necesitará es una canasta encendida y podríamos saltarnos a través de ella para calcular el precio. Pero lo que va a ser más fácil es si usamos esta canasta útil. Yo he creado Así que a listers es pasamos en nuestra variable de sesión y nos da algo de salud, un método como conseguir el precio total conseguir en el precio crudo el cual recuerdan necesitamos veces todo por 100. Porque si el precio de 9 99 necesitamos enviar 999 a raya, y también se condensará hacia abajo la lista de libros en una sola cuerda. Por lo que nos damos una buena descripción también. Entonces volvemos a dar vuelta al check out local Estamos pasando los datos de la sesión en que nos van a dar esta ayuda de esfuerzos, y luego vamos a crear un cargo. Entonces, antes de que hagamos eso, ordenemos esto. Tan solo asegúrate de que estamos importando eso, y luego volveremos. Yo estoy bien. Este cargo. Entonces vamos a llamar a la clase de cargos, que ya trajimos. Aparecer en vamos a decir, crear y pasarlo en objeto. Genial. Está bien. Y luego poblar esto. Por lo que por la cantidad, se llamó. Bonito. Consigue arroz crudo. Ayudando al esfuerzo. Pedidos de divisa. Corte duro. 2 libras por ahora. Descripción otra vez. ¿ A eso le llamas agradable? Ayúdalo. Esfuerzo, Andi. Por último, vamos a usar nuestro token, que tenemos que pasarnos. Fuente. Llamaremos a token gank de perder. Entonces vamos Una vez que esto haya sido exitoso, despejemos la canasta. Porque una vez que usan el balón, probablemente los libros no quieran volver a comprarlos. Y luego redireccionaremos a la misma página de éxito a la que enviamos al usuario en check out. De acuerdo, eso me queda bien. Continuemos en la siguiente lección. 22. Dirigir el viaje: Ahora hemos cableado nuestro check out para que use token para cargar raya. Adelante y verifiquemos que funcione. Entonces empecemos agregando alguna canasta de librería que se lleva a Cannery Row en 1984 Onda, cambie estos botones de chaqueta por lo que ahora va a una nueva página de check out local. Pero también podrías simplemente teclear el pozo en. Adelante en bomba estos detalles de tarjeta de pruebas en hit enviar pago y tenemos la página de éxito. Genial, eso va a rayar también y chequear los pagos Ven aquí en adelante vamos 1984 y Cannery Row. El pago tiene proceso de frijol con éxito. Por lo que si estás siguiendo las felicitaciones, ahora has integrado con éxito los pagos de huelga en tu sitio web local. 23. Autenticación de clientes (SCA): en este módulo. Vamos a ver los pagos de S EA. ¿ Qué son exactamente? Es un buen lugar para empezar, que significa autenticación segura del cliente y su iniciativa de la Unión Europea para tratar de reducir el fraude. Por lo que se introduce en 2019 y poco a poco se está desplegando. Ahora, como con la mayoría de las cosas en la banca, tardan mucho tiempo en entrar y autenticación de varios factores. Por lo que podría haber visto a Freey segura donde cuando vas por un check out, te redirigen a tu banco para insertar un poco de contraseña o cada vez más ahora, sobre todo con S E A, obtienes un código especial enviado por mensaje de texto para usarlo en tu móvil, y hay que entrar eso en la página web. Por lo que fuiste a todos los detalles de tu tarjeta. Intenta tramitar el pago. Tu banco landsend es que atacas diciendo asegúrate de que este eres tú y tienes que entrar eso en la página web antes de poder completar la transacción. Ahora bien, si no implementas pagos S e A de lo que le toca al banco, ya sea que acepten o declinen a Andi con el tiempo, van a empezar a declinar cada vez más. Entonces en este momento es bastante relajado algunos pagos que puedes conseguir sin esto. Pero a medida que pasa el tiempo, lo probable sí declinó cada vez más transacciones. Esto no es un problema para Norteamérica por el momento. Es específicamente para Europa, pero eso incluye a todos los países de los objetos Ain en la Unión Europea. En DSO, si crees que tendrás clientes en Europa de lo que vale, implementando esto y es totalmente compatible al revés con todos los demás también. Entonces es mejor hacerlo de esta manera, entonces, es hacerlo de la manera más sencilla, en mi opinión, porque no hay mucha complejidad añadida para hacer esto. Si veo un rollitos hasta Norteamérica y en otros lugares del mundo, entonces estarás a prueba de futuro, así que veamos cómo hacerlo. 24. Crear una página de pago de SCA: Sigamos adelante y transformemos nuestra implementación básica en algo Eso es s e un listo . Entonces tenemos nuestro control local aquí. Sigamos adelante y creemos una copia de esto. Lo llamaremos S C H. Cuento controlador en qué cambia enfermo para ver un check out también. Y eso fue Pídele que renderizar de nuevo este archivo de chequeo SCH. Tomaremos su cheque local, Michael. Basta con hacer una copia de la misma. Se llama S E A. Di eso ahí. Y luego en nuestras cestas. Ahí está. Vamos a cambiar que los grandes que están trabajando todavía cableados como una integración básica, por supuesto. Pero ahora sigamos adelante y lo transformemos en una aplicación desagradable a conforme. 25. PaymentIntent API: Abramos. Ah, SC A check out Controller Andi, cuando ya no se va a utilizar, El cargo ap I en su lugar, vamos a utilizar el pago en 10 AP. Yo sigo con intención de pago con hacer todo por adelantado. Entonces vamos a necesitar reorganizar las cosas. En primer lugar, yendo en la canasta por aquí en adelante, vamos a necesitar poner la correa. A p yo también en ignoraré este libro por ahora. Y aquí abajo, lo que vamos a hacer es crear una intención de pago. Sí, y vamos a usar mucho lo mismo ayuda esfuerzos. Entonces decimos, canasta, canasta, consigue que Royal Price vuelva a enviar la moneda. Vamos a poner la descripción aquí abajo. Esto va a dar órdenes Cualquier ficha. Se llama cliente Secreto. Entonces ya delineamos cuál es el pago, y hemos enviado a huelga aquí, y luego vamos a renderizar eso al script de trabajo, lo que significa que cuando el usuario realmente envía el formulario, entonces todo el trabajo ha sido hecho y se tramitaron los pagos para que podamos deshacernos de este cargo. Y en cambio, si es una publicación, solo podemos despejar la canasta sobre redirigir al usuario a esta página de chaleco de inmediato, que así se vea todo lo que necesitamos hacer aquí. Ahora se va al front end en modificar el JavaScript. 26. Uso de la API PaymentIntent API: en esta lección modificará el código frontal y JavaScript para ser S e una queja. Por lo que está abierto nuestra página de check out SCH, y la mayor parte de esto va a seguir siendo igual. Sólo un par de cosas vamos a cambiar. Por lo que ya no necesitamos esta función de token de mango, y ya no vamos a usar el token de creación. En cambio, vamos a usar algo llamado confirmar pago con tarjeta. Y el primer argumento que vamos a pasar es ese token que obtuvimos cuando creamos la intención de pago y vamos a pasarle algunas opciones también vamos a decir método de pago, vamos a pasarle tarjeta. Esto se refiere a este objeto de tarjeta aquí en entonces todo lo que tenemos que hacer es manejar el resultado. Entonces volveremos a tomar el evento. No dirá si eso sería resultado. Tiene más sentido. Andi, Si es un éxito, necesitamos hacer un poco de intención de pago de seguimiento extra porque puede tomar un tiempo. Entonces de nuevo, vamos a enviar un formulario si recuerdas todo lo que hacemos cuando entregamos el formulario es despejado por la canasta y redireccionamos a esta página excedente porque creamos aquí un token con raya para lo que queremos cobrar. Y luego en el front-end, el usuario ingresa los detalles de su tarjeta, y eso va de la mano con el token que hemos creado para decir qué pago queremos en los pedidos fuera de las rayas tienen al mismo tiempo. Entonces ojalá eso sea todo lo que necesitamos hacer. No vayamos a probarlo. 27. Dirigir el viaje: hemos reescrito. Tengo check out a B S E a conforme usando pago de rayas en 10 FBI. Entonces ahora vamos a asegurarnos de que todo funcione. Entonces, empecemos revisando solo una tarjeta regular y asegurándonos de que no hemos roto nada. Consiguió reservar una canasta ir gratis para hacer el check out solo tomará la misma tarjeta de prueba que hemos estado usando. OK, perfecto. Fui por ti. Repasemos el proceso de nuevo. Por lo que agregaremos algunos libros más a la canasta y volveremos a revisar. Y si vamos a esta raya páginas marcadas debilitan, ver más abajo. Tenemos estas tarjetas que representan cosas con las que disputamos, ¿ Ves? A Así que en este caso va a pedir verificación. Entonces veremos lo que eso significa otra vez. Basta con llenar la tarjeta. Um uh, algún pago esta vez. El banco ha pedido a los usados que lo verifiquen, Así que esto podría estar pidiéndoles que inserten contraseña. Podría enviar un código de pase de una sola vez a ese teléfono encendido. Tendrían que entrar que todo eso se maneja por raya aquí. Entonces en lugar de solo una gran vindicación completa fuera, pero y podría ser sólo eso pero podría ser algo más complicado, pero el usuario haría eso por sí mismo y luego simplemente completaría la autenticación en banco. Ahí también tenemos éxito. Tan genial. Ahora, cualquier momento que el banco quiera autorización adicional quiere este S e una autenticación segura del cliente manejará eso también. Perfecto. 28. Boletín digital: en este módulo. Vamos a integrar carteras digitales en la aplicación. Pero si no tienes claro qué carteras digitales son, son cosas como Apple pay Google pagamos chamos una visa, echa un vistazo master pase este tipo de formas virtuales de pagar que acaba de suceder en el navegador o en tu dispositivo móvil. Entonces no estamos hablando de transacciones del mundo real aquí, pero estamos hablando sin tarjeta física. Entonces, por ejemplo, Apple paga. Se puede acceder a sitios web. Apenas golpea esa paga con Apple Babe encendido y en un escritorio, te pones un poco pop como lo que estamos viendo en este Mac y en un dispositivo móvil, te pondrías un poco pop arriba como en a la derecha. Y es lo mismo con Google pay y muchas de estas carteras digitales. El modo en que la raya hace esto es que nos da un botón unificado, por lo que insertamos este botón en nuestro proceso de check out, y cuando usó hits que obtendrán el pequeño pop up relevante. Entonces si están en safari que obtienen apple, pagan su en chrome, obtienen Google pay. Sea cual sea el soporte de su dispositivo, aparecerá esa pequeña ventana. Entonces veamos cómo integrarlo 29. Crear un controlador de cartera digtal: Empecemos por crear un controlador para nuestra cartera digital, por lo que comenzaremos con nuestro controlador CH check out que hará una buena base. Eso es copiar y pegar que guarden , pidió. ¿ Su controlador de billetera en la gripe? Para esto es más o menos lo mismo que un S e un pago usando pago a turno, AP I. Así que solo hay un par de retoques que necesitamos hacer, y eso es para mandar algunos de la descripción fruta. Porque en lugar de enviar la información a ese procesador de pagos para ese extracto de tarjeta de crédito , también necesitamos decirles lo que está sucediendo cuando reciben la notificación en su teléfono o dispositivo para decir eso haciendo un pago. Entonces eso está en estas variables hasta el front end. Usaremos nuestro ayudante de canastas. Enviaré una descripción a través. Te enviaremos el precio tell también, y ese es el único cambio que necesitamos hacer al controlador. A continuación, podemos ir al front end en make son cambios. Ahí 30. Montaje de un botón de petición de pago: Ahora que tenemos nuestro controlador de billetera digital, podemos seguir adelante y hacer los cambios de front end. Entonces tomemos a la CIA. Consulta plantilla en Sólo salva los ojos. Billetera digital Plantilla on y vamos a llegar a nuestro controlador en. Cambiado a ti. Date de alta El monedero digital sobre eso ha cambiado. Eres el bien de Ella, y luego finalmente en la canasta. Vamos a cambiarlo a una billetera digital y luego podemos empezar a hacer cambios aquí, y aquí hay bastantes cambios. Entonces en lugar de tener un cardinal en nuestro botón, que va a poner este botón de solicitud de pago en, no necesitamos ese CSS Eva Stunning. Los errores de tarjeta aún necesitan traer raya, pero hay muchos cambios para quedarse aquí, así que lo primero que vamos a hacer es crear una solicitud de pago y el país aquí que quieres pasar en el código de país de dos dígitos hielo eso. Tiene que ser en mayúsculas o amar el tiempo como moneda. Nosotros bisagras, más en minúsculas, pero tenemos este código de país. Se necesita pasar en capitales y para la etiqueta Territo, vamos a usar esa propiedad descriptiva que la comida rápida y también vamos a presionar la cantidad a través de precio superior. Nosotros lo llamamos y nosotros Andi, vamos a solicitar alguna información a la A P I también. Entonces si queremos utilizar su nombre y correo electrónico se ha registrado en el dispositivo, podemos. Y una vez que hayamos creado ah objeto de solicitud de pago, entonces necesitamos traer elementos rayados que tenemos un par no hemos esperado, y luego queremos crear botón de solicitud de pago por lo que haremos elemento crear Ellos duran para la solicitud de pago y la solicitud de pago será ese objeto de solicitud de pago que acabamos de crear a continuación. Queremos comprobar si funciona. Por lo que muchos navegadores y dispositivos simplemente no tendrán una billetera digital configurada. Y hay un A p I para eso para que podamos llamar, podemos hacer pago cajeros de misiles Wever esté disponible o no. Entonces podemos decir si es cierto, entonces vamos a montar ese Putin. Entonces este es el elemento vacío que obtenemos un par de pago a través de Putin estaban diciendo si el usuario tiene ese soporte en sus arcos de o dispositivo, entonces muéstralo y si no. Démosles un mensaje que diga Lo siento ahora en un sistema completo. Lo que hacemos aquí es volver a un cheque regular aquí. Entonces si pueden cargar el botón de solicitud de pago, le mostraríamos que si no, entonces simplemente les damos un estilo de forma tradicional. Pero para fines de depurar aquí, quiero que veamos cuando no está funcionando. De ahí por qué estamos incluyendo el lamentable mensaje. Pero normalmente podrías simplemente darles un cheque de la vieja escuela con una entrada de tarjeta aquí. Eso son papas fritas. Deshazte de este código que no necesitamos. Por lo que hasta ahora hemos montado la bala, se les da un mensaje. Si no, vamos a la siguiente lección. Echemos un vistazo a cómo realmente hacemos este pago. 31. Procesa los pagos con el botón: montamos nuestro pago nacido en la u I. Pero ahora necesitamos manejar en realidad Él es un click en él y haciendo un pago. Entonces hagámoslo ahora. Empezaremos agregando un oyente que esté escuchando el método de pago. Bueno, bien, bien, vuelve a llamar para que se encargue de eso. Va a llamar al pago con tarjeta confirmada, y necesitamos pasar un bono tus opciones en esto. Entonces, en primer lugar, vamos a pasar ese secreto de cliente que generamos desde el controlador en el back end para que el usuario no pueda meterse con nada. Entonces vamos a establecer el método de pago basado en el objeto en el que nos pusimos. Por último, vamos a establecer esta opción call handle actions es igual a false on. El motivo por el que lo estamos poniendo en falso es que vamos a escribir nuestro propio código para manejar lo que está pasando aquí. Entonces no queremos que el código de huelga predeterminado haga nada porque vamos a escribir el código ahora mismo. Este es el código que no necesitamos nunca volver a llamar. Vamos a tomar este resultado confirmado el cual se recuperará de llamar a esto Si hay una era , entonces cuando una marca esta solicitud de pago como completa, pero una falla y que le dirá al navegador Teoh, llévalos de vuelta al pantalla de pago porque el pago ha fallado y si no marca como un éxito, y eso le dirá al navegador que proceda porque todo ha salido bien. Y luego si es un éxito, entonces en ese punto necesitamos volver a llamar al pago con tarjeta confirmada, porque a estas alturas vamos a dejar que Stripe realmente se lleve el dinero en este tiempo, cuando tenemos que hacer es volver a pasar ese secreto cliente, y luego simplemente se convierte como un pago regular. Entonces digamos si hay una época, vamos a obtener los errores de tarjeta, que es el mismo que hemos estado usando todo este tiempo huella en el mensaje, y si no, entonces vamos a enviar el formulario. Entonces repasemos eso. Entonces en este punto, si el pago de confianza solicitado, estamos llamando a esto con el Así que estamos llamando a la raya un P I con este pago confirmado con tarjeta , y esto es como, por ejemplo, en tu teléfono, aparece la ventanita diciendo: ¿Quieres hacer un pago en ese trabajo de palanca o no lo hará si no funciona inicialmente. Entonces, por ejemplo, los pagos fallaron en el dispositivo y así el usuario podría volver a intentarlo. Necesita probar una tarjeta diferente o necesita llenar algo, en cuyo caso le dirá al dispositivo que falló en esa etapa. Si es así, podemos comercializar está completo y ocultar el pequeño pop up en el dispositivo. Pero sólo porque hayamos hecho eso no significa que hayamos tomado realmente el pago. Después necesitamos contactar al paro Baby. De nuevo a decir que el dispositivo ha aceptado este pago, y así ahora queremos intentar cobrarlos. Podría entonces ir al banco y podrían rechazarlo, en cuyo caso pondrá arriba el mensaje de error. Pero si no, entonces todo debería estar bien. Entonces esa es la teoría detrás de ella. A ver si funciona. Carguemos un sitio web sonaba libro. Consigue una canasta y tráela. Check out en. No tenemos nada. Entonces, depuremos esto en la siguiente lección. 32. Servir en HTTPS: ejecutamos nuestro código de script de trabajo para nuestra billetera digital. No funcionó inicialmente porque guardé el archivo. Pero ahora la mitad. Y si te estás siguiendo, deberías que te diga este mensaje, lo siento. Tu navegador no admite carteras digitales. Ahora depende en qué navegador y dispositivo estés. Pero estoy en cromo aquí mismo. Y así debería. Entonces, ¿qué está pasando aquí? Bueno, el problema es que las carteras digitales solo funcionan sobre el odio T t p s que no estamos corriendo aquí, que está ejecutando http regular. Por suerte, sinfonía tiene un proyecto de ley en solución para esto, Y podríamos simplemente ir un servidor sinfónico, ver una instalación, y esto instalará un certificado local para nosotros para que podamos tener vigente, ojalá sea s sobre el anfitrión local. Si no estás corriendo en la sinfonía, inicia puedes usar algo llamado M K, señor, que hará algo parecido. Pero es un poco más doloroso configurar. Por lo que ojalá estés siguiendo junto con la pila de sinfonía. Y entonces todo lo que necesitamos hacer es si reiniciamos nuestro servidor. Si lo refrescamos demandado, redireccionar es automáticamente. Sí. Entonces tienes el candado te vamos a golpear para que te pregunten en el botón ha parecido perfecto. Por lo que ahora tenemos nuestro botón de pago. Vamos a probarlo en la siguiente lección. 33. Prueba de tu cartera digital en Chrome: Ahora que tenemos nuestro botón funcionando, vamos a darle una prueba. Y la forma más fácil de hacer eso es en cromo. Si sólo vamos a las preferencias en vamos a venir aquí abajo a métodos de pago y widgets pueden agregar uno nuevo. Andi, vamos a quitarnos algunas de las tarjetas de prueba de rayas otra vez. Tomemos este golpe de guardia debe. Ahorra ahora de nuevo en. Check out page. Tenemos que pagar. Ahora obtenemos el pago de Google, podemos elegir esta tarjeta de prueba que acabamos de crear. Entonces aquí podemos ver tenemos un libro, precio de color azul. Y tenemos ah, método de pago. Eso es todo. Pay puede golpear cualquier CVC aquí en. ¿ Confirmará? Está bien, genial. Tenemos nuestra página más difícil de éxito. Parece haber pagado a través de Google pay. Vayamos a raya Tablero de polvo Refresher. Sí. Ahí vamos. Tenemos sobre ti pago Mefford. Se está tomando automáticamente nuestra dirección de correo electrónico. Tiene la descripción. El precio está bien también. Entonces si integraron exitosamente las carteras digitales en el arte, echa un vistazo a proceso 34. pasos adicionales para Apple Pay: Bueno, lo hemos hecho hasta ahora. Nos da una billetera digital para una variedad fuera de diferentes. Por lo que Microsoft paga Google pay Master pase el único No funciona para su Apple Bay porque a Apple le gusta ser difícil. Entonces para que funcione el pago de manzana, necesitamos hacer todo lo que hemos hecho hasta ahora. Pero también hay alguna configuración adicional. Y esto sucede en nuestros paneles de rayas que vamos a bajar, golpear dos ajustes, vamos a conseguir métodos de pago. Y oye, tenemos el pago de manzana. Voy a ir a esta configuracion, y tenemos apple pay. Necesitamos enumerar en blanco todos los dominios que estaban usando. Por lo que vamos a aparecer al dominio on pondrá vivo o un dominio de prueba aquí. Y tenemos que hacer esto para cada uno de los dominios que queremos utilizar. Lo siguiente que tenemos que hacer es conseguir este archivo de verificación. Por lo que esto es que solo tienes que hacer clic aquí y las descargas de archivos sobre esto deben estar disponibles en la página web en esta ubicación. Por lo que solo tienes que descargar el archivo y pegarlo en tu directorio público. Entonces vamos a hacer eso ahora. Necesita estar en este punto Bien conocido a veces buscador o gestor de archivos, dondequiera que el sistema de frenado uso eran divertidos acerca de un punto tejedor directo en. Entonces si consigues ese problema, podemos Fácilmente, ir de Egipto a la línea de comando on entrará en el directorio público, y lo haremos nuestro hecho eléctrico bien conocido ya hecho eso en este caso. Entonces si no hubiéramos hecho eso, sólo dáselo a eso. Y entonces sólo queremos hacer directo, también. Bueno, de vez en cuando tenemos archivo de desarrollador de Apple. A menos que los chorros muevan eso al directorio, iba a allá y comprobarlo. Está ahí. Está bien, genial. Sí. Y eso es sólo arreglar ese problema también. Está bien, genial. Entonces los archivos ahí, está en nuestro directorio público. Tenemos que hacer eso para cada uno de los dominios se estaban poniendo aquí en los de los pasos adicionales que debes hacer para que el apple pay funcione 35. Crear un club de libros: en este módulo. Vamos a crear un club de libros que la gente pueda suscribirse para hacer pagos recurrentes a Andi Para empezar, Vamos a crear chips esqueleto rápido. Entonces tomemos nuestro S e un controlador porque esto es lo más cercano Teoh lo que necesitamos dar dio. Vamos a renombrarlo a algún controlador de prescripción. No vamos a necesitar la canasta para poder deshacernos de la sesión ahí en y ha cambiado este año. Al a suscripción. Bueno, viniendo. Esto podría apagarse por ahora. Y luego renderizaremos una página que se acaba de llamar suscripción. Ponernos a conocer por ahora. Está bien, se ve bien. Ahora vamos a crear una plantilla básica. No lo es. Está abierto si veo un check out mas copia y pega esto en una suscripción perpetua en Vamos a cambiar esto por decir pero suscripción club y nos desharemos de toda esta tarjeta por el momento. Y eso es simplemente una pequeña forma genial que permite al usuario ingresar algunos detalles. Entonces pregunten su nombre. Bueno, eso es para esa dirección de correo electrónico. El hombre es un correo electrónico tipo, por lo que hace la impresión de empate en móvil. Llámalo también por correo electrónico. Ah, fuera Variable oculta. ¿ Decir qué está pasando? Por lo que crear cliente en Finalmente un botón grande dice, Únete al club. Está bien, genial. Comprobemos qué se está renderizando. Está bien. Y la respuesta es No. Tengo el nombre de la plantilla Incorrecto. De acuerdo, vamos a solucionar esto en la siguiente lección. 36. SetupIntent API: así que parece que cometí un pequeño error ortográfico aquí. Desde que corregimos eso, ahora tenemos una forma encantadora. Entonces vamos a manejar lo que pasó. Cuando el usuario envíe, eso es lo que vamos a entrar a nuestro controlador de suscripción en lo que no haría es crear un método para manejar la creación de un cliente. Ahí vamos. Entonces la forma en que esto va a funcionar es que vamos a decirle a raya que cree objeto personalizado. Tenemos los datos que tenemos y luego vamos a tomar el método de pago que estamos fuera subiendo y vamos a adjuntarlo a ese cliente para que podamos construir ese cliente cada vez que necesitemos dedo del pie y aquí, conectar tira A p I k. Estoy diciendo costumbre en crear sobre persona los valores. Entonces estamos aquí, Vamos a cambiar. Entonces vamos a usar el cliente en. Vamos a usar la intención de configurar raya. Habla de esto en un minuto. Entonces aquí hemos creado un objeto de cliente, y en este punto, podemos crear un Nintendo. Ahora podríamos crear una intención de pago aquí, y eso nos permitiría construir un cliente de inmediato y marcarlo como cliente por facturación recurrente. Pero en los casos en que no queremos construirlos de inmediato. Queremos construirlas cuando empiece su suscripción. Podemos usar la puesta en marcha en 10 en su lugar, que es muy similar al FBI. Pero significa que no necesitamos construirlas ahora mismo. Vamos a llevar aquí el objeto cliente Wicket. Nos vamos a llevar el I d. vamos a decir, adjuntar este pago en término que estamos inventando su turno en este caso a este cliente . Nosotros hemos dicho que es tarjeta. De acuerdo, cosas preciosas. Y entonces esperemos que lo deletreemos correctamente esta vez casi en esta ocasión, sí tenemos un secreto de cliente porque acabamos de crear esa intención. Ahora todo lo que necesitamos hacer es en realidad llamar a esta función. Entonces subamos hasta aquí. Está cortada de nuevo. Ya no necesitamos esta intención. Cuando el suspiro Si obtenemos acción. Ah, tipo, crea cliente. Entonces vamos a regresar. Pasar una solicitud a través. Ahora va a pasar. Es cuando el usuario envíe el formulario le pegará esto. Obtendrá a este gran cliente y renderizará la plantilla con este cliente secreto sin lotes yendo. Modificar la plantilla para manejar eso 37. Confirmar la configuración de la tarjeta: hemos hecho nuestros cambios de back end. Entonces modifiquemos el front end para manejar este tipo de paso dos. Pero eso es una lógica en decir, si tenemos un secreto cliente. Sí, y si no, entonces renderemos Paso uno del viaje. Y aquí en su mayoría queremos poner un check out clásico. Entonces empecemos por solo sacar a esta chica del cheque de ensayo y luego modificaremos como y lo hizo. Entonces pones un extra que muy nacido aquí solo para dejar claro lo que está pasando. Dios, presentar tarjeta de pago. Erica está bien. Todavía hay que llamar a la raya. El FBI estableció nuestros errores de manejo de código, pero entonces tendremos que modificar esta apuesta. Entonces en lugar de este pago confirmado con tarjeta, necesitamos hacer algo un poco diferente. Entonces vamos a llamar a esa tarjeta confirmada configurada Mefford. Vamos a pasar los secretos de la planta que la mayoría del código todavía va a parecer muy similar. Y entonces eso es manejar el resultado de esta configuración de tarjeta. Entonces de nuevo, probablemente solo copie y pegue esto aquí. Deshazte de esto. Entonces si obtenemos un resultado, pregúntale a Burt antes de que vamos a poner el resultado en esta tarjeta La caja de flechas en cambiará. Esto llevaba un poco también. Por lo que diremos buscando un arreglo en respuesta Satis queremos tomar que tuvo éxito. Si es así, no estamos entregando el formulario. Continuemos con esto en la siguiente lección. 38. Dirigir el viaje: cuando el cambio final que necesitamos hacer es una vez que los usuarios envíen el pago, necesitamos hacer algo en el back end en este caso se redirigirá a este exceso de cheques de página . Acción otra vez. Podría haber hecho eso con más gracia en un interruptor. Pero bueno en dirán, Si eso sucedió, entonces haz el viejo redireccionamiento. Genial. Entonces vamos a probar lo que pasa. Ese es el punto. Algunos detalles del cliente golpearon, se unieron. Da la vuelta y genial. Ahora tenemos un pago con tarjeta. Eso es copiar y pegar en la tarea son detalles hit, enviar pago y tenemos la página de éxito. Está bien, eso se ve bien. Ahora vamos a ir a nuestro tablero de rayas en Lo que deberíamos tener es un cliente. Está bien, genial. Y entra y tienen una tarjeta anexada a su cuenta. Entonces es genial. Por lo que ahora podemos entrar y agregar un pago a través del panel de control aquí y del FBI o podríamos tenerlos en un plan de suscripción también. Entonces si queremos Teoh recurrente factura ellos. No obstante, queremos hacer eso, ahora los conseguimos como cliente configurado con una tarjeta que podemos cobrar en cualquier momento 39. Reflexiones finales: bien hecho en llegar al final de esta clase. Esperemos que hayas estado siguiendo a lo largo siempre construido una inserción de franjas los detalles del enlace o el código de muestra en el proyecto. Sección sobre Deja que todos vean lo que has hecho. Nos vemos pronto.