Ruby
Rails
pay.jp

railsでクレジット決済機能をpay.jpで実装する

More than 1 year has passed since last update.

pay.jpを実装する流れ

rails初心者ですが、pay.jpのAPIを実装してみました。
以下が簡単な流れになります。今回はテスト用の機能を実装です。色々試行錯誤があったので、もしかしたら工程にモレがあるかもしれません。その際はご指摘いただければと思います。

  • pay.jpにて新規作成、テスト秘密鍵とテスト公開鍵をフライングゲット(普通にゲットしてください)
  • gem payjp をinstall
  • config/initializer下に鍵を記述
  • ルーティング、コントローラ、ビューを編集

viewに「カードで支払う」ボタンが出現するので、ちゃんと作動するか確認して終了です。
大まかには、これだけです。

pay.jpでテストキーを取得する

https://pay.jp/
上記URLより新規登録後、設定→テスト公開鍵、テスト秘密鍵 を取得してください

 インストールする

gem fileにて、gem 'payjp'→bundle install

config/initializer以下に鍵を記述

viewに直接キーを記述する方法もあるのですが、config/initializer/
以下にsetting.rbを作成し、そこに鍵を記述するほうが安全だと思われるので、そのようにしました。

setting.rb
PAYJP_PUBLIC_KEY = 'pk_test_xxxxxxxxxx'
PAYJP_SECRET_KEY = 'sk_test_xxxxxxxxxx'

と記述すると、viewにPAYJP_PUBLIC_KEYという変数がviewで使用できるようになります。

ルーティングを編集

resourseでルーティングを記述している場合は、クレジット決済機能を実装したいルーティングにネストさせて記述します。
今回は決済機能をpurchaseアクションと名付け記述しましたので、こんな感じなります。

resources :products do only: [:index, :new, :update, :create] do
  collection do
    post 'purchase'
  end
end

purchaseアクションはresource以外なので、collection doを使って記述します。

コントローラを編集

(例)

def purchase
  Payjp.api_key = PAYJP_SECRET_KEY
  Payjp::Charge.create(currency: 'jpy', amount: 1000, card: params['payjp-token'])
  redirect_to root_path, notice: "支払いが完了しました"
end

コントローラに通貨の設定や、金額などの設定を記述します。
https://pay.jp/docs/api/#支払いを作成
ここからその他にいろいろな設定ができることを確認してみてください。
リダイレクト先や、フラッシュメッセージの設定は各自お好みでどうぞ。

view を編集

product.haml
= form_tag(action: :purchase, method: :post) do
          %script.payjp-button{"data-key" => "#{PAYJP_PUBLIC_KEY}", :src => "https://checkout.pay.jp", :type => "text/javascript"}

クレジット決済ボタンを設置したいところに、form tagで囲ったscript以下を記述します。

この記述で「クレジットで支払う」というデフォルト状態のボタンが出現するはずです。
このままでもいいのですが、自分のページに合うようにcssを当てたいときは、idを検証し、そのidを上書きするようにcssをあててあげるとうまくいきました。こんな感じです。

product.scss
#payjp_checkout_box input[type=button]{
background-color: white;
・・・
}

また、ボタンも「クレジットで支払う」から¥1000に変更したい場合は"data-text" オプションを使って変更できます。こんな感じです。

product.haml
= form_tag(action: :purchase, method: :post) do
          %script.payjp-button{"data-key" => "#{PAYJP_PUBLIC_KEY}", :src => "https://checkout.pay.jp", :type => "text/javascript","data-text" => "¥1000"}

その他のオプションはこちらが参考になります。
https://pay.jp/docs/checkout

以上の設定で、ボタンを押すとパッとクレジットカード番号を記入する画面がポップアップし、入力すると、pay.jpのダッシュボードで売上が記録されていくのが確認できると思います。
https://pay.jp/d/

ちなみにカード番号はランダムではなく、テストカード番号を打ち込まないと読み込んでくれません。
https://pay.jp/docs/testcard

以上が、pay.jpのAPI実装の工程になります。

今後もご指導ご鞭撻のほど、よろしくお願いいたします。