Angebot anfordern

Referenz · Kundenanwendung, Onlinehandel

Ein mit Stripe neu aufgebautes Zahlungsformular für einen Onlineshop.

Der Bezahlvorgang des Shops galt als kompliziert und wenig vertrauenerweckend. Wir haben ihn rund um Stripe neu geschrieben: Die Kartendaten werden in Feldern eingegeben, die Stripe bereitstellt, und die starke Authentifizierung öffnet sich im Ablauf, wenn die Bank sie verlangt. Der Server des Shops speichert keinerlei Bankdaten.

01/AusgangslageUnser Ausgangspunkt

Eine Zahlung, die verunsichert, vertreibt die Kundschaft vor dem Abschluss

Der Ausgangspunkt: ein komplizierter, wenig vertrauenerweckender Ablauf, den Kundinnen und Kunden vor dem Bezahlen abbrachen. Zu jedem Punkt, der hakte, was das Formular tut.

  1. 01Kundinnen und Kunden brachen beim Bezahlen ab, weil der Ablauf kompliziert und wenig vertrauenerweckend war.Ein kurzes Formular, von Stripe bereitgestellte Kartenfelder, klare Fehlermeldungen während der Eingabe.
  2. 02Die in Europa vorgeschriebene starke Authentifizierung fügt einen Schritt hinzu, mit dem viele Formulare schlecht umgehen.Die Prüfung per 3D Secure öffnet sich im Ablauf, wenn die Bank sie verlangt, danach geht die Zahlung weiter.
  3. 03Wer als Händler Kartennummern speichert, haftet dafür.Die Kartennummern gehen direkt an Stripe; der Server verarbeitet nur Zahlungskennungen.
  4. 04Eine Dankeseite beweist nicht, dass das Geld angekommen ist.Die Bestellung wird beim Eingang der Benachrichtigungen von Stripe bestätigt, nicht bei der Rückkehr des Browsers.
02/Was wir gebaut habenAn den Kunden geliefert

Ein kurzer Bezahlvorgang, bei dem die Karte den Server nicht berührt

Alles, was die Karte betrifft, bleibt bei Stripe; Formular, Prüfungen und Bestätigung sind unser Code.

  • 01
    Zahlungsabsicht. Jede Zahlung wird serverseitig mit der Payment Intents API von Stripe angelegt.
  • 02
    Kartenfelder mit Stripe Elements. Nummer, Ablaufdatum und Prüfnummer werden in Feldern eingegeben, die Stripe ausliefert.
  • 03
    Validierung während der Eingabe. Nummer, Datum und Prüfnummer werden direkt geprüft, mit einer klaren Meldung unter dem Feld.
  • 04
    Starke Authentifizierung. Die von der Bank verlangten Prüfungen per 3D Secure öffnen sich im Ablauf.
  • 05
    Bestätigung durch Stripe. Der Server empfängt die Benachrichtigungen von Stripe (Webhooks), um die Bestellung zu bestätigen und ihren Status zu aktualisieren.
  • 06
    Schutz der Formulare. Token gegen das Fälschen von Anfragen und bereinigte Eingaben gegen das Einschleusen von Skripten.
  • 07
    Begrenzung der Versuche. Die Zahl der Versuche ist begrenzt, um schnell aufeinanderfolgende Versuche abzuwehren.
  • 08
    Transaktionsprotokoll. Jede Transaktion wird protokolliert, um nachvollziehen zu können, was passiert ist.
03/Ein SchemaAls Text gesetzt, kein Screenshot

Ein Schema des Ablaufs, mangels Screenshot

Die ursprünglichen Screenshots sind verloren, und der Code wurde nicht im Testmodus neu gestartet: Dieses Schema folgt der Zahlung Schritt für Schritt.

Schema des Bezahlvorgangs in vier Schritten: der auf der Website bestätigte Warenkorb, die Eingabe der Karte in einem Feld von Stripe, ohne dass Bankdaten auf dem Server der Website gespeichert werden, die starke Authentifizierung per 3D Secure, wenn die Bank sie verlangt, die Freigabe der Bestellung, sobald Stripe den Server benachrichtigtSchema des Bezahlvorgangs in vier Schritten: der auf der Website bestätigte Warenkorb, die Eingabe der Karte in einem Feld von Stripe, ohne dass Bankdaten auf dem Server der Website gespeichert werden, die starke Authentifizierung per 3D Secure, wenn die Bank sie verlangt, die Freigabe der Bestellung, sobald Stripe den Server benachrichtigt
Abb. 01Schema des Ablaufs, als Text gesetzt. Der Kunde wird nicht genannt, und es ist kein Screenshot veröffentlicht.

Vier Schritte, vom Warenkorb zur freigegebenen Bestellung

Der bestätigte Warenkorb, die Eingabe der Karte in einem Feld von Stripe, die starke Authentifizierung, wenn die Bank sie verlangt, dann die freigegebene Bestellung, sobald Stripe den Server benachrichtigt.

04/TechnologienWas wir gewählt haben und warum

Die Zahlung bei Stripe, der Rest von Hand geschrieben

Alles, was die Karte berührt, bleibt beim Zahlungsdienstleister; der Ablauf drumherum ist unser Code, von Anfang bis Ende kontrolliert.

  • ServerPHP 8.2, MVC-Architektur.
  • ZahlungPayment Intents API von Stripe; Benachrichtigungen von Stripe (Webhooks) zur Bestätigung jeder Zahlung.
  • EingabeStripe Elements für die Kartenfelder; JavaScript ohne Bibliothek für die Validierung während der Eingabe.
  • Authentifizierung3D Secure, ausgelöst, wenn die Bank es verlangt.
  • SchutzVerschlüsselte Verbindungen, Token gegen das Fälschen von Anfragen, bereinigte Eingaben, Begrenzung der Versuche.
  • ProtokollierungProtokoll jeder Transaktion.
05/WeiterführendVerwandte Leistungen

Für eine Website, die Zahlungen annimmt, ohne zu verunsichern

Website-Erstellung in StraßburgSchnell, barrierefrei, in Frankreich gehostetIndividualsoftware-EntwicklungDas vollständige Vorgehen, von der Konzeptphase bis zum Eigentum am Code

Und jetzt

Eine Kartenzahlung, die auf Ihrer Website ergänzt oder neu gebaut werden soll?

Kartenfelder, starke Authentifizierung, verlässliche Bestätigung: Beschreiben Sie uns Ihren Shop oder Ihren Dienst, wir sagen Ihnen, was machbar ist, mit Zeitrahmen und Preisrahmen.

Ihr Projekt besprechen

Antwort binnen 24 Stunden an Werktagen, von einem der beiden Gründer. Oder telefonisch: +33 7 59 96 14 99.