Ruby
Rails
webpay

WebPayを使ってRailsアプリに決済機能組み込み

More than 3 years have passed since last update.

Railsのアプリに決済機能を組み込もう、ということでWebPayを少し触ってみた。

(そういえば先日のRebuildに、中の人が出演されてましたね)

ドキュメントの説明がしっかり書いてあるし、APIはすごく扱いやすい印象。


前準備

テスト環境(決済が実際には発生しない)をすぐに利用できる。

WebPayにアカウント登録すると、「テスト環境用公開可能鍵」「テスト環境用非公開鍵」の2つのAPIキーが発行される。

これらを環境変数にでも入れておく。

ENV['webpay_public_key'], ENV['webpay_secret_key']とする)

以下、実装。

※内容は2014年11月時点のものです


実装

ドキュメントをざっと読んで簡単なものを書いた。

実際にプロダクトに組み込むときは、例外処理など含めもっとちゃんと書かないといけないだろう。

まずview側。CheckoutHelperというのを使うと簡単。

すごく便利で、クライアントサイドでのカード情報のトークン化やバリデートなどを行ってくれる。

決済処理のactionを実行するformタグを書いて、その中でいくつかのdata-属性を埋め込んだjsを呼ぶだけ。


hoge.html.slim

div

= form_tag payment_purchase_path
= javascript_include_tag "https://checkout.webpay.jp/v2/", \
class: 'webpay-button', :'data-text' => 'アレを購入', \
:'data-submit-text' => '¥10,000をカードで支払う', :'data-key' => "#{ENV['webpay_public_key']}",\
:'data-lang' => 'ja'

つぎに購入処理を行うcontroller。


app/controllers/payment_controller.rb

require 'webpay'

class PaymentController < ApplicationController
def purchase
webpay = WebPay.new(ENV['webpay_secret_key'])

# WebPay上での顧客の情報を作成
customer = webpay.customer.create(card: params['webpay-token'])

# 顧客情報を使って支払い
webpay.charge.create(
amount: 10_000,
currency: 'jpy',
customer: customer.id
)
rescue WebPay::ErrorResponse::CardError => e
# エラーハンドリング。発生する例外の種類がいくつか用意されているので、内容に応じて処理を書く
end
end


実際の画面は以下の様な感じ。ボタンができて、

スクリーンショット 2014-11-14 3.10.13.png

クリックするとカード情報入力のフォームが出る。

スクリーンショット 2014-11-14 3.10.40.png

で、カードの情報を入力すれば決済完了。

テスト用に利用できるカード情報が提供されていたりする。

先述したとおりCheckoutHelperがカードの情報をトークン化しており、サーバサイドでそのトークンをparams['webpay-token']として扱っている。サーバ側にカードの生情報は送信されない。

トークン決済についてのくわしい説明はドキュメント参照。

https://webpay.jp/docs/payments_with_token

上記のコードだと、購入する毎にWebPay上の顧客情報を新規作成するようになっているが、顧客の情報(とカード情報)を2回目以降の購入で再利用することも可能。

例えばこちらのアプリ側のusersテーブルのcustomer_idカラムに、コード中のcustomerのID(customer.idで取得可能な一意な文字列)を保存しておく。これを利用することで、以下のように、登録済のWebPay顧客情報を取得することができる。


app/controllers/payment_controller.rb

customer = webpay.customer.retrieve(current_user.customer_id)



ダッシュボード

WebPayにログインするとダッシュボードが用意されている。課金の履歴や顧客のリスト、イベントのログなどが見られる。

スクリーンショット 2014-11-14 3.46.08.png


おわり

簡単に決済機能が実装できちゃってマジですごいと思った。ステキですね。

定期課金(例:月額)機能やwebhookの送信機能なども用意されているので、もう少しいじってみます。

(正式に利用するには、商用環境の申請が必要)