Sinatra/Checkout

RubyのSinatraチェックアウトを使ったかんたんな支払いを行う実装サンプルについて説明します。ソースコードはこちらからどうぞ。

インストール

最初に今回使用するSinatraとPAY.JPのRubyライブラリをインストールしましょう:

gem install payjp sinatra

アプリケーション

まずは支払い処理を行うアプリケーション部分を実装します。 app.rb というファイルを作成し、PAY.JPの設定を書きましょう:

require 'sinatra'
require 'payjp'

set :secret_key, ENV['SECRET_KEY']
set :public_key, ENV['PUBLIC_KEY']

Payjp.api_key = settings.secret_key

configure do
  set :erb, escape_html: true
end

環境変数の SECRET_KEY PUBLIC_KEY から各自のシークレットキー、パブリックキーを読み込み、PAY.JPライブラリのAPIキーにセットしています。特にシークレットキーは支払い処理を含むさまざまな処理を行う重要なキーなので、ハードコードせずに扱うようにしてください。

次に、支払いフォーム画面を表示するメソッドを定義しましょう:

get '/' do
  erb :index
end

post '/pay' do
  amount = 1000
  customer = Payjp::Customer.create(
    :email => 'example@pay.jp',
    :card  => params['payjp-token']
  )
  Payjp::Charge.create(
      :amount => amount,
      :currency => 'jpy',
      :customer => customer.id,
      :description => 'Sinatra example charge'
  )
  erb :pay, :locals => {:amount => amount}
end

get '/' では、支払いフォーム画面となる index.html を生成しています。

post '/pay' では、トークンIDからカードを所有する顧客を作成し、作成した顧客IDを指定して1000円の支払い処理を行っています。トークンIDは後述するチェックアウトフォームから送信されるものです。

最後に amount を引数に pay.html を生成し、支払い完了画面を表示しています。

テンプレート

次は、画面を表示するテンプレート部分を実装します。まず共通レイアウトを構成するテンプレートを ./views/layout.erb に配置しましょう:

<!DOCTYPE html>
<html>
  <head>
  <title>PAY.JP Sinatra Example</title>
  </head>
<body>
  <%== yield %>
</body>
</html>

次に、支払いフォーム画面を ./views/index.erb に作成します。支払いフォームは、<script> タグを1行で、デザインされた決済フォームを生成するチェックアウト を使ったフォームです:

<form action="/pay" method="post">
  <article>
    <label>1000円のお支払い</label>
  </article>

  <script type="text/javascript" src="https://checkout.pay.jp" class="payjp-button" data-key="<%= settings.public_key %>"></script>
</form>

<%= settings.public_key %> という変数にはアプリケーション側でセットした :public_key が入ります。

最後に支払い後の完了画面を ./views/pay.erb に作成します:

<p><%= amount %>円のお支払いが完了しました。</p>

<%= amount %> にはアプリケーションの pay() で支払った金額をセットして表示しています。

これだけで支払いを行うサンプルができました。

起動する

実際に作ったアプリケーションを起動してみましょう。環境変数の PUBLIC_KEYSECRET_KEY には各自のキーをセットしてください:

PUBLIC_KEY=pk_test_0383a1b8f91e8a6e3ea0e2a9 SECRET_KEY=sk_test_c62fade9d045b54cd76d7036 ruby app.rb

http://localhost:4567 に作成した支払いフォーム画面が表示されます。下記の情報を入力し、支払い処理を試してみましょう。

  • カード番号: 4242424242424242
  • 有効期限: 1220
  • CVC: 123
  • カード名義: YUI ARAGAKI

チェックアウトリファレンス

Sinatra