‫Narrateur : Dans cette dernière partie de la
‫section, nous allons maintenant accepter les paiements
‫par carte de crédit dans notre application utilisant
‫Stripe afin de permettre à nos utilisateurs d'acheter réellement des visites.
‫Et donc, ouvrons un nouvel onglet ici et
‫puis là, ouvrez la bande. com.
‫Stripe est donc la plate-forme logicielle la meilleure, la plus
‫populaire et la plus facile à utiliser
‫pour intégrer les paiements dans n'importe quel site Web.
‫Et beaucoup plus sur la façon dont cela fonctionne réellement
‫un peu plus tard, mais pour l'instant commençons par créer notre compte gratuit.
‫Alors cliquez ici sur compte
‫gratuit, puis ouvrez votre propre compte gratuit.
‫Et une fois que vous êtes connecté avec
‫succès, vous devriez voir un tableau de bord qui ressemble à ceci.
‫Ainsi, lorsque vous ouvrez un tout
‫nouveau compte, vous serez d'abord toujours en mode test.
‫C'est donc ce que vous pouvez voir ici avec ces données de test.
‫Désormais, dès que vous voudrez vraiment
‫commencer à accepter des paiements réels impliquant de
‫l'argent réel de clients réels, vous devrez alors activer
‫votre compte Stripe.
‫Et pour cela, vous devrez ensuite fournir
‫à Stripe un tas de données sur votre entreprise.
‫Mais bien sûr, dans
‫ce projet, nous n'allons pas faire ça, donc nous travaillerons
‫toujours dans ce genre de mode de développement de test, d'accord ?
‫Mais sinon, il vous suffit de
‫cliquer ici pour démarrer ou d'activer votre compte ici.
‫Maintenant, ce tableau de bord est vraiment facile et super
‫intuitif à utiliser à mon avis.
‫Ainsi, vous pouvez voir ici vos paiements, ce qui est encore
‫une fois très simple,
‫et n'oubliez pas qu'il s'agit de données de test.
‫Donc, tous ces montants ici ne sont,
‫bien sûr, que de faux montants.
‫Mais de toute façon, vous pouvez voir votre client
‫ici, vous pouvez voir le montant.
‫Et lorsque vous les ouvrez, vous obtenez encore plus d'informations,
‫comme le mode de paiement ici, donc le numéro de carte de crédit.
‫Et au fait, nous n'avons jamais accès au vrai
‫numéro de carte de crédit du client.
‫Donc, nous ne verrons toujours que ces quatre derniers
‫chiffres, mais jamais le vrai numéro de carte de crédit, d'accord ?
‫Ensuite, vous obtenez également un
‫aperçu de ce qui a été réellement acheté.
‫Ainsi, par exemple, The Snow Adventurer Tour.
‫Et tout cela ici,
‫bien sûr, date du début
‫de la création de l'application Natours, d'accord ?
‫Donc, tous ces achats ne sont que des tests.
‫Ensuite, nous pouvons également voir l'intégralité de notre solde,
‫donc essentiellement tout l'argent que nous avons reçu.
‫Et encore une fois, tout cela ne sont que des données de test.
‫Ensuite, nous avons nos clients avec une belle liste de tous.
‫Et, oui, tout cela fonctionne très bien.
‫Maintenant, avant de pouvoir commencer,
‫nous devons en fait définir quelques paramètres
‫concernant notre compte.
‫Donc, dans votre nouveau compte, vous devriez voir
‫quelque chose comme "Compte sans nom", ou quelque chose comme ça, ici.
‫Et donc, vous devriez également avoir, comme une icône de stylo ou quelque
‫chose où vous pouvez ensuite créer un nom pour le compte.
‫Et donc s'il vous plaît appelez ça "Natours" ou autre chose.
‫Et si vous avez plus d'entreprises, vous
‫pouvez ajouter un compte pour chacune de ces entreprises, d'accord ?
‫Ou si vous n'avez pas l'icône en forme de crayon
‫ici, nous pouvons également accéder
‫aux paramètres, puis aux informations de compte.
‫Et voici donc où vous devez
‫mettre le nom de ce genre d'entreprise.
‫Nous pouvons également définir quelques autres paramètres, définissons
‫donc la marque ici, ce qui fera
‫que les pages Stripe Checkout correspondent
‫à notre marque, en gros.
‫Ajoutons donc nos images.
‫Donc public, image, et puis pour l'icône,
‫utilisons celle-ci.
‫Et nous pouvons également télécharger
‫un logo, et pour cela, utilisons celui-ci.
‫Oh, et maintenant nous avons besoin de notre mot de passe pour continuer.
‫Et maintenant, changeons aussi notre couleur ici.
‫Ouvrez donc rapidement le fichier CSS en public,
‫puis trouvez notre vert typique, qui
‫est celui-ci ici.
‫Donc ça a l'air un peu mieux.
‫Enregistrons-le maintenant ici
‫et avec cela, nous sommes prêts à partir.
‫Ensuite, jetons un coup d'œil à nos clés API.
‫Alors, cliquez ici sur les clés API et si
‫le site Web est un
‫peu différent au moment où vous regardez
‫cette vidéo, alors peut-être que les clés sont ici chez les développeurs.
‫Donc ici, vous avez aussi quelque chose qui s'appelle des clés API, d'accord ?
‫Quoi qu'il en soit, il existe une clé publiable et une clé secrète.
‫Et donc celle-ci est essentiellement une clé
‫publique que nous pouvons utiliser sur le front-end,
‫et une clé secrète est celle qui est nécessaire sur le back-end.
‫Et bien plus à ce sujet
‫une fois que nous commençons réellement à le mettre en œuvre.
‫Et enfin, je voulais
‫aussi jeter un coup d'œil avec vous à la documentation.
‫Et donc c'est ici, et
‫en fait Stripe
‫est connu pour son excellente documentation.
‫Il est vraiment facile de trouver ce que
‫vous cherchez dans cette documentation.
‫Mais bien sûr, lorsque vous ne faites que
‫commencer, il est alors très difficile de savoir
‫ce que vous recherchez, n'est-ce pas ?
‫Et c'est pourquoi nous
‫implémentons cette fonctionnalité de paiement ensemble ici, n'est-ce pas ?
‫Nous allons donc utiliser les fonctionnalités de paiement de Stripe
‫et elles ont plusieurs options différentes.
‫Maintenant, sur le Web, nous pouvons utiliser
‫Stripe Checkout, qui utilise essentiellement une page de paiement préformative.
‫Et c'est donc celui-ci que nous
‫allons utiliser, ou vous pouvez également utiliser des
‫éléments Stripe
‫lorsque vous voulez vraiment créer votre propre expérience de paiement, d'accord ?
‫Mais nous utiliserons simplement ce Checkout qui est en
‫fait tout nouveau et qui
‫est donc vraiment à l'épreuve du temps à ce stade.
‫Ce sont donc les deux options
‫pour le Web, mais vous pouvez également Stripe sur iOS, Android et
‫vraiment toute autre plate-forme.
‫Ensuite, sur Checkout, nous pouvons l'utiliser
‫uniquement sur le client ou avec le serveur, d'accord ?
‫Donc, ici, il y a une comparaison.
‫Et donc, lorsque nous l'utilisons uniquement côté client, nous n'avons
‫même pas besoin d'un serveur du tout.
‫Mais cette façon d'utiliser Stripe n'est vraiment, vraiment, que
‫pour les très, très petits magasins, donc
‫où vous n'avez qu'une poignée de produits qui
‫ne changent jamais leur prix et
‫où vous devez en
‫fait ajouter tous ces produits manuellement à vos tableaux de bord Stripe.
‫Et donc on veut quelque chose d'un
‫peu plus complexe et donc pour ça, on utilise l'intégration serveur, d'accord ?
‫Et donc, bien sûr, nous
‫devons encore faire quelque chose du
‫côté client, mais la plupart du code sera en fait du côté serveur.
‫D'accord, alors vous voyez qu'il y a vraiment beaucoup
‫de choses à faire avec Stripe, et nous pouvons même en faire beaucoup plus.
‫Nous pourrions donc avoir une facturation là où nous avons des abonnements où nous
‫avons des factures et toutes ces bonnes choses.
‫Donc vraiment, vous pouvez créer
‫une énorme entreprise sur Stripe et accepter des abonnements, enregistrer
‫des clients dans des bases de
‫données et tout cela intégré à Stripe.
‫Mais encore une fois, ce que nous
‫allons faire ici, c'est simplement utiliser Checkout, mais
‫la version la plus complète de celui-ci
‫en utilisant le serveur Checkout.
‫D'accord, mais maintenant, avant de commencer à
‫intégrer le produit Stripe Checkout dans notre application,
‫je voulais juste
‫mettre en page rapidement l'ensemble du flux de travail
‫que nous allons implémenter au cours des deux prochaines vidéos.
‫Tout commence donc sur le
‫back-end où nous allons implémenter une route
‫pour créer une session dite Stripe Checkout.
‫Et cette session va contenir un tas
‫de données sur l'objet qui peut être acheté.
‫Et dans notre exemple, c'est la tournée.
‫Ainsi, la session contiendra le prix du
‫voyage, le nom du voyage, une image du produit, ainsi que d'autres
‫détails comme l'e-mail du client.
‫Nous verrons donc cela dans la prochaine vidéo.
‫Ensuite, sur le front-end, nous allons créer une fonction
‫pour demander la session de paiement au serveur une fois que
‫l'utilisateur a cliqué sur le bouton d'achat.
‫Ainsi, une fois que nous
‫avons atteint le point final que nous
‫avons créé sur le back-end, cela créera alors une session et
‫la renverra au client.
‫Ensuite, en fonction de cette
‫session, Stripe créera automatiquement une page de paiement pour nous
‫où l'utilisateur pourra ensuite saisir tous les détails
‫tels que le numéro de carte de crédit, la date d'expiration, etc.
‫Ensuite, encore une fois, en utilisant
‫The Session, nous débiterons enfin la carte de crédit.
‫Et pour ça, on va avoir besoin de la clé
‫publique, donc celle qu'on vient de voir avant.
‫Donc, la clé secrète dont nous aurons besoin sur
‫le serveur comme vous le verrez
‫dans la première étape, et la clé publique sera utilisée sur le front-end.
‫Et ce qui est vraiment important
‫à noter ici, c'est
‫que c'est vraiment Stripe, qui
‫avec The Session, débitera la carte de crédit, et
‫donc, les détails de la carte de crédit n'atteignent même jamais
‫notre serveur, ce qui rend notre vie de développeurs beaucoup plus
‫facile car alors nous n'avons pas à
‫nous occuper de toutes les questions de sécurité liées
‫à la gestion et au stockage des cartes de crédit, d'accord ?
‫Stripe nous enlève donc tout
‫cela, nous utilisons simplement leur API comme ceci.
‫Quoi qu'il en soit, une fois que la carte de crédit a été
‫débitée avec succès, nous pouvons alors utiliser quelque
‫chose appelé Stripe Webhooks sur notre back-end, afin de créer de nouvelles réservations.
‫Désormais, cette partie du flux
‫de travail ne fonctionnera que pour les sites Web
‫déployés, donc les sites Web qui s'exécutent déjà sur un serveur.
‫Et donc cette partie du
‫workflow, nous ne pourrons la mettre en
‫œuvre qu'à la fin de la section suivante, d'accord ?
‫Mais pour l'instant, nous
‫allons en fait trouver une solution de contournement
‫temporaire à cela, qui n'est pas
‫vraiment sécurisée, mais cela fonctionnera très bien pour le moment, d'accord ?
‫Gardez donc ce schéma à l'esprit et également ce concept selon
‫lequel nous utilisons réellement The Session pour débiter une carte de crédit
‫et nous ne le faisons pas vraiment directement.
‫Alors, rendez-vous dans la prochaine vidéo.