Entwicklung & Design

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)

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

8 Kommentare
Björn Dorra
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
Gernot

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

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: https://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

@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
Björn Dorra
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
Björn Dorra
Björn Dorra

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

Antworten
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
Abbrechen

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