WooCommerce ＋ RIKYU（TCD）環境への決済サービス導入
学而図書ホームページには、独自のオンラインストア機能が組み込まれています。弊出版の本は大手ネット書店でもお買い求めいただけるのですが、TCDテーマ「RIKYU」（ECプラットフォーム「WooCommerce」との連携型）が気に入って、勢いで自前のECサイトを構築してしまいました。その顛末は、若干のカスタマイズ情報も含めて、以下の記事に記載しています。
普段の仕事のついでに一人で管理していますから、金銭的な維持コストは非常に低く、とりあえず存在していてもいいんじゃないか、というのがこのECサイト機能の位置づけです。膨大な初期コストをかけずに、オンラインストアを自力で作れてしまうのですから、時代の変化というのは凄まじいですね。
さて、オンラインストアである以上は、決済システムを組み込まないといけません。当初、私が利用していた決済代行サービスは「Stripe」のみでした。一般的には耳慣れない名前かもしれませんが、アメリカ発祥の企業による、オンラインビジネスの分野ではたいへん有名な大手サービスです（そう言う私自身も、自分でストアを開設しようとして初めて知りました）。
Stripeは、個人事業主でもオンラインで申し込めて、本人確認書類もその場で撮影できますし、利用開始までの期間が実に短い点も助かります。料金も、初期費用無料、月額費用無料、決済発生ごとに手数料3.6％（記事執筆時点）と明朗会計です。そして、WordPressのプラグイン経由で、ものすごく簡単にWooCommerceに組み込めてしまいます。
ちなみに、WooCommerce用のプラグインは数種ありますが、先人が数多くの比較情報をウェブ上にまとめてくださっていますから、ご興味のある方はぜひ検索してご確認ください。個人的には、小難しいWebhookを自動で設定してくれて、テスト環境もすぐ試せる「Payment Plugins for Stripe WooCommerce」が便利で、ずっと使い続けています。
Stripeの導入後、あっという間にストアでVisaとMastercard（クレジットカード）が使えるようになり、1週間ほどで、AMEX、JCB、Diners、DISCOVERブランドも使用が許可されました。しかも、カードだけでなく、Google PayとApple Payも決済用に選ぶことができます※2。もうこれだけで、いっぱしのオンラインストアに見えるではありませんか。
それに加えて、WordPressプラグイン「Japanized For WooCommerce」から「銀行振込」を決済方法に加えれば、まるで、どこかに外注して作ってもらったオンラインストアのようです。プラグイン作者様のお陰で、本をご購入いただいた方のお名前に「様」がつかないというWooCommerceの海外仕様っぷりも克服できます。WooCommerce自体は、海外の流儀が日本の慣習と合わない部分もありますが（消費税の端数が、切り捨てではなく四捨五入とか……。でも、Amazonのマーケットプレイスも四捨五入ですね）、私はとりあえず、自前ストアの出来映えに満足でした。
※2 Google Payだけは、マーチャント IDを取得するために別途Googleに登録して使用許可を得ています。販売画面スクリーンショットが何回か却下されてちょっと大変でしたが、「支払う」ボタンの色を黒に設定したら審査が通ったのでご参考まで（白ボタンのほうが好みでしたが、見やすさが大事のようです）。
新たに決済代行サービス「KOMOJU」を組み込む
その後、しばらくはStripe一本でストア運営を続けていましたが、いくつか不満も出てこなくはありませんでした。ただ、どれも大したことではなく、
- Stripe経由でのコンビニ決済は、学而図書では利用できない（条件が合わない）
- Stripeの取り扱いではない日本の銀行振込は、口座の確認が大変（ひとり出版なので）
- 決済方法の選択肢は、もう少しあったほうがよい気がする
という程度で、特に致命的というわけでもありません。そもそも、自前のストアはメインの販売チャネルではないので、これ以上時間をかけても意味がないわけです。もうこのことは忘れて、本来の業務に専念すべきなのは明らかでした。
……しかし、私は性格に難があり、できそうなことをそのままにしておくと落ち着かないのです。結局、どうにも我慢ができなくなってしまい、以前から検討だけは進めていた、もう一つの決済代行サービスに手を出すことにしました。それが「KOMOJU」です。
Stripeと同様に、初期費用・月額費用は無料。日本独自のスマホ決済などにも対応していて、支払手数料は銀行振込1.4％、コンビニ決済なら2.75％、クレジットカードで3.6～3.85％（記事執筆時点）3.25％（2024年4月1日より）です。KOMOJUなら、うちのような個人事業でも、これまで以上に多彩な決済手段を導入できるでしょう。よしやってみよう、という勢いに任せて（いつも勢いに身を委ねてばかりですが）、私は利用申請のボタンを押しました。
開業届や本人確認書類の写しなどのデータを送信して申請を済ませると、Stripeと同様、まずはVisaとMastercardが先に使えるようになります（体感的には、かなり早いという印象です）。その後、ひとつひとつの決済方法ごとに、審査が完了した旨のEメールが順次届き、利用可能になっていきました。KOMOJUを通じて個人事業主でも使える決済方法をまとめると、次のようになります。
個人事業主でも利用できる決済方法
- Visa、Mastercard、JCB、AMEX、Diners（～10日間）
- PayPay（3～4週間）
- LINE Pay（3～4週間）
- 楽天ペイ（3～4週間）
- ペイディ（Paidy、10日間）
- コンビニ決済（セブン-イレブン以外、3～4日間）
- 銀行振込（3～4日間）
- ペイジー（Pay-easy、3～4日間）
- au PAY（1～2週間）
※カッコ内の日数は審査期間
一方で、以下の決済方法は、個人事業主だと利用できません。ただ、上に挙げた決済だけで私にはもう十分、お腹いっぱいです。
法人でないと利用できない決済方法
- NET CASH
- BitCash
- WebMoney
- キャリア決済
- コンビニ決済（セブン-イレブン）
- メルペイ
なお、現時点で、既にほとんどの決済方法が審査を通過し、利用可能な状態となっています。学而図書のような零細企業にとっては、本当にありがたいことです。
WooCommerce ＋ RIKYU ＋ KOMOJUで起きる問題への対処
さて、Stripeと同様、KOMOJUもWordPressプラグイン経由で、たちどころにWooCommerceの中に組み込むことができます。また、KOMOJUの公式プラグインは、テスト決済も試しやすく、使い勝手がよいものでした。
上のサポート記事にある手順に沿って、ちょいちょいと設定するだけで、購入手続き画面には名の知られた決済手段がずらりと並びます。もはや銀行振込であっても、私が自力で口座を確認し続ける必要はないのです。
これで私の求める条件は全て整い、オンラインストアは完成……となるはずでした。
ところが、意気揚々とテストを続けるうちに、本当にちょっとした部分が気になってしまいました。不具合というほどではないのですが、起きた現象は次のようなもので、発見した対処法をあわせて記しておくことにします。
QRコード系の決済方法を選ぶと、空白の説明欄が表示される
au Pay、PayPay、Line Payといった、いわゆるスマホ決済系の方法を選ぶと、空っぽの説明欄が出てきてしまいます。どうやら、KOMOJU側のデータを読み取りに行って、追加の情報が必要ないと、この箇所が空白になるようです。
WordPressテーマがRIKYUの場合、空白のフキダシが後からぽんと表示されることになり、何とも言えないエラー感が醸し出されます。これでは、次に進んでよいのかどうか、購入者目線では判断できないでしょう。それに、中身のないフキダシが出ていると、サイトがきちんと作り上げられていないようで、お店として信用されないという気がしてなりません。
なお、他所のKOMOJU導入サイト様では、この問題が発生していないケースが確認できました。おそらく、最近のTCDテーマの決済画面とKOMOJUの相性の問題なのだと思います（ただ、発生要因の切り分けにまでは踏み込んでおりませんので、そのあたりは諸々ご勘弁ください。あちこちに問い合わせるのも大変なので……）。
そこで、とりあえずの対処として、以下のCSSを購入手続き画面の固定ページに追加しておくことにしました※3。
※3 CSSやPHPファイルの変更による改修は、不具合等を誘発する可能性があり、TCD非推奨事項です。また、以下のカスタムCSSによる修正・調整等は、あくまで当方の自己責任に基づくものであり、本情報のご利用・転用に伴う損害等に対する責任を学而図書は一切負いませんのでご注意ください。免責事項の詳細はこちらでご確認いただけます。
対処1：フキダシに文字を追加する
最初のうちは、フキダシに文字を追加することで対処すればよいと考え、以下のCSSを追加してみました。これで、フキダシには一応「 • 「注文する」ボタンからお手続きに進みます。」と表示が入り、印象はかなり変わってきます。
ただ、この方法だと何だかくどく感じるので、取りやめて対処2に変更することにしました。
/* 支払方法の説明を追加、レイアウト調整 */
.payment_method_komoju_aupay::after {
content: " • 「注文する」ボタンからお手続きに進みます。";
}
.payment_method_komoju_aupay {
padding: 0 0 1.4em 0 !important;
}※4 上記コードの「aupay」の部分を「rakutenpay」「paypay」「linepay」等にすることで、他の支払方法にも適用できます。
対処2：特定の支払方法のフキダシだけを削除する
TCD以外のテーマを導入している他サイト様を拝見すると、スマホ決済系の支払いを選択した場合、フキダシなどは特に表示されないようです。私もそのほうが無難だと思い、以下のCSSに変更しました。au PAYなど、追加の情報入力が不要な決済手段では、フキダシ自体を消しています。
/* 支払方法の説明を削除 */
.payment_method_komoju_aupay .payment_box {
display: none !important;
}※5 上記コードの「aupay」の部分を「rakutenpay」「paypay」「linepay」等にすることで、他の支払方法にも適用できます。
（不具合解消済み）au Payのアイコン（ロゴ）が巨大になる
もうひとつ、PCで表示すると、au Payのロゴが恐ろしく巨大になります。他の決済手段のアイコンは小さく自動表示されて何の問題もないのに、au Payだけ横幅一杯という異常な大きさになってしまうのです。もしかすると、レスポンシブ対応関係の問題かもしれません。
KOMOJUの公式プラグインだと、アイコン画像を外部から引っ張ってきているっぽいので、画像データの差し替えも難しそうです。WooCommerce設定の「決済」タブからau Payの設定を選び、「Show icon on checkout」をオフにすればアイコンを消すこともできますが、何だか寂しく感じます。
そこで、以下のCSSで仮に対処しておくことにしました。スマホを横回転させるケースも考えつつ、このくらいなら違和感がないかな、というサイズで大雑把に設定しています。
/*au Payアイコンのサイズ調整*/
.payment_method_komoju_aupay img {
width: 5%;
}
@media screen and (max-width: 1250px) {/*モバイル時*/
.payment_method_komoju_aupay img {
width: 15%;
}
}そんなこんなで色々とありましたが、これをもって学而図書オンラインストアはいったん完成、ということにしました。本記事に記した対処方法などは、推奨手段ではなく、あくまで参考情報として載せたものとご了解ください。私もウェブ上の情報にいつも助けられているので、少しでもお困りの方にお役に立てば幸いです。
