How to Braintree - Wie neben PayPal auch andere Bezahldienste wie Google Pay und Apple Pay in Websites oder Apps angesprochen werden können

Unser Experte für Agile Softwareentwicklung Patrick erklärt, wie er in dem Framework Capacitor ein Plugin geschrieben hat, welches mittels Braintree zahlreiche Zahlungsabwicklungen tätigen kann.

Die Bezahldienste PayPal, Google Pay und Apple Pay gelten als relativ bekannt. Welche Rolle spielt Braintree dabei, Patrick?


Braintree ist ein Online-Zahlungsdienstleister, der seit 2007 existiert und schnell weite Bekanntheit erlangt hat. Seit 2013 gehört Braintree zu PayPal Holdings, Inc. und bietet eine Plattform für die Abwicklung von Online-Zahlungen an. Braintree ermöglicht es dem Handel, Kreditkartenzahlungen, PayPal-Zahlungen, und auch andere Zahlungsmethoden zu akzeptieren, darunter auch digitale Wallets wie Google Pay und Apple Pay.
Braintree ist besonders bei Online-Händlern und E-Commerce-Plattformen beliebt, da es eine einfache Integration in Websites und mobile Apps ermöglicht. Handelnde können die Dienste von Braintree nutzen, um Zahlungen sicher und effizient von ihren Kund:innen entgegenzunehmen. Braintree hilft auch bei der Verarbeitung von Transaktionen, Betrugsprävention und der Verwaltung von Abrechnungen. Es fungiert sozusagen als Middleware zwischen dem Handelnden und den verschiedenen Zahlungsanbietern, einschließlich PayPal, Google Pay und Apple Pay.
Insofern spielt Braintree eine wichtige Rolle bei der Bereitstellung von Zahlungslösungen für Online-Unternehmen und trägt dazu bei, die Akzeptanz und Abwicklung von Zahlungen zu erleichtern, einschließlich bekannter Dienste wie PayPal, Google Pay und Apple Pay.

Und wo kommt dann Capacitor ins Spiel?

Capacitor ist eine Laufzeitumgebung für Webanwendungen, in der diese auf einem Smartphone oder PC (statt eines Browser) laufen können und dabei auf mehr native Funktionen dieses Gerätes, wie z.B. Push-Nachrichten, GPS oder die Kamera zugreifen können. Um das zu ermöglichen, nutzt Capacitor, sehr ähnlich wie das ältere Cordova von Apache, eine Reihe von Plugins. Diese bilden sozusagen die Brücke zwischen der Webanwendung und den nativen Gerätefunktionen, sodass die Entwickler:innen der Webanwendung kein genaueres Wissen über jede der Zielplattformen haben müssen.

Schaubild, dass zeigt wie das Plugin Braintree und WebApp funktionieren
Die Wechselwirkung zwischen Braintree Plugin und Webapp

Welche Zahlungsmethoden wurden bislang angeschlossen?

Bislang haben wir mit Braintree nur PayPal Zahlungen produktiv angebunden. Das Plugin ist jedoch bereits jetzt in der Lage, auch Google Pay und Apple Pay anzusprechen. Eine Erweiterung um weitere von Braintree unterstützte Zahlungsmethoden wie „Click to Pay“, „Samsung Bezahlen“ sowie „Venmo“ sollte mit einem vergleichsweise geringen Aufwand möglich sein.

Auf welche Herausforderungen bist du bei der Entwicklung des Capacitor-Plugins zur Verwendung des Braintree Gateways gestoßen?

Bei Android und iOS sind die Vorgehensweisen sehr vergleichbar. Die Schnittstellen wurden anscheinend neu überlegt und sind intuitiver. Die Entwicklung des Plugins hat sich hierfür als vergleichsweise einfach herausgestellt. Im Web hat sich das Ganze etwas schwieriger gestaltet. Die Schnittstelle dort kommt ursprünglich aus der nun veralteten PayPal checkout.js Bibliothek. Die Parameter sind dafür sind teilweise schwer verständlich dokumentiert, sodass ich mich eine ganze Weile in der Braintree Dokumentation Home - Documentation  durchwühlen musste, um zu verstehen, wie diese Schnittstelle jedoch tatsächlich funktioniert. Im Gegensatz zu Android & iOS ist beispielsweise die Handhabung des Client-Tokens für den Zugriff auf die API anders umgesetzt. Bei den mobilen Plattformen wird dieser über einen separaten Service bereitgestellt, und man kann den Braintree Client unabhängig davon erstellen. Wird der Token dann bei der Zahlung benötigt, holt der Client sich den Token vom Service. Im Web kann der Client nur direkt unter Angabe des Tokens erstellt werden, was bedeutet, dass der Workflow bei der Nutzung durch das Plugin so angepasst werden muss, dass der Client im Web zu einem anderen Zeitpunkt instanziiert werden muss, ohne dass die Nutzenden des Plugins das berücksichtigen müssen. Eine weitere Herausforderung stellten die TypeScript Types für Braintree-Web dar. Dadurch, dass Braintree Web auf JavaScript basiert, und wir in unseren Hybrid Apps unter anderem mit TypeScript arbeiten, war hierfür eine Definition der Types erforderlich. Um diese nicht selbst schreiben zu müssen, wurde auf das Paket von GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.  zurückgegriffen. Auch hier stellte sich die Verwendung als herausfordernd dar, da nur dürftig dokumentiert wurde, wie diese zu nutzen sind und die Code Beispiele sich teilweise noch auf checkout.js bezogen.

Was ist der größte Vorteil deiner Implementierung?

Wie alle Capacitor-Plugins, bündelt sie die SDKs von Web, Android und iOS unter einer gemeinsamen Javascript Schnittstelle. Damit werden Entwickler:innen von Hybrid Apps einzelne Entwicklungsaufwände für jede Plattform abgenommen und erleichtert ihnen in diesem Fall die Zahlungsabwicklung für ihre Nutzenden. Mir ist es außerdem wichtig gewesen, dass wir diese Entwicklung für die Open Source Community von Capacitor verfügbar machen. Wir nutzen die Arbeit dieser Community in vieler unserer Projekte und geben so etwas von unserer eigenen Entwicklung an diese zurück. So hat jeder, der diesen Artikel liest, auch tatsächlich die Möglichkeit meine Arbeit daran nachzuvollziehen und das Plugin selbst auszuprobieren und nicht nur eine Info darüber, welche Herausforderungen ich hatte. Ich weiß, dass ich nicht der Erste bin, der genau eine solche Lösung für Braintree entwickelt hat, jedoch ist unsere Version derzeit die aktuellste und ich bin stolz darauf, dass wir sie mit der Community teilen.
Das Plugin ist unter MIT-Lizenz auf Github zu finden: PROJEKTIONISTEN

4 verschiedene Screens mit Code, die die den Ablauf des Plugins mit einer Paypal Zahlung dastellen.
Vereinfachtes Beispiel davon, wie aus einem einheitlichen Aufruf des Plugins in der Webapp eine Paypal Zahlung auf den unterschiedlichen Plattformen angestoßen wird.

Wie lautet dein Fazit? Würdest du im Nachhinein alles genauso angehen?

Kurz gesagt: Ja. Es ist sinnvoller ein abstrakteres Plugin zu bauen als ein projektspezifisches. Wir sind somit bereits jetzt darauf vorbereitet, dieses Plugin mit wenig Aufwand zu erweitern. Außerdem könnte Apple Pay und Google Pay sogar ohne Aufwand direkt produktiv genutzt werden. Es fehlt lediglich die Freigabe im Braintree Gateway, welche in unserem Falle über einen Drittdienstleister erfolgen würde. Dieser geringe Aufwand ist aber natürlich nur möglich, sofern unsere Kunden bereits auf Capacitor umgestiegen sind.

Kurz zusammengefasst

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Entdecken
Zurück zur Stories-Übersicht
Startet euer Projekt mit uns!
Wir freuen uns auf euch!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
Kontakt
Foto von aufgeschlagener Zeitschrift Der Nahverkehr
Foto von aufgeschlagener Zeitschrift Der Nahverkehr
Teaser Bild der Story oder des Projektes
Foto von aufgeschlagener Zeitschrift Der Nahverkehr
Artikel im Nahverkehr zu Deutschlandticket und agilen Werten
Artikel im Nahverkehr zu Deutschlandticket und agilen Werten
Artikel im Nahverkehr zu Deutschlandticket und agilen Werten
Artikel im Nahverkehr zu Deutschlandticket und agilen Werten
Digitale Mobilität

Im Artikel "Die Entwicklung des Deutschlandtickets – die agilen Werte auf dem Prüfstand" in "Der Nahverkehr" berichten die Autorinnen Mareike (Collaboration Managerin) und Clara (UX- & UI-Designerin), dass es aus Sicht der PROJEKTIONISTEN nur durch eine agile Zusammenarbeit möglich war, das Deutschlandticket innerhalb kurzer Zeit in den Apps der verschiedenen Verkehrsunternehmen zu implementieren.

Entdecken
Entdecken
Digitale-Barrierefreiheit-Grafik
Digitale-Barrierefreiheit-Grafik
Teaser Bild der Story oder des Projektes
Digitale-Barrierefreiheit-Grafik
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Beratung

BITV, WCAG, BMAS – viele Abkürzungen, ein Ziel: Barrierefreiheit in der digitalen Welt umsetzen. Doch was steckt hinter dem Begriff digitale Barrierefreiheit und was bedeutet sie für die Zukunft von Apps und Webseiten?

Entdecken
Entdecken

Kontakt

Wir freuen uns auf euch!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für deine Nachricht! Wir werden uns so schnell wie möglich bei dir melden.
Ihre Nachricht konnte nicht gesendet werden. Schreibe uns bitte per Mail (info@projektionisten.de).