Paymill Integration in Spree Commerce – Teil 2

In Teil 1 haben wir schon einmal einen Einblick darüber gegeben, warum wir Paymill in Spree Commerce einbinden wollten und was so eine Integration mit sich bringt. Im zweiten Teil wollen wir uns nun “das finale Produkt”, also unsere Spree Extension namens spree_paymill beschreiben.

Ablauf einer Bezahlung mit Paymill

Wir hatten beim letzten Mal einen kurzen Überblick darüber gegeben, wie der Service von Paymill funktioniert, wollen an dieser Stelle aber noch einmal ein wenig detaillierte darauf eingehen.

Schritt 1: Kunde wählt seine Bezahlmethode im Shop aus

Ist der Kunde innerhalb des Bestellprozess an der Stelle angekommen, an der er seine Bezahlmethode auswählen kann, so wird ihm ein passendes Formular zur Eingabe der Kreditkartendaten angezeigt. Die hier eingegebenen Daten werden allerdings nicht an den Server des Shops gesendet, sondern direkt an Paymill. Hierfür bindet der Betreiber des Shops eine JavaScript-Datei von Paymill ein.

Anschließend muss er sein Formular noch so anpassen, dass ein Klick auf den Button zum Verschicken des Formulars nicht selbiges absendet, sondern eine JavaScript-Funktion aufruft, die schlussendlich die Daten aus dem Formular per AJAX-Call an den Server von Paymill sendet. Der Shopbetreiber hat sogar die Möglichkeit, die Daten vor dem Absenden mittels von Paymill bereitgestellter Funktionen auf Gültigkeit zu überprüfen.

Sind die Kreditkartendaten vom Paymill-System verifiziert worden, so sendet der Server als Antwort einen Token zurück.

Paymill Einbindung in den Spree Commerce Bestellprozess

Paymill Einbindung in den Spree Commerce Bestellprozess

Schritt 2: Reservierung des Betrages auf der Kreditkarte

Sollte der Kunde sich nun zum Kauf entschließen, so wird nach dem erfolgreichen Durchlaufen der Bestellstrecke eine serverseitige Anfrage vom Shopsystem an die API von Paymill gestellt, mit der der Shop den vom Kunden zu zahlenden Betrag auf dessen Kreditkarte sichert. Sollte diese Anfrage erfolgreich sein, so erhält der Shop als Antwort wieder einen Token zurück, der gleichzeitig als ID der Transaktion fungiert.

Schritt 3: Belastung der Kreditkarte

Der in Schritt 2 erhaltene Preauthorization-Token kann nun verwendet werden, um den Betrag von der Kreditkarte des Kunden einzuziehen, sollte die Ware durch den Shopbetreiber versendet worden sein.

Belastung einer Kreditkarte mittels Paymill

Belastung einer Kreditkarte mittels Paymill

Schritt 4: Rückzahlungen

Ähnlich sieht es für die Rückzahlung des Kaufbetrages an den Kunden aus. Sollte dieser sich später dazu entscheiden, die Ware zurückzugeben, so kann der Shopbetreiber die Rückzahlung an die bei Paymill gespeicherte Kreditkarte veranlassen. Hierfür sendet er an die Paymill API die Transaktionsnummer, welche er bei erfolgreicher Abwicklung in Schritt 3 erhalten hat, in Verbindung mit dem zurückzuzahlenden Betrag.

Rückzahlung eines Zahlbetrages an eine Kreditkarte per Paymill

Rückzahlung eines Zahlbetrages an eine Kreditkarte per Paymill

Zahlmethoden in Spree Commerce

Werden wir noch ein wenig technischer: wie werden Bezahlmethoden in Spree Commerce definiert und integriert?

Das Payment-Model in Spree hat als Mixin das Processing Module Spree::Payment::Processing eingebunden, welches jeder Zahlungsart die für Kreditkartenzahlungen wichtigen Transaktionsmethoden authorize, capture und void bereitstellt. Die erste Methode wird aufgerufen, um einen Betrag auf einer Kreditkarte zu reservieren, die zweite, um diesen einzuziehen und die letzte Methode verwendet man, um das Geld wieder zurück an den Kunden zurück zu zahlen. Dabei werden innerhalb der drei Methoden die Calls lediglich an die eigentliche Implementierung der jeweiligen Bezahlmethode weitergegeben. Diese muss der Entwickler dann selber definieren.

Die neu definierte Bezahlmethode muss von Spree::PaymentMethod abgeleitet werden. Dies ist entweder direkt möglich, oder man erbt von Spree::BillingIntegration, welche selber von Spree::PaymentMethod abgeleitet wurde. Der Vorteil der BillingIntegration ist die – bereits in Teil 1 beschriebene – enge Verzahnung von Spree mit ActiveMerchant.

So wird in unserem Fall ActiveMerchant::Billing::PaymillGateway als sogenannter Provider eingebunden. Dies ermöglicht es uns, innerhalb der drei Transaktionsmethoden den Request direkt an den Provider weiterzugeben. So wird die “schwere Last” in unserem Fall dann durch die Paymill-Anbindung in ActiveMerchant übernommen.

Eine zusätzliche Anpassung mussten wir allerdings vornehmen. Wie bereits beschrieben werden die Kreditkartendaten des Kunden im Payment-Schritt des Bestellprozesses an Paymill gesendet, und wir erhalten einen Token zurück, mit dem wir im Anschluss eine Transaktion durchführen können. Diese müssen wir allerdings irgendwo zwischen speichern. Wir haben uns für das offensichtliche entschieden, und schreiben diese in das Order-Objekt als response_code. Wird die Bestellung durch den Kunden dann irgendwann vollständig abgewickelt, so verwenden wir den gespeicherten Token, um den Wert der Bestellung auf der Kreditkarte des Kunden zu sichern. Durch die Anbindung als BillingIntegration werden beim erfolgreichen Abwickeln von Bezahlungen bzw. Rückzahlungen, die zurückgesendeten Tokens ebenfalls als response_code in der Datenbank abgespeichert.

Zu guter Letzt muss die neue Bezahlmethode noch in Spree Commerce “angemeldet” werden. Da jede Spree Extension eine eigene Rails Engine ist, wird dieser Schritt innerhalb der engine.rb wie folgt vorgenommen:

Bei der Registrierung der zur Verfügung stehenden Bezahlmethoden während der Initialisierung des Shops, wird die neue Bezahlmethode also zur Liste der bereits vorhandenen hinzugefügt.

Unsere nächsten Schritte

Aktuell testen wir spree_paymill noch in unserem eigenen Shop, denn derzeit sind die Änderungen an ActiveMerchant noch nicht in eine stabile Version von Spree eingeflossen. Wer sich den Code einmal ansehen möchte, wird auf Github fündig. Der Master verwendet im Moment noch das paymill-ruby Gem, welches wir im ersten Teil bereits kurz angerissen hatten. Sobald wir uns sicher sind, dass spree_paymill stabil läuft, werden wir eine separate Kurzmeldung herausgeben. Folgt uns also auf Twitter oder Facebook, um diesen Moment nicht zu verpassen. Und stellt gerne Fragen in den Kommentaren!

Das Spree Template für Kreditkartenzahlung wurde für unsere Fall angepasst (derzeit unterstützt Paymill lediglich Visa und Mastercard)Auf der Bestellbestätigungsseite bekommt der Nutzer noch einmal die Art seiner Kreditkarte und die letzten 4 Ziffern angezeigtIn der Backoffice Bestellübersicht von Spree Commerce kann der Shopmanager den Status einer Bestellung direkt einsehen.Jede Order hat eine extra Seite für die Bezahlung dieser. Hier kann man den fälligen Betrag von einer Kreditkarte einziehenEin einziger Mausklick und schon wird der fällige Betrag von einer Kreditkarte eingezogenWurde ein Betrag von einer Kreditkarte eingezogen, lässt sie sich auch über das Backoffice an den Kunden wieder zurückzahlen.

About André Cedik

Seit mehr als 15 Jahren ist André im eCommerce-Umfeld tätig. Nach dem Studium an der FH in Kiel schloss er sich zunächst der Intershop Communications AG aus Jena an. Heute ist er als eCommerce-Consultant und Ruby Entwickler für die webionate GmbH in Hamburg tätig, mit der er derzeit das StartUp shipcloud.io aufbaut.

Comments are closed.