Sinatra/Checkout

Ruby の Web アプリケーションフレームワークSinatraと、PAY.JP のチェックアウト機能を使った、シンプルな支払い処理の実装サンプルについて説明します。ソースコードはpayjp-example/sinatra at master · payjp/payjp-exampleにて公開されています。

インストール

まず、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 を指定して1,000円の支払い処理を行っています。トークン 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 タグでデザインされた決済フォームを生成するチェックアウト を使用しています。

<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_KEY と SECRET_KEY には、各自のキーを設定してください。

PUBLIC_KEY=YOUR_PUBLICK_KEY SECRET_KEY=YOUR_SECRET_KEY ruby app.rb

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

項目 値
カード番号 4242424242424242
有効期限 12/20
CVC 123
カード名義 PAY TARO

参考情報