Comment ajouter un QR code pour virement bancaire sur la page de confirmation de commande et dans les e-mails

Le paiement par QR code, que l'on scanne via son application bancaire mobile, devient de plus en plus populaire et a même surpassé les paiements par carte ou NFC dans certains pays. En Europe, le virement bancaire reste un moyen courant de régler ses achats en ligne.

Qu'est-ce que le paiement par QR code et comment fonctionne-t-il ?

Le « paiement par QR code » est un code contenant les informations de paiement telles que l'IBAN, le montant et la référence. Au lieu de saisir ces données manuellement, les clients scannent simplement le code dans leur application bancaire pour confirmer le paiement.

Les avantages sont :

• Confort – Le processus est simple et rapide. Aucun risque d'erreur de saisie du compte bancaire. Le marchand reçoit le paiement immédiatement (dans le cas du SEPA).
• Sécurité – Vous ne communiquez pas vos coordonnées bancaires.
• Sans frais – Il n'y a pas de frais de transaction comme avec les paiements par carte.

Pour générer le QR code, vous devez utiliser une API. Dans notre exemple, nous utilisons QR Platba pour les banques tchèques. Vous pouvez également utiliser le générateur de QR code EPC, qui prend en charge les 27 pays de la zone SEPA.

Comment intégrer un QR code sur la page de confirmation de commande

Pour l'intégrer sur la page de statut de commande, allez dans l'admin de votre boutique > Paramètres > Paiement > Page de statut de commande > Scripts supplémentaires et insérez le code suivant.

{% 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 %}

N'oubliez pas de remplacer les espaces réservés [BANK-ACCOUNT] et [BANK-CODE] par votre numéro de compte et votre code bancaire réels.

Une fois terminé, passez une commande test avec un paiement par virement. Si le QR code ne s'affiche pas immédiatement sur la page de confirmation, essayez d'actualiser la page.

Comment intégrer un QR code dans l'e-mail de confirmation de commande

La procédure est similaire. Allez dans l'admin > Paramètres > Notifications > Notifications client > Confirmation de commande > Modifier le code et insérez le code suivant juste après la ligne {% capture email_body %}.

{% 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 %}

N'oubliez pas de remplacer les espaces réservés [BANK-ACCOUNT] et [BANK-CODE] par votre numéro de compte et votre code bancaire réels.

Une fois terminé, passez une commande test avec un paiement par virement. Vérifiez l'e-mail de confirmation pour vous assurer que tout fonctionne correctement.

Conclusion et remarques finales

L'un des inconvénients du virement bancaire est que certains clients ne règlent jamais leur commande. En revanche, ce mode de paiement peut attirer des clients réticents à l'idée d'utiliser leur carte bancaire.

Pour améliorer le taux de conversion des virements bancaires, essayez notre application de relance de paiement, Payster.

Si vous avez besoin d'aide pour intégrer le QR code à votre boutique, vous pouvez faire appel aux services de notre agence.