Installation & Konfiguration des QR-Codes für SEPA-Überweisungen in Gambio

Das Gambio-Modul für GiroCode und QR-Rechnung installieren Sie einfach per Knopfdruck in der Modulverwaltung. Anschließend legen Sie auf der Konfigurationsseite fest, an welchen Stellen und in welcher Größe der QR-Code bzw. Zahlteil die Zahlungen vereinfachen sollen und hinterlegen Ihre Bankdaten.

Installation in Gambio

Werbe-Markt.de Modulverwaltung > QR-Code SEPA-Überweisung > Jetzt installieren
Klick auf Installieren-Button

Sowohl kostenlose Testversion als auch Vollversion installieren Sie einfach mit 2 Button-Klicks im Gambio-Backend. Via Modulverwaltung laden Sie das Modul auf Ihren Server. Die Erfolgsmeldung im Modal legt Ihnen den anschließenden Besuch des Modul-Centers nahe.

QR-Code SEPA-Überweisung GiroCode (EUR) und QR-Rechnung (CHF): Bieten Sie Ihren Kunden die unkomplizierte Vorausfüllung von Überweisungsträgern (Empfänger, IBAN, Betrag, Verwendungszweck) mittels QR-Code auf Bestellung-Danke-Seite, Rechnungen, Bestellbestätigungs-E-Mails und mehr.
Im Modul-Center installieren

Die eigentliche Installation nehmen Sie anschließend im Gambio-Adminmenü unter Module > Modul-Center vor. Klicken Sie hierfür auf den neuen Eintrag QR-Code SEPA-Überweisung in der Auflistung. Betätigen Sie anschließend den rechts eingeblendeten Installieren-Button. Damit ist die Installation abgeschlossen und Sie können mit der Konfiguration fortfahren.

Verzeichnis GXModules, Datei sepa-qr.php
Verzeichnisstruktur

Auch ohne fachspezifische Ausbildung oder Studium werden Sie für das Lesen der Anleitung länger brauchen als für die Installation. Wenn Sie die Einrichtung dennoch (oder gerade deshalb) nicht selbst vornehmen möchten, stehen wir Ihnen mit dem kostenlosen Installationsservice für Gambio-Module gerne zur Seite.

Das heruntergeladene und entpackte Zip-Paket enthält ein Verzeichnis namens www. Dessen Inhalt ist für den Upload in das Wurzelverzeichnis Ihrer Gambio-Installation vorgesehen. Das heißt, dass die sepa-qr.php nach dem Upload über ihrshop.de/sepa-qr.php erreichbar sein sollte. Bitte löschen Sie keinesfalls schon im GXModules-Verzeichnis Ihrer Gambio-Installation befindliche Dateien anderer Modulanbieter.

Damit Gambio die neuen Dateien erkennt, leeren Sie nach erfolgreichem Hochladen via FTP-Programm im Gambio-Admin den Cache für Modulinformationen (Menüpunkt Toolbox > Cache). Ebenfalls zu leeren ist der Cache für Texte, da das Modul einige via Gambio bearbeitbare Textphrasen beinhaltet.

Konfiguration

Module > GiroCode / QR-Rechnung in Menüleiste
Neu im Backend

Sobald die Installation abgeschlossen ist, finden Sie im Gambio-Adminmenü unter Module den neuen Unter-Menüpunkt GiroCode / QR-Rechnung. Passender Weise ordnet sich dieser direkt unterhalb der Zahlungsweisen ein, also dem Menüpunkt, in dem Sie die verfügbaren Zahlungsmodule auswählen. Ein Klick auf QR-Code SEPA zeigt Ihnen alle im Modul verfügbaren Konfigurationseinstellungen.

Zahlungsweisen auswählen

QR-Code für folgende Zahlungsweisen anbieten: paypal3 invoice sepa moneyorder
Zahlungsarten auswählen

Wählen Sie zunächst aus den aktivierten Zahlungsmodulen diejenigen aus, für die das Modul einen QR-Code anzeigen soll. Sinnvollerweise sind dies alle Zahlungsarten, bei denen der Kunde via Überweisung zahlen kann, also z.B. die Module invoice für Rechnung und moneyorder für Überweisung (Vorkasse).

QR-Code nach Bestellstatus

Nicht für Bestellungen mit diesem Status anzeigen: Bezahlt
Für bezahlte Bestellungen keinen QR-Code mehr anzeigen

Einen QR-Code für einfache und sichere Zahlungen braucht man nur, wenn es noch etwas zu bezahlen gibt. Deshalb legen Sie einfach einen Bestellstatus oder mehrere fest, bei denen kein QR-Code mehr nötig ist.

Dateiformat

Bevorzugtes Dateiformat GiroCode: SVG Bevorzugtes Dateiformat QR-Rechnung: PNG
QR-Code als SVG oder PNG?

Mit SVG ist der QR-Code auch in platzsparender Darstellung gestochen scharf und deshalb zuverlässig zu scannen. Dafür ist das Label, also der Schriftzug unmittelbar unterhalb des QR-Codes nur mit PNG möglich. Bei der QR-Rechnung ist das Schweizer Kreuz leider nur im PNG-Format in den QR-Code einzubinden.

Bestellung-Danke-Seite

Bestellung-Danke-Seite, QR-Code anzeigen: ja, Position: Nach anderen Erweiterungen, Größe: 250, Label anzeigen: ja, Label Schriftgröße: 16
Einfache Überweisung schon auf der Danke-Seite

Die erste Möglichkeit für den Kunden, via Überweisung zu bezahlen, ist direkt nach Absenden der Bestellung. Folgerichtig können Sie bereits auf der Bestellung-Danke-Seite einen entsprechenden QR-Code einblenden lassen. Hierfür ist das Kontrollkästchen nach QR-Code anzeigen zuständig.

Logischerweise sind alle nachfolgenden Angaben ohne Bedeutung, wenn Sie den QR-Code nicht anzeigen lassen.

Die Auswahlmöglichkeiten bei Position bedeuten:

Lieber Max Mustermann, vielen Dank für Ihren Einkauf in unserem Onlineshop! QR-Code für unkomplizierte SEPA-Überweisung via App, QR-Code
Gleich überweisen…
  • Vor anderen Erweiterungen
    Gambio bietet über Templates/Themes hinaus Erweiterungsmöglichkeiten für die Danke-Seite. Entscheiden Sie selbst, ob der QR-Code wichtiger ist oder die weiteren Inhalte prominenter platziert sein sollen.
  • Nach anderen Erweiterungen
    Das Bild mit dem QR-Code ordnet sich nach der Ausgabe von Inhalten anderer Module auf der Danke-Seite ein.

Der QR-Code ist stets quadratisch, so dass sich die Größenangabe auf Länge und Breite gleichermaßen bezieht.

Mit Label ist ein im Bild selbst befindlicher Untertitel gemeint. Sinnvoll ist ein Label, das sowohl als Erklärung als auch als Call-to-action fungiert. Den Text hierfür bearbeiten Sie im Gambio-Admin unter Toolbox > Texte anpassen.

Bei der Label Schriftgröße orientieren Sie sich logischerweise an der Größe des QR-Codes und der Länge des Texts.

Deutlich flexibler sind Sie, wenn Sie zusätzlich unseren Danke-Seite-Editor für Gambio nutzen. Mit ihm veröffentlichen Sie unkompliziert eigene Inhalte auf der Logout- und Danke-Seite. Der QR-Code für Überweisungen steht als Platzhalter auch für den Danke-Seite-Editor zur Verfügung.

E-Mails

E-Mails Code für E-Mail-Vorlagen:[IfQRCodeSepa]<a href="[QRCode {$oID}]&img_only"><img src="[QRCode {$oID}]" alt="QR-Code"></a>[/IfQRCodeSepa] Größe: 160 Label anzeigen: Label Schriftgröße: 9
QR-Code für E-Mails

Etwas anders verhält es sich bei E-Mails. Hier wählen Sie nicht die Position des QR-Codes, sondern fügen einfach an der gewünschten Stelle einen Platzhalter in die E-Mail-Vorlage ein. Üblicherweise sind dies die Bestellbestätigung oder die Rechnungs-E-Mail.

Sehr geehrte Frau Erika Musterfrau, vielen Dank für Ihre Bestellung in unserem Onlineshop! QR-Code Unsere Bankverbindung: Musterbankdaten

Bestellbestätigung mit QR-Code

Beide Vorlagen editieren Sie im Gambio-Admin unter Kunden > E-Mails > E-Mail Vorlagen. Zwar können Sie theoretisch auch mit Hilfe des Platzhalters [QRCode {$oID}] einen Link zum QR-Code in die E-Mail-Vorlage im Text-Format einfügen. Richtig sinnvoll ist der QR-Code in E-Mails jedoch nur im HTML-Format.

Den gesamten Inhalt zwischen [IfQRCodeSepa] und [/IfQRCodeSepa] zeigt das Modul nur, wenn der QR-Code für die Überweisung bei der betreffenden Bestellung zur Verfügung steht, sprich: Wenn der Kunde eine der von Ihnen dafür vorgesehenen Zahlungsweisen gewählt hat. Das hat nicht nur den großen Vorteil, dass Kunden nicht mit einem QR-Code verwirrt werden, mit dem sie nichts anfangen können. Vielmehr bietet das auch die Möglichkeit, einen kurzen erklärenden Text anzubringen, der nur dann erscheint, wenn nötig.

In der HTML-Ansicht der Bestellbestätigung (deutsch) sieht der eingebundene Platzhalter für den QR-Code etwa so aus:

<p>
 <span style=font-size:13px;><span style="font-family: verdana,geneva,sans-serif;">{if $PAYMENT_MODUL=='moneyorder'} Unsere Bankverbindung:<br />
 {$smarty.const.MODULE_PAYMENT_MONEYORDER_PAYTO|nl2br} {else} {$PAYMENT_INFO_HTML} {/if} </span></span>
 [IfQRCodeSepa]<img src="[QRCode {$oID}]" alt=QR-Code>[/IfQRCodeSepa]
</p>

Bitte beachten Sie, dass

  • der QR-Code nicht in der Vorschau, sondern nur beim realen Versand der E-Mail eingefügt wird und
  • der nochmalige Versand einer schon vorher verschickten Bestellbestätigung zwischenzeitliche Änderungen ebenfalls nicht berücksichtigt.

PDF-Rechnung

QR-Code anzeigen: Position: Linksbündig unterhalb Rechnungshinweisen Größe: 65 Label anzeigen: ja Label Schriftgröße: 10 Zahlteil (QR-Rechnung): Auf einer Extra-Seite QR-Code bei moneyorder (Vorkasse) nicht einfügen nein
GiroCode oder Zahlteil in PDF-Rechnung einfügen
PDF-Rechnung mit QR-Code linksbündig und abtrennbarem Zeilteil auf 2.Seite
QR-Code linksbündig unterhalb Rechnungshinweisen, Zahlteil auf neuer Seite
PDF-Rechnung mit QR-Code rechts neben den Zahlungshinweisen
QR-Code rechts der Rechnungshinweise
Ihre Rechnung Seite 1, Beispielartikel und QR-Code links von Summe etc.
Linksbündig neben Rechnungssummen

Wenn Ihren Kunden tatsächlich eine Rechnung in Papierform vorliegt, anhand derer sie die Überweisung tätigen sollen, ist die Aufwandsersparnis und Fehlerminimierung durch das Modul am effizientesten.

Die Einstellungsmöglichkeiten zu Größe des QR-Codes etc. kennen Sie bereits von der Danke-Seite. Abweichend hiervon ist lediglich die Auswahl der Position innerhalb des PDF-Dokuments.

Mit der Auswahl Linksbündig unterhalb Rechnungshinweisen fügt das Modul den QR-Code unterhalb von Versandadresse, Zahlungsmethode, Versandart und Hinweisen zur Rechnung ein.

Wie viel Platz an welcher Stelle des PDFs ist, hängt unter anderem von Ihren Einstellungen zur PDF-Rechnung ab. Entscheiden Sie daher bitte selbst, wie groß der QR-Code sein darf und an welcher Stelle er mit allen praktisch vorstellbaren Szenarien optisch ansprechend darstellbar ist.

Wenn Sie beispielsweise generell keine Hinweise in Rechnungen anbringen oder diese ebenso rechts Spielraum lassen wie Versandart und Zahlungsmethode, ist die Option Rechtsbündig neben Rechnungshinweisen ggf. die optisch ansprechendere. Obendrein ist sie platzsparender.

Da Sie in Gambio beliebig viele Rechnungen pro Bestellung generieren können, empfehlen sich einige Tests, um die hinsichtlich des PDF-Layouts optimale Einstellung zu finden.

Ja. Das Modul des Kollegen ruft die parent-Methode nicht auf. Heißt: Es unterbindet andere Erweiterungen an der benötigten Stelle in der PDF-Rechnung. Einzig mögliche Lösung ist die Anpassung der Datei im Xycons-Modul. Lösung liegt vor und ist auf Anfrage erhältlich.

Bestellinformationen im Kundenmenü

Bestellinformationen im Kundenmenü QR-Code anzeigen: ja Position: Rechts der Zahlungsmethode Größe: 200 Label anzeigen: ja Label Schriftgröße: 14
Einstellungen fürs Kundenmenü

Im Loginbereich finden Kunden auf der persönlichen Seite unter Meine Bestellungen eine Auflistung ihrer bisherigen Bestellungen. Ein Klick auf den Anzeigen-Button öffnet die Detail-Ansicht der jeweiligen Bestellung.

Da auch diese Seite Informationen zur Zahlungsweise enthält, fügt das Modul – sofern aktiviert – auch hier den QR-Code für die unkomplizierte SEPA-Überweisung via Mobile-App ein.

Auch ohne das Modul ist die Detail-Ansicht einer Bestellung im Kundenmenü nicht dafür kreiert, Webdesign-Preise zu erhalten. Hinsichtlich der Position stellt das Modul deshalb nur eine einzige Auswahlmöglichkeit bereit. Diese ist Rechts der Zahlungsmethode. Auf der Seite selbst erscheint der QR-Code dann rechtsbündig unter der Überschrift Zahlungsweise.

Bestellung Druck-Ansicht im Kundenmenü

Bestellung Druck-Ansicht im Kundenmenü QR-Code anzeigen: ja Position: Unterhalb der Bestellinformationen Größe: 200 Label anzeigen: ja Label Schriftgröße: 14
QR-Code Bestellung-Druckansicht aktivieren
QR-Code in Druckansicht-Modal
QR-Code in Druckansicht

Die Drucken-Funktion gibt es sowohl auf der Bestellung-Danke-Seite als auch in den Bestell-Details im Kundenmenü, worum es im letzten Abschnitt ging.

Beide Druck-Ansichten sind schon in Gambio identisch. Deshalb unterscheidet auch das Modul nicht, von welcher Seite aus die Druck-Ansicht aufgerufen wurde. Die einzig auswählbare Position ist Unterhalb der Bestellinformationen. Wie Sie nachfolgendem Screenshot entnehmen können, lässt die Seite praktisch keine alternative Positionierung zu.

Warum auch immer im 21. Jahrhundert ein digital vorliegendes Schriftstück zu Papier gebracht werden sollte: Die Druck-Ansicht deutet auf einen bevorstehenden Medienbruch hin. Sind im Anschluss die Daten für die Überweisung einem Blatt Papier zu entnehmen, ist der darauf angebrachte QR-Code von unschätzbarem Vorteil.

Zahlungsempfänger, Verwendungszweck & Texte

Zahlungsempfänger Name Kontoinhaber: Name Kontoinhaber Ihre IBAN: Ihre IBAN Verwendungszweck & QR-Code-Label: Texte anpassen (Phrase: sepa_qr_code_reference, sepa_qr_code_label)
EU-Bankdaten für GiroCode hinterlegen

Für die Funktionalität ganz elementare Angaben sind in den letzten beiden Unterpunkten der Konfiguration zu tätigen. Legen Sie unter Zahlungsempfänger (EUR) fest, welche Daten das Script in den QR-Code einbinden soll, wenn die Bestellsumme auf Euro lautet:

  • Name Kontoinhaber
    Ihr Name bzw. Firmenname, auf den das Konto bei Ihrer Bank lautet
  • Ihre IBAN
  • Verwendungszweck & QR-Code-Label

Dabei sind die beiden erstgenannten Texte sprachunabhängig immer gleich. Der Verwendungszweck lautet standardmäßig “Bestell-Nr. %s” auf deutsch und “Order ID %s” auf englisch, wobei %s als Platzhalter für die Bestell-Nr. dient. Das QR-Code-Label lautet im Auslieferungszustand “Überweisung via App” respektive “Pay via Banking App”.

Diese und wenige weitere Texte bearbeiten Sie unterteilt nach den aktivierten Sprachen Ihres Onlineshops über den in Gambio dafür vorgesehenen Menüpunkt (Toolbox > Texte anpassen). Der Link Texte anpassen führt Sie direkt dorthin.

Zahlungsempfänger (CHF) Name Kontoinhaber: Name Kontoinhaber für QR-Rechnung Ihre QR-IBAN: CH4431999123000889012 Verwendungszweck & QR-Code-Label: Texte anpassen (Phrase: sepa_qr_code_reference_ch, sepa_qr_code_label_ch)
Schweizer Bankkonto für QR-Rechnung angeben

Sofern Sie (auch) Zahlungen in Schweizer Franken empfangen bzw. Preise in CHF ausweisen, tragen Sie bei Zahlungsempfänger (CHF) den entsprechenden Kontoinhaber und Ihre (QR-)IBAN ein. Wenn der Zahlbetrag auf CHF lautet, fügt das Modul mit denselben Angaben wie für den EPC-QR-Code den QR-Code für die QR-Rechnung ein.

Deinstallation

Um das das Modul für GiroCode und QR-Rechnung aus Ihrem Shop zu entfernen, führen Sie einfach diese beiden Schritte durch.

  1. Deinstallation im Modul-Center
    Damit ist das Modul bereits inaktiv und sämtliche Einstellungen gelöscht.
  2. Entfernen via Modulverwaltung
    Ein Klick auf den Entfernen-Button in der Modulverwaltung löscht die Moduldateien aus Ihrem Shop und leert die Caches.

QR-Code SEPA-Überweisung, Mauzeiger auf Deinstallieren-Button
Deinstallieren im Modul-Center

Außer Betrieb ist das Modul bereits, wenn Sie es über das Modul-Center im Gambio-Adminmenü deinstallieren. Um es komplett aus Ihrem Gambio-Shop zu entfernen, löschen Sie via FTP-Programm das Verzeichnis QRCodeSepaUeberweisung aus dem GXModules/Werbe-Markt/-Verzeichnis. Ebenfalls nicht mehr benötigt wird die sepa-qr.php  im Hauptverzeichnis Ihrer Gambio-Installation.

Direkt im Anschluss leeren Sie im Gambio-Admin den Cache für Modulinformationen. Ohne diesen letzten Schritt würde Gambio nach nicht mehr vorhandenen Dateien suchen, was entsprechende Fehler zur Folge hätte. Die Deinstallation ist in diesen wenigen Schritten bereits abgeschlossen.