Créer un site e-commerce avec Django

00:00:00 :Maintenant qu'on a rajouté le webhook de Stripe dans notre fichier views.py,avec toutes les notions de sécurité pour s'assurer qu'on est bien en présence d'un événement envoyé par Stripe,on va pouvoir, après ce try except ici, qui nous assure que l'événement est correctement récupéré dans cette variable,on va pouvoir faire une vérification, vérifier le type d'événement qu'on a récupéré,
00:00:24 :et en fonction du type d'événement, le traiter d'une façon ou d'une autre.Nous, ce qu'on va vouloir récupérer comme événement, c'est l'événement checkout.session.completed,qui indique qu'une session de checkout de Stripe est arrivée à son terme,que le client a été créé, que le paiement a été accepté, etc.
00:00:42 :On va vérifier si event, qui est tout simplement un dictionnaire,et dans ce dictionnaire on va avoir type, donc la clé type,qui va correspondre au type d'événement qu'on va récupérer.
00:00:55 :Donc si le type d'événement c'est checkout.session.completed,on va tout simplement compléter le panier de l'utilisateur,donc on va faire une fonction ici qu'on va appeler par exemple completeOrder,et on va récupérer dans cette fonction l'élément qu'on va récupérer de notre objet event.
00:01:10 :Donc dans event, on a un objet qui va contenir par exemple l'adresse mail de l'utilisateur,les produits qu'il a acheté, etc.Et donc ça c'est dans event, et on a une clé data,et dans cette clé data, on a une clé object.
00:01:23 :Donc je vais mettre tout ça dans une variable que je vais appeler data, tout simplement,et on va retourner l'appel à notre fonction,donc on va faire notre fonction completeOrder,et on va lui passer cet objet data.
00:01:34 :Donc je vais mettre un paramètre ici que je vais également appeler data,et à l'intérieur de cette fonction, on va traiter en fait ces données,donc on va récupérer l'utilisateur sur notre site,donc l'objet utilisateur, récupérer son panier,et tout simplement dire que le panier a été correctement complété,
00:01:50 :puisque sur notre modèle de panier, si je retourne, je crois que c'est dans models ici,si on va voir notre modèle de panier,on a un booléen order qui va indiquer si le panier a été commandé ou non,et order date qui va indiquer la date à laquelle la commande a été passée.
00:02:04 :Donc on va pouvoir modifier ces deux éléments pour dire que le panier a été ordered,donc on va passer ce booléen à true,et on va également prendre la date au moment où l'événement est envoyé,pour le mettre dans ce champ.
00:02:15 :Donc je vais revenir dans views ici,pour l'instant on va juste faire ici un pprint de data,donc je vais importer pprint puisque c'est un module qui n'est pas importé de base,donc pprint c'est juste en fait une façon de faire un print qui va être un peu plus sympathique à l'écran,
00:02:30 :donc qu'est-ce que je veux dire par sympathique,c'est tout simplement qu'un print normal ça va tout mettre sur la même ligne,alors que pprint, là vu qu'on va avoir un objet assez important,donc un dictionnaire,et bien pprint ça va l'afficher d'une façon un peu plus lisible.
00:02:42 :Donc c'est un module qu'il faut importer,qui est disponible dans la bibliothèque standard de Python,donc il suffit juste de l'importer,et donc on va pouvoir afficher ces données,dans le cas où on a un checkout session completed.
00:02:52 :Et pour m'assurer que tout est bon,je vais quand même relancer le webbook,donc je l'ai arrêté, je le relance,juste pour m'assurer que tout est bien comme il faut avec le token ici,donc je vais le recopier,comme ça on est sûr qu'on n'a pas de problème,je vais le remettre ici,
00:03:07 :on va voir si c'est le même ou pas,et là vous voyez donc c'est le même endpoint secret,donc normalement vous ne devrez pas avoir à le changer à chaque fois,mais voilà je préfère arrêter,et être sûr ici que je n'ai pas les anciens événements,comme ça on verra bien les événements qui sont récupérés par le webbook.
00:03:21 :Alors je devais refaire un cycle d'achat sur le site,donc je vais me connecter avec mon utilisateur,on va aller voir dans le panier,et on va procéder au paiement.
00:03:31 :Donc on va être redirigé vers Stripe Checkout,on va rentrer les informations de notre compte,on va passer les informations de la carte par défaut,et le titulaire de la carte,et le pays,France,et on procède au paiement.
00:03:47 :On va retourner voir ici,on voit bien qu'on a différents événements qui ont été récupérés,et on a le Checkout Session Completed ici,qui a une erreur de 500,donc c'est normal parce qu'en fait on n'a rien retourné,alors on va retourner voir dans le terminal ici,et vous voyez en fait que le problème c'est que,
00:04:04 :cette fonction ici Complete Order,elle ne retourne pas un objet de type HTTP,un objet de type HTTP Response.Contrairement à tous les autres,vous voyez ici soit on retournait un code d'erreur 400,si la requête n'était pas valide,soit ici on retournait un statut 200.
00:04:19 :Donc ça c'était pour tous les autres types d'événements,ça permet de bien voir que,dans le cas d'un autre type d'événement que Checkout Session Completed,et bien on ne passait pas dans cette structure conditionnelle,et on retournait tout simplement,un HTTP Response statut 200.
00:04:31 :Quand on a un Checkout Session Completed,ici on faisait juste un pprint de data,et on ne retournait pas de HTTP Response,et c'est ça qui fait qu'on a cette erreur 500 ici.
00:04:39 :Nous ce qui nous intéressait,c'était juste de voir les données qui nous sont envoyées,et là vous voyez qu'on a pas mal de choses,donc c'est ça l'intérêt comme je vous disais du pprint,quand on doit afficher ce genre d'informations.
00:04:48 :Donc on voit par exemple le total qui a été payé,on voit le Console URL,donc il y a pas mal de choses ici.On a également l'identifiant unique du Customer,donc Customer c'est le client du côté de Stripe,et on a les détails du Customer,donc avec l'email hello.docstring.fr.
00:05:04 :Alors dans notre cas,ce qui va nous intéresser c'est l'email ici,donc on va devoir accéder à cette clé Customer Detail,et à cette clé Email,à l'intérieur de ce nouveau dictionnaire,et c'est ça qui va nous permettre de récupérer l'utilisateur sur notre site.
00:05:16 :Alors dans ce cas-ci,ce n'est pas forcément la bonne façon de faire,ce que je veux dire par là,c'est qu'en fait,si vous l'avez remarqué,quand je vais dans le panier et que je procède au paiement,on me demande de rentrer mon adresse Email.
00:05:26 :Alors cette adresse Email,on pourrait la passer quand on fait la vue de Checkout,quand on va dans notre vue ici,si je remonte dans Session Create,ici on pourrait passer déjà une adresse Email,comme ça,l'utilisateur n'aurait pas à remplir et à utiliser une adresse Email qui pourrait être différente,
00:05:41 :parce que là le problème dans ce cas-ci,c'est que quelqu'un pourrait mettre une autre adresse Email que celle qu'il a utilisée pour son compte.Et dans ce cas-ci,ce qu'on va faire tout de suite en récupérant l'adresse Email,ça ne fonctionnerait pas.
00:05:51 :Donc là, il y a plein de façons de faire différentes,ce qui serait intéressant de faire,notamment,ce serait de récupérer cet événement Customer Created,pour pouvoir,quand un client est créé du côté de Stripe,le récupérer,donc récupérer cet identifiant ici,et le lier à notre modèle d'utilisateur.
00:06:05 :Donc dans notre modèle d'utilisateur,de la même façon qu'on avait créé un champ pour récupérer le Product ID de Stripe sur notre modèle de produit,eh bien,on pourrait créer un champ dans notre modèle d'utilisateur qui ferait le lien entre le client sur Stripe et l'utilisateur sur notre site.
00:06:20 :Comme ça,on ne serait pas dépendant de l'adresse Email qui peut être différente si on utilise une autre adresse Email au moment du paiement.Eh bien là,on n'aurait en fait pas de problème.
00:06:28 :Donc dans ce cas-ci,c'est vraiment juste pour vous montrer le webbook et vous montrer qu'on va donc tout simplement récupérer l'utilisateur par rapport à son adresse Email.
00:06:35 :Et après, bien sûr,chaque cas de figure est différent en fonction de votre site.Si vous vous passez par des adresses Email,par des pseudos,si vous avez d'autres informations dont vous avez besoin,eh bien là,il va falloir passer ces informations,donc les récupérer d'un côté ou de l'autre.
00:06:47 :Donc,chaque cas de figure est différent.Là,je veux juste vous montrer vraiment ce processus de webbook.Donc,ce qu'on va faire ici,c'est récupérer à partir de cette clé Data,comme je vous le disais,les deux clés,donc la clé Customer Detail et la clé Email.
00:07:00 :Donc ici,on va essayer de récupérer l'email de l'utilisateur.Donc,la première clé,c'était Customer Detail et la deuxième clé,c'était Email.Donc là,je fais un bloc Try Except parce que si jamais,en fait,on a des données qui ne sont pas valides pour une raison ou une autre,
00:07:17 :on pourrait avoir à la fin de cette,dans cette fonction ici,on pourrait avoir un objet qui n'est pas forcément,qui ne contient pas forcément les mêmes données.
00:07:24 :Donc là,ça pourrait être la même chose ici.Vous voyez qu'on a récupéré Data Object,donc quand on fait des clés comme ça directement,si ces clés n'existent pas,je n'ai pas fait de Try Except.
00:07:32 :Là encore,c'est plus de la gestion d'erreur que du Webhook,donc je ne vais pas passer trop de temps là-dessus,mais je veux juste vous montrer,voilà,qu'il faut des fois,quand même,mettre un minimum.
00:07:42 :Par exemple,ici,donc je vais essayer de récupérer ces deux clés ici,Customer Detail et Email.Et si jamais,on a un Key Error,donc ça veut dire que les clés n'ont pas été trouvées dans le dictionnaire,eh bien,on va retourner un HTTP Response en disant,par exemple,
00:07:57 :Invalid User Email et on va mettre un statut de 404 dans ce cas-ci.Par contre,le User Email,on va pouvoir récupérer l'utilisateur sur notre site avec la fonction GetObjectOr404.
00:08:06 :Donc,on va,à partir de notre classe Shopper qu'on n'a pas importé,donc Shopper,c'est le modèle de notre utilisateur.Si je retourne dans Accounts ici,dans les Models,on a notre classe Shopper qui correspond au modèle d'utilisateur.
00:08:19 :Donc,je vais l'importer avec PyCharm,ImportAccounts.Model,voilà,et on va lui passer en Email,le User Email.Ensuite,on va récupérer le panier avec User.Cart,
00:08:30 :on va changer ce champ Order pour lui dire qu'il est égal à True,ce qui signifie que la commande a été passée sur ce panier et on va aussi modifier le deuxième champ que je vous avais montré dans Store.Model ici
00:08:41 :qui est OrderDate.Lui,on va devoir lui donner un DateTimeField et pour ça,on va utiliser un module de Django qui s'appelle TimeZone.Là encore,on va devoir l'importer,ImportThisName et ce module,c'est Django.Utils.TimeZone
00:08:54 :et TimeZone,on a une méthode Now et ça,ça va nous permettre tout simplement de récupérer la date et l'heure au moment où on utilise cette ligne de code pour pouvoir l'injecter dans le champ OrderDate.
00:09:05 :On va dire OrderDate égale TimeZone.Now et ensuite,on sauve le panier tout simplement User.Cart.Save et pour finir,on va retourner un HTTP Response avec un statut de 200.
00:09:16 :Comme ça,on aura bien renvoyé ici non pas un 500 comme on avait mais on va indiquer que le paiement a été correctement processé de notre côté sur notre site web.
00:09:26 :On va retester tout ça,on va refaire une boucle de paiement,je vais revenir sur le site,on va cliquer sur voir le panier et on va tout de suite également rajouter pour s'assurer que ça fonctionne bien dans mon modèle.
00:09:37 :Ce n'est pas dans le cart,ça doit être dans le modèle de base.Je vais rouvrir dans Shop ou dans Template.Ici,on a le base.html
00:09:45 :et dans ce fichier ici,vous voyez qu'on affiche s'il y a un panier,on affiche le bouton voir le panier.Je vais rajouter if User.Cart
00:09:53 :and cart and not User.Cart User.Cart .Ordered Ça veut dire qu'on ne va afficher ici cet élément que si l'utilisateur a un panier et s'il n'a pas déjà été commandé.
00:10:05 :Et si par contre le panier a déjà été commandé,on n'affichera pas ce lien.Ça va nous permettre de vérifier que le processus se déroule correctement et que quand on arrive à la fin du processus de paiement,quand on revient sur notre site,le panier a bien été enregistré
00:10:19 :et qu'on ne voit plus ce bouton.Je vais cliquer ici sur voir le panier.On va procéder au paiement en cliquant sur procéder au paiement ici.
00:10:26 :Si je reviens dans l'interface d'administration,si je veux voir le panier en question,pour l'instant vous voyez que Ordered n'est pas coché et qu'on n'a aucune date pour le OrderDate.
00:10:36 :Donc on va procéder au paiement.Je vais remettre le mail ici.Donc comme je vous disais,la seule contrainte,c'est qu'on est obligé ici d'utiliser la même adresse email que celle qu'on a enregistrée pour le modèle utilisateur pour que l'utilisateur soit bien récupéré et qu'on puisse valider son panier.
00:10:52 :Donc je fais toutes les opérations ici.Ça marcherait de la même façon et on va mettre payer.Et donc normalement si tout se déroule correctement,je vais retourner voir ici.
00:11:04 :On a bien le ChargeSucceeded,CheckoutSessionCompleted.Donc on a bien le statut de 200.Je reviens sur le site et là vous voyez qu'on n'a plus ce bouton qui indiquait voir le panier.
00:11:15 :Si je retourne dans la vue d'administration,là vous voyez que tout a bien été enregistré.Donc on a le OrderDate qui s'est mis à jour et vous voyez d'ailleurs par la même occasion à l'heure où j'enregistre cette vidéo,il est 10h30 le 6 novembre.
00:11:29 :Donc moi je suis à Montréal au moment où j'enregistre cette vidéo et on a une petite note ici qui dit votre heure précède l'heure du serveur de 4 heures.
00:11:37 :Donc en fait ici on a une date qui est enregistrée au format UTC.Donc UTC c'est le temps universel.Donc en fait ça c'est la bonne façon de faire.
00:11:46 :Vous allez stocker toutes les dates dans votre base de données avec une heure qui va être en UTC donc qui n'est pas dépendante de l'utilisateur.
00:11:53 :Et bien là vous avez des fonctions notamment des filtres que vous pouvez utiliser dans le fichier HTML qui vont vous permettre d'ajuster le fuseau horaire de l'utilisateur.
00:12:02 :Donc comme ça on pourrait par exemple imaginer qu'on va demander dans le profil de l'utilisateur sur quel fuseau horaire il se trouve.Donc on pourrait dire par exemple dans mon cas que je suis sur le fuseau horaire d'Amérique du Nord à Montréal et comme ça en fait dans le template
00:12:15 :on prendrait cette heure en UTC et on me l'afficherait dans mon fuseau horaire local.Donc vous voyez que les informations ont bien été modifiées et que notre webbook est allé jusqu'à son terme.

Compléter la transaction

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Fred

Erreur dans la vidéo sur le modèle Cart

Gabriel Trouvé

Est-ce que j'ai bien fait ?

Christian Aucane

envoyer l'email a stripe

Thibaut44300

Status 404 dans le webhook de stripe

Prérequis

Rechercher sur le site