決済API Komojuを使ってSpreeでコンビニ決済を楽に使える方法

この記事は Payment Advent Calendar 2015 の 18 日目です。

日本で決済をECプラットフォームで実装しようとすると、独特な日本の国内決済の特徴が壁になってしまい、なかなか難しいことになるケースが多くあります。

今回の記事ではその代表的な決済方法としてコンビニ決済を取り上げて、SpreeというRuby on Rails用のECプラットフォームと以前に紹介された決済API Komojuのコンビニ決済を合わせて、この問題を簡単に解決する方法を紹介したいと思います。

Ruby on Railsのアップリケーションを製作

まず最新のRailsをインストールして（gem install rails)、新しいアップリケーションを作ります。

rails _4.2.5_ new mystore

Javascriptのruntimeがなければ、sudo apt-get install nodejs (Linux)やbrew install nodejs(Mac)を実行する必要もあるかもしれません。

SpreeとSpree Komojuのセットアップ

Gemfile

アップリケーションができましたら、次にSpreeをGemfileに追加します。Komojuの支払方法（日本国内クレジットカード、コンビニ、銀行振込、プリペイドカードなど）を使うためにspree_komojuというgemも追加します。Deviseも必要になるのでspree_auth_deviseの最新版も、そして多言語（日本語）対応のためにspree_i18nも追加します。

gem 'spree', '~> 3.0.4'
gem 'spree_komoju', '~> 0.0.6'
gem 'spree_auth_devise', github: 'spree/spree_auth_devise', branch: "3-0-stable"
gem 'spree_i18n', github: 'spree-contrib/spree_i18n', branch: '3-0-stable'

ファイルを保存してbundle installを実行すればgemがインストールされます。

Spreeのインストール

次はspreeのassetsやmigrationsなどをインストールします。

bundle exec rails g spree:install

途中で以下のメッセージが出ますが、デフォルトのユーザ名とパスワード（spree@example.com、spree123）にします。

Create the admin user (press enter for defaults).
Email [spree@example.com]:
Password [spree123]:

問題がなければ、最後に以下のメッセージが返してきます。

**************************************************
We added the following line to your application's config/routes.rb file:

    mount Spree::Core::Engine, :at => '/'
**************************************************
Spree has been installed successfully. You're all ready to go!

Spree Komojuのインストール

これでインストールが終わりましたが、日本国内の支払方法を使うためspree_komojuをインストールする必要もあります。このコマンドでSpree用の支払方法に必要なファイル（画像、dbのmigrationなど）を追加します。

bundle exec rails g spree_komoju:install

途中で「Would you like to run the migrations now?」という質問が出ますが、「Y」を選ぶと必要なmigrationsも実行されます。以下のようにコンビニのロゴファイルもapp/assets/imagesに追加されます。

Running via Spring preloader in process 14175
      append  vendor/assets/javascripts/spree/frontend/all.js
      append  vendor/assets/javascripts/spree/backend/all.js
      insert  vendor/assets/stylesheets/spree/frontend/all.css
      insert  vendor/assets/stylesheets/spree/backend/all.css
         run  bundle exec rake railties:install:migrations FROM=spree_komoju from "."
       exist  app/assets/images
      create  app/assets/images/circle-k.png
      create  app/assets/images/daily-yamazaki.png
      create  app/assets/images/family-mart.png
      create  app/assets/images/lawson.png
      create  app/assets/images/ministop.png
      create  app/assets/images/pay-easy.png
      create  app/assets/images/seven-eleven.png
      create  app/assets/images/sunkus.png
      create  app/assets/images/webmoney.png
Would you like to run the migrations now? [Y/n] Y
         run  bundle exec rake db:migrate from "."

他のgemのインストール

最後にSpree用のauthと多言語化のgemのインストールコマンドを実行します。

‘spree_auth_devise’

bundle exec rails g spree:auth:install

‘spree_i18n’

まずconfig/application.rbのdefault_localeというところに以下のように変更することで日本語をデフォルト言語にすることができます。

# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
config.i18n.default_locale = :ja

これと合わせてspree_i18nの必要なmigrationsなども追加します。

bundle exec rails g spree_i18n:install

アプリケーション完成

それで「bundle exec rails s」を実行して「 http://localhost:3000/ 」をブラウザーでアクセスしたら以下のようなデフォルトストアの確認ができます。

（商品の名前などはデフォルトで英語で表示されますが、インターフェスが日本語になっています。）

Spreeストアの基本設定

次にSpreeの必要な設定をSpreeの管理画面で行います。デフォルトのインストールですとアメリカ・ドルやユーロ、出荷方法も欧米の設定になってしまうのでそのままでは使えません。

一般設定

まずは「 http://localhost:3000/admin 」をアクセスして、ユーザーネームとパスワードの項目に「spree@example.com」と「spree123」を入力したら管理画面が表示されます。

左側の一番下のボタンは一般設定のメニューです。そこから「一般設定」をクリックして右側の通貨の設定のところに以下のように「USD」から「日本円」に変更します。

そうすることで通貨が日本円になりますが、デフォルトストアの商品は円の値段がないため、トップページに表示されないです。左側の上から2番目のメニューから「Products」をクリックして、一覧に表示される商品から一つ選んで、商品の「定価」の項目に日本円の値段を入れて「更新」をクリックすることで日本円の値段を付けることができます。

http://localhost:3000 にアクセスして見ると日本円の商品一つが表示されています。（他の商品は日本円の値段がないため表示されないです。）

ゾーンと配送方法の設定

次に設定メニューから「ゾーン」にクリックして、「新規ゾーン」というところをクリックして、以下のように「国による区別」と「デフォルト」のところをクリックして、国から日本を選んで、名称を入力すれば日本用のゾーンが作成されます。

次に一般設定から配送方法のページに新規配送方法をクリックして、ゾーンのところに上に作ったゾーンを選んで、「配送カテゴリー」をデフォルトにして、名称を付けて「作成」ボタンをクリックしたら配送方法が作成できます。

Komoju決済の設定

次に支払方法を追加するためにKomojuのAPIキーが必要になるので、「 https://sandbox.komoju.com 」を開いてログインして、メニューから「クライアントアカウント」をクリックすると以下のページが表示されます。

ここのSecretキーをSpreeの支払方法のページに入れる必要がありますので、次にSpreeの管理画面を開いて設定の「支払方法」で「支払い方法を追加」をクリックします。

名称も入れて一回「作成」ボタンをクリックしたら支払方法が作成できます。ただまだAPIキーが設定されていません。編集ページのAPI_KEYという項目にKomojuのクライアントアカウントページにあったSecretキーをコピペして「更新」ボタンをクリックするとコンビニ決済の設定が完了です。

コンビニ決済の注文

次は http://localhost:3000/ にアクセスして商品をクックすると以下のページが表示されます。

そこから「カートに追加」をクリックしてレジに進んで、住所などを入力して、配送方法を選ぶとようやく決済方法のページに辿り着きます。

ここに表示されるコンビニ決済の名称は上に入力したものと一緒です。そこをクリックしてコンビニを選んで保存するとKomojuのsandbox APIにリクエストします。成功すると完了ページにコンビニの情報が表示されます。

Komojuの管理画面に戻って「取引」の一覧ページに開いてみるとコンビニ決済があります。オーダーIDが「R328900994-PRXKXK6Q」になっていますが、これはSpree側で設定されたもので、「R328900994」というのは注文番号、「PRXKXK6Q」というのは決済番号です。

注文の完了ページに「ローソンの支払方法」というリンクがありますが、このリンクをクリックすると決済の説明ページで必要な「お客様番号」と「確認番号」が得られます。（コンビニによって番号の名前が変わったりしますのでご注意ください。）

コンビニの入金

これで注文と決済ができましたが、実際にお客様がコンビニで支払うとKomojuからのWebhookを受ける必要があります。前回の記事ではWebhookの作り方についての説明がありましたのでそれを参考にして、配信先のURLを「https://www.mystore.com/komoju/callback」にします。(「www.mystore.com」がSpreeで動いているストアのベースURLです。）

シークレットトークンを設定する必要もあります。これを例えば「mystoretoken」に設定します。次にSpreeのapplicationに以下のファイルを追加することでKomojuのWebhookを受けることができます。

config/initializers/spree_komoju.rb

require "spree_komoju"

SpreeKomoju.komoju_webhook_secret_token = "mystoretoken"

これで入金の設定は完成ですが、実際にSpreeとKomojuの連動を確認するためにサーバーが必要です（ローカルではパブリックなURLがないため、KomojuのWebhookを受けられないです。）

まとめ

まとめてみるとコンビニ決済が使えるSpreeストアをゼロから作るのに以下のステップが必要になります。

• SpreeとSpree用のgemsのインストール
• Spree管理画面からの基本設定（ゾーン、配送など）を日本に妥当な値にする。
• Komojuの決済方法をSpreeに追加する（APIキー）
• 「…/komoju/callback」というWebhookをKomojuの管理画面で追加して、そのシークレットトークンをSpreeのinitializerに設定するように追加する

今回の記事でコンビニ決済を中心に説明しましたが、ストアができましたらSpree Komojuを使うことで他の支払方法(WebMoney、PayEasy、銀行振込など）も簡単に追加できます。支払方法の設定ページに追加することだけでカートに表示されます。

ぜひSpree Komojuでコンビニ決済を試してみてください！