・支払い方法に代金引換を追加したい
・代金引換で購入された場合の表示を確認したい
・チェックアウト画面で代引き手数料が表示されないのでどうすれば良いか
そんな場合の解決策をまとめました。
まず代金引換を手動の決済方法で追加した場合にどうなるか、とそれ以上のことをやりたい場合の方法についてまとめてみます。
支払い方法に代金引換（代引き）を追加する場合のShopifyでの制限事項
Shopifyでは、さまざまな決済方法が用意されていますが、2021年3月現在では、「代金引換（代引き）」は「手動の決済方法」として追加するしかなく、「代引き手数料」と、それを合わせた「合計金額」などを、購入完了画面（注文状況ページ）や購入完了メールに表示することがデフォルトではできないため、それを前提としてのストア構築が必要になります。
※プランが「Shopify Plus」の場合は、チェックアウト画面のカスタマイズが可能なため、代引き手数料などを表示するように開発することは可能です。
手動の決済方法とは
手動の決済方法とは、
お客様の中には、注文の支払いにクレジットカードを使用したくないという方もいます。手動の決済方法を設定しておくと、こういったお客様にもオンラインで注文していただくことができます。
上記のように、クレジットカードや外部の決済プラットフォームなどを使用せずに、「手動で支払いを承認する」ような場合に使用できます。
デフォルトでは、以下の3つが用意されています。
- Cash on Delivery (COD)（＝代金引換）
- Bank Deposit（＝銀行振込）
- Money Order（＝郵便為替）
また、新しく手動の決済方法を追加することも可能です。
ただしこの場合、手動の決済方法の取引手数料は請求されません。
そのため、代引きの場合は「代引き手数料」や、それを含めた「合計金額」などを表示することがデフォルトではできません。
よって、「手動の決済方法」にて「代金引換」を追加する場合は、合計金額の他に代引き手数料がかかることをユーザーにわかりやすく表示しなければなりません。
手動での決済方法はテストモードが用意されていないため、開発ストアではチェックアウト画面での購入テストをすることができません。注文管理で注文を手動追加することは可能です。
支払い方法に代金引換（代引き）を追加する方法
まず、支払い方法に代金引換を追加する方法は、「設定」→「決済」→「手動の決済方法」から、以下の「Cash on Delivery (COD)」を選択し、
次に、以下の画面が表示されますので、
- 詳細：支払い方法選択画面で表示する文言
- 支払いの手順：購入完了画面で表示する文言
を設定します。（テキストのみ設定可能。HTMLは不可）
2つとも同じ文言でも問題なしです。
今回は、仮に以下で設定してみます。
代引きはどの配送会社を使うかなどにより手数料などが異なります。
★★★代金引換でご注文のお客様へ★★★
「代金引換」をご選択の場合、画面に表示されている「合計代金」とは別に、以下の「代引手数料」がかかります。合計金額に、代引手数料を加算した金額を配達員にお支払いください。
—–
1万円未満の場合：330円（税込）
3万円未満の場合：440円（税込）
10万円未満の場合：660円（税込）
30万円までの場合：1,100円（税込）
—–※ 代金引換は日本国内への配送の場合のみご利用可能です。
Cash on Delivery (COD) order is only available for delivery within Japan.
わかりやすくするポイントは以下を記載することです。
- 合計金額には「代引き手数料」は含まれていないこと
- 「代引き手数料」がその注文でいくらかがわかること
- 日本国内以外への配送で代引きはできないこと
HTMLは使用できないため、太字にするなどはできません。
「詳細」と「支払いの手順」を入力し、「Cash on Delivery (COD)を有効化する」を押せば、設定は完了です。
支払い方法に代金引換（代引き）を選択して購入する場合の挙動（ユーザー側）
ユーザーが購入する場合にどのような表示になるかですが、以下のようになっています。
支払い画面
「代金引換」を選択した段階で、その下に先ほど入力した「概要」が中央寄せで表示されます。
購入完了画面（注文状況ページ）
購入完了画面（注文状況ページ）には以下のように、先ほど入力した「支払いの手順」が左寄せで表示されます。
最初に記載した通り、「代引き手数料」やそれを含めた「合計金額」を表示することはできません。右側の「合計」には代引き手数料は含まれていません。また、表示もされません。
「注文の確認」メール（購入完了メール）
「注文の確認」メールは以下のように、決済方法に「代金引換」は表示されますが、やはりこちらもデフォルトでは「代引き手数料」やそれを含めた「合計金額」は表示されません。
このように、デフォルトでは代金引換で購入する際のユーザー視点で見ると、やはり分かりづらい感はあります。
支払い画面や、購入完了画面（注文状況ページ）に記載の説明を読まないお客様もいるかと思いますので、そうなると、受け取る際に「金額が違う？ 増えてる？」となり、受取拒否や、問い合わせが増える可能性があります。
支払い方法に代金引換（代引き）を選択して購入された場合の挙動（マーチャント側）
「新しい注文」メール（管理者宛の注文通知メール）
管理者宛の注文通知メールも、支払い方法に「Cash on Delivery (COD)」とは表示されますが、やはりこちらもデフォルトでは「代引き手数料」やそれを含めた「合計金額」は表示されません。
（こちらはお客様に送られるメールではないため、企業によってはそのままでも良いのかもですが）
注文管理 一覧画面
注文管理の画面では、まず支払いステータスが「保留中の決済」として登録されます。
注文管理 詳細画面
詳細画面では以下のようになっています。こちらも「代引き手数料」やそれを含めた「合計金額」は表示されません。
画面下のTimelineで、Cash on Delivery (COD) （＝代金引換）であることが確認できます。
お客様が受け取り、代金の支払いが確認できたら、以下の「支払いを回収する」から「支払い済としてマークする」を選択します。
明細表（納品書）
デフォルトの明細表には、支払い方法や代引き手数料などの表示はされていません。
無料アプリのOrder Printerでも、デフォルトでは代引き手数料やそれを含めた合計などの表示はされていません。
支払い方法に代金引換（代引き）を追加する際に、お客様に代引き手数料をわかりやすくする方法
以上のように、購入するユーザーから見ると、代引き手数料とそれを含めた合計金額がわかりづらいため、この対応策について考えてみます。
1. アプリを導入する
最後に、アプリを導入する方法ですが、
Advanced Cash on Deliveryで代金引換を使おう！ — アプリ
こちらのアプリは「送料」に「代引き手数料」を載せて表示させるものですが、今後提供終了予定のようです。（2021年3月現在はインドのマーチャントのみ利用可能なようです）
2. 注文管理で後から代引き手数料を追加する
まず1つ目は、注文管理の詳細画面で、後から代引き手数料を追加する方法です。
注文管理の詳細画面の右上にある「編集」から、注文の編集画面に進み、「カスタム商品を追加」をすると、以下のように追加の画面が表示されます。
ここで「代引き手数料」を商品として追加すると、（カスタマイズすれば）発送完了メールや納品書に表示することが可能になります。
ただ、注文完了時点ではメールに記載はされませんので、あとから金額を修正する旨をわかりやすくしておかないといけないことや、間違って請求書を送信するにチェックをしてしまうと、通知メールの「注文編集済みの請求書（件名：注文を更新するにはお支払いが必要です）」が送信されてしまいます。
また、注文数が多いショップでは、手動で行うことはかなり大変だったり、わかりづらいため問い合わせが増えたりと、あまり現実的な案ではないかとは思います。
3. 購入完了画面（注文状況ページ）・注文の確認メール・納品書テンプレートをカスタマイズする
次に、「購入完了画面（注文状況ページ）」・「注文の確認」メール（購入完了メール）・納品書をそれぞれカスタマイズして、「代引き手数料」と「合計金額」を無理矢理表示させてしまう方法です。
（※先ほどの 2. と併用すると二重で代引き手数料が加算されおかしくなります）
合計金額を参照して、代引き手数料とそれを加えた合計金額を自動的に表示するよう、テンプレートを編集する方法になります。
こちらはLiquidのカスタマイズが必要となりますので、開発者やShopifyエキスパートに依頼が必要です。
※注文完了画面で表示されていた「合計」に加え、「代引き手数料」と「総合計」を表示しています。（配送の下に代引き手数料を入れて、合計は一つでも良いですが、そうなると注文時の画面とは異なってしまうのであえて分けていますが、そのようにカスタマイズすることも一応可能です。）
購入完了画面（注文状況ページ）のカスタマイズ例
「設定」→「チェックアウト」の「追加スクリプト」にLiquidとJavaScriptで代引き手数料と表示させると、以下の部分に入れることが可能です。（左側にしか入れられないので、若干無理矢理感はありますが）
「注文の確認」メール（購入完了メール）のカスタマイズ例
※他にも必要に応じては「注文の編集」など他のメールテンプレートのカスタマイズも必要です。
納品書（Order Printerアプリ）のカスタマイズ例
※上記は簡易的に「代引き手数料」と、「総合計（合計＋代引き手数料）」を表示したのみですが、消費税の部分やその他の箇所も編集することは可能です。
現時点では、3の方法が現実的なように思います。
