QR-Code Zahlung (Girocode) – Vorkasse, die sich anfühlt wie Instant Payment
Schluss mit abgetippten IBANs und falschen Verwendungszwecken: Deine Kunden scannen einen Girocode (EPC-QR-Code) mit ihrer Banking-App – Empfänger, IBAN, Betrag und Verwendungszweck mit Bestellnummer sind automatisch ausgefüllt. Auf Bestellabschluss, Bestellstatus, im Kundenkonto, in der Bestellbestätigungs-E-Mail (inkl. QR-Bild!) und auf einer eigenen Zahlseite. Du bekommst schnellere Zahlungseingänge und eine fehlerfreie Zuordnung in der Wawi.
Perfekt für: Vorkasse & Überweisung, schnellere Zahlungseingänge, weniger Support („Wohin überweisen?“), automatische Zuordnung per Bestellnummer.
5 Anzeige-Orte Mehr als jeder Wettbewerber
- Bestellabschluss-Seite – direkt nach dem Kauf scannen und zahlen.
- Bestellstatus-Seite – QR bleibt über den JTL-Statuslink erreichbar.
- Kundenkonto – in den Bestelldetails, solange die Zahlung offen ist.
- E-Mail – Zahlungsdaten + QR-Bild in der Bestellbestätigung.
- Eigene Zahlseite – signierter Link, z.B. für Zahlungserinnerungen.
E-Mail ohne Template-Anpassung Einzigartig
- Automatische Integration – der Zahlungsblock wird beim Versand eingefügt, keine Änderung an E-Mail-Vorlagen nötig.
- QR-Code als Bild in der Mail – nicht nur Text und Link.
- Text-Version inklusive – auch reine Text-Mails bekommen die Zahlungsdaten.
- Mitdenkend – bereits bezahlte Bestellungen (z.B. Statusmails) bekommen keinen Zahlungsblock.
- Frei wählbare Vorlagen – Standard: Bestellbestätigung, erweiterbar z.B. auf Zahlungserinnerungen.
Mehrere Bankkonten
- Beliebig viele Konten – der Kunde wählt per Tabs oder Dropdown, auf welches Konto er überweist.
- Pro Zahlungsart einschränkbar – z.B. eigenes Konto nur für B2B-Überweisung.
- IBAN-Prüfung live – Prüfsummen-Check (Mod 97) schon beim Eintippen im Backend.
- BIC optional – wie es der EPC-Standard v002 im SEPA-Raum erlaubt.
QR-Design frei konfigurierbar Exklusiv
- Live-Vorschau im Backend – jede Änderung sofort als echter Girocode sichtbar.
- 3 Modul-Stile – klassisch eckig, abgerundet oder Punkte.
- Farben frei – Code- und Hintergrundfarbe, optional transparent.
- Logo in der Mitte – Fehlerkorrektur wird automatisch auf Stufe H erhöht.
- Design-Vorlagen – Klassisch, Abgerundet, Punkte, Marine, Wald per Klick.
- Größe & Ruhezone einstellbar, Fehlerkorrektur L/M/Q/H.
Läuft auf jedem Template
- Einfügepunkte als CSS-Selektoren – für jeden Anzeige-Ort frei editierbar (kommasepariert, erster Treffer gewinnt, Standard NOVA).
- Position wählbar – vor, nach oder innerhalb des Ziel-Elements.
- Box-Design – Hintergrund, Rahmen, Eckenradius, max. Breite + eigenes CSS.
- Keine Template-Overrides – alles per Output-Filter, updatesicher.
Denkt mit Exklusiv
- Zahlungseingang erkannt – sobald die Wawi die Zahlung meldet, verschwindet der QR-Code automatisch; optional erscheint „Zahlung eingegangen“.
- Kundenguthaben berücksichtigt – der QR-Betrag ist immer der tatsächlich offene Betrag.
- Teilzahlungen – optional QR ohne Betrag, der Kunde trägt selbst ein.
- Fremdwährung – EPC erlaubt nur EUR-Beträge: wahlweise QR ohne Betrag oder ausblenden.
- Bestellnummer im Verwendungszweck – Zahlungseingänge ordnen sich in der Wawi wie von selbst zu.
Verwendungszweck & Zahlungsarten
- Platzhalter-System –
{bestellnr},{kundennr},{kundenname},{datum},{betrag}per Klick kombinierbar, mit Live-Beispiel. - Zahlungsarten-Zuordnung doppelt – konkrete Zahlungsarten per Checkbox und/oder Namens-Schlagworte (mehrsprachige Shops!).
- EPC-Grenzen überwacht – Payload-Bytes, Namens- und Zweck-Längen werden geprüft und angezeigt.
Komfort für Kunden
- Kopieren-Buttons – IBAN, Betrag & Co. mit einem Klick in die Zwischenablage.
- Text-Fallback – alle Zahlungsdaten stehen zusätzlich als Text da; funktioniert komplett ohne JavaScript (QR wird serverseitig gerendert).
- Druckansicht – Zahlungsdaten + QR sauber aufs Papier.
- „Funktioniert mit allen Banking-Apps“ – Girocode ist der offizielle Standard der Deutschen Kreditwirtschaft (EPC069-12).
Admin-Backend 7 Tabs
- Allgemein – Anzeige-Orte, Zahlungsarten, Verhalten nach Zahlungseingang.
- Bankkonten – Konten-Verwaltung mit IBAN-Live-Prüfung.
- QR-Design – Stile, Farben, Logo, Live-Vorschau, Design-Vorlagen.
- Box & Texte – Verwendungszweck, Datenzeilen, Buttons, eigenes CSS.
- Positionierung – CSS-Selektoren je Anzeige-Ort mit Reset-Buttons.
- E-Mail – Vorlagen, QR-Bild, Zahlseiten-Link.
- Selbstcheck – IBAN, Payload-Länge, Systemvoraussetzungen auf einen Blick.
Technik & Datenschutz
- 100% DSGVO – QR-Codes werden komplett im Shop erzeugt, kein externer Dienst, kein Consent-Banner nötig.
- Signierte Links – Zahlseite und QR-Bild sind per HMAC-Token geschützt, kein Durchprobieren von Bestellnummern möglich.
- Alle Texte als JTL-Sprachvariablen – mehrsprachig, DE/EN vorinstalliert.
- JTL-Shop 5.1+ – getestet bis 5.5, regelmäßige Updates.
- Keine Wawi-Anpassung nötig – nutzt die vorhandenen Zahlungsarten (Vorkasse, Überweisung …).
Screenshots
QR-Code Zahlung (Girocode) – Dokumentation
Girocode / EPC-QR-Code für Vorkasse und Überweisung in JTL-Shop 5: Der Kunde scannt den QR-Code mit seiner Banking-App – Empfänger, IBAN, Betrag und Verwendungszweck mit Bestellnummer sind automatisch ausgefüllt. Anzeige auf Bestellabschluss, Bestellstatus, im Kundenkonto, in E-Mails und auf einer eigenen Zahlseite.
Installation & Einrichtung in 4 Schritten
Plugin installieren & aktivieren
ZIP hochladen unter Plugins → Pluginverwaltung. Die zwei Datenbanktabellen werden automatisch angelegt.
Bankkonto anlegen
Unter Plugins → QR-Code Zahlung → Bankkonten: Empfängername und IBAN eintragen (BIC optional). Die IBAN wird schon beim Tippen auf Prüfsumme und Länge geprüft.
Zahlungsarten wählen
Im Tab Allgemein die Zahlungsarten anhaken, bei denen der QR-Code erscheinen soll (z.B. Vorkasse). Die Standard-Schlagworte vorkasse, überweisung, … greifen meist schon ohne Konfiguration.
Testbestellung durchführen
Mit Vorkasse bestellen – die QR-Box erscheint auf der Bestellabschluss-Seite und in der Bestellbestätigungs-E-Mail. Mit einer Banking-App scannen und die vorausgefüllten Daten prüfen.
Bankkonten
Du kannst beliebig viele Konten anlegen. Bei mehreren passenden Konten wählt der Kunde im Frontend per Tabs oder Dropdown (einstellbar unter Box & Texte), auf welches Konto er überweist – oder du zeigst immer nur das erste Konto.
| Feld | Bedeutung |
|---|---|
| Interner Name | Beschriftung des Tabs/Dropdown-Eintrags, z.B. „Sparkasse“. |
| Empfängername | Kontoinhaber, max. 70 Zeichen (EPC-Vorgabe). |
| IBAN | Wird live auf Prüfsumme (Mod 97) und Ländernorm geprüft. |
| BIC | Optional – im SEPA-Raum seit EPC v002 nicht mehr nötig. |
| Zahlungsarten | Konto optional auf bestimmte Zahlungsarten einschränken (leer = alle). |
| Sortierung / Aktiv | Reihenfolge der Konten; inaktive Konten werden nie angezeigt. |
Zahlungsarten-Zuordnung
Der QR-Code erscheint nur bei Bestellungen, deren Zahlungsart passt. Zwei Mechanismen – beide können parallel aktiv sein:
- Direkte Auswahl: Alle Zahlungsarten des Shops als Checkbox-Liste – einfach anhaken.
- Namens-Schlagworte: Kommaseparierte Teilstrings (z.B.
vorkasse,überweisung), die gegen den Zahlungsart-Namen der Bestellung geprüft werden. Robust bei mehrsprachigen Shops und mehreren Vorkasse-Varianten.
Anzeige-Orte
| Ort | Details |
|---|---|
| Bestellabschluss | Direkt nach dem Kauf – der Kunde kann sofort scannen und zahlen. |
| Bestellstatus-Seite | Die JTL-Statusseite (Link aus den Shop-Mails) zeigt die QR-Box, solange die Zahlung offen ist. |
| Kundenkonto | In den Bestelldetails unter „Meine Bestellungen“. |
| Zahlungsblock inkl. QR-Bild in der Bestellbestätigung (siehe E-Mail). | |
| Zahlseite | Eigene Seite /qr-zahlung/<token> mit signiertem Link (siehe Zahlseite). |
Einfügepunkte (CSS-Selektoren)
Für Bestellabschluss, Bestellstatus und Kundenkonto ist der Einfügepunkt als kommaseparierte CSS-Selektorliste konfigurierbar (Tab Positionierung) – der erste Treffer gewinnt, die Position (davor/danach/innen) ist wählbar. Die Standardwerte passen zu NOVA und NOVA-Kindtemplates; ein Klick auf „Standard“ setzt sie zurück. Findet kein Selektor ein Element, wird die Box ans Ende des Inhaltsbereichs gehängt – es geht also nie etwas verloren. Damit läuft das Plugin auf jedem Template.
QR-Design & Box-Aussehen
- Modul-Stil: Eckig (klassisch), Abgerundet oder Punkte.
- Farben: Code- und Hintergrundfarbe frei, optional transparenter Hintergrund.
- Design-Vorlagen: Klassisch, Abgerundet, Punkte, Marine, Wald – per Klick.
- Logo: Bild-URL für ein Logo in der Code-Mitte; die Fehlerkorrektur wird dann automatisch auf H (30%) erhöht.
- Größe (80–1000px), Ruhezone (0–10 Module) und Fehlerkorrektur (L/M/Q/H, EPC-Empfehlung M).
- Box: Hintergrund- und Rahmenfarbe, Eckenradius, maximale Breite – plus Feld für eigenes CSS.
- Datenzeilen: Empfänger, IBAN, BIC, Betrag, Verwendungszweck einzeln ein-/ausblendbar; Kopieren-Buttons und Druckansicht optional.
Alle Kundentexte (Überschrift, Einleitung, Beschriftungen, Hinweise) sind JTL-Sprachvariablen (Plugins → QR-Code Zahlung → Sprachvariablen) – pro Sprache frei anpassbar, Deutsch und Englisch vorinstalliert.
Verwendungszweck & Betrag
Der Verwendungszweck wird aus einem Muster mit Platzhaltern erzeugt (Standard: Bestellung {bestellnr}):
| Platzhalter | Wert |
|---|---|
{bestellnr} | Bestellnummer – für die automatische Zuordnung in der Wawi. |
{kundennr} | JTL-Kundennummer. |
{kundenname} | Vor- und Nachname des Bestellers. |
{datum} | Bestelldatum (TT.MM.JJJJ). |
{betrag} | Offener Betrag formatiert. |
- Offener Betrag: Der QR-Betrag ist immer Bestellsumme minus eingesetztes Kundenguthaben.
- Betrag optional: „Betrag in den QR-Code aufnehmen“ lässt sich abschalten – dann trägt der Kunde den Betrag selbst ein (nützlich für Teilzahlungen).
- Fremdwährung: EPC erlaubt Beträge nur in EUR. Shops mit anderer Standardwährung zeigen den QR wahlweise ohne Betrag (mit Hinweis) oder gar nicht.
E-Mail-Integration
- HTML-Teil: Block mit Überschrift, Zahlungsdaten-Tabelle, QR-Bild und Link zur Zahlseite.
- Text-Teil: Die Zahlungsdaten werden zusätzlich als Klartext angehängt.
- QR-Bild: Wird über die Shop-URL geladen (
/paw-qr/<token>.png) – signierter Link, kein externer Dienst. Zeigt der Mail-Client Bilder nicht an, bleiben die Textdaten und der Zahlseiten-Link. - Vorlagen-Auswahl: Standard ist die Bestellbestätigung (
core_jtl_bestellbestaetigung). Weitere Vorlagen lassen sich kommasepariert ergänzen – z.B. für Zahlungserinnerungen. - Mitdenkend: Ist die Bestellung bereits bezahlt oder passt die Zahlungsart nicht, wird nichts eingefügt.
Zahlseite
Jede passende Bestellung bekommt eine eigene Zahlseite unter /qr-zahlung/<token> (Slug konfigurierbar). Sie wird im Shop-Theme gerendert, zeigt QR-Code + Zahlungsdaten und liefert immer HTTP 200 – kein 404-Risiko.
- Signierte Links: Das Token ist ein HMAC aus Bestelldaten und einem geheimen Schlüssel, der bei der Installation zufällig erzeugt wird. Bestellnummern lassen sich nicht durchprobieren.
- Einsatz: Der Link steckt automatisch in der E-Mail („QR-Code online anzeigen“) – ideal auch für manuelle Zahlungserinnerungen aus der Wawi.
- Nach Zahlungseingang zeigt die Seite den „Zahlung eingegangen“-Hinweis statt des QR-Codes.
Selbstcheck & Systemvoraussetzungen
Der Tab Status & Selbstcheck prüft bei jedem Aufruf:
- Mindestens ein aktives Bankkonto, IBAN-Prüfsumme und BIC-Format jedes Kontos.
- Zahlungsarten-Zuordnung konfiguriert.
- EPC-Payload-Länge inkl. Beispiel-Verwendungszweck (max. 331 Bytes).
- PHP-GD (für QR-Bilder in E-Mails) und cURL.
| Voraussetzung | Wert |
|---|---|
| JTL-Shop | 5.1.0 oder neuer (getestet bis 5.5) |
| PHP | 7.4+ (inkl. PHP 8.x) |
| PHP-GD | optional – nur für das QR-Bild in E-Mails |
| Externe Dienste | keine – alles wird im Shop erzeugt |
FAQ
Mit welchen Banking-Apps funktioniert der QR-Code?
Mit praktisch allen: Der Girocode (EPC069-12) ist der offizielle Standard der europäischen Kreditwirtschaft. Sparkasse, Volksbanken, ING, comdirect, DKB, N26, Revolut u.v.m. unterstützen ihn. Der Code wird mit Fehlerkorrektur-Stufe M (EPC-Empfehlung) erzeugt – einstellbar bis H.
Brauche ich eine neue Zahlungsart in Shop oder Wawi?
Nein. Das Plugin nutzt deine vorhandenen Zahlungsarten (Vorkasse, Überweisung …) und hängt sich nur an deren Anzeige. Bestellablauf, Wawi-Sync und Zahlungsabgleich bleiben unverändert.
Muss ich meine E-Mail-Vorlagen anpassen?
Nein – das ist der große Unterschied zu anderen Lösungen: Der Zahlungsblock wird beim Versand automatisch eingefügt (HTML + Text). Du kannst die Funktion jederzeit abschalten oder auf andere Vorlagen ausweiten.
Funktioniert das Plugin mit meinem Template?
Ja – mit jedem: Alle Einfügepunkte sind als CSS-Selektoren frei konfigurierbar (kommasepariert, erster Treffer gewinnt), die Standardwerte passen zu NOVA. Zusätzlich gibt es einen Fallback ans Ende des Inhaltsbereichs und ein Feld für eigenes CSS.
Was passiert, wenn die Zahlung eingegangen ist?
Sobald die Wawi den Zahlungseingang in den Shop synchronisiert, verschwindet der QR-Code automatisch von allen Anzeige-Orten (auch von der Zahlseite) und aus neuen E-Mails. Optional erscheint stattdessen „Vielen Dank – Ihre Zahlung ist bereits eingegangen“.
Was ist mit Bestellungen, die Kundenguthaben nutzen?
Der QR-Betrag ist immer der tatsächlich offene Betrag: Bestellsumme minus eingesetztes Guthaben. Bei 0 € offenem Betrag wird kein Betrag codiert.
Ist das DSGVO-konform?
Ja. QR-Codes werden vollständig serverseitig im Shop erzeugt – keine externen Dienste, keine Drittanbieter-Requests, kein Consent-Banner nötig. Die Zahlseiten-Links sind HMAC-signiert, sodass Unbefugte keine Bestelldaten abrufen können.
Mein Shop läuft nicht in Euro – geht das trotzdem?
Der EPC-Standard erlaubt Beträge nur in EUR. Du wählst: QR-Code ohne Betrag anzeigen (der Kunde trägt ihn manuell ein, ein Hinweis wird eingeblendet) oder die QR-Box ganz ausblenden.
Kann ich mehrere Bankkonten anbieten?
Ja, beliebig viele. Der Kunde wählt per Tabs oder Dropdown; alternativ zeigst du immer nur das erste passende Konto. Jedes Konto lässt sich auf bestimmte Zahlungsarten einschränken.
Funktioniert die Anzeige auch ohne JavaScript?
Ja. Der QR-Code wird serverseitig als SVG gerendert und die Zahlungsdaten stehen als Text in der Box – JavaScript wird nur für Komfortfunktionen (Kopieren-Buttons, Konto-Umschalter, Druckansicht) genutzt.
Wie sicher sind Zahlseite und QR-Bild-Link?
Beide URLs enthalten ein HMAC-SHA256-Token aus Bestelldaten und einem geheimen, bei der Installation zufällig erzeugten Schlüssel. Ohne gültiges Token liefert die Zahlseite nur eine neutrale Meldung und die Bild-Route ein leeres Bild.
Kann ich ein Logo in den QR-Code legen?
Ja – einfach eine Bild-URL im Tab QR-Design hinterlegen. Das Plugin erhöht die Fehlerkorrektur dann automatisch auf Stufe H (30%), damit der Code trotz Logo zuverlässig scannt. Nach der Einrichtung einmal mit einer Banking-App testen.