人生なんて暇つぶし

Webエンジニアの雑記ブログ。技術の話題はDApps開発、NEMアプリ開発がメイン。

移転しました。

約3秒後に自動的にリダイレクトします。

EC-CUBEにNEM決済を導入してみた

前回の続きです。EC-CUBENEM決済できるようにしました。 maroemon58.hatenablog.com

購入フロー

注文が完了するまでのステップを説明します。決済は後払いなので注文受付はスムーズに可能です。
※ 4までEC-CUBE標準の購入フローで、NEM決済の説明は5からです。EC-CUBEに興味ない方は5まで飛ばしてください。

1.商品をカートに入れる

カート画面
カート画面
商品をカートに入れ、「購入手続きへ」ボタンをクリックします。
※デモ用にカスタマイズしているので、ログイン画面をスキップして配送先入力画面に遷移します。

2.配送先を入力

配送先入力画面
配送先入力画面
配送先を入力します。
※デモ用に初期値が勝手に入ります。

3. 支払い方法を選択

支払い方法選択画面
支払い方法選択画面
「NemPay」を選択します。

4. 注文確認

注文確認画面
注文確認画面
注文内容に問題なければ「次へ」ボタンをクリックします。

5. NEM決済情報の確認

NEM決済確認画面
NEM決済確認画面
XEM/JPYの過去24時間の加重平均を取得し、決済金額を算出します。
レート取得はZaifAPIを使用しています。ZaifAPIが安定しないので今後改善を予定しています。。。

6.注文完了

注文完了画面
注文完了画面
注文が完了すると入金情報が表示されます。注文完了メールにも同じ内容が追記されます。
このとき、EC-CUBEの受注ステータスは「入金待ち」の状態になります。

NEMで決済する

NanoWalletを起動し、注文時に表示された入金情報を元に送金します。
メッセージは注文情報を参照するデータになるので、間違えると入金が反映されないので注意が必要です。

※NanoWalletの使い方はググるといろんな方がわかりやすく紹介されてますので、そちらを参考にしてみてください。 isamist.work 手元にスマホがあればNanoWalletアプリの起動し、QRコードを読み込むと入金情報が反映されるので便利です。

入金確認

入金確認の処理はバッチ処理で定期的に確認を行っています。
指定された金額の送金が確認できれば、受注ステータスが「入金待ち」から「入金済み」に更新されます。
入金が確認できたので、あとの発送等は通常の運用フローになります。

実際に動かしてみたい

紹介したフローを実際に試してみたい人向けにデモサイトを用意しました。

NEM ✕ EC-CUBE2

実際に送金まで行って頂けるとぼくのアドレスに送金されます。(投銭です)

導入方法について

プラグイン化を進めています。出来次第GitHubにも公開する予定ですのでぜひお試しください。

【4/18 追記】プラグインを公開しました。 maroemon58.hatenablog.com

何かご指摘、ご要望があればお気軽にどうぞ。ではまた。