Tutorial de Bubble.io - Introducción a Stripe (Cargar al usuario actual)

Video tutorial paso a paso para aceptar pagos a través de Stripe en Bubble.io.

Chris Strobl
Chris Strobl

In diesem Video lernt ihr wie man die Stripe API mit dem offiziellen und kostenlosen Plugin von Bubble in Bubble einbindet. Wir entwickeln Schritt-für-Schritt ein System, um einen gebrauchten Tesla Model 3 zu kaufen.

A la izquierda:

Bubble.io Tutorial - Stripe Payments in Bubble (One Time Payments)

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute eine Einführung in Stripe in der Verbindung mit Bubble Stripe ist quasi die Standart Internet Zahlungs Plattform und ist komplett aufgebaut, also eine API. Das heißt ein Application Programming Interface und eine Super Developer Dokumentation erlaubt euch fast alle möglichen Sachen zu machen.

Wenn ihr auf Stripe dot com slash stocks geht, seht ihr, welche verschiedenen API Keys es gibt und welche Produkte und wie man quasi all diese Produkte wiederum ansteuern kann. Zum Beispiel um Online Payments zu akzeptieren, um Abo Modelle, aber auch zum Beispiel um komplexe Geschäftsmodelle wie Plattformen mit Strip Connect zu machen. Wir gehen jetzt einmal in Bubble und machen hier das Beispiel eines Auto save Marktplatzes, wo wir gebrauchte Autos kaufen können. Die Größe der Seite ist 960 width und height haben wir jetzt mal auf 3000 und das ist eine responsive Seite. Ich nutze wiederum fürs Design Frames, dafür gibt es auch ein Video, sein kostenlose Chrome Extension, die euch quasi hilft, leichter und schneller im Bubble Responsive Design zu machen.

Kopieren einmal den Header Paket auf. Und wenn den Nocode Germany Autos. Und Debatten nennen Biologin sein ab. Als nächstes brauchen wir quasi eine Repeating Group. Und wir passen diese etwas an, damit sie auch für ein Automodell passt. Wir löschen das Icon und. Gehen hier auf bezahlen, so heißt der Button, passen diesen an! Hier. Und wir sind jetzt quasi hier eine Repeating Group, die das einzelne Auto anzeigen soll. Dafür machen wir als erstes jetzt einen Datenbank Eintrag und wir nennen diesen Auto. Kreide und Autor hat quasi einmal die Marke, seinen Text, dann Modell. Ebenso einen Text, dann einen Preis. Das ist eine Zahl. Und dann ein. Bild. Das ist ein Image. Und wir können noch das Baujahr machen. Das ist ebenfalls eine Zahl. Wir gehen auf App data URL Autos und legen dies manuell an. Das erste Baujahr 2000 20. Zapier quasi. Stock Fotos von Unsplash. Marke BMW, Modell M4 Preis. Wir machen jetzt 85000. Und Kreide. Oh ja, 2021. Preis 55000. Und 20 Euro und Kreide. Nun quasi. Gehen wir in den Elementary Liste Repeating Group und ändern hier nun von Text auf User. Do Search for Auto brauchen keine Restriktion.

Und jetzt wiederum passen wir hier an Current cell's Auto. Und auch hier könnte das Auto. Das Image. Machen wir Dynamik Peer Groups Autos Bild und nehmen Image API Keys und recycle to Icon, die bei Menschen Spice dropping. Auch hier 80 80. Hier machen wir das Baujahr. Die Automarke. Hier machen wir Peering Clubs, Autos. Modell. Und schließlich paaren Cubs Autos Preis formatieren das ganze aber mit einem dezimal von zwei. Und einem Komma. Und dahinter machen wir Euro.

Gehen jetzt einmal auf Preview, um uns quasi das Ganze einmal anzuschauen. Und wie ihr seht, haben wir quasi zwei Modelle und den Button bezahlen, welcher wiederum dann das Spannende mit Stripe macht. Als letztes im designt Tab möchte ich noch Lock und Sein abmachen.

Das heißt, wir werden bei Bubble immer wenn wir Stripe nutzen, einen Current users brauchen und dafür müssen wir eingeloggt sein. Und deswegen nutze ich bei den Bubble Elements. Das sein Blogging Pop up und dieses fügen wir hinzu und machen aber beim Button Login sein Start/edit workflow und Element actions Show und wir zeigen dieses Zainab Login Pop up und dazu machen wir noch folgenden Workflow Conditional Wenn Current users ist, loggt out, dann ist der Text Login seiner und wenn Current users ist, lockt ihn, dann ist der Text Lockout. Das müssen wir natürlich auch im Workflow tab noch repräsentieren.Das heißt, dieser Button ist nur, wenn Current users ist, loggt out und wir kopieren einmal den Workflow. Wenn Current users lockt ihn also quasi hier. Dann ist nicht Show, sondern dann Account lockt die User und.

Als nächstes gehen wir in Plugins und Plugin. Und wir fügen das offizielle Plugin von Bubble hinzu, welches kostenlos ist, nämlich Stripe install. Und ihr sieht jetzt, dass wir quasi all diese verschiedenen Informationen brauchen. Dafür müssen wir uns bei Stripe registrieren. Ich gehe auf stripe dotcom sein. In. Don't have ein Account seiner. Als nächstes müssen wir bei Stripe den Account aktivieren.

Ich mache das hier einmal quasi um das anzuzeigen. Ich habe mich hier jetzt im Schnelldurchlauf und wir haben jetzt einmal den Account aktiviert und haben jetzt quasi zwei Modi einmal live mode, um wirklich Geld zu empfangen in unserem Payment, aber auch den Development mode, nämlich den Test Mod hier oben. Dafür gehen wir jetzt einmal in diverse API Keys und sehen quasi unter API Keys die unterschiedlichen Keys. Ich klicke hier auf Copy, dann gehen wir ins Bubble Plugin und nehmen einmal den Published bequem.

Und für Development mode live gleich, weil ich eben kein Live Peyman machen möchte. Dann nehmen wir den Secret Key, kopieren diesen. Machen das gleiche Development mode Live Secret Keys und wir brauchen noch die Client, die auf Settings discover more products enable connect. Jetzt Google.

Und dieses quasi um Marketplace zu machen. Continuo. Sobald das aktiviert ist, können wir nun in Settings Connected Settings. Sieh dir hier eure Client ID für den Test Mod. Schließlich brauchen wir noch ein Image. Und den Namen für den Strip Checkout. Nocode. Ottos. Ich nutze gerne die Stripe Checkout Version 3, die read only ist. Wir gehen jetzt in das Design Tab, um hier die Logik reinzubringen. Als erstes. Type of content ist Auto und current cell's Auto und auch hier bei der Gruppe des Buttons Type of content ist Auto fahren Groups Auto.

Und wir nennen den Button Button bezahlen beim Button Zahlen machen wir das folgende Conditional Wenn Current users lockt tut dann das Element ist klick Bubble aktiviert und wenn Current users lockt ihn dann das Element ist, ist ein Klick. Bubble ist nicht aktiviert, weil Strip von uns immer verlangt, dass der Current users lockt ihn ist start/edit workflow.

Wir gehen auf Payment Search User. Der Mauen ist Peer Groups Autos Preis, die Currency machen wir Euro. Der Name ist Peer Groups Auto. Make. Und ein Leerzeichen für ein groß Automodell. Die Description ist Peer Groups Autos Baujahr. Statik Image haben wir nicht, sondern wir meinen dein Image Peer groups auto save Bild und. Mit IMAX. Understatements Krypta ist quasi was auf der Kreditkarten Zahlung, dann erscheint mir No Code Germany Autos.

Wir haben hier noch weitere Möglichkeiten, wie er Text Road to Checkout. Dann können wir quasi in Strip verschiedene Static choices und dynamic data Exits angeben. Das können wir alles quasi noch in der Dokumentation anschauen. Oder wir machen noch ein detailliertes Video. Und am Ende bekommen wir quasi eine Success Message von Stripe hier. Die können wir anzeigen oder können wir nicht anzeigen. Vielleicht eine Erwähnung, noch bevor wir ins Preview gehen. Ihr seht hier immer die Referenz. Wir haben hier exzellente Dokumentation im Bubble zum Strip Plugin. Ich habe das auch hier noch mal als Link verlinkt. Eines der umfangreichsten Plugins, die Bubble gebaut hat und auch eines der Plugins, die am meisten aktualisiert werden, weil eben Strip und Payment extrem wichtig ist für euer Produkt, für all unsere Produkte.

Wir gehen jetzt einmal auf Preview und schauen uns das Ganze einmal an.. Wir sehen die beiden Autos der Wappen bezahlen ist nicht quickbook. Dafür müssen wir uns einmal einloggen. Seiner. Wir sehen jetzt das Lockout funktioniert und auch der Button bezahlen wir ihn einmal das Model 3.

Und wir sehen jetzt unseren Checkout, dass wir für 55000 Euro einen Model 3 erwerben können. Wir sind nach wie vor noch im Development mode. Das sieht auch hier, dass der Test Account da ist. Um bei Strip in der Dokumentation unter Strip dot com slash Stocks finden wir quasi Cat Testing, nämlich Test zur Integration. Und wir sehen hier ganz unterschiedliche Karten, die wir testen können. Zum Beispiel diese Visa Karte, die funktioniert. Wir kopieren diese. Und zahlen nun 55000 im Test Modus. Die Transaktion ging durch.

Wir werden zurückgeleitet bekommen. Hier dieses Pop up. Und können natürlich jetzt unseren Workflow anpassen, je nachdem, wenn jemand bezahlt hat. Aber was spannend ist, wenn wir zurückgehen in Stripe dot com Dashboard, gehen wir im Payment und wir sehen nun, dass wir tatsächlich ein Payment erhalten haben. Nämlich für den Model 3, den wir vorhin noch in unserer Datenbank hatten. No Code Germany Autos. Wir sehen die Plattform iPhone Stripe und wir sehen aber hier nun auch andere Möglichkeiten, die wir später alle via API erhalten können, wie zum Beispiel das reCAPTCHA. Tesla Model 3 mancher Triggered. Wir gesehen haben, können wir in Bubble einen der erfolgreichsten und mächtigsten API Keys im Internet relativ zügig anbinden, um Geld zu empfangen für eure Software.

Selbstverständlich ist es fast unmöglich, Stripe in seiner Komplexität in nur einem Tutorial darzustellen. Aber diese Einführung zeigt euch, wie er mit dem Plugin quasi loslegen könnt. Wenn ihr dieses Plugin dann erweitern wollt, weil die Funktionen nicht gibt, steht euch immer noch die API zur Verfügung, nämlich über den API Connector. Hierzu, wie man den API Connector verwendet, habe ich euch noch mal ein Video oben angehängt.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button oder subscribe unseren Channel. Bei Fragen schreibt gerne in die Kommentare Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.

PluginsAPIs