[eccube3]EC-CUBEペイメント決済プラグインをカスタマイズ

結構な大物だこれ

プラグイン

3.0系|EC-CUBEペイメント決済プラグイン(3.0系)|GMOペイメントゲートウェイ株式会社
https://www.ec-cube.net/products/detail.php?product_id=958

動作について

クレカ払いやらキャリア決済やら、対応する決済方法はいっぱいある。
決済方法別に表示する決済処理画面が異なる。
管理画面で支払い方法を追加して、追加したら購入画面で、例えば「クレジットカード決済」を選んだら購入確定のボタンがクレカ決済画面へ遷移するものに変わる。遷移先はプラグインが管理するページになってる。

決済処理画面

各決済処理画面は以下のディレクトリに入っている。
/app/Plugin/GmoPaymentGateway/View

決済処理画面の表示設定

多分ここだと思う。。
/app/Plugin/GmoPaymentGateway/Controller/PaymentController.php

カスタマイズについて

ディレクトリ構成が他のプラグインと異なるのでやや分かりづらい。
決済部分はECの肝だから弄るのすっごく怖い。
ファイル数がめっちゃあるから決済処理画面の表示をどこで管理してるのか把握するのがすごく大変なので、動作させるtwigのファイル名はいじらずに、バックアップ側に「_bk」とか付けて対象から外すやつを、まあ一般的なWEBサイトのバックアップみたいな感じのをした方が無難だと思う。

クレジットカード決済

クレカの組み込みをやっていくことになったのでそこを掘っていく。

テスト環境構築

PGマルチペイメントサービスやらGMOペイメントゲートウェイやら名称が色々あって至極めんどくさいけど、まあ、本ちゃんの契約もテストアカウントの発行も済んでるとする。

テストアカウント用のショップ管理、サイト管理それぞれの管理画面にアクセスして、IDとPWを確認する。管理画面ログイン用のIDPWじゃないので注意。

それぞれの管理画面左側メニューの「ショップ管理」「サイト管理」からIDPWは確認できる。

ECCUBEの管理画面、プラグイン一覧のとこからGmoPaymentGatewayの設定を開いて設定していく。

  • 接続先:テスト環境
  • サイトID:サイト管理に書いてあるやつ
  • サイトパスワード:サイト管理に書いてあるやつ
  • ショップID:ショップ管理に書いてあるやつ
  • ショップパスワード:ショップ管理に書いてあるやつ
  • 有効にする決済方法:「クレジットカード決済」にチェック
  • 認証方式:「トークン方式」にチェック

上記を抑えたら登録。

テスト環境動作確認

てきとーに商品をカートに入れて購入手続きへ進む。
支払い方法でクレジットカード決済を選ぶとクレカ情報入力ページに遷移する。
クレカ番号と有効期限には指定があるので注意しつつ入力。
詳細は公式のFAQをチェック。

よくあるご質問(PGマルチペイメントサービス) | テスト環境専用カード番号/正常クレジットカード
https://faq.gmo-pg.com/service/Detail.aspx?id=1679

入力内容に誤りがなければ購入手続きは完了する。

決済画面のカスタマイズ

クレジットカード決済は認証方式によってtwigが変わる。

通常
/app/Plugin/GmoPaymentGateway/View/pg_mulpay_credit.twig
トークン方式
/app/Plugin/GmoPaymentGateway/View/pg_mulpay_token.twig

見た目的には一緒。

カスタマイズ時の注意点

地味にidとかが関わってるので、元の<script>を確認しつつ組む。「戻る」のidを付け忘れるとsubmitが死ぬというなんていうかすごい組み方してる。動作チェックは部分部分を元のコードに突っ込んで決済処理するしか手はないので、まーめんどくさい。

シェアする

  • このエントリーをはてなブックマークに追加