クレジットカード決済導入

序論

プログラミングスクールの最終課題で
フリーマケットアプリを作成しています。

そして、クレジットカード支払い機能の導入を今回任され
実装が完了したので、復習と備忘録をかねてここに残そうと思います。

長くなるので何部かに分けて投稿する予定です。
今回はとりあえず実装前の準備までにします。

PAY.JP の API を取得

1. Pay.jp のアカウント作成

PAY.JP - 決済手数料2.59% クレジットカード決済代行サービス
↑こちらアカウントを作成してください。

2. 赤線の部分のところをクリック

PAY.JP 最初の画面

3. API を確認
テスト用の API があることを確認してください。
後ほど使います。
テスト用の下に本番用がありますが、使いません。

PAY.JP テスト用秘密鍵と公開鍵

gem "payjp" を導入

Gemfile に以下のコードを記載

gem 'payjp'

その後、ターミナルで bundle install を行う。

環境変数を使って API キーを導入

いろいろやり方はあると思いますが、
私は credentials.yml.enc に入力しました。
credentials.yml.enc は特殊なもので、VScode などから直接入力できないそうです。

そのため、 vim を用いて編集します。
以下のコードを打ち込んでください。

EDITOR="vi" bin/rails credentials:edit

すると vim が開かれるので、 " i " を押して挿入モードにし、

payjp:
 PAYJP_SECRET_KEY: sk_test_ ご自身の秘密鍵

を入力します。

私の場合ならば

payjp:
 PAYJP_SECRET_KEY: sk_test_f6ff52ef496c9dbfe5101cca

となります。（テスト用の秘密鍵なので載せていますが、秘密鍵は本当に秘密ですので公開してはいけません！！）
また、インデントも重要になるそうなのでご注意ください。

躓いたところ
credentials.yml.enc は config/master.key にあるマスターキーを使って暗号化しています。
この master.key は rails new で新しくアプリケーションを立ち上げた時に生成されます。
また .gitignore により github にプッシュされないように設定されています（当然と言えば当然）。

そのため、 git clone によってアプリケーションをクローンした方は rails new をした方から master.key を教えて貰わなければなりません。
master.key がないと vim が開けず泣きそうになりますのでご注意ください！

application.html.haml にスクリプトを記載

 %script{src: "https://js.pay.jp/", type: "text/javascript"}

上記を application.html.haml に記載する。（haml を導入しているためこのような書き方になっています）

私の場合このように追記しています

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title FleamarketSample73a
    %script{src: "https://js.pay.jp/", type: "text/javascript"}
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body

以上で準備段階終了です。

次から実装を行っていきます。

次はこちら　
クレジットカード決済導入 2 - 薬剤師のプログラミング学習

参考：
https://qiita.com/Shunsuke_i_21/items/19c8326282510ae30eab