Paiements Stripe avec PHP

1. Introduction: Bienvenue dans cette classe sur l'intégration des paiements de grève avec PHP. Authentification client sécurisée bien couverte , paiements récurrents , paiements portefeuilles numériques sur plus pour commencer. Vous voulez télécharger cet ensemble d'instructions et vous assurer que vous avez gagné PHP localement , puis télécharger l'exemple de code qui passera à travers cette classe. Commençons. 2. Comment fonctionne ?: dans cette leçon va regarder un aperçu de la façon dont la bande fonctionne, sorte que vous êtes probablement déjà familier avec la bande. Mais c'est l'un des plus grands processus de paiement au monde. Vous permet de prendre des cartes de crédit et de débit et des modes de paiement supérieurs sur votre site Web. Il est disponible en Amérique du Nord, Europe, certains pays d'Asie de l'Est, et ils continuent de se développer. Et il est utilisé par des sites Web, y compris la réservation de points com sur le drame, la livraison de mous , l'UNICEF, des tas de grandes entreprises internationales et des fournisseurs de grève avec un tas d'outils pour notre site Web. Donc ils ont le A p I, avec lequel nous interagissons à l'arrière. Ils ont un chèque de grève, qui est entièrement hébergé. Découvrez la solution sur leur plateforme. Donc, vous les envoyez juste à stripe et puis ils reviennent ont frappé Js, qui est la bibliothèque frontale de script Java qui fait toute la magie se produire. Et puis nous avons des éléments de bande qui sont des composants pré-construits que vous pouvez insérer dans votre site Web pour vous faciliter la vie. Nous allons regarder tout cela tout au long de ce cours, donc il y a deux flux principaux que vous utiliseriez vont commencer le premier est une sortie de piste , puis dans ce cas. Ce qui se passe, c'est que nous construisons une session contenant notre panier. Donc tout ce que nous avons sur notre panier, nous envoyons un message à bande disant que nous allons vous envoyer un client qui a toutes ces choses dans le panier. Ensuite, nous utilisons stripes script Java pour envoyer réellement l'utilisateur à cette page sur le site Web rayé à compléter, mettant leurs détails de carte incomplets, puis grève redirige l'utilisation de retour à notre site Web après que le paiement est terminé. Alors pensez à ceci est comme cela fonctionne le papal. Lorsque vous souhaitez effectuer un paiement, vous envoyez l'utilisateur à PayPal. Ils font le paiement qui revient. Tout est hébergé par bande, donc il y a très peu de choses à faire. Il est facile et rapide de se mettre en place sur toutes les nouvelles fonctionnalités striper déployant le automatiquement relatif à la caisse. Maintenant, le second flux, que j'ai appelé le flux de jazz stripe. Bien que nous ayons effectivement utilisé la bibliothèque Javascript de grève dans les deux flux. Mais dans celui-ci tout est hébergé sur notre site Web. Alors, comment pouvons-nous faire cela sans faire de notre site PC ? Je suis conforme parce que tout se passe avec les scripts Java de l'utilisateur insère que les détails de carte de crédit dans ce qui est notre page Web, mais qui n'est jamais posté au back-end qui est envoyé via le script Java aux serveurs stripe pour effectuer le paiement. Donc, le flux ici est que nous construisons une page de contrôle sur notre propre site Web sur. Nous aurions probablement mis un champ de carte de crédit là-dedans en utilisant des éléments de bande de pré-construit, vraiment belles choses qui arriveront à plus tard. Et puis lorsque l'utilisateur met les détails de leur carte de crédit dans la bande, bibliothèque Js envoie leurs détails de carte de crédit aux serveurs stripe pour dire, Voici les détails de la carte. Nous voulons effectuer un paiement ici, au cours duquel Point Stripe autorisera cette carte et nous renverra un jeton. Ce n'est qu'une chaîne de chiffres et de lettres que nous pouvons ensuite utiliser pour traiter ce paiement. Donc, une fois que nous avons récupéré ce jeton, alors nous pouvons soumettre le formulaire de paiement utilisateur sur notre propre site Web. pas tenir compte du fait que les détails de la carte de crédit n'ont jamais été sauvegardés sur notre serveur parce que nous ne voulons pas que les problèmes de conformité PC I soient pris en compte. Tout ce dont nous avons besoin est ce jeton que lorsque l'utilisateur revient à notre backend, Nous envoyons ensuite pour frapper une demande P I A sur notre backend disant que c'est combien nous voulons construire l'utilisateur. Et voici notre jeton pour dire sur quelle carte de crédit nous voulions construire ces deux flux disponibles, et nous allons les regarder tous les deux dans ce cours, commençant par vérifier et ensuite passer à l'intégration plus profonde, Alors commençons. 3. Cloner le git repo: pour ce projet. J' ai créé un exemple de peur de code. Donc, cela vous permettra de commencer et vous pouvez facilement cloner ceci. Alors c'est sur. Obtenez de l'espoir sur son appelé Bookshop PHP. Je vais mettre cet u R l dans la section des ressources, mais vous avez juste besoin d'aller ici et même attraper le clone git. Ou vous pouvez également télécharger le zip. Si c'est facile pour vous sur leur et quelque part sur votre ordinateur, vous voulez juste être soufflé pâteux. Vous êtes vraiment sur ce qui va télécharger tout l'exemple de code dont vous avez besoin une fois que vous êtes parti, que nous devons faire est d'exécuter une installation de compositeur et je vais juste prendre un moment sur ce magasin de terrain . Toute la dépendance dont nous avons besoin, comme un projet normal de Petri. Une fois que nous avons fait cela, nous avons tout ce dont nous avons besoin pour commencer et en supposant que nous avons le cli symphonique que nous pouvons obtenir de Symphony Service start et cela démarrera les symphonies, serveur Web interne. Ça a l'air bien. Ensuite, on peut aller à l'hôte local de Teoh 8000 et ici on a l'exemple de projet de courir. Donc nous avons tous ces livres, nous pouvons ajouter un panier de librairie dont ils apparaissent ici, avec un petit panier. On peut vider ça et redonner à la maison pour l'âge. Nous pouvons recommencer à ajouter des livres. Qui a le système de base ? Et en plus de cela, nous pouvons construire notre processus de paiement et de paiement. Alors téléchargez l'exemple de code. Sortez de courir, puis nous passerons à la leçon suivante. 4. Enregistrer un compte Stripe: La prochaine chose que vous voulez faire est prêt à moi. Un compte stripe a dit. Pour ce faire, juste une grève. Mais venez et appuyez sur le bouton Démarrer maintenant, puis remplissez simplement tous vos détails. Vous pouvez même configurer en tant que société si vous avez enregistré des objets de société. En tant qu'individu, techniquement, vous n'avez pas besoin d'un compte stripe. Si vous configurez cela pour le compte de quelqu'un d'autre, vous pouvez utiliser son compte stripe, et vous n'avez même pas besoin d'y accéder tant qu'ils vous donneront les bonnes clés. Mais il aide certainement orteil en avoir un, parce que alors vous pouvez vérifier tout ce que nous faisons et voir les transactions passer par bande. Une fois que vous n'avez rien de pétoncle, vous devriez accéder au tableau de bord sur. C' est tout ce dont nous avons besoin pour l'instant. Alors couvrons tout le reste dans la prochaine leçon. 5. Accéder à vos touches API: Une fois que vous êtes dans votre compte stripe, alors vous devrez obtenir vos clés A P I pour le faire. On peut aller à ce Développeurs sur une touche P I ici. C' est notre clé publique ici qui inclura sur le front. Et nous avons aussi la clé secrète sur laquelle l'Egypte a frappé ce bouton révélateur qui vous donnera une clé privée que nous utilisons à l'arrière. Maintenant, lorsque vous faites cela, vous voulez vous assurer que vous avez activé ces données de tâche de visualisation parce que nous allons vouloir utiliser nos clés de vie dans la vie, évidemment. Mais à des fins de développement, tol heures pour savoir, effectivement traiter tous les paiements et utiliser le test de frappe Les gardes voudront utiliser les données de test , alors assurez-vous que vous prenez ces clés de test P I. Si vous utilisez le compte stripe de quelqu'un d'autre, vous pouvez simplement les faire sortir pour vous. Par cela, je vous recommande d'avoir votre propre compte qu'il conteste parce que et vous pouvez voir les transactions à venir par 6. Installer la bibliothèque de Stripe: pour l'utiliser hors de la bande. AP J'aurai besoin d'obtenir la bande A p I code Onda nous pouvons facilement se lever de paquet ist. Il va juste frapper slash stripe PHP ? Non. Dans l'exemple de code que je vous ai donné ici, il est déjà inclus. Donc, si nous passons aux paquets, nous avons déjà installé la bibliothèque droite. Mais si vous travaillez sur votre nouveau projet, votre propre projet, il a juste besoin de gérer l'installation du compositeur sur ce paquet PHP grève et cela vous donnera ou la fonctionnalité A p I que nous allons utiliser tout au long de ce cours. 7. Cartes d'essai Stripe: autre chose qui serait super utile orteil ont que nous passons par ce cours est quelques cartes de test. Donc, quand nous testons les paiements, nous ne voulons pas utiliser nos vraies cartes de crédit sur le fournisseur de grève. Siri est hors cartes de test, que nous venons de Google frapper cartes de test, est le moyen le plus simple de le trouver. Sous cette section de test, nous avons plein de cartes différentes. Donc, voici un tas d'exemples de tous les différents fournisseurs de cartes ont également obtenu des cartes internationales , et quand nous allons voir un paiement, il y a des cartes pour tester cela aussi. C' est donc génial d'avoir ces documents à portée de main. En outre, si vous utilisez un système de gestion hors carte, même votre navigateur ou votre gestionnaire de mots de passe, vous pouvez même installer une de ces cartes dans. C' est ce que je fais. Et puis je laisse juste ça le remplir à chaque fois, tout pour l'utiliser comme des cartes. Alors gardez cette page à portée de main. Sachez juste que ces cartes sont disponibles. Pourrions-nous les utiliser plus tard 8. Utiliser le code: au fur et à mesure, nous créerons tout le code dont nous avons besoin ensemble. Mais si vous préférez simplement regarder les vidéos, puis coder plus tard et que vous ne voulez pas avoir à interrompre constamment la vidéo et à taper un peu, ou juste vous arrivez à la fin d'un projet et quelque chose ne fonctionne pas tout à fait, alors tout le code que nous allons créer est déjà dans le dépôt get que vous avez donné. Donc on va à la racine ici. Dans ce dossier Exemples, vous pouvez trouver tous les assistants et modèles du contrôleur que nous allons créer ensemble déjà dans leur forme finie. Donc, si vous obtenez quelque chose et que cela ne fonctionne pas, alors un bon endroit pour aller star est juste de le comparer à ce qui est dans les exemples. Une fois que vous les aurez clonés, ceux-ci seront également disponibles localement. Donc, dans les exemples, quelque chose ne fonctionne pas tout à fait. Il suffit d'afficher le code, et vous pouvez le comparer à ce que vous avez fait sur D. C. Espérons résoudre les problèmes et voir où le problème est 9. Vérification rayée: dans ce module. Nous allons intégrer avec un chèque rayé. Donc juste Teoh récapituler Qu'est-ce que la grève check out est tout au sujet c'est qu'il s'agit d'une page de départ hébergée par Stripes ou similaire à PayPal. Nous allons envoyer l'utilisateur à stripe avec un tas de variables pour leur dire combien nous voulons facturer. Ils vont prendre le paiement du client et les renvoyer. Si vous voulez aller directement dans une intégration complète avec grève partout où les choses conservées sur notre site, alors n'hésitez pas à sauter ce module. Mais si vous voulez voir comment cela fonctionne d'abord, alors pour continuer donc le flux est que nous allons construire une session contenant le panier des utilisateurs sur . On va envoyer ça à la bande à l'arrière. Nous allons ensuite récupérer le jeton de stripe et l'utiliser pour rediriger l'utilisateur vers la page de départ sur des bandes afin que la grève sache qui ils sont et ce que nous devrions leur montrer . Strike va alors prendre le paiement et rediriger l'utilisateur vers notre site Web, à ce moment, nous pouvons dire une sorte de page complète de commande. Alors commençons à implémenter cette 10. Créer une session de contrôle: Commençons par créer ce chèque afin que nous puissions voler ce code du contrôleur de panier et créer un nouveau contrôleur appelé Check out Control. Et nous aurons cette fonction de vérification mappée. Le contrôle de votre tout et nous allons avoir besoin d'apporter quelques bibliothèques de stripe ici. Donc on va utiliser le CO et on va utiliser la séance de vérification aussi. Lorsque nous utilisons cela plus bas, allons nous débarrasser de ce code existant. Ok, super. Maintenant, nous pouvons commencer à écrire notre manteau. La première chose que nous allons devoir faire est de définir notre Que privé Faisons ça. Donc la clé du FBI, on va sortir ça d'un invariable que nous allons à la clé privée de la bande de charbon. On va mettre ça en place. Il est déjà à moitié configuré dans une minute, mais nous allons revenir en arrière et configurer dans la leçon suivante, puis nous commençons à construire nos objets de session pour que nous le fassions est de créer un objet de session à partir de toutes les données sur. On va envoyer à Stripe. Ainsi, lorsque l'utilisateur atterrit sur le site Web rayé, il sait ce dont il a besoin. Donc ça va être un objet sur Disons à Stripe que nous voulons l'habitué à payer par carte. Nous allons créer un tableau vide pour les éléments de ligne car remplira celui de celui-ci. Plus bas. Je n'ai pas eu de succès. Vous êtes aussi C'est là que l'utilisateur sera redirigé vers l'une des choses que la grève nous donne est la possibilité d'être session I D ou expéditeurs la session I d retour afin que nous puissions mettre Lane est un espace réservé, et grève saura sur quoi faire ça. Nous allons aussi avoir un conseil votre autre si ils utilisent c'est annuler. Je veux qu'ils retournent à l'écran du panier qui nous intéresse. Donc la prochaine chose que nous voulons faire est de dire à Stripe quels produits se trouvaient. Donc, pour faire cela quand une boucle à travers les articles du panier, s'il vous plaît prendre chaque livre sur ce qui est ajouté dans les éléments de ligne, nous allons ajouter un nouvel objet ici, dire le nom. Écoutez comme une description de titre de livre qui transmet le nom de l'auteur, le montant. Donc, quand ils font quelque chose d'un peu différent ici et nous prendrons le prix qui est stocké dans notre petite base de données comme un prix décimal. Ainsi, par exemple, 99 fois en cours par 100 parce que chaque fois que nous passons un montant à la bande, il doit être dans le dénominateur le plus bas. Donc, en dollars, nous parlons envoyé quelque chose avec des euros avec des livres. On parle d'envoyer en centimes. Donc, si vous avez quelque chose de fier prix 9,99$, nous avons besoin d'envoyer plus de 999 poules allaient dire le prix stocké dans notre base de données et le fois par 100 et passé la monnaie dans. Dans ce cas, nous allons utiliser des kilos sur enfin la quantité, et ça va être mis en pied un. Nous avons donc développé ces données de session, et en outre, nous avons compilé toute la liste des produits. Enfin, nous avons toutes les informations dont nous avons besoin. Et donc, on peut appeler un FBI stripe pour créer la session le jour. On va rendre ça à un modèle sur. La seule chose que nous devons transmettre dans ce modèle est la session que je d que nous obtenons de bande. Ok, ça a l'air bien. Donc, nous avons maintenant notre contrôleur, mais nous devons obtenir un modèle et nous devons également résoudre ces clés 11. Installer les touches API: dans le contrôleur de retrait. Nous utilisons cette variable d'environnement pour obtenir sont la clé de bande privée sur. Nous allons faire une chose similaire sur le front end dans notre modèle. En fait, c'est déjà branché, prêt à être utilisé. Nous devons donc définir cela parce que ce sera différent pour chacun d'entre nous lorsque le fichier dot m a déjà créé ces variables ici. Mais parce que nous ne voulons pas que ces clés soient engagées orteil, je reçois un repo parce qu'elles seront différentes par environnement en secret. Donc peut-être que nous ne le faisons pas Tout le monde ayant accès à eux que nous voulons faire est de créer un fichier local point m point et nous devons le faire dans Voici c'est une ligne de commentaire sur copier et coller ces deux lignes ici et puis juste coller vos clés réelles après eux dans ici sur suppose vous faites cela, ils seront prêts et disponibles à utiliser comme ceci donc créé dot m dot clé locale de pâtisserie dans et vous ne 12. Redirecting pour le checkout: avec notre contrôleur super. Mais maintenant, nous devons créer ce modèle que nous allons réellement rendre les redirections. Faisons ça. Maintenant, faites-le lorsque vous allez utiliser le répertoire templates. J' étais comme copier et coller du code pour le rendre plus facile, mais serait vraiment tout cela sur Nous appelons cette vérification et la première chose que nous allons faire est inclure le code de bande Js afin que vous puissiez copier et coller cela à partir du site de grève. Mais c'est assez simple. La fille et nous allons aller de l'avant sur créer un bloc de script où nous allons mettre notre code dans quelques choses que nous faisons ici est de créer une instance de bande ici j'ai besoin de mettre ah stripe pour mais Kian que nous avons créé comme une variable d'environnement. C' est donc notre clé publique sur le code terreux de contrôle que l'utilisateur ne voit pas qu'il utilisait une clé privée. Ne mélangez pas ces deux-là et tout ce qu'on va faire est d'appeler la fonction de redirection. Andi ici nous avons juste besoin de passer dans la session que nous avons rendue dans notre contrôleur et c'est littéralement ou nous devons faire pour cette vérification, rediriger. Donc, sauvegardons cela comme un modèle sur. On y va. Laissons-le et voyons ce qui se passe. 13. Faire du voyage: nous sommes presque prêts à faire ce voyage. Nous avons râpé si dernier petit truc, nous devons le faire. Il a renommé ce contrôleur, que j'ai raté tout à l'heure. Une fois que nous aurons fait ça, nous pourrons faire mourir notre service symphonique. J' ai déjà ma matinée ici. Mais si non, c'est juste le démarrage du serveur spatial symphony deux-points et qui obtiendra le matin en haut sur l'hôte local 8000. Vous devriez également y accéder ici. Onda. On peut créer des paniers. J' ai déjà deux livres en tête, mais on pourrait y aller et en avoir d'autres. C' est à celui-là et celui-là qui a quelques livres de Steinback. Maintenant, quand nous allons vérifier, nous devrions être redirigés vers Stripe. Ok, parfait. Super. Et nous avons nos livres ici répertoriés avec Price et l'offre. Alors remplissons quelques détails. Prenons une carte de test de frappe. Ce cas, c'est une MasterCard et nous pouvons utiliser toutes les dates avec elle et juste faire quelques chiffres . Nous pourrions faire une proposition obtenir aussi bien payer, et j'espère que cela devrait payer et nous renvoyer à la page de succès que nous avons juste créé une petite librairie Ok, super. Donc, nous avons là. C' est certainement des centres en arrière. A-t-il fait la transaction ? Eh bien, jetons un coup d'oeil. Allons à notre tableau de bord de grève. Nous avons également été testés activé et actualiserait la page. Oui, et on a 18 98. Elle est la transaction qu'on vient de faire. Nous avons effectué un paiement avec succès le. À ce stade, nous avons intégré avec succès avec Stripe Jack sortie, ce qui est génial. Si vous voulez une intégration simple que ce qui est déjà fait dans les futurs modules examinera quelques-unes des intégrations plus avancées que nous pouvons faire. 14. Stripe.js et API: ce module, Nous allons regarder une intégration plus profonde avec stripe dans laquelle nous construisons notre propre page de vérification dans notre propre site Web et utiliser grève Js et frapper un p I pour intégrer cela. Et nous utilisons ces deux choses sur le voyage de départ aussi. Mais on va les utiliser beaucoup. Mawr ici avec cette profonde intégration. Donc tout va être sur notre site. Mais parce que nous ne voulons pas que notre site Web Teoh soit PC, je m'y conforme. On va envoyer les détails de la carte de crédit à la bande avec leurs jets d'attaque. bibliothèque JavaScript sur le flux ressemblera à ceci. Donc, nous construisons cette page de vérification sur notre propre site Web va tomber dans un formulaire de carte de crédit à partir éléments de bande sur lorsque l'utilisation qui remplit les détails de carte de crédit que stripe Js enverra ces détails de carte de crédit aux serveurs stripe sans qu'ils aient à être par notre serveur. Tout se passe sur l'extrémité frontale en grève javascript. Ensuite, renvoyez-nous un jeton d'autorisation de paiement qui vous enverra ensuite à notre backend. Donc tout ce que nous avons est un jeton et ensuite nous faisons un appel à l'AP rayé pour dire que je vais vous facturer l'utilisation de ce beaucoup et voici mon jeton pour dire que l'utilisateur m'a donné l'autorisation utiliser cette carte de crédit, et la grève va alors facturer. Le paiement saura qu'ils l'ont fait et nous pouvons donc les montrer à la page de réussite de la commande sans que l'utilisateur ait à quitter notre site Web. Alors commençons à intégrer cela. 15. Créer un contrôle squelette: dans ce module, nous allons créer un check out qui est complètement intégré à notre site Web. Donc, pour commencer, commençons par créer un squelette pour cette sélection Prenez notre contrôleur existant sur. Appelons celui-ci local. Vérifiez le contrôleur sur. On va toujours avoir besoin de Stripes Stripes Stripe, mais ici, on va utiliser la charge Stripe à la place. Je vais toujours vouloir Teoh. En fait, nous allons nous débarrasser de tout ce code pour l'instant. Langue. Il va aller de l'avant et enregistrer ce qui se passe Ce tableau de bord local Tout ce contrôleur va faire est Bridget rend ce modèle entre eux. Le contrôleur aussi. D' accord. air bien à May, alors. La même chose ici. Créons un modèle de retrait local. Celle que nous référençons ici. Andi, tu dis ça dans le modèle. Ok, super. Toujours aller vérifier. Débarrassons-nous de ce code. Donc maintenant, si on obtient un chèque local, on a une page squelette où on peut commencer à s'intégrer. je vérifierais 16. Éléments rayés: même si nous créons tout le processus de paiement sur notre propre site Web allait encore faire grève pour faire une partie du lourd fardeau pour nous en ce qui concerne la création du petit formulaire où les gens placent leurs coordonnées de carte. Et pour ce faire, nous allons utiliser des éléments de bande que vous pouvez voir sur leur site Web ici. Cela nous donne juste quelques formulaires pré-construits qui vraiment agréable et facile à remplir, sorte que les gens juste mettre leur numéro de carte dedans, reconnaîtront la carte. Il sera juste par leur icône correcte, entendre qu'il dure pour mettre leur code postal ou code postal dans, et il est vraiment juste super facile. Donc vous regardez ceci, par exemple, c'est dans le numéro de rial, mais quand nous importons cela reconnaît que c'est un visa. Il reconnaît les gardes américains américainsqui nous ont demandé le zip et il gère aussi certains des trucs les plus avancés, vraiment sûrs que nous ferons plus tard. C' est donc un composant super utile, et c'est vraiment la façon de demander aux gens d'intégrer maintenant est en utilisant ces éléments pré-construits . Alors prenons ceci et déposez-le dans notre page Web 17. Ajouter des éléments de rayure: Allons de l'avant et laissons tomber des éléments de frappe dans Ah, regardez. Donc, nous avons autour de consulter la page ici et pendant une minute, le code, notre modèle ici. Et nous commençons juste par créer, nous n'allons pas utiliser un réellement besoin d'une méthode sur de créer un CSS pré-construit, donc nous aurons la classe de vérification. Vous pouvez vérifier cela dans l'application point CSS Juste une petite chose pour le faire paraître un peu plus joli quand nous commençons. Quand nous lui donnons un I d à et à l'intérieur du formulaire, nous allons trouver cet élément plus ancien appellera l'élément de carte. Ouais, ça a l'air sympa. On va créer une grosse brûlure moi-même. Soumettre le paiement. Super. Nous avons déjà notre script ici sur Apportons ce code qui initialise est stripe le A P I aussi. Et puis on va aller de l'avant pour initialiser ça, on va dire que les éléments sont égaux et ensuite on va créer une carte sur. Une fois que j'ai été aller éléments créer Dieu. Et enfin, on va monter ça sur notre élément de carte. Ok,des trucs charmants. Ok, Donc, pour récapituler, nous créons un petit formulaire avec cet élément d'espace réservé. Nous avons initialisé un FBI stripey appelé les Elements un p I sur avec un grand élément de rejet. Et maintenant, si vous actualisez la page pour Lucky, nous avons cette belle bande pré-construit éléments sur un gros bouton de paiement soumettre. Ça ne fait rien pour l'instant, alors télévions ça. 18. Validation de l'entrée: la prochaine chose que nous voulons faire est de gérer les erreurs. Donc, si quelque chose ne va pas ici, nous voulons pouvoir l'afficher à l'utilisateur. Alors allons-y. Et à ce festival maintenant, c'est ajouter un autre élément d'espace réservé. Erreurs de carte Collis. Et puis allons filer ça. Donc, prenez notre élément de carte ajoutera un moniteur d'écoute d'événement pour le changement. Puis à l'intérieur, nous aurons nos objets d'erreurs de carte. Et s'il y a un événement d'erreur, définissez le contenu de ceci pour afficher le jamais et sinon, allons nous assurer que nous effacons toute erreur car, par exemple, ils auraient pu être une erreur et l'utilisateur la corrige, nous ne voulons donc pas continuer à afficher l'époque. Super. Donc maintenant chaque fois qu'il y a un changement qui va vérifier ceux étroits et si oui, va remplir cette petite boîte pour afficher l'arabe ci-dessous. Passons maintenant à l'obtention de ce paiement. 19. Créer un jeton: a discuté de la façon dont nous prenons le paiement avec bande est que nous demandons la bande a p i pour un jeton et exalté sur le côté client afin que les informations de carte de crédit n'a jamais à toucher notre serveur. Et donc nous n'avons pas besoin d'être conformes à PC I. Allons-y. Et pourquoi tout ça maintenant ? Donc, nous sélectionnons notre élément de formulaire. Nous avons appelé le formulaire de paiement en haut. Nous allons ajouter un écouteur d'événement ici sur celui-ci est à soumettre. Donc, cela serait appelé lorsque l'utilisateur frappe que soumettre le paiement, empêcher l'action par défaut, et puis nous allons appeler la bande AP I Donc nous allons appeler, créer un jeton, passer l'objet de la carte quand la première chose que nous est de vérifier s'il y a une erreur. S' il y en a, nous réutiliserons nos erreurs de carte à travers un large. Ceci est maintenant si nous obtenons le message d'erreur, il va le coller dans leurs hypothèses. L' utilisateur commence à taper et à modifier. Ensuite, il peut s'en débarrasser, ce qui est le code que nous avons fait précédemment. Mais si ce n'est pas le cas, alors on est tous doués. Ça veut dire qu'on a un jeton. Et donc nous voulons gérer ce gay semble bien à la dernière chose dont nous avons besoin ici est d'écrire cette fonction qui va gérer le jeton. Devrions-nous recevoir un succès pour le faire sur la prise ? Lors de la création d'élément, vous allez être un marché d'entrée de type en tant que nom donné caché hors jeton. Passe-le le jeton que j'ai d et on va le remonter. Forme Teoh. Et enfin, nous ne soumettons jamais de formulaire. Donc on fait ici. Est-ce que nous obtenons ce jeton à la suite de créer une entrée cachée sur ce formulaire ici que nous ajoutons notre interjeton afin qu'il soit envoyé lorsque le formulaire est posté sur DWI. Puis poster le formulaire sur maintenant être envoyé au backend et dans la leçon suivante, nous allons traiter ce qui se passe sur le back-end. 20. Tester notre jeton: Nous avons filé notre code pour demander un jeton de grève. Mais est-ce que cela a fonctionné ? Eh bien, découvrons. Alors actualisez la page. Si vous ne l'avez pas déjà fait, juste pour être sûr que vous avez le moins sur. Ouvrez ensuite la console de votre développeur. Je vais passer au robinet réseau. Maintenant, il va soumettre le formulaire s'il est réussi, et nous ne voulons pas qu'il le fasse. Donc, nous allons conserver la connexion afin que nous puissions voir les requêtes précédentes sur. Allons de l'avant et prenons quelques détails de la carte de test sur. Mettez-les dedans, faites ça et il l'est. Il pourrait, je sais qu'il y a neuf ans et ils sont sortis et nous allons aller de l'avant et nous allons effacer cela et ensuite soumettre le paiement. Super. Donc, il a publié avec succès à la vérification locale. Voyons si on peut trouver qu'on y va. Il y a notre demande sur et dans les données du formulaire. Il a envoyé notre jeton, et nous pouvons maintenant utiliser ce jeton pour effectuer un paiement sur le back-end. Alors allons faire ça 21. Traitement des paiements avec des jetons: Maintenant que nous avons notre jeton, utilisons-le pour payer. Donc on va aller à un chèque local et on va vérifier si la demande est un post. Donc il est Method post, et si oui, alors nous saurons que nous essayons de traiter le paiement. Alors commençons par arracher Ah, frapper la propriété. On va mettre ça là-dedans. Et nous voulons aussi obtenir le jeton après notre quête. Fait, faisons ça d'abord. Ok, Annexing aura besoin d'un panier et nous pourrions sauter à travers elle pour calculer le prix. Mais ce qui va être plus facile, c'est que nous utilisions ce panier utile. J' ai créé Donc une listers est que nous passons dans notre variable de session et il nous donne un peu de santé, une méthode comme obtenir le prix total obtenir dans le prix brut qui se souviennent que nous avons besoin de fois tout par 100. Parce que si le prix de 9 99 nous avons besoin d'envoyer 999 à la bande, et il sera également condensé vers le bas la liste des livres en une seule chaîne. Donc, nous nous donnons une belle description aussi. Nous passons les données de session sur ce qui nous donnera ces efforts, et ensuite nous allons créer une charge. Alors avant que nous fassions ça, rangez-nous ça. Assurez-vous qu'on importe ça, et on y reviendra. Je vais bien. Cette charge. On va appeler la classe de charge, qu'on a déjà amenée. Apparaissent sur nous allons dire, créer et passer sur l'objet. Super. D' accord. Et puis remplissez ceci. Donc, pour le montant, il a été appelé. Joli. Prends du riz cru. Aide à l'effort. Commandes en devises. Coupe dure. 2 £ pour l'instant. Description à nouveau. Tu appelles ça gentil ? Aidez-le. Effort, Andi. Enfin, on va utiliser notre jeton, qu'on doit nous passer. Source. On appellera gank symbolique de perdre. Donc, une fois que cela a été réussi, effacons le panier. Parce qu'une fois qu'ils utilisent la balle, les livres ne veulent probablement plus les acheter. Ensuite, nous redirigerons vers la même page de succès que nous avons envoyé l'utilisateur au moment de la vérification. Ok, ça me semble bien. Continuons dans la leçon suivante. 22. Faire du voyage: Maintenant, nous avons câblé notre chèque afin qu'il utilise le jeton pour charger la bande. Allons de l'avant et vérifions que ça marche. Alors commençons par ajouter un panier de librairie qui prend Cannery Row en 1984 Onda, changez ce bouton de veste pour qu'il aille maintenant à une nouvelle page de départ locale. Mais vous pouvez aussi simplement taper le puits sur. Allons de l'avant sur pomper ces détails de la carte de test en hit soumettre paiement et nous avons la page de succès. Génial, ça va aussi bien et vérifier les paiements Viens par ici, on va 1984 et Cannery Row. Le paiement a le processus de bean avec succès. Donc, si vous suivez vos félicitations, vous avez maintenant intégré avec succès les paiements de grève dans votre site Web local. 23. L'authenticité du client en sécurité (SCA): dans ce module. On va voir les paiements S EA. Qu' est-ce qu'ils sont exactement ? C' est un bon point de départ, ce qui signifie l'authentification sécurisée des clients et son initiative de l'Union européenne pour tenter de réduire la fraude. Il est donc introduit en 2019 et il se déploie progressivement. Maintenant, comme pour la plupart des opérations bancaires, ils prennent beaucoup de temps pour entrer et l'authentification multi-facteurs. Donc, vous avez peut-être vu Freedy sécurisé où quand vous allez pour un chèque, vous êtes redirigé vers votre banque pour insérer un petit mot de passe ou de plus en plus maintenant, surtout avec S E A, vous obtenez un code spécial envoyé par SMS pour utiliser dans votre mobile, et vous devez entrer cela dans le site Web. Donc vous êtes allé voir tous les détails de votre carte. Vous essayez de traiter le paiement. Votre banque landsend est que vous attaquez dire assurez-vous que c'est vous et vous devez entrer cela dans le site Web avant de pouvoir terminer la transaction. Maintenant, si vous n'implémentez pas les paiements S e A que c'est à la banque, qu'ils acceptent ou déclinent Andi au fil du temps, ils vont commencer à décliner de plus en plus. Donc en ce moment, il est assez détendu certains paiements que vous pouvez passer sans cela. Mais avec le temps, la probabilité a diminué de plus en plus de transactions. Ce n'est pas un problème pour l'Amérique du Nord en ce moment. C' est spécifiquement pour l'Europe, mais cela inclut tous les pays dans les objets Ain de l'Union européenne. Sur DSO, si vous pensez avoir des clients en Europe que cela ne vaut la peine, implémenter ceci et c'est entièrement rétrocompatible avec tout le monde. Donc, il est préférable de le faire de cette façon, alors, est de le faire de la manière la plus simple, à mon avis, parce qu'il n'y a pas beaucoup de complexité supplémentaire pour le faire. Si je vois un roulis vers l'Amérique du Nord et ailleurs dans le monde, alors vous serez à l'avenir en vous protégeant, alors regardons comment le faire. 24. Créer une page de contrôle SCA: Allons de l'avant et transformons notre implémentation de base en quelque chose qui est prêt . Donc nous avons notre contrôle local ici. Allons de l'avant et créons une copie de ceci. On l'appellera S C H. Je compte le contrôleur sur ce qui vous change malade pour voir un départ aussi. Et c'était Demandez-lui de rendre ce fichier de récupération SCH à nouveau. On va prendre son départ local, Michael. Faites-en une copie. Ça s'appelle S E A. Dis ça là. Et puis dans nos paniers. C' est là. Changeons que Greats qui fonctionne encore câblé comme une intégration de base, bien sûr. Mais maintenant, allons de l'avant et transformons-le en une mise en œuvre méchante et conforme. 25. API PaymentIntent: Ouvrons. Ah, SC A Check out Controller Andi, quand ne sera plus utilisé, La charge ap I à la place, nous allons utiliser le paiement dans 10 AP. Je suis avec l'intention de payer avec tout faire à l'avance. On va devoir réorganiser les choses. Tout d'abord, en allant dans le panier par ici, on va devoir mettre la sangle. A p, je vais également ignorer ce livre pour l'instant. Et ici, ce qu'on va faire, c'est créer une intention de paiement. Ouais, et on va utiliser les mêmes efforts pour lui aider. Donc nous disons, panier, Royal Price envoie la monnaie à nouveau. On va mettre la description ici. Ça va donner des ordres n'importe quel jeton. Ça s'appelle le secret client. Donc, nous avons déjà décrit ce qu'est le paiement, et nous avons envoyé pour frapper ici, et ensuite nous allons rendre cela au script de travail, ce qui signifie que lorsque l'utilisateur soumet réellement le formulaire, alors tout le travail a été fait et les paiements ont été traités afin que nous puissions nous débarrasser de cette charge. Et à la place, si c'est un post, nous pouvons juste effacer le panier sur rediriger l'utilisateur vers cette page de gilet tout de suite, sorte que cela ressemble à tout ce que nous devons faire ici. Maintenant, il va à l'extrémité frontale sur modifier le JavaScript. 26. Utiliser l'API PaymentIntent: dans cette leçon va modifier le code avant et JavaScript pour être S e une plainte. Donc, il est ouvert notre page de vérification SCH, et la plupart de cela va rester le même. Juste quelques choses qu'on va changer. Donc, nous n'avons plus besoin de cette fonction de jeton de handle, et nous n'allons plus utiliser le jeton de création. Au lieu de cela, on va utiliser quelque chose appelé confirmation du paiement par carte. Et le premier argument que nous allons transmettre est le jeton que nous avons obtenu quand nous créons l' intention de paiement et nous allons lui transmettre quelques options, ainsi que le mode de paiement, nous allons la transmettre. Cela fait référence à cet objet de carte ici alors tout ce que nous devons faire est de gérer le résultat. Donc, nous allons reprendre l'événement. Je ne dirai pas si ce serait le résultat. C' est plus logique. Andi, Si c'est un succès, nous devons faire un peu de suivi supplémentaire de l'intention de paiement parce que cela peut prendre un certain temps. Encore une fois, nous allons soumettre un formulaire si vous vous souvenez de tout ce que nous faisons lorsque nous soumettons le formulaire est clair le panier et redirigé vers cette page excédentaire parce que nous créons un jeton avec bande ici pour ce que nous voulons facturer. Et puis sur le front, l'utilisateur entre les détails de sa carte, et cela va de pair avec le jeton que nous avons créé pour dire quel paiement nous voulons sur les commandes dehors des bandes ont en même temps. Donc, j'espère que c'est tout ce que nous devons faire. N' allons pas le tester. 27. Faire du voyage: nous avons réécrit. J' ai vérifié à B S E un paiement conforme en utilisant des bandes dans 10 FBI. Alors maintenant, nous allons nous assurer que tout fonctionne. Alors commençons par vérifier juste une carte régulière et nous assurer que nous n'avons rien cassé. Vous avez réserver un panier aller gratuitement pour vérifier sur va juste prendre la même carte de test que nous avons utilisé. OK, parfait. Je suis allé pour toi. Reprenons le processus. Donc, nous allons ajouter d'autres livres au panier et nous reviendrons à vérifier. Et si nous allons à cette bande cicatrisée pages affaiblir, voir plus bas. On a ces cartes qui représentent des choses avec lesquelles on se dispute, tu vois ? A Donc, dans ce cas, va demander une vérification. Donc, nous verrons ce que cela signifie encore. Remplissez la carte. Euh, un paiement cette fois. La banque a demandé à l'utilisé pour le vérifier, Donc cela pourrait leur demander d'insérer un mot de passe. Il pourrait envoyer un code d'accès unique à ce téléphone. Ils devraient entrer que tout ça est géré par bande ici. Donc, au lieu de juste une grande revendication complète, mais il pourrait être juste que, mais cela pourrait être quelque chose de plus compliqué, mais l'utilisateur ferait cela eux-mêmes et ensuite juste compléter l'authentification sur la banque. On a du succès là-bas aussi. Tellement génial. Maintenant, chaque fois que la banque veut une autorisation supplémentaire veut ce S e une authentification client sécurisée va gérer cela aussi bien. Parfait. 28. Portefeuilles numériques: dans ce module. Nous allons intégrer des portefeuilles numériques dans l'application. Mais si vous n'êtes pas clair ce que les portefeuilles numériques sont, ce sont des choses comme Apple payer Google payer nous chap un visa, vérifier maître passer ce genre de façons virtuelles de payer qui vient de se passer dans le navigateur ou sur votre appareil mobile. Donc nous ne parlons pas de transactions réelles ici, mais nous parlons sans carte physique. Ainsi, par exemple, Apple paient. Vous pouvez accéder à des sites Web. Il suffit de frapper ce paiement avec Apple Babe sur et dans un bureau, vous obtenez un peu pop up comme ce que nous voyons sur ce Mac et sur un appareil mobile, vous obtiendrez un peu pop up comme dans sur la droite. Et c'est la même chose avec Google Pay et beaucoup de ces portefeuilles numériques. La façon dont Stripe fait cela est qu'il nous donne un bouton unifié, donc nous insérons ce bouton dans notre processus de vérification, et quand il a utilisé des hits, ils obtiendront le petit pop-up pertinent. Donc, s'ils sont en safari qui obtiennent pomme, payer leur sur chrome, ils obtiennent Google Pay. Peu importe ce que leur appareil supporte, il va apparaître cette petite fenêtre. Alors regardons comment l'intégrer 29. Créer un contrôleur de portefeuille de digtal: Commençons par créer un contrôleur pour notre portefeuille numérique, donc nous allons commencer avec notre contrôleur CH check out qui fera une bonne base. C' est copier et coller que sauvegarder, il a demandé. Votre contrôleur de portefeuille sur la grippe ? Car c'est à peu près la même chose qu'un S e un paiement en utilisant le paiement à son tour, AP I. Donc il n'y a que quelques ajustements que nous devons faire, et c'est d'envoyer une partie du fruit de la description. Parce que plutôt que d'envoyer l'information à ce processeur de paiement pour ce relevé de carte de crédit , nous devons également lui dire ce qui se passe lorsqu'il reçoit la notification sur son téléphone ou appareil pour dire qu'il effectue un paiement. Donc, c'est dans ces variables à l'extrémité frontale. On va utiliser notre aide au panier. Je vais envoyer une description à travers. Nous vous enverrons le prix de vente pour vous aussi, et c'est le seul changement que nous devons apporter au contrôleur. Ensuite, nous pouvons aller à l'extrémité avant sur faire sont des changements. Là, 30. Monter un bouton de demande de paiement: Maintenant que nous avons notre contrôleur de portefeuille numérique, nous pouvons aller de l'avant et apporter les changements frontaux. Alors prenons la CIA. Découvrez le modèle sur Il suffit de sauvegarder les yeux. Modèle de portefeuille numérique sur et arrivons à notre contrôleur sur. Changé pour vous. Inscrivez-vous Le portefeuille numérique sur lequel a changé. Tu es bien d'Ella, et enfin dans le panier. Passons le à un portefeuille numérique et ensuite nous pouvons commencer à faire des changements ici, et il y a beaucoup de changements ici. Donc, au lieu d'avoir un cardinal dans notre bouton, où il va mettre ce bouton de demande de paiement, nous n'avons pas besoin de ce CSS Eva Stunning. Les erreurs de carte doivent encore apporter dans la bande, mais il y a beaucoup de changements à rester ici, donc la première chose que nous allons faire est de créer une demande de paiement et le pays ici que vous voulez passer dans le code de pays de glace eso à deux chiffres. Il doit être en majuscules ou aimer le temps comme la monnaie. Nous sommes charnières, plus en minuscules, mais nous avons ce code de pays. Il doit être transmis dans les capitales et pour le label Territo, nous allons utiliser cette propriété de description que nous fast-food et nous allons aussi presser le montant jusqu'au prix le plus élevé. Nous l'avons appelé et nous Andi, allons demander des informations à l'A P I aussi. Donc, si nous voulons utiliser leur nom et e-mail a enregistré sur l'appareil, nous pouvons. Et une fois que nous avons créé ah objet de demande de paiement, alors nous devons apporter des éléments rayés que nous avons une paire n'ont pas attendu, et puis nous voulons créer un bouton de demande de paiement afin que nous allons faire élément créer Ils durent pour la demande de paiement et la demande de paiement sera cet objet de demande de paiement que nous venons de créer. Nous voulons vérifier si ça marche. Donc, beaucoup de navigateurs et d'appareils ne seront tout simplement pas avoir un portefeuille numérique mis en place. Et il y a un P I pour que nous puissions appeler, peut faire des diseurs de missiles de paiement Wever il est disponible ou non. Donc on peut dire si c'est vrai, alors on va monter ce Poutine. Donc, c'est l'élément vide que nous obtenons une paire de paiement à travers Poutine disaient si l'utilisateur a ce soutien dans leurs arcs de ou appareil, puis le montrer et si non. Donnons-leur un message qui dit Désolé maintenant dans un système complet. Ce que nous faisons ici, c'est de revenir à un contrôle régulier ici. Donc, s'ils peuvent charger le bouton de demande de paiement, nous montrerons que si non, alors nous leur donnons juste un style de formulaire traditionnel. Mais pour le débogage ici, je veux qu'on voit quand ça ne marche pas. D' où la raison pour laquelle nous incluons le message désolé. Mais normalement, vous pourriez juste leur donner un chèque à la vieille école avec une entrée de carte ici. C' est des jetons. Débarrassez-vous de ce code dont nous n'avons pas besoin. Jusqu' à présent, nous avons monté la balle, on leur donne un message. Si ce n'est pas le cas, passons à la prochaine leçon. Regardons comment nous faisons réellement ce paiement. 31. Traitement des paiements avec le bouton: Nous avons monté notre paiement né dans le U I. Mais maintenant nous devons réellement gérer Il est un clic dessus et faire un paiement. Alors faisons-le maintenant. Nous commencerons par ajouter un écouteur qui écoute le mode de paiement. Eh bien, accord, rappelez pour gérer ça. Ça va appeler le paiement par carte confirmée, et nous devons passer une caution vos options dans ce cas. Donc, tout d'abord, nous allons transmettre ce secret client que nous générons à partir du contrôleur sur le back-end afin que l'utilisateur ne puisse rien gâcher. Ensuite, nous allons définir le mode de paiement en fonction de l'objet sur lequel nous avons trouvé. Enfin, nous allons définir cette option action de poignée d'appel est égale à false sur. La raison pour laquelle nous le définissons sur false est que nous allons écrire notre propre code pour gérer ce qui se passe ici. Donc, nous ne voulons pas que le code de grève par défaut fasse quoi que ce soit parce que nous allons écrire le code maintenant. C' est le code que nous n'avons jamais besoin de rappeler. Nous allons prendre ce résultat confirmé qui reviendra de l'appel si il ya une ère , alors quand une marque cette demande de paiement comme complète, mais un échec et qui dira le navigateur Teoh, les ramener à la écran de paiement parce que le paiement a échoué et sinon marquer comme un succès, et qui dira au navigateur de procéder parce que tout s'est bien passé. Et puis si c'est un succès, alors à ce moment-là nous devons appeler le paiement confirmé par carte, parce qu'à ce stade nous allons laisser Stripe prendre l'argent en ce temps, quand nous devons faire est de passer ce secret client à nouveau, et puis cela devient juste comme un paiement régulier. Donc, dites que s'il y a une époque, nous aurons les erreurs de carte, qui est la même que nous avons utilisé cette empreinte tout le temps sur le message, et sinon, nous allons soumettre le formulaire. Alors passons en revue ça. Donc, à ce stade, si le paiement de confiance demandé, nous appelons ceci avec le Donc, nous appelons la bande un P I avec ce paiement par carte confirmé , et c'est comme, par exemple, sur votre téléphone, la petite fenêtre apparaît en disant : Voulez-vous faire un paiement sur ce levier fonctionne ou il ne sera pas si cela ne fonctionne pas initialement. Ensuite, par exemple, les paiements ont échoué sur l'appareil et l'utilisateur a donc pu réessayer. Il doit essayer une carte différente ou doit remplir quelque chose, auquel cas dira l'appareil qui a échoué à ce stade. Si oui, nous pouvons commercialiser est complet et cacher le petit pop-up sur l'appareil. Mais ce n'est pas parce que nous avons fait cela que nous avons pris le paiement. Nous devons alors contacter la grève Baby. Je répète que l'appareil a accepté ce paiement, et maintenant nous voulons essayer de les facturer. Il pourrait alors aller à la banque et ils pourraient le rejeter, auquel cas mettra le message d'erreur vers le haut. Mais si ce n'est pas le cas, alors tout devrait aller bien. Donc c'est la théorie derrière elle. Voyons si ça marche. Chargons un site Web sonné livre. Prends un panier et attrape-le. Regarde sur. On n'a rien. Alors déboguons ceci dans la leçon suivante. 32. Serving Serving: nous avons exécuté notre code de script de travail pour notre portefeuille numérique. Cela n'a pas fonctionné initialement parce que j'ai enregistré le fichier. Mais maintenant la moitié. Et si vous suivez, vous devriez recevoir ce message disant, désolé. Votre navigateur ne prend pas en charge les portefeuilles numériques. Maintenant, cela dépend du navigateur et de l'appareil sur lequel vous êtes. Mais je suis sur chrome juste ici. Et il devrait le faire. Alors que se passe-t-il ici ? Eh bien, le problème est que les portefeuilles numériques ne fonctionnent que sur des T t p de haine que nous ne sommes pas en cours d'exécution ici, qui est en cours d'exécution http normal. Heureusement, symphonie a un projet de loi en solution pour cela, Et nous pourrions juste aller un serveur symphonique, voir une installation, et cela va installer un certificat local pour nous afin que nous puissions avoir valide, espérons-le sur l'hôte local. Si vous ne courez pas dans la symphonie, commencez vous pouvez utiliser quelque chose appelé M K, monsieur, qui fera une chose similaire. Mais c'est un peu plus difficile à configurer. Donc j'espère que vous suivez avec Symphony stack. Et puis tout ce que nous avons à faire, c'est si nous redémarrons notre serveur. Si nous l'actualisons poursuivi, redirection est automatiquement. Oui. Donc tu as le cadenas qu'on va te frapper pour qu'on te demande sur le bouton est paru parfait. Donc, nous avons maintenant notre bouton de paiement. Essayons-le dans la prochaine leçon. 33. Tester votre portefeuille numérique dans Chrome: Maintenant que notre bouton fonctionne, faisons un test. Et la façon la plus simple de le faire est en chrome. Si nous allons juste aux préférences sur aller descendre ici pour les méthodes de paiement et les widgets peuvent ajouter un nouveau. Andi, on va encore enlever les cartes de test de bande. Prenons ça doit garder frappé. Économisez maintenant. Consultez la page. On doit payer. Maintenant, nous obtenons le paiement Google, nous pouvons choisir cette carte de test que nous venons de créer. Donc ici, nous pouvons voir que nous avons un livre, prix de couleur bleue. Et nous avons ah, méthode de paiement. C' est ça. Pay peut frapper n'importe quel CVC ici sur. Est-ce qu'il va confirmer ? Ok, super. Nous avons notre page la plus durement réussie. Il semble avoir payé par Google Pay. Allons dans la planche à poussière Stripe Refresh. Oui. On y va. Nous avons sur vous le paiement Mefford. Il prend automatiquement notre adresse e-mail. Il a la description. Le prix est très bien aussi. Donc, si avec succès intégré portefeuilles numériques dans l'art, consultez le processus 34. Étapes supplémentaires pour d'autres prises d'Apple Pay: Eh bien, nous l'avons fait jusqu'à présent. Nous donne un portefeuille numérique pour une variété de différents. Donc, Microsoft payer Google payer Master passer le seul Il ne fonctionne pas pour son Apple Bay parce que Apple aime être difficile. Donc, pour que Apple Pay fonctionne, nous devons faire tout ce que nous avons fait jusqu'à présent. Mais il y a aussi une configuration supplémentaire. Et cela se produit dans nos tableaux de bord stripe que nous allons descendre, frapper deux paramètres, nous allons obtenir des méthodes de paiement. Et hé, on a Apple Pay. Je vais aller à cette configuration, et nous avons Apple Pay. Nous avons besoin de liste blanche tous les domaines utilisaient. Donc, nous allons sembler au domaine sur va mettre vivant ou un domaine de test ici. Et nous devons le faire pour chacun des domaines que nous voulons utiliser. La prochaine chose que nous devons faire est d'obtenir ce fichier de vérification. Donc, c'est vous juste de cliquer ici et les téléchargements de fichiers à ce sujet doivent être disponibles sur le site Web à cet emplacement. Il suffit donc de télécharger le fichier et de le coller dans votre répertoire public. Alors allons faire ça maintenant. être dans ce point Bien connu parfois finder ou gestionnaire de fichiers, partout où le système de freinage à l'aide étaient drôles d'un point tisserand direct dans. Donc, si vous avez ce problème, nous pouvons facilement, l'Egypte va à la ligne de commande sur va aller dans le répertoire public, et nous allons faire notre fait électrique bien connu déjà fait cela dans ce cas. Donc si on n'avait pas fait ça, donne-le à ça. Et puis on veut juste faire direct, aussi. Eh bien, temps en temps, nous avons un fichier de développeur Apple. À moins que les jets ne le déplacent dans le répertoire, il allait y aller et vérifier. C' est là. Ok, super. Oui. Et c'est juste résoudre ce problème aussi. Ok, super. Donc les fichiers là-bas, c'est dans notre répertoire public. Nous devons le faire pour chacun des domaines mis ici sur celles des étapes supplémentaires que vous devez faire pour faire fonctionner apple pay 35. Créer un club de livre: dans ce module. Nous allons créer un club de lecture que les gens peuvent s'abonner pour faire des paiements récurrents à Andi Pour commencer, nous allons créer un squelette rapide. Alors prenons notre S e un contrôleur parce que c'est la chose la plus proche Teoh ce que nous avons besoin de dio sur. Renommez-le en un contrôleur de prescription. On n'aura pas besoin du panier pour se débarrasser de la séance et ça a changé cette année. Al à l'abonnement. Eh bien, à venir. Ça pourrait sortir pour l'instant. Et puis nous rendrons une page qui s'appelle simplement un abonnement. Faites-nous savoir pour l'instant. Ok, ça a l'air bien. Maintenant, allons créer un modèle de base. Ce n'est pas le cas. Il est ouvert si je vois un chèque plus copie et coller ceci dans un abonnement perpétuel sur Changons ceci pour dire, mais l'abonnement club et nous allons nous débarrasser de toute cette carte pour le moment. Et c'est juste une grande petite forme qui permet à l'utilisateur d'entrer quelques détails. Demandez leur nom. C' est pour cette adresse e-mail. L' homme est un e-mail de type, donc il fait l'impression de cravate sur mobile. Appelez aussi un email. Ah, en dehors de la variable Hidden. Dis ce qui se passe ? Donc, la création du client sur Enfin un gros bouton dit, Rejoignez le club. Ok, super. Vérifions ce qui est rendu. D' accord. Et la réponse est non. J' ai le nom du modèle Wrong. Ok, résolvons ça dans la leçon suivante. 36. SetupIntent API: On dirait que j'ai fait une petite erreur d'orthographe ici. Depuis que nous avons corrigé cela, nous avons maintenant une belle forme. Alors allons gérer ce qui s'est passé. Lorsque l'utilisateur soumet, c'est que nous allons aller dans notre contrôleur d'abonnement sur ce qui ne ferait pas est de créer une méthode pour gérer la création d'un client. On y va. Donc la façon dont ça va fonctionner est que nous allons dire à Stripe de créer un objet personnalisé. Nous avons les données que nous avons et puis nous allons prendre le mode de paiement que nous allons augmenter et nous allons l'attacher à ce client afin que nous puissions construire ce client quand nous avons besoin d'orteil et ici, connectez la bande A p I k. Je dis coutume à créer sur personne les valeurs. Donc nous sommes là, allons changer. Donc on va utiliser le client sur. On va utiliser Stripe Setup intention. Parle de ça dans une minute. Donc, ici, nous avons créé un objet client, et à ce stade, nous pouvons créer une Nintendo. Maintenant, nous pourrions créer une intention de paiement ici, ce qui nous permettrait de construire un client tout de suite et de le marquer comme un client pour facturation récurrente. Mais dans les cas où nous ne voulons pas les construire tout de suite. Nous voulons les construire dès le début de leur abonnement. On peut utiliser la mise en place dans 10 à la place, ce qui est très similaire au FBI. Mais ça veut dire qu'on n'a pas besoin de les construire maintenant. On va prendre l'objet client Wicket ici. On va prendre le I D. On va dire, joindre ce paiement à terme que nous sommes en train de le faire à son tour dans ce cas à ce client . Nous avons dit que c'était une carte. Ok, des trucs charmants. Et puis nous allons l'épeler correctement cette fois, presque cette fois, nous avons un secret client parce que nous venons de créer cette intention. Maintenant, tout ce que nous devons faire est d'appeler cette fonction. Alors montons à ici. Il est réduit. On n'a plus besoin de cette intention. Quand le soupir Si nous obtenons l'action. Oh, tapez, créez un client. Alors nous reviendrons. Passer une demande à travers. Maintenant, ça va arriver. Est que lorsque l'utilisateur soumet le formulaire, il va frapper ceci. Il obtiendra ce grand client et il rendra le modèle avec ce client secret péché beaucoup aller. Modifiez le modèle pour gérer 37. Confirmation de carte: nous avons fait nos changements de fond. Donc, modifions l'extrémité frontale pour gérer ce genre d'étape deux. Mais c'est une logique de dire, si on a un secret client. Si ce n'est pas le cas, on fera la première étape du voyage. Et ici, nous voulons surtout mettre un départ classique. Alors commençons par prendre cette fille de la vérification de l'essai et ensuite on modifiera comme il l'a fait. Donc, vous avez mis un extra qui est né ici juste pour que ce qui se passe clairement. Mon Dieu, soumettez votre carte de paiement. Erica va bien. J' ai encore besoin d'appeler la bande. Le FBI a défini nos erreurs de gestion de code, mais alors nous devrons modifier ce pari. Donc, au lieu de ce paiement confirmé par carte, nous devons faire quelque chose d'un peu différent. Donc on va appeler cette carte confirmée pour Mefford. On va passer les secrets des plantes que la plupart du code va encore ressembler. Et puis c'est gérer le résultat de cette mise en place de la carte. Donc encore une fois , il suffit de copier et de coller ceci ici. Débarrassez-vous de ça. Donc si on obtient un résultat, demandez à Burt avant qu'on ne mette le résultat dans cette boîte de cartes sur les flèches va changer. Cela a porté un peu aussi. Donc, nous allons dire à la recherche d'un règlement en réponse Satis que nous voulons prendre qui a réussi. Si c'est le cas, nous ne soumettons pas le formulaire. Continuons cela dans la prochaine leçon. 38. Faire du voyage: lorsque le dernier changement que nous devons faire est une fois que les utilisateurs soumettent le paiement, nous devons faire quelque chose sur le back-end dans ce cas rediriger vers cette page excédentaire chèques. Encore une action. J' aurais pu le faire plus gracieusement dans un interrupteur. Mais bien sur dira, Si cela est arrivé, alors faites l'ancienne redirection. Super. Alors allons tester ce qui se passe. C' est le point. Certains détails client ont frappé, rejoint. Enfilez et génial. Maintenant, nous avons un paiement par carte. C' est copier et coller dans la tâche sont les détails frappés, soumettre le paiement et nous avons la page de succès. Ok, ça a l'air bien. Maintenant, allons à notre tableau de bord rayé sur Ce que nous devrions avoir, c'est un client. Ok, super. Et entrez et ils ont une carte attachée à leur compte. Donc c'est génial. Donc nous pouvons maintenant entrer et ajouter un paiement via le tableau de bord ici et le FBI ou nous pourrions les avoir sur un plan d'abonnement aussi. Donc, si nous voulons que Teoh récurrents les facture. Cependant, nous voulons le faire, nous les avons maintenant mis en place en tant que client avec une carte que nous pouvons facturer à tout moment 39. Réflexions finales: bien fait pour arriver à la fin de cette classe. Espérons que vous avez suivi le long jamais construit une intégration de bande post les détails du lien ou l'exemple de code dans le projet. Section sur Laissez tout le monde voir ce que vous avez fait. A bientôt.