Tutoriel Bubble.io - Introduction à Stripe (Charge current user)

Dans cette vidéo, vous apprendrez comment intégrer l'API Stripe dans Bubble à l'aide du plugin officiel et gratuit de Bubble. Nous développons pas à pas un système pour acheter une Tesla Model 3 d'occasion.

Gauche :

• Bande
• Documentation Stripe
• Cartes de test Stripe
• Documentation du plugin Bubble Stripe

Transcription vidéo :

Bonjour, je m'appelle Chris Strobl et je vous présente aujourd'hui une introduction à Stripe en combinaison avec Bubble Stripe est quasiment la plateforme de paiement Internet standard et est entièrement construite, c'est-à-dire une API. C'est une interface de programmation d'application et une documentation de super développeur qui vous permet de faire presque tout ce que vous voulez.

Si vous allez sur Stripe dot com slash stocks, vous verrez quelles sont les différentes clés API disponibles, quels sont les produits et comment il est possible de piloter quasiment tous ces produits. Par exemple, pour accepter les paiements en ligne, pour les modèles d'abonnement, mais aussi par exemple pour faire des modèles commerciaux complexes comme les plateformes avec Strip Connect. Nous allons maintenant nous rendre dans Bubble et prendre l'exemple d'une place de marché Auto save, où nous pouvons acheter des voitures d'occasion. La taille de la page est de 960 width et height, nous l'avons fixée à 3000 et c'est une page responsive. J'utilise à nouveau des frames pour le design, il y a aussi une vidéo à ce sujet, son extension gratuite pour Chrome qui vous aide quasiment à faire plus facilement et plus rapidement du Responsive Design dans la bulle.

Copier une fois le paquet d'en-tête sur. Et si le Nocode Germany Autos. Et les débats appellent la biologiste. Ensuite, nous avons quasiment besoin d'un groupe de répétition. Et nous l'adaptons un peu pour qu'il convienne aussi à un modèle de voiture. Nous supprimons l'icône et. Nous allons ici sur payer, c'est le nom du bouton, nous l'adaptons ! Voilà. Et nous sommes maintenant quasiment un groupe répétitif qui doit afficher la voiture individuelle. Pour cela, nous créons tout d'abord une entrée dans la base de données et nous l'appelons voiture. La craie et l'auteur ont quasiment une fois la marque, son texte, puis le modèle. De même, un texte, puis un prix. C'est un chiffre. Et ensuite une. Une image. C'est une image. Et on peut encore faire l'année de construction. C'est aussi un nombre. Nous allons sur App data URL voitures et créons cela manuellement. La première année de construction 2000 20. Zapier pour ainsi dire. Photos stockées sur Unsplash. Marque BMW, modèle M4 Prix. On fait maintenant 85000. Et de la craie. Ah oui, 2021. prix 55000. et 20 euros et craie. Maintenant, pour ainsi dire. Allons dans l'Elementary Liste Repeating Group et changeons ici maintenant de Text à User. Do Search for Auto n'ont pas besoin de restriction.

Et maintenant, à notre tour, nous nous adaptons ici à la voiture de Current cell. Et ici aussi, la voiture pourrait. L'image de marque. Faisons l'image dynamique des voitures des groupes de pairs et prenons les clés API de l'image et recyclons l'icône qui tombe chez les gens de l'épice. Ici aussi, 80 80. Ici, nous faisons l'année de construction. La marque de la voiture. Ici, nous faisons des clubs de peering, des voitures. Le modèle. Et enfin, Cubs apparient les voitures Prix formatent le tout mais avec un décimal de deux. Et une virgule. Et derrière, on fait des euros.

Nous allons maintenant passer en avant-première pour voir l'ensemble. Et comme vous le voyez, nous avons quasiment deux modèles et le bouton Payer qui, à son tour, fait la différence avec Stripe. Pour finir, dans l'onglet "design", j'aimerais encore séparer Lock et Sein.

Cela signifie qu'à chaque fois que nous utiliserons Stripe, nous aurons besoin d'un Current users et que nous devrons être connectés. Et c'est pourquoi j'utilise Bubble Elements. Il s'agit d'un pop up de blog et nous l'ajoutons, mais au bouton Login, nous faisons un workflow Start/edit et des actions d'élément Show et nous affichons ce pop up Zainab Login et nous faisons aussi le workflow conditionnel suivant Si Current users est connecté, alors le texte Login est le sien et si Current users est attiré, alors le texte Lockout est le sien. Nous devons bien sûr représenter cela dans l'onglet Workflow, c'est-à-dire que ce bouton n'est activé que si Current users se connecte et que nous copions une fois le Workflow. Si Current users le verrouille donc quasiment ici. Ensuite, ce n'est pas Show, mais alors Account attire les utilisateurs et.

Ensuite, nous allons dans Plugins et Plugin. Et nous ajoutons le plugin officiel de Bubble, qui est gratuit, à savoir Stripe install. Et vous voyez maintenant que nous avons quasiment besoin de toutes ces différentes informations. Pour cela, nous devons nous inscrire sur Stripe. Je vais sur être stripe dotcom. En . Don't have a account of his. Ensuite, nous devons activer le compte chez Stripe.

Je le fais ici quasiment pour le montrer. J'ai fait un rapide tour d'horizon et nous avons activé le compte et nous avons maintenant deux modes : le mode live pour recevoir vraiment de l'argent dans notre paiement, mais aussi le mode de développement, à savoir le mode test ci-dessus. Pour cela, nous allons maintenant dans diverses clés API et voyons les différentes clés sous Clés API. Je clique ici sur Copy, puis nous allons dans le plugin Bubble et prenons une fois le Published commode.

Et pour Development mode live, c'est pareil, parce que je ne veux justement pas faire de Live Peyman. Ensuite, nous prenons la clé secrète et la copions. Faire la même chose pour les clés secrètes de Development mode Live et nous avons encore besoin du client qui se connecte à Settings discover more products enable. Maintenant Google.

Et ce quasiment pour faire du marketplace. Continuo, en fait. Une fois que c'est activé, nous pouvons maintenant aller dans Settings Connected Settings. Regarde ici ton Client ID pour le Test Mod. Enfin, nous avons encore besoin d'une image. Et le nom pour le Strip Checkout. Nocode (code). Ottos, par exemple. J'aime utiliser la version 3 de Stripe Checkout, qui est en lecture seule. Nous allons maintenant dans l'onglet Design pour y introduire de la logique. Tout d'abord . Type of content est Auto et current cell's Auto et aussi ici au groupe du bouton Type of content est Auto fahren Groups Auto.

Et nous appelons le bouton Payer au bouton Payer nous faisons le conditionnel suivant Si Current users attire fait alors l'élément est click Bubble activé et si Current users attire lui alors l'élément est un click. Bubble n'est pas activée parce que Strip nous demande toujours que le Current users l'attire est start/edit workflow.

Nous allons sur Payment Search User. Le prix est celui de Peer Groups Auto, la devise est l'euro. Le nom est Peer Groups Auto. Make. Et un espace pour un grand modèle de voiture. La description est Peer Groups Autos Année de construction. Nous n'avons pas d'image statique, mais nous voulons dire ton image Peer groups auto save image et. Avec IMAX. Understatements Krypta est quasiment quoi sur le paiement par carte de crédit, puis m'apparaît No Code Germany Autos.

Nous avons ici encore d'autres possibilités, comme il Text Road to Checkout. Ensuite, nous pouvons quasiment indiquer dans Strip différents static choices et dynamic data exits. Nous pouvons encore voir tout cela dans la documentation. Ou nous faisons encore une vidéo détaillée. Et à la fin, nous recevons quasiment un message de réussite de Stripe. Nous pouvons l'afficher ou non. Peut-être une mention, avant même de passer à l'aperçu. Vous voyez toujours la référence ici. Nous avons ici une excellente documentation sur le plugin Strip dans la bulle. Je l'ai également mise en lien ici. C'est l'un des plugins les plus complets que Bubble ait construit et aussi l'un des plugins les plus mis à jour, parce que Strip et Payment sont extrêmement importants pour votre produit, pour tous nos produits.

Nous allons maintenant aller une fois sur Preview et regarder une fois... Nous voyons les deux voitures payer le blason n'est pas quickbook. Pour cela, nous devons nous connecter une fois. La sienne. Nous voyons maintenant que le lockout fonctionne et aussi le bouton payons-le une fois la Model 3.

Et nous voyons maintenant notre checkout, que nous pouvons acquérir une Model 3 pour 55000 euros. Nous sommes toujours en mode de développement. Cela montre aussi que le compte de test est là. Chez Strip, dans la documentation sous Strip dot com slash Stocks, nous trouvons quasiment Cat Testing, à savoir le test d'intégration. Et nous voyons ici des cartes très différentes que nous pouvons tester. Par exemple, cette carte Visa qui fonctionne. Nous la copions. Et nous payons maintenant 55000 en mode test. La transaction est passée.

Nous allons être redirigés. Ici, ce pop up. Et bien sûr, nous pouvons maintenant adapter notre flux de travail en fonction de ce que quelqu'un a payé. Mais ce qui est passionnant, c'est que lorsque nous retournons dans le tableau de bord de Stripe dot com, nous allons dans Payment et nous voyons maintenant que nous avons effectivement reçu un paiement. A savoir pour la Model 3, que nous avions encore tout à l'heure dans notre base de données. No Code Germany Autos. Nous voyons la plateforme iPhone Stripe et nous voyons aussi d'autres possibilités que nous pourrons obtenir plus tard via l'API, comme par exemple le reCAPTCHA. Tesla Model 3 plus ou moins déclenchée. Comme nous l'avons vu, nous pouvons nous connecter assez rapidement à Bubble, l'une des clés API les plus puissantes et les plus performantes sur Internet, afin de recevoir de l'argent pour votre logiciel.

Bien entendu, il est presque impossible de présenter Stripe dans toute sa complexité dans un seul tutoriel. Mais cette introduction vous montre comment commencer à utiliser le plugin. Si vous souhaitez étendre ce plugin parce que les fonctions ne sont pas disponibles, l'API est toujours à votre disposition, via l'API Connector. Pour savoir comment utiliser l'API Connector, j'ai ajouté une vidéo ci-dessus.

Si vous avez aimé cette vidéo, n'hésitez pas à cliquer sur le bouton "J'aime" ou à vous abonner à notre chaîne. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires. Je vous souhaite beaucoup de succès avec Bubble et vous dis à bientôt.