In diesem Artikel findest du die Anleitungen zum Erstellen einer Dokumentvorlage für Rechnungen mit QR-Code.

Einschränkungen:

• Es können nur einseitige Rechnungen erstellt werden.
• Der bereitgestellte Code ist für CHF ausgelegt. 
• Der Ländercode für Empfänger außerhalb der Schweiz muss in der Vorlage manuell angepasst werden.

Bitte beachte, dass du deine IBAN ohne Leerzeichen in der Konfiguration angeben musst, da einige Banken die Leerzeichen nicht lesen/verarbeiten. Dies kann zu Fehlermeldungen bei deinen Kunden führen.

.

Erstellen einer Rechnung mit QR-Code

Erstelle eine neue Kopfzeile ohne Ränder.

1. Gehe zu settingsKonfigurationen > Kommunikation > Briefpapier.
2. Klicke auf Briefpapier hinzufügen

3. Setze alle Ränder auf 0.
   

   Erstelle eine neue Rechnungs-Vorlage.

4. Gehe zu settings Konfigurationen > Kommunikation > Dokumentvorlagen > Rechnung. Es ist wichtig, die Vorlage zu duplizieren, damit du sie anschließend bearbeiten kannst. 
5. Gib deiner Rechnungs-Vorlage einen Namen.
   

6. Füge nun am unteren Ende des Dokuments einen Text-Inhalt hinzu. Wähle „Text“ aus dem Menü rechts und ziehe es an das Ende des Dokuments.
   
   
   
   
   Klicke bei diesem Textfeld nun auf Bearbeiten
   
    

   Hier, auf das "<>" (Quelltext) Symbol klicken
   
   
    

7. Kopiere den folgenden HTML-Code. Füge ihn in deinen Quellcode ein und klicke auf OK.

   
   
   
    

   Klicke hier um den HTML Code anzuzeigen!

   
   <table class="qr">
   <tbody>
   
   <tr>
   
   <td class="left">
   
   <div class="left-content">
   
   <h3>Empfangsschein</h3>
   
   <strong>Konto / Zahlbar an</strong><br/>{$company.bank_account|wordwrap:4:' ': true}<br/>{$company.company_name}<br/>{$company.location_street} {$company.location_housenumber}<br/>{$company.location_postalcode}<br/>{$company.location_city} {$company.country}<br/><br/><br/>
   
   <strong>Zahlbar durch</strong><br/>{$f.customer.displayname}<br/>{$f.customer.invoice_street} {$f.customer.invoice_number}<br/>{$f.customer.invoice_postalcode} {$f.customer.invoice_city} <br/>{iff $f.customer.invoice_country != $company.country}{$f.customer.invoice_country}{/iff} <br/>
   
   <table class="currency">
   
   <tbody>
   
   <tr>
   
   <td><strong>Währung</strong></td>
   
   <td><strong>Betrag</strong></td>
   
   </tr>
   
   <tr>
   
   <td>CHF</td>
   
   <td>{$f.price_invat,noformat|replace:',':' '}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </div>
   
   </td>
   
   <td class="right">
   
   <div class="right-content">
   
   <table class="payment">
   
   <tbody>
   
   <tr>
   
   <td>
   
   <h3>Zahlteil</h3>
   
   <div class="qr-code">
   
   <img src="https://qr-generator.io/?swiss=1&amp;margin=0&amp;cht=qr&amp;chs=543x543&amp;chld=H|0&amp;chl=SPC%0A0200%0A1%0A{$company.bank_account}%0AS%0A{$company.company_name}%0A{$company.location_street}%0A{$company.location_housenumber}%0A{$company.location_postalcode}%0A{$company.location_city}%0ACH%0A%0A%0A%0A%0A%0A%0A%0A{$f.price_invat,noformat|replace:',':''}%0ACHF%0AS%0A{$f.customer.displayname}%0A{$f.customer.invoice_street}%0A{$f.customer.invoice_number}%0A{$f.customer.invoice_postalcode}%0A{$f.customer.invoice_city}%0ACH%0ANON%0A%0A{$f.subject}%0AEPD"/>
   
   </div>
   
   <table class="currency">
   
   <tbody>
   
   <tr>
   
   <td><strong>Währung</strong></td>
   
   <td><strong>Betrag</strong></td>
   
   </tr>
   
   <tr>
   
   <td>CHF</td>
   
   <td>{$f.price_invat,noformat|replace:',':' '}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </td>
   
   <td><strong>Konto / Zahlbar an</strong><br/>{$company.bank_account|wordwrap:4:' ': true}<br/>{$company.company_name}<br/>{$company.location_street} {$company.location_housenumber}<br/>{$company.location_postalcode}<br/>{$company.location_city} {$company.country}<br/><br/><br/>
   
   <strong>Zahlbar durch</strong><br/>{$f.customer.displayname}<br/>{$f.customer.invoice_street} {$f.customer.invoice_number}<br/>{$f.customer.invoice_postalcode} {$f.customer.invoice_city}<br/>{iff $f.customer.invoice_country != $company.country}{$f.customer.invoice_country}{/iff}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </div>
   
   </td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   
    

8. Kopiere nun den folgenden CSS-Code, füge ihn in CSS bearbeiten ein und klicke dann auf Bestätigen.
   
   
   
    

   Klicke hier um den CSS Code anzuzeigen!

   body > .templatesection table td {

       height: 191mm;

   }

   body > .templatesection table td td {

       height: auto;

   }

   table.qr td {

       vertical-align: top;

       font-family: Arial;

   }

   table.qr td.left {

       font-size: 8pt;

   }

   table.qr td.right, table.payment td {

       font-size: 10pt;

   }

   table.qr td.left strong {

       font-size: 6pt;

   }

   table.qr td.right strong {

       font-size: 8pt;

   }

   table.qr td h3 {

       font-size: 11pt;

       padding-bottom: 12px;

       padding-top: 0px;

       margin: 0px;

   }

   table.qr td.left {

       width: 62mm;

       height: 105mm;

       border-top: 0.75pt solid black;

       border-right: 0.75pt solid black;

   }

   .left-content, .right-content {

       padding: 5mm;

   }

   table.qr td.right {

       width: 148mm;

       height: 105mm;

       border-top: 0.75pt solid black;

   }

   .qr-code {

       width: 46mm;

       height: 46mm;

       margin-top: 5mm;

       margin-bottom: 5mm;

   }

   .qr-code img {

       width: 46mm;

       height: 46mm;

   }

   
    

9. Wähle schließlich die Kopfzeile aus, die du zu Beginn erstellt hattest.
10. Vergiss nicht, alle vorgenommenen Änderungen zu speichern.