So fügen Sie auf der Bestellbestätigungsseite und der E-Mail einen QR-Code für die Banküberweisung hinzu

Tomas Janu

|

April 16, 2024

So fügen Sie auf der Bestellbestätigungsseite und der E-Mail einen QR-Code für die Banküberweisung hinzu

Erfahren Sie, wie Sie der Bestellbestätigungsseite (Dankeschön) und der E-Mail einen QR-Code für die Banküberweisung hinzufügen. Detaillierte Anweisungen, einschließlich Screenshots und Codebeispielen.

So fügen Sie auf der Bestellbestätigungsseite und der E-Mail einen QR-Code für die Banküberweisung hinzu

Das Bezahlen per QR-Code, den Sie in Ihrer mobilen Bankanwendung scannen, wird immer beliebter und hat in einigen Ländern sogar Karten-/NFC-Zahlungen übertroffen. Vor allem in Europa sind Banküberweisungen immer noch eine übliche Zahlungsmethode für Online-Bestellungen.

Was ist die QR-Zahlung und wie funktioniert sie?

Die „QR-Zahlung“ ist im Grunde ein QR-Code, der Zahlungsinformationen wie Bankkonto/IBAN, Betrag und Referenzsymbol enthält. Und anstatt all diese Informationen manuell einzugeben, können Kunden den Code einfach in ihrer Banking-App scannen und die Zahlung bestätigen.

Die Vorteile sind:

  • Bequemlichkeit — Der Vorgang ist super einfach und schnell. Es besteht kein Risiko von Tippfehlern auf dem Bankkonto usw. Der Händler erhält die Zahlung sofort (im Fall von SEPA).
  • Sicherheit — Sie geben Ihre Kartendaten nicht weiter.
  • Keine Gebühren — Es fallen keine Zahlungsgebühren wie bei Kartentransaktionen an.

Um den QR-Code zu generieren, müssen Sie eine Service-API verwenden. In unserem Beispiel verwenden wir QR Platba zum Tschechische Banken. Alternativ können Sie das verwenden EPC-QR-Code-Generator, das alle unterstützt 27 SEPA-Länder.

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

Um den QR-Code auf der Bestellbestätigungs-/Statusseite zu implementieren, gehen Sie zu Ihrem Shop-Adminbereich > Einstellungen > Auschecken > Seite mit dem Bestellstatus > 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>Payment instructions</h2><p>Your text.<ul style="list-style-type: disc; margin-left: 16px;"><li>Account number: <span class="emphasis">{{ bank_account_number }}/{{ bank_code }}</span></li><li>Amount: <span class="emphasis">{{ total_price | money_with_currency }}</span></li><li>Reference: <span class="emphasis">{{ bank_variable_symbol }}</span></li></ul></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 Bankkontonummer und den Code anstelle der Platzhalter [ACCOUNT-NUMBER] und [BANK-CODE] einzugeben.

Wenn Sie fertig sind, gehen Sie in Ihr Geschäft und erstellen Sie eine Bestellung mit einer Banküberweisung. Wenn Sie den QR-Code nicht sofort auf der Bestellbestätigungsseite sehen, versuchen Sie bitte, ihn zu aktualisieren.

A QR code payment displayed at the order confirmation page
Eine QR-Code-Zahlung, die auf der Bestellbestätigungsseite angezeigt wird

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

Die QR-Code-Implementierung in der E-Mail ist ähnlich. Gehen Sie zu Ihrem Shop-Adminbereich > Einstellungen > Benachrichtigungen > Kundenbenachrichtigungen > Auftragsbestätigung > Code bearbeiten und fügen Sie den folgenden Code direkt nach dem {% capture email_body%} Linie.

{% 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 Bankkontonummer und den Code anstelle der Platzhalter [ACCOUNT-NUMBER] und [BANK-CODE] einzugeben.

Wenn Sie fertig sind, gehen Sie in Ihr Geschäft und erstellen Sie eine Bestellung mit einer Banküberweisung. Überprüfen Sie die E-Mail mit der Auftragsbestätigung und prüfen Sie, ob alles funktioniert.

A QR code payment displayed in the order confirmation e-mail
Eine QR-Code-Zahlung, die in der Bestellbestätigungs-E-Mail angezeigt wird

Fazit und abschließende Anmerkungen

Einer der Nachteile von Banküberweisungen besteht darin, dass einige Kunden die Bestellung niemals bezahlen. Auf der anderen Seite können Banküberweisungen zu Kunden führen, die nicht mit Kreditkarten bezahlen würden, da sie möglicherweise Angst haben.

Um die Zahlungsquote von Banküberweisungsaufträgen zu erhöhen, können Sie unsere Zahlungserinnerungs-App ausprobieren. Payster.

Wenn Sie Hilfe bei der Implementierung des QR-Codes in Ihrem Geschäft benötigen, können Sie unseren Dienstleistungen der Agentur.

Start your Shopify store for free and pay only $1 for the first monthStart your Shopify store for free and pay only $1 for the first month

Tomas Janu

Tom liebt es, über Upselling, Konversionsoptimierung und E-Commerce-Trends zu schreiben. Er ist einer unserer Mitbegründer, und manchmal kannst du mit ihm sprechen, wenn du unser Support-Team kontaktierst. Folgen Sie ihm auf LinkedIn, um weitere Tipps und Neuigkeiten rund um Shopify zu erhalten.

Neuste Artikel

Alle Artikel

Stärken Sie Ihr Shopify-Geschäft mit unseren Apps

Alle unsere Apps wurden entwickelt, um Ihnen dabei zu helfen, Ihr Shopify-Geschäft auszubauen. Probieren Sie sie aus und nutzen Sie die kostenlose Testphase.

Booste mein Shopify