‫Instructeur : Dans cette conférence,
‫nous allons apprendre à traiter les paiements avec
‫Stripe, sur le front-end chaque fois qu'un utilisateur clique sur un bouton.
‫Et pour commencer, configurons-le en fait ce bouton
‫afin qu'il n'apparaisse que lorsqu'un utilisateur est
‫réellement connecté.
‫Donc, ici, sur la page
‫de détail de la visite, nous avons
‫actuellement un utilisateur connecté, et donc ce bouton dit réserver la visite
‫maintenant, mais cela ne devrait être
‫comme ça que lorsqu'il y a un
‫utilisateur actuellement
‫connecté, et sinon, il nous redirigerait alors à la page de connexion.
‫D'accord?
‫Implémentons donc cela dans le modèle de visite.
‫Et c'est en fait juste ici,
‫c'est donc ce bouton.
‫Bien?
‫Maintenant, s'il y a actuellement un utilisateur
‫connecté, cela signifie que nous avons accès à la
‫variable utilisateur, et donc nous pouvons faire si l'utilisateur est bien que cela.
‫Et s'il n'y a pas d'utilisateur, alors sinon, eh bien,
‫nous voulons simplement afficher un bouton, qui nous amène
‫à la page de connexion.
‫Et donc, connectez-vous pour réserver la
‫visite, et celle-ci devrait en fait être un
‫lien, et nous avons
‫donc besoin d'un élément A pour l'ancre.
‫Précisons ensuite également la propriété hf, qui à nouveau nous
‫dirigera vers la page de connexion,
‫d'accord ?
‫Maintenant, ici, nous devons également ajouter un identifiant, réserver une
‫visite afin que nous puissions ensuite la sélectionner dans notre JavaScript, et aussi quelque
‫chose de très important,
‫est-ce que nous devrions mettre l'identifiant de la tournée
‫actuelle ici dans cet élément, d'accord ?
‫Maintenant, pourquoi est-ce si important ?
‫Rappelez-vous bien comment le point de terminaison de l'API que nous venons de créer.
‫Donc celui-ci ici a besoin de l'identifiant de la tournée,
‫et donc cet identifiant de tournée doit provenir de quelque part essentiellement, et donc
‫pour le moment nous n'avons cette information nulle
‫part sur cette page, et donc
‫nous la mettrons ici directement sur cet élément, donc qu'alors
‫ou le fichier JavaScript peut le récupérer à partir d'ici
‫et l'envoyer avec la
‫demande à l'itinéraire de la session de paiement, d'accord ?
‫Donc, tout comme nous l'avons fait ici avec une carte,
‫nous allons utiliser un attribut de données, et c'est
‫donc data-, puis en
‫gros, quel que soit le nom de variable que
‫nous voulons définir.
‫Et c'est donc l'identifiant de tournée dans ce cas.
‫Donc tournée. id, d'accord?
‫Alors donnez
‫au coffre-fort, et essayons cela maintenant.
‫Alors rechargez la page, et
‫tout d'abord examinons-la
‫pour voir si l'idée est réellement là,
‫et en effet c'est parti.
‫Et maintenant si nous nous déconnectons.
‫Voyons ensuite ce que nous avons, et
‫en effet maintenant il est dit,
‫connectez-vous pour réserver la visite.
‫Super, et faisons-le en fait.
‫Maintenant, d'accord ?
‫Et donc maintenant, créons un script dans lequel
‫nous allons réellement faire la demande
‫et traiter le paiement sur le front-end.
‫Et donc, comme avant, ce sera en public, puis
‫en JavaScript.
‫Donc un autre script ici.
‫Et je vais l'appeler rayure. js.
‫Et maintenant, ici, nous avons
‫à nouveau besoin d'accéder à la bibliothèque Stripe, mais
‫à ce package que nous venons d'installer auparavant,
‫alors souvenez-vous du package Stripe MPM que nous avons utilisé ici.
‫Donc celui-ci ne fonctionne que pour le back-end, et ce
‫que nous devons faire sur le
‫front-end est d'inclure en fait un script dans le HTML, et puisque nous n'avons
‫besoin que de ce script ici sur la page de visite, nous
‫le ferons comme nous fait avec le script de zone de carte.
‫Alors celui-ci, nous
‫le mettrons ici dans ce bloc de tête,
‫d'accord ?
‫De quel script avons-nous réellement besoin ?
‫Eh bien, nous pouvons très simplement obtenir de la documentation
‫que nous avons déjà consultée auparavant,
‫et j'espère que vous n'avez pas fermé celle-ci, d'accord?
‫Et encore une fois, celui-ci explique comment nous utilisons le
‫produit de paiement à la fois sur le
‫client et sur le serveur.
‫Nous voyons donc ici que nous avons deux
‫étapes, d'abord la création de la session de paiement sur le
‫serveur, et cela est
‫donc très similaire à ce que nous avons fait
‫auparavant dans la dernière vidéo, et nous devons donc maintenant l'ajouter à notre front-end.
‫Et donc ce script dont nous avons besoin est celui-ci, d'accord ?
‫Alors copions cela et revenons en arrière.
‫Et maintenant, nous devons adapter un peu cela.
‫Maintenant, n'est-ce pas ?
‫Il s'agissait donc d'exposer un objet stripe à la portée globale, et
‫maintenant, dans ce fichier, nous pouvons l'utiliser.
‫Donc nous
‫disons const stripe =, et
‫puis c'est cet objet que nous
‫obtenons du script que nous venons d'inclure, et
‫puis ici nous avons besoin de notre clé publique, d'accord ?
‫Nous avons donc déjà utilisé notre clé secrète sur
‫le backend, il est maintenant temps d'utiliser notre clé publique.
‫Revenons donc au tableau de bord, et
‫en fait, si vous êtes dans la
‫documentation, cela s'affichera déjà ici pour vous,
‫c'est donc une fonctionnalité
‫vraiment intéressante des documentations Stripe.
‫Ainsi, chaque fois
‫que vous êtes connecté, cette clé que
‫vous avez ici est en fait votre clé publique.
‫Mais si vous n'êtes pas sur cette
‫page, vous pouvez bien sûr également obtenir votre clé
‫API en vous rendant sur la page
‫d'accueil, ou la page des développeurs,
‫essayons en fait celle-là.
‫Ensuite, ici sur les
‫clés API, vous avez votre clé de test publique ici.
‫Alors saisissez-le, puis
‫revenons en arrière et passez-le ici.
‫Et comme
‫avant, je veux désactiver rapidement eslint ici.
‫D'accord?
‫Et maintenant créons enfin une fonction, que
‫je vais appeler book tour.
‫D'accord?
‫Et donc cette fonction prendra en compte un identifiant de tournée.
‫Et donc l'identifiant de la tournée est celui qui va
‫venir ici de cette interface utilisateur.
‫Alors d'ici, d'accord ?
‫Donc, comme avant, nous allons
‫obtenir celui-ci à partir de l'index. js où
‫nous appellerons alors aussi ce livre Tour, d'accord
‫?
‫Donc très similaire à ce que nous faisions avant.
‫Quoi qu'il en soit, précisons maintenant une fois de plus les
‫étapes que nous allons suivre ici.
‫La première étape consiste donc à obtenir
‫la session du
‫serveur, et c'est donc là que cette route entre en jeu, d'accord ?
‫C'est donc le point où nous allons utiliser ce
‫point de terminaison pour vraiment amener notre session de
‫paiement du côté client.
‫D'accord?
‫Alors obtenez une session vérifiée.
‫Du point de terminaison ou de l'API, cela n'a pas vraiment d'importance.
‫Cela fait dans
‫un deuxième temps, nous
‫utiliserons notre objet stripe pour créer automatiquement le formulaire de paiement,
‫+ traiter ou disons + charger, la carte
‫de crédit pour nous, d'accord ?
‫Et c'est en
‫fait tout, donc seulement deux étapes
‫simples, et vous verrez qu'elles sont en fait assez simples.
‫Stockons donc la session dans une variable appelée session.
‫Et puis nous allons attendre une requête HTTP, ce que nous
‫ferons une fois de plus avec axios.
‫Bien?
‫Je dois donc saisir ça ici.
‫Alors importez axios, et encore
‫une fois j'utilise la syntaxe du module ES6.
‫Rappelez-vous cela, d'axios.
‫Donc, comme nous l'avons fait par exemple dans la connexion ou dans les
‫paramètres de mise à jour, n'est-ce pas ?
‫Maintenant, nous devons également marquer cette fonction ici comme asynchrone.
‫D'accord?
‫Et puis dans axios,
‫nous pouvons simplement passer l'URL, alors que tout
‫ce que nous voulons faire est une simple requête GET.
‫D'accord?
‫Donc, jusqu'à
‫présent, nous avons toujours spécifié la
‫méthode, l'URL et les données, mais maintenant
‫nous ne faisons qu'une requête GET, et
‫c'est donc beaucoup plus simple.
‫Prenons simplement l'URL ici, afin
‫de ne pas perdre plus de temps.
‫Alors voici api/v1/bookings.
‫Ensuite, consultez la session.
‫Et puis l'identifiant de la tournée.
‫C'est donc celui-ci ici,
‫qui va devenir dysfonctionnel, d'accord
‫?
‫Et jetons un coup d'œil
‫à cet objet de session dans notre
‫console, juste pour voir si tout fonctionne,
‫d'accord ?
‫Alors maintenant dans notre index. js, nous allons essentiellement
‫connecter le bouton vert au dysfonctionnement que nous venons de créer
‫à l'intérieur de la bande. js.
‫Alors importez.
‫Réservez la visite de Stripe.
‫Ensuite, comme toujours, sélectionnons notre élément sur la page Web.
‫Donc, le bouton de livre est = pour documenter. obtenir l'élément par ID, et l'ID,
‫rappelez-vous, est de réserver une
‫visite, je crois.
‫Alors oui,
‫c'est donc l'ID que nous venons d'ajouter avant l'ID du livre.
‫Et maintenant, nous pouvons y ajouter ce gestionnaire d'événements.
‫Donc, s'il y a un bouton de livre,
‫alors bookBtn. addeventlistener, en
‫attendant un clic, nous avons également
‫besoin de l'événement, et maintenant nous devons
‫obtenir cet identifiant de tournée à partir de ce bouton,
‫donc c'est tourid =, et maintenant quand
‫je passe ici, c'est e. cible, et
‫peut-être que vous êtes
‫familier avec cela, donc événement. target est essentiellement l'élément sur lequel on
‫a cliqué, donc celui qui a déclenché cet écouteur
‫d'événement ici, d'accord ?
‫Et ce sera bien sûr ce bouton.
‫Ensuite, là-dedans, nous avons l'identifiant de la
‫tournée, et
‫donc en JavaScript, cela s'appellera en
‫fait tournée, alors comme ça, laissez-moi l'écrire.
‫Donc, l'identifiant de la tournée,
‫donc chaque fois
‫qu'il y a un -, il sera
‫automatiquement converti en cette notation CamelCase.
‫D'accord?
‫Donc e. cibler. base de données. touristique.
‫Mais maintenant, puisque ce nom est exactement le même que celui-ci, nous pouvons
‫simplement utiliser la structuration à ce sujet.
‫Alors encore une fois en utilisant cette belle astuce.
‫Et puis nous appelons réserver une tournée avec cet ID de tournée.
‫Et une autre bonne chose que nous
‫pouvons faire ici, c'est de changer le texte du
‫bouton en quelque chose comme le traitement, et donc
‫faisons à nouveau e. cibler.
‫Donc encore une fois l'élément qui a été cliqué,
‫c'est donc le bouton. textcontent que nous
‫avons utilisé avant d'entendre, donc
‫pour changer le texte
‫dans un élément, et changeons cela en traitement, d'accord
‫?
‫Et donc
‫avec cela, je pense que nous avons tout correctement connecté.
‫Donc, nous cliquons sur
‫ce bouton, puis nous modifions le texte sur ce bouton,
‫puis nous obtenons l'ID de la tournée
‫à partir de l'attribut de données qui se
‫trouve sur le bouton, et appelons réserver la tournée avec cet ID,
‫d'accord ?
‫Et pour que cet ID soit ensuite transmis à cette
‫URL, qui à son tour devrait renvoyer une session de paiement,
‫d'accord ?
‫Et puis ici, nous allons jeter un œil à
‫cela, juste comme ça.
‫Maintenant, à ce stade, nous ne
‫créerons pas encore le formulaire de paiement, nous allons
‫donc laisser cela pour la dernière étape de cette vidéo.
‫Mais pour l'instant, je veux jeter un œil
‫à cela, voyons
‫simplement si parcel est toujours en cours d'exécution
‫ici en arrière-plan, donc regroupez tous nos
‫scripts ensemble, et il
‫semble que ce soit le cas, et ne testons donc pas cela.
‫Nous sommes donc connectés,
‫essayons maintenant de Park Camper.
‫En bas, cliquez sur ce bouton.
‫Et il semble que nous n'ayons aucune erreur,
‫donc c'est bien, regardons
‫maintenant notre console, et nous
‫avons un objet, et c'est donc
‫le résultat de cet appel axios, donc axios
‫crée toujours un objet comme celui-ci ,
‫où se trouve un objet appelé data, qui est
‫la réponse réelle.
‫Et donc ici vous voyez que nous avons bien notre session.
‫Donc, vous voyez, nous avons l'e-mail
‫du client, nous avons l'ID de la
‫tournée actuelle, nous l'avons maintenant, voyons si nous l'avons, (marmonne) Nous
‫avons donc
‫ici des données sur la tournée.
‫Et maintenant, tout semble correct ici.
‫Bien?
‫Alors fermons cela, et
‫maintenant, comme dernière étape, créons
‫en fait le formulaire de paiement et débitons la
‫carte de crédit.
‫Bien?
‫Et en fait, enveloppons également tout cela
‫ici dans un bloc try catch.
‫Parce que bien sûr, nous avons quelques appels asynchrones ici, et les deux
‫en ont un de plus en
‫une seconde, et c'est donc une bonne pratique.
‫Pour avoir un bloc try catch.
‫Bien?
‫Mais ne perdons pas beaucoup de temps avec ces erreurs.
‫Mais je vais quand même afficher une
‫alerte en cas d'erreur,
‫donc par exemple avec cet appel d'API, d'accord
‫?
‫Pour que l'utilisateur puisse voir que
‫quelque chose s'est mal passé.
‫Alors saisissons simplement cette importation d'alertes.
‫Bien?
‫Et puis dites Afficher l'alerte, en
‫spécifiant qu'il s'agit d'une
‫erreur, puis uniquement l'erreur elle-même en tant que message.
‫Bien?
‫Quoi qu'il en soit pour faire maintenant cette
‫dernière étape, c'est en fait très,
‫très simple, il suffit d'attendre.
‫Bande. redirigerPour vérifier,
‫laissez-moi voir si je
‫me suis trompé, et laissez-moi
‫voir si j'ai bien compris, alors redirigez pour vérifier.
‫Bien?
‫Et puis des options mais une seule
‫option, qui est l'ID de session, et donc ça
‫va venir de la session, et rappelez-vous comment
‫la session était à l'intérieur des données, donc
‫il y avait un objet de données créé là-dedans par
‫axios, rappelez-vous et ainsi que est alors toute réponse elle-même.
‫Et donc là-dedans, nous avons une session. identifiant.
‫Et c'est tout,
‫d'accord ?
‫Et maintenant vient la plus grande
‫partie de tout, qui est de vérifier si cela fonctionne.
‫Nous sommes donc toujours connectés, chargeons
‫encore une fois ceci.
‫Cliquez sur un bouton et attendez maintenant.
‫Et en effet, nous arrivons à notre page de paiement, et
‫nous obtenons également cette belle image ici, nous obtenons
‫tout le logo de la nature ici, nous obtenons
‫ici toutes les icônes, donc tout
‫ce que nous avons spécifié auparavant, nous avons
‫le prix que nous avons également spécifié
‫dans notre session de
‫paiement, et vraiment tous les autres détails.
‫Donc le nom, le résumé, et
‫bien sûr l'image.
‫C'est vraiment incroyable, non ?
‫Ensuite, voici une autre bonne chose que j'ai mentionnée auparavant,
‫c'est que l'adresse
‫e-mail est déjà pré-remplie automatiquement, c'est
‫donc une autre fonctionnalité très intéressante.
‫Et maintenant, tout ce que nous
‫avons à faire ici est de mettre ces informations de carte
‫de crédit, et donc nous rayons lorsque nous testons le numéro de
‫carte de crédit est juste quatre deux quatre deux quatre deux quatre deux
‫, et ainsi de suite jusqu'à ce que nous ayons terminé , d'accord?
‫Alors ici, n'importe quel mois et n'importe quelle année
‫fonctionne, alors mettons simplement deux deux deux.
‫Donc quelque chose dans le futur, d'accord ?
‫Donc, si vous regardez ce cours après février 2022, alors cette
‫date ne fonctionnera pas, alors mettez
‫quelque chose plus tard, d'accord
‫?
‫Jusqu'à ce qu'un numéro fonctionne également,
‫ici n'importe quel nom fonctionne également,
‫disons simplement Laura, le pays
‫n'a bien sûr pas vraiment d'importance, les gens pré-remplissent automatiquement
‫en fonction de votre emplacement IP, donc je suis au
‫Portugal, et
‫ainsi de suite c'est ce que j'obtiens.
‫Et maintenant, vous voyez ce joli bouton vert ici, et il
‫a ce bel effet, et donc maintenant,
‫lorsque nous cliquons dessus,
‫le traitement est en cours et nous avons terminé.
‫Super, alors c'est en fait l'URL de réussite que nous avons également
‫spécifiée lors de notre session de paiement, n'est-ce pas ?
‫Nous avons donc défini qu'en
‫cas de succès,
‫nous revenions à cette URL d'accueil.
‫Et nous allons changer cela ici un
‫peu plus tard, mais pour l'instant c'est vraiment ce que
‫nous voulions, et donc cela a parfaitement fonctionné.
‫Eh bien, du moins, je
‫l'espère, alors jetons un coup d'œil à tous les paiements maintenant.
‫Et en effet,
‫c'est celui que nous venons de faire.
‫Nous avons donc reçu avec succès ce paiement
‫directement sur notre compte.
‫Vous voyez donc l'adresse e-mail le
‫nom, et bien le parc Camper Tour que nous venons d'acheter.
‫Super, c'est vraiment génial.
‫Donc, ici, vous pouvez voir les frais que Stripe prend, donc
‫bien sûr, ils doivent aussi gagner de l'argent, et
‫donc ils prennent une coupe,
‫ce qui, je pense, est comme 2. 9% ou quelque chose comme ça, mais
‫bien sûr, vous pouvez consulter tout cela sur
‫leur site Web.
‫Ensuite, vous avez également le mode de paiement ici, donc
‫les données que nous
‫venons de saisir, et vous obtenez de belles
‫données sur la session, et elle devrait probablement aussi apparaître ici chez vos clients.
‫Et oui, en effet la voici, Et
‫donc oui, je
‫pense que c'est plutôt réussi maintenant.
‫Oh et une autre chose que j'ai oublié
‫de mentionner est que vos utilisateurs recevront
‫également automatiquement un e-mail.
‫Je pense donc que cela devrait être la valeur par défaut ici
‫dans les reçus par e-mail,
‫alors allez dans vos paramètres de reçus par
‫e-mail, puis ici vous avez des clients par e-mail
‫sur les paiements réussis.
‫Et c'est aussi une fonctionnalité très
‫intéressante, ce qui signifie que nous n'avons pas à envoyer manuellement des
‫e-mails chaque fois qu'un utilisateur a acheté une visite avec succès, d'accord ?
‫Donc, encore une chose que la rayure nous enlève,
‫Fantastique, alors prenons maintenant une petite minute pour récapituler l'ensemble du processus
‫que nous venons de suivre.
‫Nous avons donc commencé par créer cette session de paiement, qui
‫a besoin en entrée de l'ID de la
‫tournée, afin que nous puissions ensuite stocker un tas de détails sur la
‫tournée dans cette session.
‫Donc des trucs sur le
‫nom de la tournée, le résumé aussi les images de prix.
‫Donc, tout ce que nous voulons afficher sur
‫la page de paiement,
‫mais aussi dans notre tableau de bord.
‫Ensuite, nous incluons également l'e-mail afin que l'utilisateur n'ait
‫pas besoin de le remplir lors du
‫paiement, puis un tas d'autres données.
‫Alors souvenez-vous de cet identifiant de référence client, qui
‫aura beaucoup plus de sens
‫une fois que nous l'utiliserons réellement.
‫Nous créons donc cette session chaque
‫fois que quelqu'un accède à cet itinéraire de session de paiement, d'accord ?
‫Et c'est exactement ce que nous faisons ensuite sur notre face avant,
‫ici même en rayures. js.
‫Nous obtenons donc notre session ici,
‫puis à partir de là, nous créons une caisse
‫et facturons la carte de crédit
‫en utilisant Stripe. redirectTocheckout, et
‫l'objet stripe ici
‫utilise simplement la bibliothèque stripe
‫avec notre clé publique, d'accord ?
‫D'où vient cet identifiant de tournée ?
‫Eh bien, il est stocké ici juste sur le bouton sur
‫lequel l'utilisateur clique pour réserver une nouvelle visite.
‫Cet ID est ensuite lu ici dans index. js, chaque fois que
‫quelqu'un appuie sur le bouton de réservation, d'accord ?
‫Nous stockons donc cela dans l'ID
‫de tournée et le transmettons à
‫la tournée de réservation, qui est encore une fois
‫cette fonction ici, qui s'occupe du traitement réel des
‫paiements en amont.
‫Et donc le résultat de
‫tout cela est ce
‫que nous venons de voir avant où l'utilisateur a
‫vraiment facturé la carte de crédit
‫et a acheté la visite, donc parfaite.
‫Maintenant, ce qui manque
‫ici, c'est qu'en fait, chaque fois qu'il y a une
‫nouvelle réservation, nous voulons créer un nouveau document de réservation dans notre base de données.
‫Donc, tout comme nous en avons discuté il y a
‫longtemps lorsque nous avons parlé de tous
‫les modèles de données dans cette application, n'est-ce pas ?
‫Et donc à cette fin, nous
‫allons créer le modèle de réservation directement
‫dans la vidéo suivante,
‫le trier après
‫cela, nous pouvons ensuite créer de nouvelles
‫visites chaque fois qu'il y a un achat réussi.