Technologie

Wie integriere ich die Braintree App in meine bestehende Website?

Melden
  1. Einführung in die Braintree Integration
  2. Schritt 1: Braintree Konto erstellen und API-Zugang besorgen
  3. Schritt 2: Serverseitige Einrichtung und SDK Integration
  4. Schritt 3: Clientseitige Integration – Einbinden des Drop-in UI
  5. Schritt 4: Zahlung serverseitig abschließen
  6. Zusätzliche Hinweise und Sicherheit
  7. Fazit

Einführung in die Braintree Integration

Braintree ist eine Zahlungsplattform, die es ermöglicht, sichere Online-Zahlungen einfach in Webseiten oder Apps zu integrieren. Um Braintree in Ihre bestehende Website zu integrieren, müssen Sie sowohl serverseitige als auch klientenseitige Schritte durchführen. Serverseitig wird meist eine SDK von Braintree verwendet, um Transaktionen zu erstellen und zu verwalten. Auf der Clientseite sorgt das Drop-in UI oder individuelle Komponenten für die Erfassung von Zahlungsinformationen der Kunden.

Schritt 1: Braintree Konto erstellen und API-Zugang besorgen

Zunächst benötigen Sie ein Braintree Konto. Nach der Registrierung erhalten Sie Zugang zu Ihrem Braintree-Dashboard. Dort finden Sie die erforderlichen API-Schlüssel, darunter Merchant ID, Public Key und Private Key. Diese Schlüssel sind notwendig, um eine sichere Verbindung zwischen Ihrer Website und Braintree herzustellen. Bewahren Sie insbesondere Ihren Private Key sicher auf und geben Sie ihn niemals im Frontend-Code preis, da dies ein Sicherheitsrisiko darstellt.

Schritt 2: Serverseitige Einrichtung und SDK Integration

Der nächste Schritt ist die Installation eines Braintree SDKs auf Ihrem Server, je nachdem welche Programmiersprache Sie verwenden. Braintree bietet SDKs für verschiedene Sprachen, wie Node.js, PHP, Python, Ruby und Java. Über das SDK können Sie Zahlungs-Transaktionen initiieren, Tokens generieren und Zahlungsinformationen sicher verarbeiten.

Als Beispiel für Node.js installieren Sie zunächst das Braintree-Paket mit npm install braintree. Danach konfigurieren Sie eine Verbindung zum Gateway unter Verwendung Ihrer Zugangsdaten. Das Beispiel unten zeigt, wie Sie ein Gateway initialisieren und einen Client Token generieren, der für die Clientseite wichtig ist:

const braintree = require(braintree);const gateway = braintree.connect({ environment: braintree.Environment.Sandbox, // oder Production merchantId: Ihre_Merchant_ID, publicKey: Ihr_Public_Key, privateKey: Ihr_Private_Key});app.get(/client_token, (req, res) => { gateway.clientToken.generate({}, (err, response) => { if (err) { res.status(500).send(err); } else { res.send(response.clientToken); } });});

Der erzeugte clientToken wird an das Frontend gesendet. Dies ermöglicht dem Client, eine sichere Verbindung zum Braintree-Server herzustellen und Zahlungsinformationen zu erfassen, ohne sensible Daten direkt auf Ihrem Server zu handeln.

Schritt 3: Clientseitige Integration – Einbinden des Drop-in UI

Auf der Clientseite binden Sie das Braintree Drop-in UI Script ein, welches ein fertiges und benutzerfreundliches Zahlungsformular bereitstellt. Diese Komponente übernimmt die sensible Erfassung und Tokenisierung der Zahlungsinformationen, wie Kreditkartendaten oder PayPal Accounts.

Fügen Sie in Ihrem HTML den folgenden Skript-Tag hinzu:

<script src="https://js.braintreegateway.com/web/dropin/1.34.0/js/dropin.min.js"></script>

Anschließend erstellen Sie innerhalb Ihrer Seite einen Container für das Drop-in UI, zum Beispiel ein <div id="dropin-container"></div>, und ein Formular für die Bezahlung. Danach initialisieren Sie das Drop-in UI mit dem Client Token von Ihrem Server.

<div id="dropin-container"></div><button id="submit-button">Bezahlen</button><script>fetch(/client_token) .then(response => response.text()) .then(clientToken => { braintree.dropin.create({ authorization: clientToken, container: #dropin-container }, (createErr, instance) => { if (createErr) { console.error(createErr); return; } document.getElementById(submit-button).addEventListener(click, () => { instance.requestPaymentMethod((err, payload) => { if (err) { console.error(err); return; } // Senden Sie payload.nonce an Ihren Server fetch(/checkout, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ paymentMethodNonce: payload.nonce }) }).then(response => { if (response.ok) { alert(Zahlung erfolgreich!); } else { alert(Zahlung fehlgeschlagen.); } }); }); }); }); });</script>

Das Drop-in UI kümmert sich um die sichere Eingabe und Verarbeitung der Zahlungsdaten. Das Ergebnis ist eine paymentMethodNonce, die eine verschlüsselte Referenz auf die Zahlungsinformation darstellt. Diese Nonce senden Sie an Ihren Server, um die Zahlung zu verarbeiten.

Schritt 4: Zahlung serverseitig abschließen

Auf dem Server empfangen Sie die paymentMethodNonce, die Sie verwenden, um eine Transaktion durch das Braintree SDK zu erstellen. Dabei geben Sie den Betrag und weitere Details wie z.B. die Währung an. Ein Beispiel in Node.js:

app.post(/checkout, (req, res) => { const nonceFromClient = req.body.paymentMethodNonce; const amount = 10.00; // Beispielsweise Betrag der Zahlung gateway.transaction.sale({ amount: amount, paymentMethodNonce: nonceFromClient, options: { submitForSettlement: true } }, (err, result) => { if (result && result.success) { res.sendStatus(200); } else { res.status(500).send(result.message); } });});

Dieser Schritt führt die tatsächliche Belastung der Kreditkarte oder eines anderen Zahlungsmittels durch. Sie sollten hier auch Fehlerfälle sauber abfangen und Ihren Kunden entsprechende Rückmeldungen geben.

Zusätzliche Hinweise und Sicherheit

Achten Sie unbedingt darauf, dass Ihr Server mittels HTTPS läuft, um Zahlungsdaten und API-Schlüssel sicher zu übertragen. Die privaten API-Schlüssel dürfen niemals im Frontend-Code eingebunden sein. Nutzen Sie außerdem Webhooks von Braintree, um Benachrichtigungen über Zahlungen, Rückerstattungen oder andere Ereignisse zuverlässig zu verarbeiten und in Ihrer Datenbank zu speichern.

Darüber hinaus empfiehlt es sich, ausführlich die Dokumentation von Braintree zu lesen und Tests im Sandbox-Modus durchzuführen, bevor Sie in den Produktivmodus wechseln. Dadurch stellen Sie sicher, dass alle Zahlungsprozesse reibungslos und sicher ablaufen.

Fazit

Die Integration der Braintree App in eine bestehende Website erfordert die Einrichtung serverseitiger Kommunikation mittels SDKs, die Erzeugung eines Client Tokens, die Einbindung des Drop-in UIs für die sichere Erfassung von Zahlungsinformationen und zuletzt die vollendete Transaktionsverarbeitung serverseitig. Mit den richtigen Schritten können Sie damit Ihren Kunden eine sichere, flexible und komfortable Zahlungsmöglichkeit anbieten.

0

Kommentare