決済サービス「KOMOJU」導入と、使用テーマの相性問題への対処

WooCommerceに決済サービス「KOMOJU」を組み込む

この学而図書ホームページには、TCDテーマ「RIKYU」＋ECプラットフォーム「WooCommerce」によって、独自のオンラインストア機能が組み込まれています。

オンラインストアの開設にあたり、当初、私が導入するつもりだった決済代行サービスは、個人事業主でも手軽に申し込める「Stripe」のみでした。

その後、しばらくはStripe一本でストア運営を続けていましたが、以下のような点に、少しだけ不便さを感じなくもありませんでした。

• Stripe経由でのコンビニ決済は、学而図書では利用できない（条件が合わない）
• Stripeが取り扱わない日本の銀行振込は、自分で口座を確認するのが大変（ひとり出版なので）
• 決済方法の選択肢は、もう少しあったほうがよい気がする

そこで、以前から検討だけは進めていた、もう一つの決済代行サービスに手を出すことにしました。それが「KOMOJU」です。

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週間）　^{※2025年2月28日をもって取扱終了}
• 楽天ペイ（3～4週間）
• ペイディ（Paidy、10日間）
• コンビニ決済（セブン-イレブン以外、3～4日間）
• 銀行振込（3～4日間）
• ペイジー（Pay-easy、3～4日間）
• au PAY（1～2週間）
• Apple Pay（5日間）^{※記事執筆後に追加されました}
• メルペイ（3～4週間）^{※記事執筆後に追加されました}

※カッコ内の日数は審査期間です。

法人でないと利用できない決済方法

一方で、以下の決済方法は、個人事業主だと利用できません。

• NET CASH
• BitCash
• WebMoney
• キャリア決済
• d払い
• コンビニ決済（セブン-イレブン）
• メルペイ^{※個人事業主でも申請可能になりました}

学而図書では、個人事業主として申請できる決済方法のすべてが審査を通過し、利用可能な状態となっています。零細企業の身としては、大変ありがたいところです。

WooCommerce ＋ RIKYU ＋ KOMOJUで起きる問題への対処

さて、Stripeと同様、KOMOJUもWordPressプラグイン経由で、たちどころにWooCommerceの中に組み込むことができます。また、KOMOJUの公式プラグインは、テスト決済も試しやすく、使い勝手がよいものでした。

プラグインを導入して設定を済ませるだけで、購入手続き画面には名の知られた決済手段がずらりと並びます。もはや銀行振込であっても、私が自力で口座を確認し続ける必要はないのです。

一方で、実際に使っていくうちに、TCDテーマ「RIKYU」とKOMOJUプラグインとの相性によって起きる問題も明らかになりました。不具合というほどではないのですが、起きた現象は次のようなもので、発見した対処法をあわせて記しておくことにします。

一部の決済方法で、選択時に空白の説明欄が表示される

au Pay、PayPay、メルペイといったQRコード決済系や、Apple Payを支払い手段として選ぶと、空っぽの説明欄が直下に出てきてしまいます。どうやら、KOMOJU側のデータを読み取りに行って、追加の情報入力が必要ないと、この箇所が空白になるようです。

WordPressテーマがRIKYUの場合、空白のフキダシが後からぽんと表示されることになり、何とも言えないエラー感が醸し出されます。このままでは、購入者の不安材料になりかねません。

そこで、とりあえずの対処として、以下の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」「merpay」「apple_pay」等にすることで、他の支払方法にも適用できます。

対処パターン2：特定の支払方法のフキダシだけを削除する

TCD以外のテーマを導入している他サイト様を拝見すると、スマホ決済系の支払いを選択した場合、フキダシなどは特に表示されないようです。私もそのほうが無難だと思い、以下のCSSに変更しました。au PAYなど、追加の情報入力が不要な決済手段では、フキダシ自体を消しています。

/* 支払方法の説明を削除 */
.payment_method_komoju_aupay .payment_box {
    display: none !important;
}

※5　上記コードの「aupay」の部分を「rakutenpay」「paypay」「linepay」等にすることで、他の支払方法にも適用できます。

楽天ペイ・Apple Pay用アイコンのサイズが大きくなる

2026年4月時点では、支払い手段の一覧画面で、楽天ペイとApple Payのアイコンが他のアイコンよりも大きく表示されてしまいます。そのままだと、かなり不格好です。

画像データが外部から引っ張られてきているため、以下のCSSでとりあえず対処するのがよいと思います。過去、au Pay用のアイコンで似たような不具合が生じた際には修正が入りましたが、このアイコン2種はまだ継続して問題が発生していますので、この方法で様子を見ておくしかなさそうです。

あくまで応急措置なので、利用頻度の少ない「モバイル＋画面を横回転」時のアイコンサイズは、小さくなっても問題なしとしました。気になる方は、適用条件の画面サイズを細かく指定してください。

/* 楽天ペイ アイコンのサイズ調整 */
.payment_method_komoju_rakutenpay img {
    width: 3.5%;
}
@media screen and (max-width: 599px) {/* モバイル時 */
  .payment_method_komoju_rakutenpay img {
    width: 12%;
  }
}

/* Apple Pay アイコンのサイズ調整 */
.payment_method_komoju_apple_pay img {
    width: 3.5%;
}
@media screen and (max-width: 599px) {/* モバイル時 */
.payment_method_komoju_apple_pay img {
    width: 12%;
  }
}

（不具合解消済み）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%;
  }
}

---

差し当たっては、これで大きな問題なく「RIKYU」＋「WooCommerce」＋「KOMOJU」の環境が構築できるはずです。このサイトでは他にも細々とした調整を加えていますので、ご興味のある方は以下の一覧からご覧ください。

なお、本記事に記した対処方法などは、推奨手段ではなく、あくまで参考情報として掲載しています。私もウェブ上の情報にいつも助けられているので、少しでもお困りの方にお役に立てば幸いです。