Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Animiertes Kreditkarten-Formular für Shopbetreiber: So schick kann Online-Payment sein

    Animiertes Kreditkarten-Formular für Shopbetreiber: So schick kann Online-Payment sein
(Screenshot: Jesse Pollak)

Mit der kleinen Bibliothek „Card“ bekommen Onlineshops ein praktisches und gleichermaßen schickes, animiertes HTML- und CSS-Kreditkarten-Formular. Da macht die Eingabe der Kreditkartendaten fast schon Spaß.

Card: Animiertes HTML- und CSS-Kreditkarten-Formular

Ewig lange Kreditkarten-Nummern eingeben ist sicher nicht der angenehmste Teil beim Online-Shopping – auch wenn es mit der IBAN mittlerweile ein noch längeres Zahlenkonstrukt gibt. Und irgendwie irritiert oft auch die Eingabe der Zahlen, weshalb der Eine oder Andere lieber zweimal hinschaut, ob die Ziffern denn wirklich übereinstimmen. Ein kleine Bibliothek namens Card hübscht den langweiligen Eingabeprozess in Kreditkarten-Formularen auf und will die Eingabe dadurch auch vereinfachen.

Bilder kommen bei Card nicht zum Einsatz, die Karten und die Animation bestehen nur aus HTML-, CSS- und JavaScript. Auch wenn die einfache Mini-Bibliothek von Jesse Pollak kein Code-Überflieger ist, handelt es sich trotzdem um eine tolle UI-Idee. Einen kleinen Vorschlag für eine Variante hätten wir allerdings: die Ziffern-Eingabe direkt auf der Karte stattfinden lassen und das ganze noch in die Formular-Bibliothek „jquery.payment“ von Stripe einbauen. Dann wären Formular-Erstellung, Validierung, Formatierung und UI-Verbesserung beieinander.

Card auf Github

Eine kleine Anleitung auf der Github-Seite von Card erklärt die Einbindung in ein Kreditkarten-Formular  beziehungsweise in einen Onlineshop:

So funktioniert der Einsatz von Card: Der Weg zum animierten Kreditkarten-Formular. (Screenshot: Github/card)
So funktioniert der Einsatz von Card: Der Weg zum animierten Kreditkarten-Formular. (Screenshot: Github/card)

So sieht die Animation in Aktion aus

So funktioniert Card. (Bild: Jesse Pollak)
Das animierte Kreditkarten-Formular: So funktioniert Card. (Bild: Jesse Pollak)

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

8 Reaktionen
Timo Kuchel

Sehr gute Idee um den Checkout für den Käufer im Shop ein wenig verständlicher und transparenter zu gestalten.
Aber PCI - DSS ist natürlich ein nicht zu unterschätzendes Thema an dieser Stelle und im Zweifel sehr teuer für den Händler. Dort sind dann nur Payment-Service-Provider anbindbar die eine Formular integrierte Lösung anbieten. I-Frame-Lösungen oder Weiterleitungen zu Zahlseiten sind damit nicht möglich.
Der große Conversion - Killer 3D-Secure wird damit aber leider nicht abgefangen (in keiner der gezeigten Lösungen) obwohl dies optisch natürlich auch lösbar wäre. Vom Ablauf her müssten dann die Kreditkartendaten vom Browser des Käufers zu einer Evaluierungsstelle gesendet werden und dann könnte der Käufer schon vorab informiert werden ob gleich 3D-Secure kommt. Je nach Karte dann verified by Visa, M-Secure oder J-Secure.

Wer so eine Lösung mit uns entwickeln möchte (technisch wäre das alles machbar) kann gerne auf mich/uns zukommen ;).

Antworten
Björn Dorra

Ein weiteres gutes Beispiel ist übrigens "skeuocard": http://kenkeiter.com/skeuocard/

Antworten
Björn Dorra

@gernot, @jochen:

Leider stimmt das. Immer mehr Shopbetreiber kommen nur noch in die Lage Zahlseiten / Bezahlformulare einzusetzen.

Vielleicht ist es mal an der Zeit eine Petition bei den Betreiber zu machen:

"Bitte gebt uns schöne und verständliche Zahlseiten!"

Fast alle Zahlseiten sehen so aus, als seien Sie vor 15 Jahren entwickelt worden...

-- Björn Dorra, Founder http://versacommerce.de

Antworten
Gernot

@Jochen:
Danke Dir Jochen für die Antwort.

Wenn man davon ausgeht, dass sich der Artikel an die "Shopbetreiber" richtet, dann ist es in etwa 95% der Fälle so, dass die Abwicklung über Paygate-Bezahlformulare vorgenommen wird. Somit hat der "normale" Shopbetreiber hier überhaupt nicht die Möglichkeit die grafische Gestaltung in die Hand zu nehmen. Im verlinkten Artikel wird dies ja auch genauso (richtig) dargestellt.

Sprich: Meines Erachtens kommt aus dem Artikel nicht deutlich genug heraus, dass die Gestaltung des Formulars wie oben beschrieben in der Praxis die Masse der Shopbetreiber nicht vornehmen kann, da hierfür eben die angesprochene Zertifizierung nötig ist.

Wenn der Artikel nun jedoch hauptsächlich die Zahlungsdienstleister und Paygatebetreiber anspricht, dann passt das natürlich.

Es sollte nur nicht der Eindruck erweckt werden, dass ich als Shopbetreiber "mal eben" das Kreditkarteneingabeformular durch meinen Webdesigner anpassen lassen kann. Zumindest einen Hinweis bzw. Link zum anderen Artikel hätte ich noch mit erwähnt.

Antworten
Jochen G. Fuchs

@Gernot
Leider ist das für mich jetzt ein wenig zusammenhanglos: Was ist denn mit dem PCI-DSS-Standard? (PCI-DSS: http://t3n.de/news/e-payment-10-gruende-489207/)

Die grafische Gestaltung hält ja prinzipiell niemanden davon ab, den Checkout PCI-DSS-konform zu verarbeiten? Oder siehst du irgendetwas, dass eine PCI-DSS-Compliance verhindert, dass mir entgangen ist?

Liebe Grüße aus der Redaktion,
Jochen

Antworten
Gernot

Späßle gmacht?!? Stichwort: Payment Card Industry Data Security Standard, aber ok, Kreditkartendaten sind ja nich so wichtig.

Antworten
Björn Dorra

Super schicke Sache! Wir haben uns für unser nächstes Release einige Libs dazu angesehen.

Ein weiteres gutes Beispiel ist "skeuocard": http://kenkeiter.com/skeuocard/

-- Björn Dorra, Founder http://versacommerce.de

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen