One-Page-Checkout – Darstellung und Zahlungsarten

Dieser Artikel beschreibt die Admin-Tabs „Darstellung" und „PayPal-Status", die Anbindung der unterstützten Zahlungsarten sowie die Gruppe „Plugin-Einstellungen" im Tab „Einstellungen". Schritt-für-Schritt-Anleitungen für den Google-Schlüssel und für Cloudflare Turnstile stehen im Artikel „Einrichtung und Schnellstart".

Tab „Darstellung"

Im Tab „Darstellung" legen Sie das Aussehen des One-Page-Checkout als CSS-Variablen fest, ohne das Theme anzufassen. Änderungen wirken sofort, ein Neukompilieren des Themes ist nicht nötig. Ein leeres Feld verwendet den Standardwert des Plugins; gespeichert werden nur gültige Werte (Farben als Hexcode, Radien mit Einheit, z. B. 16px oder 0.5rem).

Einstellbar sind:

• Farben: Akzentfarbe, Hover-Farbe, Text, Überschriften, Sekundärtext, Hintergründe, Rahmen, Eingabefelder, Auswahl, Bestell-Button, Kupon-Button, Checkbox, Radio-Buttons, Links.
• Eckenradius allgemein sowie eigene Radien für Eingabefelder und Buttons.
• Schriftart (die Schrift muss bereits im Shop verfügbar sein; das Plugin lädt keine eigene Schriftdatei nach).
• Schriftstärke und Schreibweise (z. B. Großbuchstaben) des Bestell-Buttons.
• Logo-Position im Checkout-Header: links, mittig oder ausgeblendet.
• Rahmenfarbe und Eckenradius des Footer-Popups (siehe „Footer-Links im Popup öffnen" weiter unten).

Der Button „Auf Standard zurücksetzen" stellt alle Werte dieses Tabs auf die Auslieferungswerte zurück (mit Sicherheitsabfrage).

Tab „PayPal-Status"

Ein reiner Diagnose-Tab. Er zeigt, ob das JTL-Plugin „PayPal Commerce" geladen und aktiviert ist (mit Version) und welche PayPal-Zahlungsarten im Shop aktiv sind, und beschreibt deren Ablauf im One-Page-Checkout. Eigene Eingaben oder Aktionen gibt es auf diesem Tab nicht.

Zahlungsarten im Checkout

PayPal Commerce

Voraussetzung ist das aktive JTL-Plugin „PayPal Commerce" (jtl_paypal_commerce); es wird automatisch erkannt. Der One-Page-Checkout bindet daraufhin ein:

• Einen Schnell-Checkout-Button ganz oben in der Seite (PayPal-Express, „Direkt zu PayPal" und „Später bezahlen"). Nach der Freigabe im PayPal-Fenster liefert PayPal die Lieferadresse und der Kunde kehrt mit ausgefülltem Checkout zurück.
• Bei Wahl einer PayPal-Zahlungsart ersetzt ein PayPal-eigener Button den Bestell-Button „Zahlungspflichtig bestellen".
• Alle vom Shop freigeschalteten PayPal-Commerce-Zahlwege: PayPal-Wallet, Später bezahlen, Kreditkarte (mit 3-D-Secure), Apple Pay, Google Pay, Rechnungskauf. Beim Rechnungskauf erscheint der von PayPal vorgeschriebene Rechtstext direkt unter der Zahlungsart.
• Ob ein Zahlweg im Browser des jeweiligen Kunden tatsächlich funktioniert (z. B. Apple Pay nur auf Apple-Geräten, Google Pay nur mit unterstütztem Browser, einzelne Wege nur in bestimmten Ländern), fragt der Checkout unmittelbar nach dem Laden der Seite bei PayPal ab. Nicht nutzbare Kacheln verschwinden, bevor der Kunde sie anklicken kann.

Wählt der Kunde die PayPal-Kreditkarte, erscheinen die Kartenfelder direkt in der Zahlungsartenliste; die Kartendaten laufen dabei über PayPal, nicht über den Shop. Hat der Kunde bereits eine Karte bei PayPal hinterlegt, erscheint diese direkt mit Kartenmarke und den letzten vier Ziffern. Lassen sich die Kartenfelder im Einzelfall nicht einbetten (z. B. weil PayPal die Kartenzahlung für das Händlerkonto nicht freigeschaltet hat), leitet der Checkout zum Zahlungsschritt des JTL-Standard-Checkouts über.

Die Einstellung „PayPal-Einwilligung im Checkout abwarten" (Standard „Aus") entscheidet, ob das PayPal-JavaScript bereits beim Auswählen einer PayPal-Zahlungsart geladen wird oder erst nach einer Einwilligung im Consent-Manager. Die Beschreibung im Backend erläutert die rechtliche Abwägung.

Klarna

Voraussetzung ist das aktive Plugin „Klarna Payments (JTL-Shop 5)" von Solution360 (s360_klarna_shop5) mit hinterlegten Zugangsdaten. Klarna ist vollständig in den Checkout eingebaut: Wählt der Kunde Klarna, blendet das Plugin das Klarna-Auswahlfeld direkt unter der Zahlungsart ein. Beim Klick auf den Bestell-Button öffnet Klarna sein eigenes Fenster, prüft die Bonität und gibt die Zahlung frei; erst danach wird die Bestellung abgeschickt. Lehnt Klarna ab oder bricht der Kunde ab, bleibt er im Checkout und kann sofort eine andere Zahlungsart wählen. Welche Klarna-Varianten (Rechnung, Ratenkauf, Sofortzahlung) angeboten werden, entscheidet Klarna anhand von Warenkorb und Adresse.

Mollie

Voraussetzung ist das aktive Plugin ws5_mollie. Ist im Mollie-Plugin der Components-Modus für die Kreditkarte eingeschaltet, erscheinen die Mollie-Kartenfelder (Inhaber, Nummer, Ablauf, Prüfziffer) direkt in der Zahlungsartenliste. Ist der Components-Modus abgeschaltet, läuft die Kreditkarte über den Mollie-Standardweg.

VR Payment

Voraussetzung ist das aktive Plugin jtl_vrpayment. Der Checkout fragt vor der Anzeige der Zahlungsarten bei VR Payment ab, welche VR-Zahlungsarten für Warenkorb, Rechnungsdaten, Währung und Sprache tatsächlich möglich sind; nur diese werden angezeigt. Eine im Shop aktive VR-Zahlungsart, die VR Payment aktuell nicht anbietet, bleibt ausgeblendet. Welche Zahlungsarten VR Payment anbietet, wird im VR-Payment-Portal eingestellt.

Amazon Pay

Voraussetzung ist das aktive und konfigurierte Plugin s360_amazonpay_shop5 sowie eine von Amazon unterstützte Shop-Währung. Der Amazon-Pay-Button erscheint dann in der Express-Zone am Seitenanfang.

Rückkehr aus einer externen Zahlung

Bricht ein Kunde bei Amazon Pay ab, führt das Plugin ihn innerhalb von zehn Minuten und bei unverändertem Warenkorb direkt zurück in den Checkout, statt in den Warenkorb, mit der Meldung von Amazon oben im Checkout. Kommt ein Kunde ohne abgeschlossene Zahlung von Mollie zurück, erhält er den Hinweis, den Zahlungsstatus zu prüfen, bevor er erneut bezahlt.

DHL Wunschpaket

Voraussetzung ist das aktive Plugin „DHL Wunschzustellung" (jtl_dhlwunschpaket). Ist es aktiv, bietet der Checkout Packstation, Postfiliale und Wunschnachbar als Lieferziele an: bei Gästen über die Auswahl des DHL-Plugins, bei angemeldeten Kunden als zusätzliche Einträge in der Lieferadress-Auswahl. Im Versandschritt erscheinen zusätzlich, sofern von DHL freigegeben:

• Wunschort (bevorzugter Ablageort), sofern keine Packstation oder Postfiliale gewählt wurde.
• Wunschtag mit den von DHL zurückgemeldeten möglichen Tagen und dem jeweiligen Aufpreis; der Aufpreis wird sofort bei der Auswahl in der Bestellübersicht sichtbar. Ist ein gewählter Wunschtag zwischenzeitlich nicht mehr verfügbar, wird er samt Aufpreis verworfen statt falsch berechnet.

Zahlungsarten mit eigenem Zwischenschritt

Direkt im One-Page-Checkout eingebaut sind PayPal (alle Funding-Sources), Apple Pay, Google Pay, Klarna, die Mollie-Kreditkarte und Amazon Pay sowie die JTL-Lastschrift, sofern die Einstellung „Lastschrift im Schnell-Checkout erlauben" auf „An" steht. Andere Zahlungsarten, die im JTL-Backend unter „Zahlungsarten" mit „Zahlung vor Bestellabschluss = Ja" hinterlegt sind, erscheinen ganz normal in der Liste; wählt der Kunde eine davon, übergibt das Plugin den Vorgang an den JTL-Standard-Checkout. Der Kunde durchläuft dort den Zwischenschritt des Zahlungsplugins und schließt die Bestellung wie gewohnt ab; wählt er danach wieder eine gewöhnliche Zahlungsart, kehrt er automatisch in den One-Page-Checkout zurück.

Gesetzliche Gewährleistung und GARAN-Labels im Checkout

Der One-Page-Checkout kann die native Gewährleistungsmitteilung von JTL-Shop (ab Version 5.8) anzeigen. Die Einstellung „Gesetzliche Gewährleistung im Checkout" steht standardmäßig auf „Automatisch – JTL-Einstellung übernehmen": Der Hinweis erscheint dann nur, wenn der globale JTL-Schalter aktiv ist und die nötige Funktion samt Grafik vorhanden sind. Unter „Gewährleistungslabel: Darstellung" wählen Sie zwischen einem kompakten Link vor dem Bestell-Button (Standard) oder einer Bildvorschau unterhalb des Bestell-Buttons; beide öffnen die vollständige Grafik in einem Popup mit Vergrößerung.

Getrennt davon zeigt der Checkout, sofern die native JTL-Funktion verfügbar ist, produktbezogene GARAN-Kompaktlabels bei berechtigten Artikeln und Gratisgeschenken (Einstellung „GARAN-Label je Artikel im Checkout", ebenfalls standardmäßig „Automatisch"). Welche genauen Artikeldaten JTL für die GARAN-Anzeige voraussetzt, richtet sich nach der JTL-Wawi- und JTL-Shop-eigenen Konfiguration; das Plugin selbst prüft keine Garantieverträge. Auf älteren Shops ohne diese native Funktion erfolgt keine Anzeige und keine Nachrüstung.

Kundengruppen und JTL-Wawi-Bezüge

Der One-Page-Checkout liest keine eigenen JTL-Wawi-Funktionsattribute oder -Merkmale; für die Gewährleistungsmitteilung und die GARAN-Labels verwendet er ausschließlich die nativen JTL-Shop-Funktionen (siehe oben). Kundengruppen aus dem Shop werden an zwei Stellen einbezogen: bei der Auswahl der Kundengruppen für den Widerrufs-Teil der Vertrauenszeile (Einstellung „Vertrauenszeile: Widerrufsrecht für diese Kundengruppen") und, sofern Sie Kupon-Regeln für die Warenkorb-Erinnerung einrichten, als Filterbedingung einer Regel (siehe Artikel „Warenkorb-Erinnerung"). In beiden Fällen werden die im Shop tatsächlich angelegten Kundengruppen zur Auswahl angeboten; Gruppen mit Nettopreisen sind dabei gekennzeichnet. Eigene, darüber hinausgehende Wawi-Bezüge bestehen nicht.

Kontaktformular und Cloudflare Turnstile

Das optionale Kontaktformular lässt Kunden im Checkout eine Nachricht senden – entweder nur, wenn für die eingegebene Adresse keine Versand- oder Zahlungsart verfügbar ist („Sackgasse"), oder dauerhaft über einen dezenten Link. Ohne gültige Cloudflare-Turnstile-Schlüssel erscheint das Kontaktformular überhaupt nicht; der Bestellablauf selbst ist davon unabhängig. Zusätzlich zu Turnstile sichern ein verstecktes Honeypot-Feld und eine Sperre von 60 Sekunden zwischen zwei Nachrichten derselben Sitzung das Formular ab. Die Nachricht geht an die passende Adresse aus den JTL-Kontaktbetreffs der Kundengruppe, sonst an die Absenderadresse des Shops. Die Schritt-für-Schritt-Anleitung zum Einrichten von Cloudflare Turnstile steht im Artikel „Einrichtung und Schnellstart".

Vertrauenszeile, Kopfzeile und weitere Darstellungsoptionen

Die Einstellung „Vertrauenszeile unter dem Bestell-Button" zeigt bei „An" unterhalb des Bestell-Buttons einen Hinweis „SSL-verschlüsselt" (nur bei tatsächlichem HTTPS-Aufruf) sowie „X Tage Widerrufsrecht". Die Anzahl der Tage kommt aus der JTL-Einstellung „Retourenfrist" (Einstellungen → Globale Einstellungen); der Widerrufs-Teil erscheint nur für die unter „Vertrauenszeile: Widerrufsrecht für diese Kundengruppen" ausgewählten Kundengruppen und nie bei Warenkörben mit Download-Artikeln. Da JTL die Retourenfrist eigentlich für das Retourenmanagement nutzt, muss der eingetragene Wert exakt der Frist Ihrer Widerrufsbelehrung entsprechen; das gesetzliche Widerrufsrecht darf zudem nicht als besondere Leistung beworben werden.

Optional lassen sich Sprache und Währung sowie ein freies HTML-Feld zusätzlich in der Kopfzeile anzeigen (auch auf Mobilgeräten zuschaltbar), dazu ein Hinweis „Sichere Kaufabwicklung" mit Schloss-Symbol (nur bei HTTPS). Weitere Layout-Schalter betreffen die Position der Versand-/Zahlungsart-Logos, das Ein- oder Ausklappen optionaler Adressfelder (Firma, USt-IdNr., Telefon u. a.) hinter „Weitere Angaben", das Einklappen des Gutscheinfelds hinter einen Link sowie ob interne Footer-Links (AGB, Widerruf, Datenschutz, Impressum, Versand & Zahlung) in einem Popup statt in einem neuen Tab öffnen.

Google-Adress-Vervollständigung (optional)

Diese Funktion besteht aus zwei getrennt schaltbaren Teilen: „Adresse als Google-Suchfeld mit Zusammenfassung" (beim Tippen schlägt Google passende Adressen vor, ein Klick füllt Straße, Hausnummer, PLZ, Ort und Land) und „Adressen gegen Google prüfen" (nach der Eingabe schlägt Google bei Abweichungen eine Korrektur vor). Beide benötigen einen Google-Maps-API-Schlüssel; ohne ihn bleibt das Straßenfeld ein normales Eingabefeld. Ist zusätzlich das Plugin „SALEPIX Store-Locator" aktiv und dort ein Schlüssel hinterlegt, verwendet der Checkout diesen, wenn das eigene Feld leer ist. Es werden dabei keine Landkarten angezeigt und keine Standorte gespeichert.

Datenschutz: Die Google-Adressdienste übertragen Tastatureingaben, IP-Adresse und Browser-Informationen an Google; bei aktiver Adressprüfung zusätzlich die vollständige Rechnungsadresse. Ist die Adress-Suche oder -Prüfung eingeschaltet, erscheint im JTL-Consent-Manager automatisch der Eintrag „Google Adress-Vervollständigung". Google wird erst geladen, nachdem der Besucher dort zugestimmt hat; ohne Zustimmung sieht der Kunde normale Adressfelder mit einem Hinweis zum Aktivieren. Ist der JTL-Consent-Manager im Shop deaktiviert, bleiben die Google-Adressdienste vollständig aus – unabhängig von den Plugin-Einstellungen. Nur für Shops mit einem externen Consent-Tool (z. B. Usercentrics, Cookiebot) gibt es die Einstellung „Google ohne JTL-Consent-Manager laden"; sie darf nur aktiviert werden, wenn das externe Tool das Laden von Google-Diensten zuverlässig erst nach der Einwilligung freigibt – die datenschutzrechtliche Verantwortung liegt dann beim Betreiber. Die Schritt-für-Schritt-Anleitung zum Erzeugen und Absichern des Google-Schlüssels steht im Artikel „Einrichtung und Schnellstart".

Tracking-Ereignisse für Analyse-Werkzeuge (optional)

Da der Checkout ohne Seitenwechsel läuft, sehen Google Analytics, der Tag Manager oder Meta sonst nur den Warenkorb und den Kaufabschluss, aber nichts dazwischen. Die Einstellung „Tracking-Ereignisse für Analyse-Werkzeuge" (Standard „Aus") schließt diese Lücke, indem der Checkout folgende Ereignisse meldet: checkout_started, checkout_contact_info_submitted, checkout_address_info_submitted, checkout_shipping_info_submitted, payment_info_submitted, checkout_coupon_submitted, order_submit, checkout_completed und order_error.

• „Nur JavaScript-Ereignisse" löst die Ereignisse am Dokument aus (salepix:opc:checkout_started usw.); dafür ist ein eigener Listener im Theme oder ein Custom-HTML-Tag im Tag Manager nötig.
• „Auch an den dataLayer (Tag Manager)" schiebt die Ereignisse zusätzlich als salepix_opc_checkout_started usw. in window.dataLayer, sodass der Google Tag Manager sie ohne Zusatzcode als benutzerdefiniertes Ereignis empfangen kann.

Übergeben werden ausschließlich Betrag, Währung sowie IDs und Anzeigenamen der gewählten Versand- und Zahlungsart; bei checkout_completed zusätzlich Bestellnummer und Bestell-ID, bei checkout_coupon_submitted nur die Länge des eingegebenen Codes und ob er angenommen wurde. Namen, Adressen, E-Mail-Adressen oder Zahlungsdaten werden nie übertragen. checkout_started, checkout_contact_info_submitted und checkout_address_info_submitted feuern absichtlich nur einmal je Checkout, damit ein Neuladen die Auswertung nicht verfälscht. checkout_completed erscheint erst auf der Seite nach dem Bezahlen, auch nach einem Umweg über einen Zahlungsdienst. Bestellungen über den PayPal-Express-Button laufen am Bestell-Button vorbei und lösen daher kein order_submit aus.

Einstellungen (Tab „Einstellungen" → Gruppe „Plugin-Einstellungen")

Preise während der Adresseingabe

Solange Land und Postleitzahl nicht vollständig sind, kann der Shop weder Versandkosten noch Gesamtsumme berechnen. Die Bestellübersicht bleibt trotzdem stehen: Die Artikelliste ist sichtbar, Versandkosten und Summe sind ausgeblendet, mit dem Hinweis, dass die Preise vorläufig sind. Die Einstellung „Zahlungsarten vorab anzeigen" steuert dabei zusätzlich, ob der Zahlungsbereich leer bleibt, die möglichen Zahlungsarten ausgegraut zeigt, oder bei zulässiger Standard-Versandart bereits vorauswählt. Versandarten erscheinen in jedem Fall erst, sobald die Adresse feststeht.