SpreeでWebPayを利用するためのspree_webpayをリリースしました

Spree CommerceでWebPayを決済ゲートウェイとして利用するためのSpree Extension、spree_webpayをリリースしました。

今回のリリースはプレリリースであり、今後利用した方からのフィードバックをいただき、正式なリリースを行おうと考えています。 この記事を読んで興味を抱かれた方は、ぜひいろいろ試して、GitHubのリポジトリにフィードバックをお寄せください。

概要

SpreeはRuby on RailsでECシステムを構築するためのライブラリです。 ECシステムへの公式な対応はEC-CUBEについで2つ目となります。

Spreeは拡張の開発が容易な設計になっており、ActiveMerchantに収録されているWebPayのゲートウェイ実装を経由してWebPayを利用することもできました。 しかし、この方法は動作させるだけでもかなりのコーディングが必要であり、 サーバに一度カード情報を送信する設計を回避するにはさらに工数がかかってしまう状況でした。 この方法がWebPayとしてお勧めできるものではなかったため、今回の決済ゲートウェイExtensionの開発に至りました。

Spree WebPayでは、利用ガイドラインが満たしやすい設計、実装を心掛けました。 結果として、Spreeの決済ゲートウェイとしてはいくつか特異な箇所もありますが、そのぶん導入、利用法がわかりやすくなりました。 具体的には、カード情報をSpreeが動作しているサーバに送信しない、ECサイトの運営者側が直接カード情報を扱わないなどの制約を設けて開発しています。

SpreeとSpree WebPayのみを運用する場合、実行環境のバージョンを新しいものに保ち、SSL通信を利用するように設定すれば利用ガイドラインの要件を満たすことができます。 次のセクションで、このようなECシステムのセットアップ方法を説明します。

セットアップ方法

Spreeとspree_webpayを新規にセットアップしていく手順を紹介します。

この内容は現時点でのものとなります。 今後SpreeやWebPay拡張のアップデートに伴い、手順が変更になることが予想されますので、その時点での最新のドキュメントをあわせてご覧ください。

まずはSpree Commerce Getting Started Guideの手順に従い、Spreeのインストールを行います。 Rails、bundler、imagemagickなどのライブラリのインストールは必要に応じて済ませてあるものとします。

Spreeをセットアップするコマンドを利用するため、最新のspree_cmd gemをインストールします。

1
$ gem install spree_cmd

最新のRailsを用いて新しいプロジェクトを作成します。

1
$ rails _4.1.8_ new mystore

作成したプロジェクトのディレクトリの中で、spree installコマンドを実行します。

1
2
$ cd mystore
$ spree install

Spree本体のセットアップは以上です。 次にSpree WebPayのインストールを行います。

Gemfileに次のようにspree_webpaygemを追加します。 追加したらbundle installしてください。

1
gem 'spree_webpay'

spree_webpayのセットアップ処理をRails generator経由で行います。

1
$ bundle exec rails g spree_webpay:install

spree_webpayはカード番号入力時に独自のJavaScriptファイルを利用するので、config/initializers/assets.rbを編集し、次の内容を書き足してください。

1
Rails.application.config.assets.precompile += %w( store/gateway/webpay.js )

以上でSpree WebPayもインストールできました。 rails serverでサーバを起動しましょう。

続いて、テストサイトでWebPayを利用する設定をします。 WebPayは日本円での決済にのみ対応しているため、テスト用のデータをいくつか変更する必要があります。

adminアカウントでログインし、/adminを開いて設定画面に移動します。 spree installで指定しなかった場合、ユーザ名spree@example.com、パスワードspree123でログインできます。

上部メニューCONFIGURATIONをクリックすると、General Settingsが開きます。 図中の赤マルのサイト全体の通貨の設定を"Japanese Yen (JPY)“に変更し、保存してください。

次に右のメニューから"ZONES"を選択し、日本地域を作成します。

つづいて、Shipping Methodを追加します。名前はもちろん適当です。

最後にPayment MethodにWebPayを追加します。 テストデータでは"Spree::Gateway::Bogus"が用意されていますが、間違いの元になることもあるのであらかじめ削除することをお勧めします。

Spreeの仕様上、まずPayment Methodを登録し、つぎにAPI鍵の設定を行う必要があります。 まずは、New Payment MethodでProviderにSpree::PaymentMethod::WebPayを指定してCreateしてください。 ここにSpree::PaymentMethod::WebPayが出てこない場合はSpree WebPayのインストールに失敗している可能性が高いです。 インストール手順を踏んだかどうか再度確認してください。

Createすると自動的にEdit画面に移動し、Secret Key(非公開鍵)とPublishable Key(公開可能鍵)の設定ができるようになります。 ユーザ設定に記載の情報を設定してください。

ほかの設定項目はSpreeが提供しているものなので、Spreeのドキュメントをご覧ください。 Auto Captureは購入処理時に仮売上にするか、実売上にするかの選択です。 Yes(true)だと実売上になります。物販において在庫を確認後商品を発送するフローのためユーザの購入時点では仮売上に設定するためNo(false)とする必要があるでしょう。

最後に商品の価格を再設定します。 これは最初にサイトの通貨を日本円にしたためUSD表記のテストデータの値が無効になってしまうためです。 すべての商品について行う必要はないので、どれかひとつを編集し、Master Price、Cost PriceとCost Currencyを修正します。

ここまで出来たら、実際に商品を注文してみます。 トップ画面に戻り、商品購入を開始します。

住所は日本のものを適当に入力してください。 無事Delivery画面に移動し、Shipping Methodがさきほど作成したものになっていればOKです。

進んでいくと購入画面になります。 支払方法はもちろんWebPayを選んでください。 テスト用のカード情報を入力して進みます。

ここで、Developer Tool等でネットワーク利用を確認すると、WebPayのクライアントサイドトークンを利用していることがわかります。 Spreeの動作しているRailsサーバにはクレジットカード情報は送信されないのでセキュリティ上の懸念を大きく減らせます。

無事カードが受理されると確認画面が表示されます。 問題がなかったら注文しましょう。

今回はログインした状態で注文したので、次回からは住所、カード情報ともに保存されたものを利用できます。 このカード情報も、WebPayにのみ保存されていて、Spreeの内部には保持していないので、ご安心ください。

最後に

Spreeを触ってみて、いかがでしたか。

いろんなインタフェースやExtensionの開発を通じては、非常に緻密に設計されている、洗練されたプラットフォームだという印象を受けました。 ECシステムへのプラグイン提供のための調査として、さまざまなECシステムに触れてみましたが、そのなかでSpreeはかなり好印象です。 もちろんRuby、Railsに慣れているというバイアスはありますし、実際に導入するとなると言語の壁が高いことが予想されますが、エンジニアが楽しめるシステムだと思います。

Extensionもワンコマンドで雛形を作成し、通常のRailsアプリケーションのように作っていけるので、興味を持たれた方はぜひこちらも取り組んでみてください。

ぜひSpree WebPayを使い倒して、どんどんフィードバックをお寄せください。お待ちしています。

また、spree_webpayの公開にあたって最初にレビューをして頂けた、業務上でもSpreeを利用したサービスを開発されているkei-sさんにこの場でお礼申し上げます。ありがとうございました。