Comment ajouter un code QR pour le virement bancaire sur la page de confirmation de commande et dans l'e-mail

Tomas Janu

|

May 14, 2024

Comment ajouter un code QR pour le virement bancaire sur la page de confirmation de commande et dans l'e-mail

Découvrez comment ajouter un code QR pour le virement bancaire à la page de confirmation de commande (merci) et à l'e-mail. Instructions détaillées, y compris des captures d'écran et des exemples de code.

Comment ajouter un code QR pour le virement bancaire sur la page de confirmation de commande et dans l'e-mail

Le paiement par code QR, que vous scannez dans votre application bancaire mobile, est de plus en plus populaire et, dans certains pays, il a même dépassé les paiements par carte/NFC. En Europe en particulier, les virements bancaires restent un moyen courant de payer les commandes en ligne.

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

Le « paiement QR » est essentiellement un code QR qui contient des informations de paiement telles que le compte bancaire/IBAN, le montant et le symbole de référence. Et au lieu de saisir toutes ces informations manuellement, les clients peuvent simplement scanner le code dans leur application bancaire et confirmer le paiement.

Les avantages sont les suivants :

  • Commodité — Le processus est super simple et rapide. Il n'y a aucun risque de faute de frappe sur le compte bancaire, etc. Le commerçant reçoit le paiement immédiatement (dans le cas du SEPA).
  • Sécurité — Vous ne divulguez pas les détails de votre carte.
  • Pas de frais — Il n'y a pas de frais de paiement comme dans le cas des transactions par carte.

Pour générer le code QR, vous devez utiliser une API de service. Dans notre exemple, nous utilisons QR Platja pour Banques tchèques. Vous pouvez également utiliser Générateur de code QR EPC, qui prend en charge tous 27 pays SEPA.

Comment implémenter un code QR sur la page de confirmation de commande

Pour implémenter le code QR sur la page de confirmation/état de la commande, accédez à l'administrateur de votre boutique > Réglages > Commander > Page d'état de la 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>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 %}

N'oubliez pas de saisir votre numéro de compte bancaire et votre code réels au lieu des espaces réservés [COMPTE BANCAIRE] et [CODE BANCAIRE].

Une fois cela fait, rendez-vous dans votre boutique et créez une commande avec un paiement par virement bancaire. Si le code QR ne s'affiche pas immédiatement sur la page de confirmation de commande, essayez de l'actualiser.

A QR code payment displayed at the order confirmation page
Un paiement par code QR affiché sur la page de confirmation de commande

Comment insérer un code QR sur l'e-mail de confirmation de commande

L'implémentation du code QR dans l'e-mail est similaire. Accédez à l'administration de votre boutique > Paramètres > Notifications > Notifications aux clients > Confirmation de commande > Modifier le code et insérez le code suivant juste après le {% capture email_body %} ligne.

{% 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 saisir votre numéro de compte bancaire et votre code réels au lieu des espaces réservés [COMPTE BANCAIRE] et [CODE BANCAIRE].

Une fois cela fait, rendez-vous dans votre boutique et créez une commande avec un paiement par virement bancaire. Consultez l'e-mail de confirmation de commande et vérifiez si tout fonctionne.

A QR code payment displayed in the order confirmation e-mail
Un paiement par code QR affiché dans l'e-mail de confirmation de commande

Conclusion et notes finales

L'un des inconvénients des virements bancaires est que certains clients ne paieront jamais la commande. D'un autre côté, les virements bancaires peuvent vous attirer des clients qui ne paieraient pas par carte de crédit car ils pourraient avoir peur.

Pour augmenter le taux de paiement des ordres par virement bancaire, vous pouvez essayer notre application de rappel de paiement, Payster.

Si vous avez besoin d'aide pour implémenter le code QR dans votre boutique, vous pouvez utiliser notre les services de l'agence.

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 adore écrire sur les ventes incitatives, l'optimisation des conversions et les tendances du commerce électronique. Il est l'un de nos cofondateurs, et vous pouvez parfois lui parler en contactant notre équipe d'assistance. Suivez-le sur LinkedIn pour obtenir d'autres conseils et actualités liés à Shopify.

Les derniers articles

Tous les articles

Boostez votre activité Shopify avec nos applications

Toutes nos applications sont conçues pour vous aider à développer votre activité Shopify. Découvrez-les et profitez de la période d'essai gratuite.

Booster sur Shopify