Créer un site e-commerce avec Django

00:00:00 :Dans cette partie, on va créer la vue qui va nous permettre de procéder à la session de paiement avec Stripe.La première chose que je vais faire, c'est déjà lancer mon serveur avec python manage.py run server.
00:00:11 :On va se rendre à cette adresse ici et on a bien notre boutique qui est affichée.Je vais me connecter avec le compte que j'avais créé qui a un panier.
00:00:20 :Je me connecte sur le site et là j'ai bien un panier avec un élément dedans.On va vouloir accéder à la page de paiement de Stripe pour procéder au paiement de cet article.
00:00:29 :On a quatre articles de ce style dans le panier.Quatre sneakers qui je crois sont au prix de 50 euros.Je peux retourner voir sur la boutique.
00:00:37 :On n'avait pas affiché le prix ici mais je crois 49 euros.Et on en a quatre en stock qui sont dans le panier.Je vais cliquer sur voir le panier ici.
00:00:45 :Pour l'instant, on a juste un bouton qui nous permet de supprimer le panier.On va rajouter en premier lieu un bouton qui va nous permettre de procéder au paiement.
00:00:52 :Pour ça, je vais retourner dans le fichier cartes.html qui est le fichier dans lequel on a notre panier.Dans store template, on va aller dans le fichier cartes.html.
00:01:02 :Et juste avant le bouton supprimer le panier, on va rajouter un bouton qui va nous permettre de procéder au paiement.On va mettre tout simplement procéder au paiement.
00:01:11 :Ce bouton, on va devoir l'inclure à l'intérieur d'un formulaire.Je vais faire un tag form ici.Et dans l'action ici, on va mettre une URL que l'on n'a pas encore créée et qu'on va créer tout de suite après.
00:01:21 :Qui va être l'URL qui va rediriger vers la vue qui va faire la session de paiement avec Stripe.Donc on va mettre URL et entre guillemets ici, on va mettre le nom de l'URL.
00:01:30 :On va l'appeler createCheckoutSession comme ceci.Et pour la méthode du formulaire, on va mettre une requête de type post.On prend notre tag de fin ici, form, et on le met après notre bouton.
00:01:43 :Et le bouton, ça va être un bouton de type submit.Donc il va soumettre le formulaire.Donc je mets l'attribut type ici qui va être égal à submit.
00:01:51 :Donc ça, ça va nous permettre de rediriger vers cette vue avec une méthode post.Et on va tout de suite créer l'URL et la vue correspondante.
00:01:58 :Donc dans notre fichier d'URL, dans Shop ici, dans urls.py, on va ajouter une URL qui va aller pointer vers une vue que l'on n'a pas encore créée mais qu'on va créer tout de suite après.
00:02:07 :Donc je vais dupliquer cette ligne carte ici.On va faire une URL qui va s'appeler createCheckoutSession.On va créer une vue qu'on va appeler donc createCheckoutSession qui, pour l'instant, n'existe pas.
00:02:18 :Et dans le nom, on va mettre le même nom que ce qu'on avait mis dans notre fichier HTML, donc createCheckoutSession.On va maintenant aller créer cette fonction dans notre fichier de vue.
00:02:28 :Donc dans DocshopStoreViews.py.Et on va créer cette vue, par exemple, juste après le carte.Donc ici, on va faire notre vue createCheckoutSession qui va récupérer l'objet request.
00:02:40 :Pour l'instant, on va juste mettre un passe et on va retourner dans notre fichier d'URL pour aller importer cette vue.Donc cette vue qui se trouve dans Store.views, on met une virgule et on importe la vue en question.
00:02:50 :Donc on a bien le chemin complet entre le bouton et l'URL ici, qui est cette URL qui va rediriger vers la vue createCheckoutSession.Et on va ensuite arriver à l'intérieur de cette fonction.
00:03:01 :Donc les différentes étapes que je vais vous montrer, elles peuvent évoluer.Là, on est le 5 novembre 2021.Et de plus en plus, je trouve que ce processus de checkout avec Stripe est de plus en plus simple.
00:03:11 :Avant, il y avait pas mal de choses à faire en plus.Il fallait utiliser du JavaScript notamment.Et dans les dernières versions de ce checkout, on peut tout faire avec notre formulaire et récupérer les informations de notre côté en Python avec la vue qu'on vient de créer.
00:03:24 :Donc si vous voulez voir cette documentation, vous pouvez aller dans les documentations de Stripe et vous tapez tout simplement StripeCheckout.Et c'est cette page sur laquelle je me trouve qui contient toutes les étapes qu'on va voir ensemble.
00:03:35 :Donc nous, les étapes que l'on va voir, c'est des étapes qui permettent d'accepter un paiement.On a plusieurs choses qu'on peut faire.En fait, on peut faire aussi des subscriptions, donc des abonnements qui peuvent être gérés avec Stripe.
00:03:45 :Dans notre cas, on va juste gérer un paiement unique.Donc c'est ce premier cas de figure.Et les instructions qui sont sur cette page vont nous permettre d'avoir cette page de produits.
00:03:53 :Donc je vais l'ouvrir en grand ici.Voilà, on va avoir une page de ce style qui va nous permettre d'accéder à une page avec un formulaire de paiement pour payer le produit de notre boutique.
00:04:04 :Et je tiens à vous dire que toutes ces informations ici sont disponibles pour différents langages.Nous, c'est Python qui nous intéresse.Donc à chaque fois, il se peut que vous ayez la documentation qui, par défaut, soit sur Ruby, par exemple.
00:04:15 :Donc si vous voulez revoir cette documentation de votre côté, assurez-vous de bien choisir le langage qui vous intéresse.Dans ce cas-ci, Python.Donc nous, on a déjà fait ces étapes ici.
00:04:23 :On a installé Stripe.On a ajouté un bouton qui nous permet de rediriger vers la vue.Donc vous voyez cette vue Create Checkout Session.J'ai tout simplement utilisé le même nom que dans la documentation.
00:04:33 :Et ensuite, nous, on est rendus à cette étape ici.Alors cette étape, vous voyez qu'ils utilisent Flask dans la documentation.Mais le principe est le même que ce soit pour Flask ou pour Django ou même un autre framework.
00:04:44 :Donc la première chose à faire, c'est de récupérer la clé d'API.Donc la clé qu'on a mise dans le fichier de settings.Et de le mettre dans cette variable stripe.api.key.
00:04:53 :Donc je vais copier cette variable ici.On va retourner dans notre fichier Python.Et on va la mettre tout au-dessus ici.Et cette clé, donc, va être égale à ce qu'on avait à l'intérieur des settings.
00:05:03 :Donc on va devoir importer le fichier de settings.Donc je vais faire option entrée ici pour aller importer shop.settings.Et ici, on va mettre notre variable stripe.api.key.
00:05:12 :On va également devoir importer Stripe.Donc là, je vais faire pareil.Option entrée sur Stripe ici.Et import Stripe.Donc ça, c'est le package qu'on avait installé précédemment.
00:05:21 :Qui va nous permettre de créer la session de paiement.Donc je vais descendre ensuite à l'intérieur de ma vue.Create checkout session.Et on va tout simplement, là encore, copier tout ce qu'on a ici.
00:05:31 :Et je vais vous expliquer ce qui se passe avec ce code.Donc je supprime mon pass.Je mets tout le code ici.Là, vous voyez qu'on utilise encore une fois le module Stripe.
00:05:40 :Et ce qu'on va faire ici, c'est créer un objet de type session.Donc on va initier une session de paiement.Et pour l'instant, vous voyez qu'on a différentes choses qui sont déjà définies.
00:05:48 :En premier, on a le type de paiement.Donc un paiement par carte.Et ensuite, on va voir ce qui est appelé des line items.Donc ça en fait, c'est les éléments que vous voulez afficher dans la vue de paiement.
00:05:59 :Donc pour l'instant, c'est des informations par défaut.Vous voyez qu'on a ici la devise en USD.On a le nom du produit.Et on a le prix.
00:06:06 :Alors le prix ici, il faut savoir que c'est multiplié par 100.En fait, les prix sur Stripe sont des nombres entiers.Donc là, on a 2000.
00:06:13 :Et en fait, 2000, ça représente 20 euros.Donc vous n'avez pas de nombre à virgule.Vous n'avez pas 20,0.Vous avez 2000 qui correspondent à 20 euros.
00:06:21 :Et on a ici, pour finir, la quantité.On a également deux URL qu'on va devoir changer.La première URL, c'est l'URL vers laquelle on va être redirigé en cas de paiement réussi.
00:06:31 :Donc une URL qui va tout simplement afficher une page en vous indiquant que le paiement a été réussi.Vous pouvez maintenant avoir accès soit à un abonnement, si c'est un abonnement que vous souhaitez proposer.
00:06:42 :Soit que vos produits, par exemple, ont été livrés.Donc ça, ça va être notre cas de figure.On va pouvoir afficher une page à l'utilisateur qui va dire que sa commande a bien été effectuée.
00:06:50 :Et Cancel URL, c'est une URL vers laquelle on va être redirigé si on souhaite partir de la vue de paiement de Stripe.Donc quand on va revenir en arrière, en fait, on va être redirigé vers cette URL.
00:07:01 :Également, dans notre formulaire, on ne l'a pas mis pour l'instant, mais on va devoir ajouter un jeton CSRF.Donc avec cette balise CSRF-token.Donc ça, c'est un jeton de sécurité qui permet de s'assurer que la requête n'a pas été modifiée en cours de route.
00:07:14 :Et pour l'instant, juste pour pouvoir tester notre vue, on va mettre des URL qui vont être basiques.On va mettre 127.0.0.1, 2.8000.Donc ça, c'est l'adresse de notre site.
00:07:25 :Et on va juste mettre la page d'index comme ceci.On va mettre juste HTTP devant, donc HTTP://.Et on va mettre pareil pour la vue de Cancel.
00:07:35 :Donc normalement, on a tout qui est bon.On a notre bouton avec le formulaire qui va rediriger vers cette vue.Dans cette vue, pour l'instant, on va juste créer une session vers laquelle on va rediriger.
00:07:45 :Puisque là, vous voyez qu'à la fin, on fait une redirection avec cette fonction redirect.Donc si elle n'est pas importée, il faut l'importer tout en haut de votre fichier.
00:07:53 :Elle est à l'intérieur de Django.shortcut.Et ça va nous rediriger vers la session Stripe.Donc on va tester ça tout de suite.Vous voyez qu'ici, on a un code 303 qui est un code de redirection.
00:08:05 :Donc on va tester tout ça sur notre site avec, pour l'instant, 7 objets par défaut.Et on va vérifier que tout fonctionne.Donc je reviens sur ma boutique.
00:08:12 :Je vais aller sur le panier.Et là, on a bien notre bouton Procéder au paiement.Je clique dessus.Et vous allez voir qu'on va être redirigé vers Stripe.
00:08:20 :Donc on voit dans l'URL checkout.stripe.com.Et on a cette interface ici qui nous indique le produit que l'on souhaite acheter.Donc qui est le produit par défaut qu'on avait dans notre vue avec le t-shirt à 20$.
00:08:31 :Et ici, on peut rentrer nos informations.Donc l'email, l'information de la carte de crédit, l'endroit depuis lequel on achète.Et ensuite, on peut payer.Et si je reviens ici sur Back, c'est ce fameux Cancel URL.
00:08:44 :Donc quand on clique sur le bouton Back, on va être redirigé vers l'URL qu'on a mis dans Cancel URL.Et si je procède au paiement, on va être redirigé vers la vue dans Success URL.
00:08:52 :Si le paiement est correct.Donc là, si je clique sur Retour, on revient vers la vue d'accueil.Et dernière chose, je veux vous montrer qu'on peut changer, bien entendu, la langue du Stripe Checkout.
00:09:02 :Puisque pour l'instant, on est en anglais.Donc pour changer la langue de cette interface, on va tout simplement revenir dans notre vue.Et rajouter dans les options qui sont passées à cette fonction Session Create.
00:09:13 :Donc on va rajouter ce paramètre tout en haut ici.Et ce paramètre, il s'appelle Local.Et on va le mettre à FR.Donc la chaîne de caractère FR.
00:09:21 :Il ne faut pas oublier, bien sûr, la virgule.Et donc ça, ça permet de dire qu'on veut localiser notre session pour la France.Donc avec le langage français.
00:09:29 :Donc si je reviens sur mon site, que je fais Retour ici.Je vais retourner sur le panier.Et si je clique sur Procéder au paiement, vous allez voir que cette fois-ci, on va avoir une interface en français.
00:09:39 :Voilà, donc payé par carte, e-mail, information de la carte, etc.Donc voilà pour le chemin de base entre le bouton, l'URL et la vue.Qui nous permet d'accéder à cette vue de Checkout de Stripe.
00:09:49 :Et dans les prochaines parties, on va voir comment on peut cette fois-ci passer les informations de notre panier.Pour ne pas avoir ici le t-shirt par défaut.

Créer la vue pour la session de paiement

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Salvatore

runserver

Yannick Ferenczi

Import de settings

Prérequis

Rechercher sur le site