So fügen Sie einen QR-Code für Banküberweisungen auf der Bestellbestätigungsseite und in E-Mails hinzu

Die Zahlung per QR-Code, der einfach mit der Banking-App gescannt wird, erfreut sich wachsender Beliebtheit und hat in einigen Ländern sogar Kartenzahlungen oder NFC überholt. Besonders in Europa sind Banküberweisungen nach wie vor eine gängige Methode für Online-Bestellungen.

Was ist eine QR-Zahlung und wie funktioniert sie?

Ein „QR-Zahlungscode“ enthält alle relevanten Daten wie IBAN, Betrag und Verwendungszweck. Anstatt diese Informationen manuell einzugeben, scannen Kunden den Code einfach mit ihrer Banking-App und bestätigen die Zahlung.

Die Vorteile sind:

• Komfort – Der Prozess ist schnell und einfach. Es gibt kein Risiko für Tippfehler bei der Kontonummer. Der Händler erhält die Zahlung (bei SEPA) sofort.
• Sicherheit – Sie müssen keine Kreditkartendaten preisgeben.
• Keine Gebühren – Es fallen keine Transaktionsgebühren wie bei Kartenzahlungen an.

Um den QR-Code zu generieren, benötigen Sie eine API. In unserem Beispiel nutzen wir QR Platba für tschechische Banken. Alternativ können Sie den EPC QR Code Generator verwenden, der alle 27 SEPA-Länder unterstützt.

So implementieren Sie den QR-Code auf der Bestellbestätigungsseite

Gehen Sie in Ihrem Shopify-Adminbereich auf Einstellungen > Checkout > Bestellstatusseite > Zusätzliche Skripte und fügen Sie den folgenden Code ein.

{% comment %}
  BEGIN: QR code content box for bank transfers by Digismoothie
{% endcomment %}

{%- liquid
    # Make sure to change these input variables
    assign bank_account_number = 'ACCOUNT-NUMBER'
    assign bank_code = 'BANK-CODE'
    assign due_days = 0
    assign qr_code_size = 150
  
    # Do not change these
    assign compatible_order = order
    if first_time_accessed
      assign compatible_order = checkout.order
    endif
    assign bank_variable_symbol = compatible_order.order_number
    assign bank_amount = compatible_order.total_price | divided_by: 100.0 | round: 2
    assign seconds = due_days | times: 24 | times: 60 | times: 60
    assign due_date = order.created_at | date: "%s" | plus: seconds | date: "%Y-%m-%d"
    assign is_bank = false
    assign is_cancelled = order.cancelled
    assign is_paid = order.financial_status
    capture payment_methods
      for t in compatible_order.transactions
        echo t.gateway | downcase
      endfor
    endcapture
    # Change the lookup keyword 'bank' if necessary
    if payment_methods contains 'bank'
      assign is_bank = true
    endif
  -%}

  {%- if is_bank and is_cancelled == false and is_paid == “pending” -%}
    <script>
      Checkout.$(function() {
        Shopify.Checkout.OrderStatus.addContentBox(
          `<div class="text-container"><h2>Údaje pro platbu bankovním převodem</h2><p>Platbu prosím uhraďte na náš bankovní účet dle následujících parametrů nebo využijte QR kód níže.<ul style="list-style-type: disc; margin-left: 16px;"><li>Číslo účtu: <span class="emphasis">{{ bank_account_number }}/{{ bank_code }}</span></li><li>Částka: <span class="emphasis">{{ total_price | money_with_currency }}</span></li><li>Variabilní symbol: <span class="emphasis">{{ bank_variable_symbol }}</span></li></ul></p><p>Na kompletaci objednávky začneme pracovat ihned, jakmile platbu zaregistrujeme.</p></div>`,`<img src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber={{ bank_account_number }}&bankCode={{ bank_code }}&amount={{ bank_amount }}&currency=CZK&vs={{ bank_variable_symbol }}&message=Shopify+obj.+{{ bank_variable_symbol }}&date={{ due_date }}" width="{{ qr_code_size }}">`
        )
      });
    </script>
  {%- endif -%}
  
  {% comment %}
  	END: QR code content box for bank transfers by Digismoothie
  {% endcomment %}

Bitte vergessen Sie nicht, Ihre tatsächliche Kontonummer und den Code anstelle der Platzhalter [BANK-ACCOUNT] und [BANK-CODE] einzugeben.

Erstellen Sie anschließend eine Testbestellung mit Banküberweisung. Falls der QR-Code nicht sofort auf der Bestätigungsseite erscheint, laden Sie die Seite bitte neu.

So implementieren Sie den QR-Code in der Bestellbestätigungs-E-Mail

Die Implementierung in E-Mails erfolgt ähnlich. Gehen Sie zu Einstellungen > Benachrichtigungen > Kundenbenachrichtigungen > Bestellbestätigung > Code bearbeiten und fügen Sie den folgenden Code direkt nach der Zeile {% capture email_body %} ein.

{% comment %}
  BEGIN: QR code content box for bank transfers by Digismoothie
{% endcomment %}

{% if order.financial_status == 'pending' %}
  {% assign has_pending_payment = true %}
{% else %}
  {% assign has_pending_payment = false %}
{% endif %}
  {% if has_pending_payment %}
    <p>Your text:</p>
<ul><li>Bank account number: <b>[BANK-ACCOUNT]</b></li><li>Amount: <b>{{ total_price | money_with_currency }}</b></li><li>Refenrece: <b>{{ order_number }}</b></li></ul>

{%- liquid
    # Make sure to change these input variables
    assign bank_account_number = '[BANK-ACCOUNT]'
    assign bank_code = '[BANK-CODE]'
    assign due_days = 0
    assign qr_code_size = 150
  
    # Do not change these
    assign compatible_order = order
    if first_time_accessed
      assign compatible_order = checkout.order
    endif
    assign bank_amount = compatible_order.total_price | divided_by: 100.0 | round: 2
    assign seconds = due_days | times: 24 | times: 60 | times: 60
    assign due_date = order.created_at | date: "%s" | plus: seconds | date: "%Y-%m-%d"
  -%}
  
<img style="margin-left:45px" src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber={{ bank_account_number }}&bankCode={{ bank_code }}&amount={{ bank_amount }}&currency=CZK&vs={{ order_number }}&message=Shopify+obj.+{{ order_number }}&date={{ due_date }}" width="{{ qr_code_size }}">
  
  {% comment %}
    END: QR code content box for bank transfers by Digismoothie
  {% endcomment %}

Bitte vergessen Sie nicht, Ihre tatsächliche Kontonummer und den Code anstelle der Platzhalter [BANK-ACCOUNT] und [BANK-CODE] einzugeben.

Erstellen Sie anschließend eine Testbestellung mit Banküberweisung. Überprüfen Sie die Bestätigungs-E-Mail, um sicherzustellen, dass alles korrekt funktioniert.

Fazit und abschließende Hinweise

Ein Nachteil von Banküberweisungen ist, dass manche Kunden ihre Bestellung nie bezahlen. Andererseits können Sie durch Banküberweisungen Kunden gewinnen, die aus Sicherheitsbedenken nicht mit Kreditkarte zahlen würden.

Um die Zahlungsquote bei Banküberweisungen zu erhöhen, können Sie unsere Zahlungserinnerungs-App Payster nutzen.

Wenn Sie Hilfe bei der Implementierung des QR-Codes in Ihrem Shop benötigen, können Sie die Dienste unserer Agentur in Anspruch nehmen.