PAY.JP의 API를 이용한 크레디트 결제 기능을 구현(도입편)

전제로 2018년 6월부터는 API가 제공하는 안전한 처리를 이용하여 클라이언트 측에서 카드 정보를 결제 서비스 측으로 보내 토큰화하고, 그 토큰 정보를 서버 측에 전송하여 결제 처리를 한다. 의무가 있습니다.
즉, 애플리케이션의 서버측에서 신용카드 정보를 보관하지 않도록 해야 합니다(※).

※ 경제산업성. 개정 할부 판매법에 대해서 (참조 2020/9/18)
↓크레디트 결제의 흐름입니다.

토큰

보안을 담보하기 위해서 사용되는, 한 번만 사용 가능한 패스워드입니다. 토큰은 신용카드 정보를 암호화한 것입니다. 동일한 카드 정보로 여러 번 결제하더라도 매번 다른 토큰이 발급됩니다.

1. 클라이언트측에서 PAY.JP의 API가 제공하는 안전한 처리를 이용하여 신용카드 정보를 토큰화합니다.
2. 해당 토큰을 서버측으로 전송하고 신용카드 결제가 이루어집니다.

※이 토큰은 한 번만 유효한 것이므로, 같은 토큰으로 다른 결제를 실시할 수 없습니다. 그러므로, 만일 누설해도 문제 없습니다. 또한 PAY.JP 시스템 이외에는 토큰에서 신용카드 정보를 해독할 수 없습니다! !

Gem 도입

Gemfile

gem 'payjp'

설명 후 bundle install을 실행하고 도입.

① 뷰 파일에 신용카드 정보 입력란 추가

index.html.erb

 <%= form_with  model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
  <%= render 'layouts/error_messages', model: @order %>
  <div class='form-wrap'>
    <%= f.label :price, "金額" %>
    <%= f.text_field :price, class:"price", placeholder:"例)2000" %>
  </div>
  <div class='form-wrap'>
    <%= f.label :number,  "カード番号" %>
    <%= f.text_field :number, class:"number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
  </div>
  <div class='form-wrap'>
    <%= f.label :cvc ,"ＣＶＣ" %>
    <%= f.text_field :cvc, class:"cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4" %>
  </div>
  <div class='form-wrap'>
    <p>有効期限</p>
    <div class='input-expiration-date-wrap'>
      <%= f.text_field :exp_month, class:"exp_month", placeholder:"例)3" %>
      <p>月</p>
      <%= f.text_field :exp_year, class:"exp_year", placeholder:"例)24" %>
      <p>年</p>
    </div>
  </div>
  <%= f.submit "購入" ,class:"button" %>
<% end %>

②JavaScript의 처리를 무효로 하는 기능을 제거한다

수동으로 JavaScript를 작성하여 양식 제출 처리 등을 구현하는 경우이 turbolinks가 처리를 무효화 할 수 있습니다.
다음 두 파일을 편집하여 turbolinks를 사용하지 마십시오.

application.html.erb

<%# 省略 %>
    <%= stylesheet_link_tag 'application', media: 'all'  %>
    <%= javascript_pack_tag 'application' %>
<%# 省略 %>

app/javascript/packs/application.js

// 省略
require("@rails/ujs").start()
// require("turbolinks").start() // コメントアウトする
require("@rails/activestorage").start()
require("channels")
// 省略

③payjp.js 로드

브라우저에서 애플리케이션을 열면 payjp.js가 로드됩니다.

app/views/layouts/application.html.erb

<%# 省略 %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
<%# 省略 %>

④card.js를 작성

app/javascript/card.js 만들기
application.js에 card.js를 로드하기 위한 설명을 해보자. 다음과 같이 편집

app/javascript/packs/application.js

// 省略
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../card")
// 省略

이상 도입편비망록