こんにちは。クレオフーガの万波です。
クレオフーガでは、Railsを使ったWebサービスの開発や、AWSインフラの管理をしています。
よろしくお願いいたします。
今回は、弊社の音楽ライセンス販売サービス「オーディオストック」で
利用しているクレジットカード決済サービス「WebPay」
の導入方法を簡単なRailsのサンプルアプリケーションを作成してご紹介をしていきます。
WebPayについて
WebPayはウェブペイ株式会社により2013年6月27日に正式リリースされたクレジットカード決済サービスです。
決済導入の敷居の低さ、わかりやすいRest API、HTTP通信さえできればどんな環境でも利用できるといった特徴があります。
オーディオストックではこれらの特徴をいかして、音源のライセンス販売の際に必要になるクレジットカード決済をすばやく導入することができました。
WebPayでは下記のような、わずか数行のコードを記述するだけで簡単に決済処理を行うことができます。
require "webpay" WebPay.api_key = "test_secret_YOUR_TEST_API_KEY" WebPay::Charge.create( :amount=>1000, :currency=>"jpy", :card=>"tok_ABCDEFGHIGJKLMN" )
簡単なサンプルアプリケーションの作成
（所要時間 約10分）
ここからはWebPayのクレジットカード決済導入の敷居の低さをご説明するために、
簡単なRailsのサンプルアプリケーションを作成したいと思います。
RubyとRailsのバージョンは下記のものを使用しました。
ruby-2.1.0 Rails 4.0.2
※このサンプルアプリケーションを作成する場合には、事前にRailsの環境構築とWebPayのユーザ設定ページ(要ログイン)でAPIキーを取得しておいてください。
また、この記事に記載しているサンプルアプリケーションは簡単な動作テストを目的としていますので、プロダクション環境でクレジットカード決済を実装する際にはエラー処理などを考慮して適切に行う必要があります。
Railsでサンプルアプリケーションを作成
Railsで簡単なサンプルアプリケーションを作成していきます。
$ rails new sample_app $ cd sample_app
Gemfileにgemを追加
Gemfileに下記のWebPayのgemを追加します。
このgemを使うことでRubyからWebPayのAPIを簡単に利用できます。
# Gemfile gem 'webpay'
gemをインストールします
$ bundle update $ bundle install
SamplePagesコントローラを作成
今回作成するサンプルアプリケーションでは、SamplePagesコントローラを作成し、「カードで支払うボタン」を表示するindex、決済処理を行うpurchase、決済が完了した後のpurchasedアクションを作成します。
$ rails generate controller SamplePages index purchase purchased
routes.rbを修正して、決済処理(purchase)をpostに変更します。
# config/routes.rb post "sample_pages/purchase"
APIキーの設定
ここで事前に取得しておいたWebPayのAPIキーを使用して決済処理を行うため、
config/initializersにsetting.rbというファイルを作成しAPIキーを設定しておきます。
「test_public_YOUR_TEST_API_KEY」と「test_secret_YOUR_TEST_API_KEY」はご自分の環境のAPIキーと置き換えてください。
※ 非公開鍵は外部に流出させないよう十分気をつける必要があります。
# config/initializers/setting.rb # テスト環境用公開可能鍵 WEBPAY_PUBLIC_KEY = 'test_public_YOUR_TEST_API_KEY' # テスト環境用非公開鍵 WEBPAY_SECRET_KEY = 'test_secret_YOUR_TEST_API_KEY'
フォームの作成
クレジットカード情報を入力するフォームをCheckoutHelperで作成します。
CheckoutHelperは、ブラウザ(クライアントサイド)とWebPayの間で、クレジットカードの有効性のチェックやクレジットカード情報のトークン化を行う仕組みを提供しています。
サーバサイドではこのトークンを利用することで、クレジットカード情報に一切触れることなく決済処理を完了できます。
# app/views/sample_pages/index.html.erb <%= form_tag(action: :purchase, method: :post) do %> <script src="https://checkout.webpay.jp/v1/" class="webpay-button" data-key="<%= WEBPAY_PUBLIC_KEY %>"></script> <% end %>
決済処理の実装
CheckoutHelperで取得したトークン(params['webpay-token'])を使って、purchaseアクションに決済処理を実装します。
ここでは、WebPay::Charge.createを使って1,000円の課金を作成します。
# app/controllers/sample_pages_controller.rb def purchase WebPay.api_key = WEBPAY_SECRET_KEY WebPay::Charge.create(currency: 'jpy', amount: 1000, card: params['webpay-token']) redirect_to action: :purchased end
支払い完了後のページを作成
簡単なメッセージを表示する、支払い完了後のページを作成します。
# app/views/sample_pages/purchased.html.erb 支払いが完了しました。
サンプルアプリケーションで決済処理のテストを行う
Railsのサーバを起動して決済処理のテストをしてみます。
$ rails server
http://localhost:3000/sample_pages/indexにアクセスすると
支払いページが表示されます。
ここで「カードで支払う」ボタンを押すと、
クレジットカード情報を入力するポップアップが表示されます。
ここにクレジットカード情報を入力することで決済処理ができます。
ここではWebPayで用意されているテスト用の模擬クレジットカード情報を入力しています。
① カード番号には「4242-4242-4242-4242」を入力します。
② 未来時間で有効期限を選択します。
③ カード名義には適当な名前を入力します。
④ セキュリティコードには3桁適当な数値を入力します。
この情報を入力した後「カードで支払う」ボタンを押すとクレジットカード決済のテストができます。
ここで行った決済の情報は、WebPayのダッシュボード(要ログイン)にアクセスすることで確認できます。
まとめ
WebPayを利用したRailsのサンプルアプリケーションを作成してみましたが、
簡単にクレジットカード決済機能をRailsアプリケーションに導入することができたと思います。
参考資料
今回のサンプルアプリケーションを作成する上で参考にさせて頂いた参考資料を記載いたします。
「ウェブ決済入門: クレジットカード決済導入の勘所 BPStudy #74」では記事の作成で大変参考になりました。
また、webpay-sinatra-sampleはサンプルアプリケーションを作成する上で大変参考にさせて頂きました。ありがとうございました。
ウェブ決済入門: クレジットカード決済導入の勘所 BPStudy #74
WEB+DB PRESS Vol.76
WebPay APIドキュメント
webpay-ruby
webpay-sinatra-sample
WebPay Advent Calendar 2013