‫Instructeur : Dans cette vidéo, intégrons
‫donc Stripe à notre backend en créant ce point de
‫terminaison d'API qui créera et renverra une session de paiement Stripe.
‫Et donc à ce stade, nous allons commencer à
‫créer notre prochaine ressource.
‫Et voilà les réservations.
‫Et je vais commencer ici par les itinéraires de réservation.
‫Donc
‫réservation d'itinéraires. js.
‫Et nous l'avons fait tellement de fois maintenant.
‫Alors je vais juste copier tout
‫ce code et le
‫mettre ici dans les itinéraires de réservation.
‫Et puis supprimez simplement tout cela.
‫Et aussi celui-ci.
‫Nous n'avons pas non plus besoin de paramètres
‫de fusion et nous aurons un contrôleur de réservation au lieu d'un
‫contrôleur de révision.
‫Donc contrôleur de réservation, créons-le en fait.
‫Alors. js qui
‫semble correct et intégrons
‫également ce droit dans app. js.
‫Et mettons cela juste ici
‫après le routeur d'examen.
‫Donc,
‫voici encore les réservations, puis bien sûr, intégrez
‫cela dans notre API.
‫Donc réservations
‫et ici routeur de réservations.
‫Et je pense que cela ne devrait être que de la réservation.
‫Alors corrigeons cela ici aussi.
‫Et en effet, nous l'appelons routeur de réservation.
‫Et pareil ici, ce ne sont pas des
‫réservations mais des réservations d'itinéraires.
‫Alors donnez-lui une sauvegarde.
‫Fermez celui-ci et
‫celui-ci et celui-ci ici aussi.
‫Et maintenant, allons de l'avant et créons
‫notre premier itinéraire ici.
‫Alors routeur. get et l'itinéraire qu'il
‫créera ici ne suivra encore une fois pas le
‫principe de repos, car celui-ci ne concernera pas vraiment la création,
‫l'obtention ou la mise à jour d'une réservation.
‫Au lieu de cela, cet itinéraire permettra uniquement au
‫client d'obtenir une session de paiement.
‫Et appelons donc cette
‫session de paiement.
‫Ensuite, nous devons protéger cette route
‫afin que seuls les utilisateurs
‫authentifiés puissent réellement obtenir une session de paiement.
‫Alors ça a du sens, non ?
‫Et puis ajoutez un contrôleur de réservation.
‫Nous allons créer un gestionnaire
‫de route appelé get checkout session.
‫Très bien.
‫Alors
‫copions celui-ci et créons-le ici à exports. getCheckoutSession puis la requête répond
‫ensuite.
‫Et maintenant commençons à travailler.
‫Maintenant, en fait, il y a une autre chose que nous devons faire
‫ici dans les routes qui est de spécifier un paramètre d'URL.
‫Et donc ça va être l'ID de la tournée.
‫D'accord, donc, en gros, nous voulons
‫que le client envoie l'ID de la visite actuellement réservée.
‫Et c'est pour que nous puissions remplir la session de paiement avec toutes
‫les données nécessaires, telles que le nom du tour et
‫le prix du tour et tout ça.
‫Très bien, nous avons maintenant accès à l'identifiant de la tournée dans
‫cette fonction de gestionnaire et donc la première chose que nous
‫allons faire est de
‫trouver cette tournée dans notre base de données.
‫Très bien, donc pour cela nous avons bien sûr besoin du modèle de tournée.
‫Venons-en donc au contrôleur de tournée et
‫tirons cela de là.
‫Nous aurons également besoin de
‫ce catchAsync et donc vraiment de tout cela.
‫Je copie donc tout et même si je
‫n'en ai pas besoin tout de suite,
‫j'en aurai probablement besoin un peu plus tard de toute façon.
‫Très bien.
‫Disposons donc à nouveau nos étapes ici.
‫Alors obtenez la visite actuellement réservée.
‫Ensuite, dans un deuxième temps, nous créons la
‫session de paiement et l'envoyons enfin au client.
‫Très bien, donc la première étape est vraiment facile.
‫Alors on va attendre.
‫Donc tournée. findbyId
‫qui est req. paramètres. tourId.
‫D'accord, c'est donc
‫le nom que nous lui avons donné dans le paramètre URL.
‫Et bien sûr, il s'agit
‫maintenant d'une fonction asynchrone avec un catchAsync à côté ou autour de cela, en fait.
‫Super, maintenant, créons cette session ici.
‫Et pour cela, nous devons en fait installer
‫ce package NPM de lecteur.
‫Alors faisons-le ici.
‫NPM installe Stripe.
‫Et en attendant, nous allons aller sur notre tableau de bord Stripe
‫et récupérer notre clé secrète à partir d'ici.
‫Alors, appuyez simplement sur
‫ce bouton ici, puis copiez-le.
‫Et vous voyez qu'ici, dans les touches, il
‫est écrit test.
‫Et encore une fois, ceux-ci sont
‫juste pour les tests, puis une fois que votre compte Stripe est actif,
‫vous pouvez alors obtenir vos clés API en direct.
‫Bon, maintenant, comme pour toutes les autres
‫clés, nous les mettrons ici dans notre fichier de configuration.
‫Donc, la clé secrète Stripe est égale à
‫celle-ci.
‫Et ce n'est pas correct ici.
‫Très bien, alors copiez celui-ci.
‫Retour à notre contrôleur de réservation.
‫Exigons maintenant que ce package
‫de lecteur a été installé avec succès ici.
‫Et juste avec tous les autres packages avant, assurez-vous
‫que vous êtes bien sur la
‫même version que moi.
‫Et vous voyez que je suis ici au tout nouveau 7. 0. 0.
‫C'est donc vraiment nouveau.
‫Et en fait, c'est parce que
‫beaucoup de choses ont changé avec Stripe il y a quelques jours.
‫J'ai donc dû modifier quelques-unes de ces implémentations.
‫Quoi qu'il en
‫soit, const stripe égal nécessite puis stripe.
‫Maintenant, ceci ici exposera une fonction essentiellement.
‫Et généralement, ce que nous faisons tout de suite, c'est de
‫passer notre clé secrète directement dans cela.
‫Et cela nous donnera alors un objet Stripe
‫avec lequel nous pourrons travailler.
‫Alors que maintenant au processus. env. STRIPE_SECRET_KEY.
‫D'accord, et maintenant utilisons ça.
‫Alors on dit Stripe. vérifier. session. créer.
‫Et puis l'objet habituel des options.
‫Très bien, il y a maintenant une tonne d'options
‫que nous pouvons définir ici.
‫Mais seulement trois d'entre eux sont nécessaires.
‫Le premier concerne donc les types de méthodes de paiement.
‫Donc types de moyens de paiement.
‫C'est donc un tableau où nous pouvons spécifier plusieurs types
‫et la carte est pour la carte de crédit.
‫Et pour le moment, ce sont en fait toutes
‫les options de paiement que nous pouvons utiliser pour le paiement Stripe.
‫Mais j'ai lu qu'à l'avenir, ils en ajouteraient beaucoup plus.
‫Donc, vous pouvez vous informer par cela.
‫Ensuite, nous devons spécifier l'URL de réussite.
‫Et c'est donc essentiellement l'URL qui sera
‫appelée dès qu'une carte de crédit aura été débitée avec succès.
‫Ainsi, dès que l'achat sera réussi, l'utilisateur
‫sera redirigé vers cette URL.
‫Et pour l'instant, spécifions simplement cela comme notre page d'accueil.
‫Très bien et nous allons le
‫faire comme avant avec req. protocol:// puis
‫demande. obtenir l'hôte.
‫Donc, en gros, juste notre URL d'accueil.
‫Ensuite, nous devons également spécifier l'URL d'annulation.
‫Alors juste comme ça.
‫Et celui-ci sera similaire.
‫Et donc, en gros, c'est la page
‫sur laquelle l'utilisateur se rend s'il choisit d'annuler le paiement en cours.
‫Et en fait, faisons-leur aller sur la page de
‫la tournée où ils se trouvaient auparavant.
‫Et donc c'est essentiellement une tournée / une tournée. limace.
‫Ensuite, nous pouvons également spécifier l'e-mail du client.
‫Et donc c'est très pratique car bien sûr nous avons
‫déjà accès à l'email du client.
‫Et ainsi, avec cela, nous pouvons économiser une étape à
‫l'utilisateur et rendre l'expérience de paiement beaucoup plus fluide.
‫Très bien, alors n'oubliez pas qu'il s'agit d'un itinéraire protégé.
‫Et donc comme toujours l'utilisateur est déjà à la demande.
‫Et donc on peut dire demande. utilisateur. e-mail.
‫Ensuite, nous pouvons
‫également spécifier un champ personnalisé appelé ID de référence client.
‫Et ça a l'air un peu bizarre
‫mais en fait ça va être vraiment important pour nous.
‫Ce champ va donc nous permettre
‫de transmettre des données sur la session que nous sommes en train de créer.
‫Et c'est important car plus tard, une fois
‫l'achat réussi, nous aurons à
‫nouveau accès à l'objet de session.
‫Et d'ici là, nous voulons créer une nouvelle réservation
‫dans notre base de données.
‫Souvenez-vous donc du schéma que je
‫vous ai montré lors de la dernière leçon.
‫Fondamentalement, ce dont je parle
‫ici est la dernière étape de ce diagramme.
‫Et rappelez-vous également que cela
‫ne fonctionnera qu'avec les sites Web déployés.
‫Mais encore, préparons-nous déjà pour cela ici.
‫D'accord, donc pour créer une nouvelle réservation dans notre base de
‫données, nous aurons besoin de l'identifiant de l'utilisateur, de l'identifiant de la visite et du prix.
‫Vous vous en souvenez ?
‫Et dans cette
‫session, nous avons déjà accès à l'e-mail
‫de l'utilisateur et à partir de
‫là, nous pouvons ensuite recréer l'ID de l'utilisateur car l'e-mail ici est unique.
‫Nous préciserons également le prix du tour
‫ici dans une seconde et il ne manque donc que l'identifiant du tour.
‫Et c'est donc ce que nous allons spécifier ici
‫sur ce champ personnalisé essentiellement.
‫C'est ce qu'on appelle l'ID de référence client.
‫Et tout ce que je viens d'expliquer auparavant aura en réalité beaucoup plus de sens
‫une fois que nous aurons réellement mis
‫en œuvre cette dernière étape de création d'une réservation
‫dans la base de données, n'est-ce pas ?
‫Quoi qu'il en soit, cet ID de tournée est sur demande. paramètres. tourId.
‫Très bien, et maintenant
‫enfin, nous allons préciser quelques détails sur le produit lui-même.
‫Donc notre tournée dans ce cas.
‫Et c'est ce qu'on appelle
‫des éléments de ligne qui accepte un tableau d'objets.
‫Donc, en gros, un par article
‫et donc dans notre cas, ce ne sera qu'un.
‫Donc on doit préciser le nom
‫du produit et donc c'est en tournée. nom et comme toujours, nous ajoutons également
‫la visite à ce nom.
‫Ensuite, nous pouvons également spécifier une description.
‫Et tous ces noms de champs ici viennent vraiment de Stripe.
‫Nous ne pouvons donc pas créer nos propres champs.
‫Donc, si vous essayez de faire cela, vous obtiendrez vraiment une erreur.
‫D'accord, donc dans la description je mettrai le résumé de
‫la tournée, donc cette jolie courte
‫phrase qui décrira chaque tournée.
‫Ensuite, nous pouvons également spécifier un tableau d'images.
‫Maintenant, ces images ici, elles doivent être des images en direct.
‫Donc, en gros, des images hébergées sur
‫Internet, car Stripe téléchargera en fait cette
‫image sur son propre serveur.
‫Et c'est donc une autre des choses que
‫nous ne pouvons vraiment faire qu'une fois le site Web déployé.
‫Mais pour l'instant, en tant qu'espace réservé, j'utiliserai essentiellement ceux de
‫notre exemple de site Web hébergé sur natours. dév.
‫Alors allons sur ce site.
‫C'est donc celui-ci chez natours. dév.
‫Et l'image que je vais choisir est l'image de couverture.
‫Inspectons donc cette image.
‫Donc celui-ci ici et copiez l'adresse du lien ici.
‫Très bien.
‫Il s'agit donc
‫d'un tableau car nous pouvons spécifier plusieurs images mais nous n'en voulons vraiment qu'une.
‫Et effectivement nous avons des natours. dev/images/tours puis le nom
‫de l'image.
‫Et celui-ci je le remplacerai simplement par tour. couverture de l'image.
‫Et ça va marcher
‫parce que les noms des images sur natours. dev sont exactement les mêmes que nous avons
‫ici dans notre projet.
‫Donc tournée. imageCouverture.
‫C'est donc une autre
‫chose que nous devons réellement changer une fois que nous avons mis notre site Web en production.
‫Et je garde en fait une
‫liste de ces trucs pour qu'on n'oublie rien.
‫Quoi qu'il en soit, la prochaine étape est le montant.
‫Donc, en gros, le prix
‫du produit acheté.
‫C'est donc la tournée. prix et maintenant nous
‫devons multiplier cela par 100.
‫Parce que ce montant devrait être en cents.
‫Et donc un dollar ou un euro ou vraiment
‫la plupart des devises ont 100 cents.
‫Ainsi, un dollar équivaut à 100 cents.
‫Et donc pour le convertir en cents, il suffit de le multiplier par 100.
‫Ensuite, nous devons également spécifier la devise.
‫Et c'est donc dans ce cas USD.
‫Mais cela pourrait aussi être
‫comme, pour l'euro c'est l'euro et pour d'autres devises, vous devriez
‫probablement jeter un œil à la documentation.
‫Alors bien sûr, je ne
‫peux pas couvrir toutes les devises qui existent, n'est-ce pas ?
‫Quoi qu'il en soit, enfin, nous spécifions également la quantité.
‫Et ce n'est donc qu'une tournée dans ce cas.
‫C'est donc ça en fait.
‫Et donc fondamentalement, cette
‫partie ici est l'information sur la session elle-même.
‫Et puis voici les informations
‫sur le produit que l'utilisateur est sur le point d'acheter.
‫Très bien, maintenant, stockons la session.
‫Alors const session et maintenant on
‫attend ça.
‫Donc, cette création ici renvoie essentiellement une
‫prémisse car la définition de toutes ces
‫options ici effectuera essentiellement un
‫appel API à Stripe et donc bien sûr,
‫c'est une fonction asynchrone que nous devrions attendre ici.
‫D'accord, mais de toute façon
‫c'est maintenant notre session et donc la dernière étape
‫est bien sûr de la renvoyer au client.
‫Donc, comme toujours,
‫le statut est succès.
‫Et puis envoyons simplement la session comme ceci.
‫Très bien, donc ça devrait être ça.
‫Notre routeur est déjà configuré et je
‫pense donc que nous
‫pourrions maintenant essayer cela dans le facteur.
‫Très bien, maintenant plus tard, bien
‫sûr, nous ne permettrons à personne de faire cela en utilisant le facteur parce
‫que cela n'a pas beaucoup de sens.
‫Mais maintenant, puisque nous ne testons que
‫cela, cela a en fait beaucoup de sens.
‫Très bien, allons voir
‫le facteur et créons une toute nouvelle demande.
‫Donc ça va être aux
‫réservations / euh, je ne suis pas vraiment sûr.
‫Ouais, donc session de caisse puis /tourId.
‫Très bien, alors faisons nos visites ici.
‫Pour obtenir l'ID à partir de là essentiellement.
‫Alors faisons le Sea Explorer.
‫D'accord, et cela devrait en fait suffire.
‫Oh attendez, nous ne sommes bien sûr pas connectés.
‫Alors connectez-vous ici.
‫Maintenant, nous sommes dans
‫admin, mais utilisons quelqu'un d'autre ici.
‫Et je pense que nous
‫utilisions Leo auparavant, alors utilisons maintenant cet utilisateur.
‫Maintenant, nous avons un mot de passe incorrect.
‫Très bien, voyons ce que nous avons d'autre.
‫Alors, quels autres utilisateurs nous pourrions utiliser.
‫Et en fait, utilisons Monica ici.
‫Pourquoi pas?
‫J'espère donc que son mot de passe est correct.
‫Eh bien, essayons en fait de remplacer
‫ceci ici par test1234.
‫Eh bien, peut-être avons-nous déjà changé
‫les mots de passe de tous ces utilisateurs dans d'autres conférences.
‫Alors utilisons John ici.
‫Donc je sais que nous n'avons jamais utilisé
‫John alors maintenant ça doit marcher.
‫Oh, je vois en fait l'erreur que je viens de faire avant.
‫Alors là c'est pas natours, ça doit être exemple. com.
‫Alors essayons encore avec Monica ici.
‫Ou vraiment juste avec John.
‫C'est plus difficile que ce à quoi je m'attendais.
‫Mais maintenant, nous sommes enfin connectés.
‫Très bien, et avec
‫ça, essayons d'avoir notre session de paiement.
‫Il nous manque l'autorisation d'ici.
‫Une fois de plus, et maintenant nous obtenons une véritable erreur ici.
‫Donc quelque chose qui vient vraiment du
‫code que nous venons d'écrire.
‫Très bien.
‫Alors vérifions cela.
‫Et le problème c'est qu'ici il s'agit en fait de sessions.
‫Alors rayure. vérifier. séances.
‫Une fois de plus.
‫Cette fois, cela prend beaucoup plus de temps, ce qui est bon signe.
‫Et nous avons une autre erreur.
‫Ainsi, la ligne 15 ne peut pas lire le slug du nœud.
‫D'accord, c'est sûr que c'est bizarre parce qu'il devrait
‫y avoir une limace sur cette tournée.
‫Alors euh oui, vous voyez que
‫c'est ici.
‫Alors peut-être que quelque chose
‫s'est mal passé avec la lecture de cette tournée.
‫Ce que je ne peux pas vraiment comprendre pourquoi ce serait.
‫Mais essayons simplement d'enregistrer la visite sur la console.
‫Très bien, et en fait, nous obtenons null.
‫Ce qui signifie probablement qu'il y
‫a un ID de tournée qui n'est pas correctement défini.
‫Oh, voici le problème.
‫Donc je l'ai, ID tout en
‫majuscule, mais ici dans le contrôleur j'ai le D en minuscule.
‫Alors comme ça.
‫Et c'est donc le
‫petit type de bugs qui se produisent tout le temps évidemment.
‫Voyons donc quel est le prochain.
‫Oh et en fait, cette fois, nous avons bien compris.
‫Vous voyez donc que c'est la session que nous venons de créer.
‫Et il édite d'autres trucs ici, mais cela n'a pas vraiment
‫d'importance pour nous en ce moment.
‫Ce qui est vraiment intéressant à voir cependant, c'est que
‫nous pouvons maintenant en quelque
‫sorte déjà voir ce paiement, ou du moins cette demande
‫de paiement, disons dans nos tableaux de bord de conduite.
‫Donc, si nous allons là-bas
‫et passons aux paiements, puis à tous, vous verrez que ce
‫dernier ici vient juste de se produire en ce moment.
‫Donc, si nous cliquons dessus, vous verrez des données à ce sujet.
‫Vous voyez donc par exemple qu'il s'agit en fait
‫du Sea Explorer Tour.
‫Vous avez aussi le prix, vous avez aussi l'image.
‫Probablement aussi des données sur l'utilisateur.
‫Et en fait non, pas vraiment.
‫Mais ce qui compte ici, c'est qu'il est dit incomplet.
‫Et c'est parce que nous n'avons créé la session
‫de paiement que sur le serveur.
‫Et nous manquons
‫donc la deuxième étape où nous facturons ensuite
‫la carte de crédit du côté du client.
‫Donc, puisque cela nous manque,
‫faisons-le correctement dans la prochaine vidéo.