Bubble.io Tutorial - Paypal Zahlungen in Bubble integrieren

Kostenlose Schritt-für-Schritt Anleitung um Paypal Braintree in Bubble zu integrieren.

Chris Strobl
Chris Strobl

🎉  300 Subscriber Special: Dies war unser erstes Videotutorial in Bubble und wir haben es nie hochgeladen, weil wir uns damals nicht sicher waren, ob es gut ist. Danke vielmals für 300 Abonennten. Mit Hilfe des Bubble Braintree Plugins von Paypal zeigen wir, wie Du Zahlungen von Kunden annehmen kannst.

Deutsches Bubble Tutorial: Paypal Zahlungen in Bubble

Video Transkript

[00:00:01] Ich zeige euch heute, wie man Paypal im Bubble integriert und wie das ganz einfach geht. Im ersten Teil zeige ich euch die Registrierung auf Brain Tree, das der Zahlungsdienstleister von Paypal für Developer Payment. Im zweiten Teil machen wir eine Einmalzahlung.

Das heißt ein Produkt, was man einmal kauft. Und im dritten Teil geht es um Abos, um Mitgliedschaften. Sowohl die Erstellung als auch die Kündigung. Im ersten Schritt locken wir uns bei Rentrée ein bringt gehört ja zu zu Paypal. Und dort können wir auch Rons mit Paypal Logins kreieren. Malweise dauert es mehrere Tage. Tipp 2 Tage gebraucht, um mich zu registrieren. Bei Brain-Drain als offizieller Sela. Das hat natürlich zu tun mit den. Mit den Regulatory, mit den Steuern, mit Geldwäsche Gesetzen. Aber es geht relativ schnell ein bis zwei Tage. Aber was wir sofort machen können, ist euch tatsächlich bei der Sandbox von Brain Threat zu registrieren.

Das ist quasi ein Test, den Diamond. Und können Sie mal einloggen. Mit. So, und jetzt seht ihr hier tatsächlich ein paar Transaction schon wenn man das erste Mal draufkommt das wird bei euch so sein, sieht man als allererstes die API Keys. Wir erstellen jetzt gleich mal einen neuen API Keys für für Bubble. Das heißt hier der Public Key, der Private Key und was wir jetzt machen, ist, um das Setup zu machen, mit Bubble Neu Page angefangen. Wenn wir jetzt auf Bubble gehen, dann gehen wir in die Plugins und installieren erstmal Rentrée. Das ist ein offizielles Bubble Plugin. Das heißt, wir brauchen keine Sorgen machen. Da funktioniert alles. Wir haben jetzt hier drei IDs, die wir brauchen. Die Merchant ID, die die praktizierend Private Key nutzen jetzt die Test Sachen, also muss man hier auf View. Das heißt, wir hier in Public, den Merchant und den Private Key. Ich werde natürlich danach löschen, das die wir da kopieren das kurz rein.

Doch das Ziel ist jetzt, Paypal zu integrieren und es zu schaffen, dass wir einen festen Betrag mit Paypal dem User in Rechnung stellen können und dass es dann ankommt. Das erste, was wir Hilfe brauchen bei Payment ist ein ein Login, damit wir einen einen User lockt ihn haben.

Wie ihr wisst haben wir im Bubble das Gute, das wir die Re useful elements haben und ganz login system. Als erstes machen jetzt hier. Und dann gehen wir in Element actions Show und zeigen das Pop up. Wenn wir uns jetzt einloggen, wollen wir noch eine Bestätigung, ob wir wirklich den User lockt ihn haben und machen es dafür so, dass wir Köln users email. Hens of Preview.

Und machen ein Lock in sein up machen Paypal. Ed No Code steht dort. Ein Passwort und wir ab haben jetzt hier den User live. Was brauchen wir? Nichts. Jetzt geht's ans Eingemachte. Wir sagen Zahle 150 Euro mit Paypal. Und wenn wir hier den Workflow tab klicken, gehen wir auf Payment und haben scharz. Die Current users, den Amount können wir entweder dynamisch machen oder fix. Und die Deskription nennen wir Paypal. Test für No Code Studio Die Button Caption ist Pano und hier jetzt noch ein paar sondere Features wie z.B. 3D Secure Jack oder dass wir den nur autorisieren. Das heißt, wir chargen nichts, wir geben nur die Autorisierung und chargen dann später.

Das habt ihr z.B. bei verschiedenen Right Sharing Diensten, dass die erst einmal autorisieren, um zu schauen, ob Geld drauf ist und dann den fixen Betrag erst am Ende in Rechnung stellen. Und ich würde fast sagen, wir machen noch einen Alert. Das hilft eigentlich immer sehr gut beim beim Debuggen, wenn man, wenn man noch einen Alert hat, um zu sehen, was ist denn die Meldung? Und fix Position top und hier diese Meldung des Erlöses können wir jetzt eben uns ein Ehrmann Action Display Show Message.

Und hier können wir die Message noch KÃste meiden, indem wir schauen Resa Seward. Wir können hier verschiedene Sachen holen, wie z.B. den Produktname in Email of the Zaugg USA, die Order Description Charge it.

Ich würde mal sagen, wir holen uns die Search, die in diesem Step, wenn wir jetzt auf Preview klicken. Und Zahlen mit Paypal werden weitergeleitet auf Paypal. Und ich mache im ersten Schritt jetzt hier.

Wir haben ja das Sandbox in vehement mokant Boxen Wyman Positivist Purchase. Jetzt hatte Sandbox ist bei Paypal wie dies Test Einheit hat jetzt hier diesen User und wir drücken Pay Now Kreditkarte Success Politkaste und kriegen jetzt hier folgende Idee, die ich mal speichere Wenn wir jetzt zurückgehen uns ins Dashboard bei Paypal vielleicht ganz kurz warten, aber okay, was kriegen wir es hier? Wir haben folgende Idee. Search Kurs das genau gleiche Idee, das so super in dem Peyrade Exempel 150 Euro.

Wir schauen uns das jetzt mal an.. Helen Zel paypal ett No Code studio D Hier ist die kaste Fidi, die jetzt festgelegt wurde. Die Payment Methode. Der betrag. Der token. Die zeit. Natürlich ein Fake Payer Idee, das ist ja vollkommen klar und wir haben hier den Paypal Deskription Test vor No Code Studio, wir haben auch die Transaktion 4 und sehen jetzt hier wie wie das funktioniert. Also so im dritten Teil wollen wir jetzt ein Abo Modell für euch integrieren mit Paypal und dass eure Kunden ein Abo abschließen können. Dafür geben wir ihnen selbst Triptychons dann unter Plants und erstellen mal einen neuen Plan. Basis, Basis, Friktion brauchen wir gar nicht sagen. 10 Euro im Monat machen das jedes Monat. Wenn ihr wollt, dass das jährlich ist, dann können wir natürlich auch 100 pro Jahr machen. Können ja mal jetzt auf 10 pro Monat machen und die könnt ihr spezifizieren, ob ihr sofort bezahlen wollt am 1 ab 15 Monaten, ob ihr ein Try wollt oder aber auch Sachen wie verschiedene Addons.

Das sind so Sachen wie ob ich bei einem Mitgliedschaft noch noch ein zweites Paket kaufe, wie z.B. den Pass für für meine Freundin oder für meinen Kumpel und verschiedene Discount Codes. Wir stellen jetzt diesen Plan. Erstellt den reinen Plants und haben jetzt diesen Basis Plan. Was jetzt ganz wichtig ist bei Bubble. Manchmal gibt's da Probleme, deswegen refresh ich gerne die Seite.

Manchmal ist es sogar notwendig, auch das Plugin neu No Code konfigurieren, das da da ist. Da hängt dieses Paypal Plugin ein bisschen hinterher und man sollte ebenes Harri Fresschen, dass der das neu sich holt bei Bubble. Manchmal hilft es z.B. hier, das rauszunehmen, sich das anzuschauen, reinzugehen, mit der ja tatsächlich die API reaktiviert. Gleichzeitig auch wichtig hab ich gemerkt als Bark manchmal, dass man einen Lockout nochmal hat und einen neuen User. Das geht ja ganz einfach man geht auf Kuhnt, lockt die User auf die rein und sind Einflug Paypal. Oder wir stellen einen neuen Account. Paypal Mitgliedschaft. Sind wir hier drin und brauchen dann hier einen neuen Button? Mitglied werden Payments schreibt die to plan und hier haben wir jetzt das Thema manchmal im Sandbox im jemand kommt der Plan nicht direkt. Ich nehme mir hier die Plan Idee ist es in diesem Fall Basis. Und am Hier jetzt subscribe the user tour plan.

Denn auf Preview. In Sandbox war jemand. Scribe. 6 Success für Andrew Subscribe to the plain so super. Jetzt schauen wir im Paypal rein Refresh an und sehen, wir haben eine aktive Subscription hier. Und das ist das Schöne mit diesem Payment Sachen kann sich genau anschauen. Wir sehen jetzt müssten eigentlich den Subscribe haben. Hast du ne Idee? Komm, wir sehen hier Paypal Mitgliedschaft in No Code Studio. Perfekt. Und wenn wir jetzt. Super! Das heißt, jetzt haben wir ein aktives Subscribe in unserem Plan.

Wenn wir jetzt zum dritten Punkt kommen zum letzten Teil des Videos ist Wie kann ich eine Mitgliedschaft kündigen und ihr werdet sehen, wie einfach das ist. Mitgliedschaft kündigen geht rein Payment kanzelte Köln Plan und ihr müsst nichts mehr tun, sondern die Ich-AG, wenn man will frischt. Ob der eben einen Plan hat und Jokers CSP Success Fully kanzelt. Und wenn wir jetzt hier in Pflanz reingehen, sollten wir sehen, wie wir ein kanzelt Member haben und nun Status kanzelt haben.

Wer mehr Funktionalität braucht, kann natürlich auch den API Connector von Bubble verwenden. Dann kann man die HPI komplett KÃste, Meisen und z.B. Voices oder aber auch Referenz oder Free Trike komplett selbst konfigurieren. Wenn ihr mehr dazu lernen wollt, wie der API Connector geht, dann geht doch auf dieses Video. Unabhängig davon es natürlich auch den Konkurrent von Paypal Stripe, den ihr auch verwenden könnt. Dazu habe ich ein Video gemacht, wie man Stripe einbindet. Bis bald und viel Erfolg!

Plugins