PAY.JPのAPIを用いたクレジット決済機能を実装（導入編） #Rails6

前提として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がその処理を無効にしてしまうことがあります。
以下の2つのファイルを編集し、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")
// 省略

以上導入編備忘録