투고 경과

페이jp의 실장 기사 자체는 많지만 대부분은 햄으로 썼다.
솔직히 슬림과 햄 같은 단축형 글씨를 아직 몰라서 시간이 많이 걸렸는데 이번에는 일반판 기재로 투고하려고 합니다.

이루어지다

API 키 가져오기

1. Payjp 로그인

https://pay.jp/login
※ 계정이 없으면 ↑부터 만들 수 있습니다.

2. 로그인 후 API 클릭

클릭하면 사진이 표시됩니다.
중요한 정보이기 때문에 기본적으로 제삼자가 보지 않도록 해야 한다.

영입

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

Action Controller: Invalid Authenticity Token이 나타날 때

protect_from_forgeryexcept: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 사용

데이터-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.eb form의 action=~에서 구입하세요.
config/routes.rb

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

완성

index.html.erb를 누르면 카드로 결제하는 버튼이 나왔어요.

그리고 입력 양식이 나옵니다. 작성 후 카드로 지불하는 버튼을 눌러주세요.
그리고 원래의 페이지로 이동하고 다음은payjp로 이동합니다

클릭하여 사이드바 판매
아까 금액 결제된 거 확인했죠?

총결산

이번에는 상당히 간결하게 썼으니 이를 바탕으로 각자 어울리는 형식으로 정리했으면 좋겠다.