Für Expresszahlarten stehen zwei Integrationsarten zur Verfügung: ein transaktionsbasierter Express-Flow sowie ein neuer, SDK-basierter Express-Flow. Beide ermöglichen einen beschleunigten Checkout-Ablauf, bei dem der Kunde früh im Bestellprozess zum Payment Service Provider (PSP) weitergeleitet wird und dort bereits hinterlegte Liefer- und Rechnungsdaten bestätigt. Sie unterscheiden sich jedoch darin, wann die Transaktion angelegt wird und wie der Express-Button im Webshop eingebunden wird.
Unterschiede zu regulären Zahlarten
| Merkmal | Expresszahlarten | Reguläre Zahlarten |
| Adressdaten beim Create | Leer, werden vom PSP zurückgeliefert | Vollständig beim Create übergeben |
| Button-Rendering |
ScriptSrcUri + ScriptTagId
|
Nicht zutreffend |
| Kundendaten nach Prepare | Per Callback vom PSP an den Webshop | Bereits beim Create vorhanden |
| Zeitliche Gültigkeit | 24 Stunden (Time to Live) | Keine Begrenzung |
Die zwei Integrationsarten im Überblick
Der zentrale Unterschied liegt im Zeitpunkt der Transaktionsanlage und im Weg, wie der Express-Button in den Webshop eingebunden wird:
| Merkmal | Alter Express-Flow | Neuer Express-Flow (SDK) |
| Transaktion anlegen | Vor Anzeige des Buttons (Create-Aufruf mit leerer Adresse) |
Erst beim Klick auf den Button |
| Button-Rendering |
scriptSrcUri + scriptTagId aus dem Prepare-Callback |
Statisches SDK von der collana pay CDN, eingebunden über ExpressButtons()
|
| Vorbereitender API-Aufruf | Erforderlich (prepares-Endpunkt) |
Nicht erforderlich |
| Ablaufsteuerung im Frontend | Nicht vorgesehen | Über Callback-Funktionen (onClick, onCancel, onError) |
| Time to Live (TTL) | 24 Stunden ab Anlage der Transaktion |
Unterstützte Expresszahlarten
Expresszahlarten werden typischerweise als markentypische Buttons im Webshop angezeigt und zählen zu den sogenannten Buttonzahlarten.
Die folgende Matrix zeigt für den neuen SDK-Express-Flow, über welches Protokoll (Payment Service Provider) welche Express-Zahlmethode angeboten wird.
| Protokoll | PayPal Express | PayLater | Google Pay | Apple Pay | Amazon Pay | Revolut Pay |
| PayPal | ✓ | ✓ | – | – | – | – |
| Adyen | ✓ | – | ✓ | ✓ | – | – |
| Braintree | ✓ | ✓ | – | – | – | – |
| Mollie | – | – | ✓ | ✓ | – | – |
| Computop | – | – | ✓ | ✓ | – | – |
| Stripe | – | – | ✓ | – | – | – |
| Amazon | – | – | – | – | ✓ | – |
| Revolut | – | – | – | – | – | ✓ |
Dieselbe Zahlmethode kann über mehrere Protokolle abgewickelt werden – z.B. Google Pay über Adyen, Mollie, Computop oder Stripe. Welches Protokoll für eine Zahlmethode genutzt wird, wird pro Konfiguration festgelegt.
Express-Flow (transaktionsbasiert)
Der folgende Ablauf beschreibt die bisherige Standardintegration am Beispiel von PayPal Express – der Prozess gilt analog für andere Expresszahlarten dieses Integrationswegs.
1. Create: Transaktion anlegen
Der Webshop legt eine neue Transaktion über den transactions-Endpunkt der collana pay API an. Liefer- und Rechnungsadresse werden dabei leer übergeben, da diese erst im Verlauf des Expressprozesses vom PSP zurückgeliefert werden. collana pay gibt synchron transactionId und interactionId zurück; ein asynchroner Callback bestätigt die erfolgreiche Anlage.
2. Prepare: Express-Session vorbereiten
Der Webshop ruft den prepares-Endpunkt auf. collana pay kommuniziert mit dem PSP, um eine Express-Session zu erzeugen, und fordert dabei das JavaScript für den Express-Button an. collana pay schickt einen Callback mit Status Pending an den Webshop, der scriptSrcUri und scriptTagId enthält.
embedmentUri ist für Expresszahlarten deprecated. Die Integration im alten Express-Flow erfolgt ausschließlich über scriptSrcUri und scriptTagId. |
3. Express-Button anzeigen und Kundeninteraktion
Der Webshop bettet das JavaScript aus scriptSrcUri in das Frontend ein und verwendet scriptTagId als ID des Container-Elements. Der Express-Button wird dadurch im Shop gerendert. Klickt der Kunde auf den Button, wird er zum PSP weitergeleitet, wo er sich authentifiziert und die Freigabe für die Zahlung erteilt. Nach erfolgreicher Interaktion wird der Kunde per Redirect zurück in den Webshop geleitet. collana pay übermittelt dem Webshop per Callback die vom PSP zurückgelieferten Kundendaten (Liefer- und Rechnungsadresse).
4. Reserve: Zahlung reservieren
Der Webshop stößt die Reservierung über den reservations-Endpunkt an. collana pay leitet die Anfrage an den PSP weiter. Der PSP bestätigt zunächst mit Status Pending (Callback an den Webshop), anschließend mit Successful (abschließender Callback). Bei AutoCapture-Zahlarten erfolgt zusätzlich ein Callback nach dem automatischen Capture.
5. Optional: Händlerreferenz aktualisieren
Nach Abschluss der Reservierung kann der Webshop die Transaktion über den PATCH merchantReference-Endpunkt mit einer finalen Händlerreferenz (z.B. der Bestellnummer) versehen. collana pay bestätigt den Vorgang per Callback.
Time to Live (TTL)
Express-Transaktionen im alten Flow sind zeitlich begrenzt gültig. Wird ein Expressvorgang nicht innerhalb von 24 Stunden abgeschlossen, löscht collana pay die Transaktion automatisch. Eine Weiterverarbeitung ist danach nicht mehr möglich. Der Webshop muss in diesem Fall einen neuen Expressvorgang starten.
Prozessdiagramm
Beispielhaft wird im Prozessdiagramm der alte Express-Flow für PayPal Express dargestellt:
Neuer Express-Flow (SDK-basiert)
Der neue Express-Flow bindet die Buttons über ein eigenständiges JavaScript-SDK ein, statt sie über einen vorbereitenden API-Aufruf vom PSP zu beziehen. Die Transaktion wird dabei erst beim Klick auf den Button angelegt.
1. SDK einbinden
Damit die Express-Buttons im Shop erscheinen können, muss einmalig ein kleiner Code-Baustein (SDK) in die Checkout-Seite eingefügt werden.
<script src="https://js-test.collanapay.com/sdk/@VERSION/collana-pay.umd.js"
integrity="sha384-..." crossorigin="anonymous"></script>Ist dieser Baustein einmal eingebunden, kann der Webshop darüber alle unterstützten Express-Zahlarten ansteuern.
2. Zahlarten festlegen und Buttons anzeigen
Der Webshop legt fest, welche Express-Zahlarten (z.B. Apple Pay, Google Pay) angezeigt werden sollen und wie auf bestimmte Ereignisse reagiert werden soll – etwa wenn der Kunde den Vorgang abbricht oder ein Fehler auftritt. Auf dieser Grundlage werden die Buttons im Checkout angezeigt. Jede Zahlart wird dabei unabhängig von den anderen geladen: Tritt bei einer Zahlart ein Problem auf, werden die übrigen Buttons trotzdem normal angezeigt.
3. Kundeninteraktion und Transaktionsanlage
Klickt der Kunde auf einen Button legt der Webshop daraufhin – anders als im alten Flow – erst zu diesem Zeitpunkt die Transaktion über die collana pay API an und übergibt die zurückgegebenen Checkout-Daten an das SDK. Die anschließende Authentifizierung beim PSP (Apple/Google/PayPal) übernimmt das SDK selbst.
4. Abschluss
Bei erfolgreicher Zahlung wird der Kunde auf die Erfolgsseite weitergeleitet; im Hintergrund bestätigt collana pay die Zahlung asynchron per Callback an den Webshop.
Technische Dokumentation
Die vollständige technische Dokumentation zum neuen Express-Flow (SDK, Konfigurationsoptionen, Provider-Übersicht) findet sich unter docs.js.collanapay.com.
Verknüpfung mit