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

Die eigentliche Installation des QR-Codes für SEPA-Überweisungen in Gambio ist binnen 3 Minuten erledigt. Die Konfigurationseinstellungen sind zwar relativ umfangreich. Jedoch können Sie in den meisten Fällen die Standardvorgaben des Moduls belassen.

Installation in Gambio

Verzeichnis GXModules, Datei sepa-qr.php

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.

QR-Code SEPA-Überweisung Bieten Sie Ihren Kunden die unkomplizierte Vorausfüllung von Überweisungsträgern (Empfänger, IBAN, Betrag, Verwendungszweck) mittels QR-Code auf Bestellung-Danke-Seite und Bestellbestätigungs-E-Mail. Installieren-Button

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.

Konfiguration

Menübox Module: Modul-Center, Versandarten, Zahlungsweisen QR-Code SEPA, Zusammenfassung

Sobald die Installation abgeschlossen ist, finden Sie im Gambio-Adminmenü unter Module den neuen Unter-Menüpunkt QR-Code SEPA. 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, Zahlungsarten: invoice, moneyorder

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).

Bestellung-Danke-Seite

Bestellung-Danke-Seite, QR-Code anzeigen: ja, Position: Nach anderen Erweiterungen, Größe: 250, Label anzeigen: ja, Label Schriftgröße: 16

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:

QR-Code für unkomplizierte SEPA-Überweisung via App
  • 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

Code für E-Mail-Vorlagen:[IfQRCodeSepa]<img src=

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 Online-Shop! QR-Code Unsere Bankverbindung: Musterbankdaten

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

PDF-Rechnung, Position: Linksbündig unterhalb Rechnungshinweisen, Größe: 78, Label Schriftgröße: 6
PDF-Rechnung mit QR-Code links unter den Rechnungshinweisen

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.

PDF-Rechnung, Position: Rechtsbündig neben Rechnungshinweisen

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.

PDF-Rechnung mit QR-Code rechts neben den Zahlungshinweisen

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.

Bestellinformationen im Kundenmenü

Meine Bestellungen BESTELLDATUM BESTELL-NR. STATUS BETRAG Anzeigen-Button

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.

Bestellinformationen im Kundenmenü: QR-Code anzeigen: ja, Position: Rechts der Zahlungsmethode, Größe: 200, Label anzeigen: ja, Label Schriftgröße: 16

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.

Zahlungsweise Vorkasse (Überweisung), QR-Code mit Label "Überweisung via App"

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: 16

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.

Druckansicht einer Bestellung im Kundenmenü mit Logo oben rechts und QR-Code unten links

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)

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)

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

QR-Code SEPA-Überweisung, Mauzeiger auf Deinstallieren-Button

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.