投稿経緯

payjpの実装記事そのものはたくさんあるのですが、hamlで書かれてるのがほとんど。
正直僕はまだslimやhamlのような短縮系での書き方がわからず手間取ったので、今回通常盤での記載で投稿しようと思いました。

実装

APIキー取得

1. Payjpにログイン

https://pay.jp/login
※アカウントがなければ↑からも作成可能。

2. ログイン後APIをクリック

クリック後が写真の画面になります。
大事な情報になるので、基本的には第三者に見せないようにしましょう。

gemの導入

1.Gemfileに記載する。

Gemfile

# 決済
gem 'payjp'

2.インストール

ターミナル

bundle install

コントローラー

1.決済情報アクションを作成

pays.controller.rb

 def index
 end

 def pay
    Payjp.api_key = 'sk_test_c6a7dfaf173ad9733cd904e9'
    Payjp::Charge.create(
      #amountは値段を記載
      amount: 3500, 
      card: params['payjp-token'],
      currency: 'jpy'
    )
  end

ActionController::InvalidAuthenticityTokenが出た場合

protect_from_forgery except: :payを一番上に記載してください。
有効ではないトークンみたいな感じで弾いてしまうみたいなので、
例外としてpayアクションを指定して通すようにします。

pays.controller.rb

 protect_from_forgery except: :pay

 def index
 end

 def pay
    Payjp.api_key = 'sk_test_c6a7dfaf173ad9733cd904e9'
    Payjp::Charge.create(
      #amountは値段を記載
      amount: 3500, 
      card: params['payjp-token'],
      currency: 'jpy'
    )
  end

View

1.Payjoが用意しているUIを使用する

data-keyの箇所は先ほどのPayjpのAPIに記載されいるものを入れる。
※今回は簡単な導入方法になりますので、セキュリティー面では直かきはよくないみたいなので、本番でやる場合は違う場所書いて参照するようにお願いします。

index.html.erb


<h1>決済画面</h1>
<form action="/pay" method="post">
  <script src="https://checkout.pay.jp/" class="payjp-button" data-key="テスト公開鍵"></script>
</form>

2.トークン

トークンを作成するために必要なものになりますので、indexの一番下に書きます。

index.html.erb

<script>
  $(document).on('turbolinks:load', function() {
      var form = $("#charge-form");
      Payjp.setPublicKey('pk_test_0383a1b8f91e8a6e3ea0e2a9');

      $("#charge-form").on("click", "#submit-button", function(e) {
        e.preventDefault();
        form.find("input[type=submit]").prop("disabled", true);
        var card = {
            number: parseInt($("#payment_card_no").val()),
            cvc: parseInt($("#payment_card_security_code").val()),
            exp_month: parseInt($("#payment_card_expire_mm").val()),
            exp_year: parseInt($("#payment_card_expire_yy").val())
        };
        Payjp.createToken(card, function(s, response) {
          if (response.error) {
            alert("error")
            form.find('button').prop('disabled', false);
          }
          else {
            $(".number").removeAttr("name");
            $(".cvc").removeAttr("name");
            $(".exp_month").removeAttr("name");
            $(".exp_year").removeAttr("name");

            var token = response.id;
            $("#charge-form").append($('<input type="hidden" name="payjp_token" class="payjp-token" />').val(token));
            $("#charge-form").get(0).submit();
          }
        });
      });
    });
</script>

ルーティング

今回はわかりやすく/payだけのURLで作成します。
変更する場合はindex.html.erbのformのaction="~"で場所を買えてください

config/routes.rb

post '/pay', to: 'pays#pay'

完成

index.html.erbにカードで支払うボタンが出てるのそれをクリック

すると入力フォームが出現しますので、記入してカードで支払うボタンをクリック

すると元のページへリダイレクトするので、次はpayjpに移動

サイドバーの売上をクリックすると
先ほどの金額で支払済みと確認できましたね。

まとめ

今回はかなり簡略的に書きましたので、これをもとに各々に合わせた形にアレンジしていっていただけたらと思いまいす。