注文確認ページとメールに銀行振込用QRコードを追加する方法

モバイルバンキングアプリでスキャンするQRコード決済は普及が進んでおり、国によってはカードやNFC決済を上回るほどです。特にヨーロッパでは、オンライン注文の支払い方法として銀行振込が依然として一般的です。

QRコード決済とは何か、その仕組み

「QRコード決済」とは、銀行口座（IBAN）、金額、参照番号などの支払い情報を含んだQRコードのことです。顧客はこれらの情報を手入力する代わりに、銀行アプリでコードをスキャンするだけで支払いを完了できます。

主なメリットは以下の通りです。

• 利便性 – 手続きが非常に簡単かつ迅速です。口座番号の入力ミスなどのリスクがなく、加盟店側も（SEPAの場合）即座に支払いを確認できます。
• 安全性 – カード情報を開示する必要がありません。
• 手数料無料 – カード決済のような決済手数料がかかりません。

QRコードを生成するには、サービスAPIを利用する必要があります。本例ではチェコの銀行向けにQR Platbaを使用します。また、SEPA加盟27カ国すべてに対応しているEPC QRコードジェネレーターも利用可能です。

注文確認ページにQRコードを実装する方法

注文確認（ステータス）ページにQRコードを実装するには、ストア管理画面から「設定」>「チェックアウト」>「注文状況ページ」>「追加スクリプト」へ進み、以下のコードを挿入してください。

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

[BANK-ACCOUNT]および[BANK-CODE]のプレースホルダーには、実際の銀行口座番号とコードを必ず入力してください。

完了したら、ストアで銀行振込を選択して注文を作成してください。注文確認ページにQRコードがすぐに表示されない場合は、ページを更新してみてください。

注文確認メールにQRコードを実装する方法

メールへの実装も同様です。ストア管理画面から「設定」>「通知」>「顧客通知」>「注文確認」>「コードを編集」へ進み、{% 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 %}

[BANK-ACCOUNT]および[BANK-CODE]のプレースホルダーには、実際の銀行口座番号とコードを必ず入力してください。

完了したら、ストアで銀行振込を選択して注文を作成してください。注文確認メールを確認し、正しく動作しているかチェックします。

まとめと最終確認

銀行振込のデメリットの一つは、注文しても支払われないケースがあることです。その一方で、クレジットカードでの支払いに抵抗があるお客様でも、銀行振込なら安心して購入していただけるというメリットもあります。

銀行振込の入金率を高めるには、弊社の支払いリマインダーアプリ、Paysterをご活用ください。

ストアへのQRコード導入についてサポートが必要な場合は、弊社の代理店サービスをご利用いただけます。