t3n News 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

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ß.

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

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)
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
8 Antworten
  1. von Björn Dorra am 05.06.2014 (11:26 Uhr)

    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 Teilen
  2. von Snuffy_ am 05.06.2014 (13:23 Uhr)

    Schick schick!

    Antworten Teilen
  3. von Gernot am 05.06.2014 (14:01 Uhr)

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

    Antworten Teilen
  4. von Jochen G. Fuchs am 05.06.2014 (14:08 Uhr)

    @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 Teilen
  5. von Gernot am 05.06.2014 (14:23 Uhr)

    @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 Teilen
  6. von Björn Dorra am 06.06.2014 (09:29 Uhr)

    @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 Teilen
  7. von Björn Dorra am 06.06.2014 (09:30 Uhr)

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

    Antworten Teilen
  8. von Timo Kuchel am 11.06.2014 (13:19 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Dieses Startup verwandelt euren Instagram-Account in einen Online-Shop
Dieses Startup verwandelt euren Instagram-Account in einen Online-Shop

Mit HeroZebra könnt ihr aus einem Instagram-Account ganz einfach einen Online-Shop machen. Wir verraten euch, wie das funktioniert. » weiterlesen

Bestellverbot im Online-Shop? Geht nicht, urteilt ein Gericht
Bestellverbot im Online-Shop? Geht nicht, urteilt ein Gericht

Ein Online-Händler darf unliebsamen Kunden das Bestellen in seinem Online-Shop nicht verbieten, ein virtuelles Hausrecht existiere nicht. Allerdings kann der Online-Händler Bestellungen ablehnen. » weiterlesen

Von Upselling bis Versandkostengrenze: 5 Tipps für vollere Warenkörbe im Online-Shop
Von Upselling bis Versandkostengrenze: 5 Tipps für vollere Warenkörbe im Online-Shop

Wenn der Kunde nicht nur ein Produkt, sondern gleich mehrere auf einmal kauft, hast du als Shop-Betreiber natürlich mehr davon. Aber wie lassen sich vollere Warenkörbe in der Praxis erreichen?  » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?