Cómo añadir un código QR para transferencias bancarias en la página de confirmación de pedido y en el correo electrónico

Pagar mediante un código QR, que se escanea en la aplicación bancaria móvil, es cada vez más popular; en algunos países, incluso ha superado a los pagos con tarjeta o NFC. Especialmente en Europa, las transferencias bancarias siguen siendo un método común para pagar pedidos online.

Qué es el pago con QR y cómo funciona

El "pago con QR" es básicamente un código que contiene información de pago como el número de cuenta/IBAN, el importe y el concepto. En lugar de introducir todos estos datos manualmente, los clientes solo tienen que escanear el código en su aplicación bancaria y confirmar el pago.

Las ventajas son:

• Comodidad – El proceso es muy sencillo y rápido. No hay riesgo de errores al escribir el número de cuenta, etc. El comerciante recibe el pago de inmediato (en el caso de SEPA).
• Seguridad – No compartes los datos de tu tarjeta.
• Sin comisiones – No hay comisiones de pago como en las transacciones con tarjeta.

Para generar el código QR, debe utilizar una API de servicio. En nuestro ejemplo, usamos QR Platba para bancos checos. Alternativamente, puede usar el generador de códigos QR EPC, que es compatible con los 27 países SEPA.

Cómo implementar un código QR en la página de confirmación de pedido

Para implementar el código QR en la página de confirmación/estado del pedido, vaya a la administración de su tienda > Configuración > Pantalla de pago > Página de estado del pedido > Scripts adicionales e inserte el siguiente código.

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

No olvide introducir su número de cuenta bancaria y código reales en lugar de los marcadores [BANK-ACCOUNT] y [BANK-CODE].

Una vez hecho esto, vaya a su tienda y cree un pedido con pago por transferencia bancaria. Si no ve el código QR inmediatamente en la página de confirmación, intente actualizarla.

Cómo implementar un código QR en el correo electrónico de confirmación de pedido

La implementación del código QR en el correo electrónico es similar. Vaya a la administración de su tienda > Configuración > Notificaciones > Notificaciones al cliente > Confirmación de pedido > Editar código e inserte el siguiente código justo después de la línea {% 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 %}

No olvide introducir su número de cuenta bancaria y código reales en lugar de los marcadores [BANK-ACCOUNT] y [BANK-CODE].

Una vez hecho esto, vaya a su tienda y cree un pedido con pago por transferencia bancaria. Compruebe el correo electrónico de confirmación de pedido para ver si todo funciona correctamente.

Conclusión y notas finales

Una de las desventajas de las transferencias bancarias es que algunos clientes nunca llegan a pagar el pedido. Por otro lado, este método puede atraer a clientes que no pagarían con tarjeta de crédito por miedo a hacerlo.

Para aumentar la tasa de pago de los pedidos por transferencia bancaria, puede probar nuestra aplicación de recordatorios de pago, Payster.

Si necesita ayuda con la implementación del código QR en su tienda, puede contratar los servicios de nuestra agencia.