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を作成し、そこに鍵を記述するほうが安全だと思われるので、そのようにしました。
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 を編集
= 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をあててあげるとうまくいきました。こんな感じです。
#payjp_checkout_box input[type=button]{
background-color: white;
・・・
}
また、ボタンも「クレジットで支払う」から¥1000に変更したい場合は"data-text" オプションを使って変更できます。こんな感じです。
= 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実装の工程になります。
今後もご指導ご鞭撻のほど、よろしくお願いいたします。