環境変数をシェルに設定
開発環境における鍵情報はシェルに保存し、環境変数として呼び出す
鍵情報を環境変数に設定
% vim ~/.zshrc # Windowsの場合は代わりに「vim ~/.profile」を実行
# iを押してインサートモードに移行し、下記を追記
export PAYJP_SECRET_KEY='sk_test_*************'
export PAYJP_PUBLIC_KEY='pk_test_*************'
# 編集が終わったらescキーを押してから:wqと入力して保存して終了
記述ができたら、以下のコマンドを実行して設定を反映
% source ~/.zshrc # Windowsの場合は代わりに「source ~/.profile」を実行
環境変数が正しく設定できているか確認
rails cでコンソールを起動
以下をそれぞれ入力して確認
ENV["PAYJP_SECRET_KEY"]
ENV["PAYJP_PUBLIC_KEY"]
サーバーサイドで環境変数を読み込む
app/controllers/orders_controller.rb
#省略
def pay_item
Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
Payjp::Charge.create(
amount: order_params[:price],
card: order_params[:token],
currency:'jpy'
)
end
直接秘密鍵を指定していたところを、環境変数に置き換え
クライアントサイドで環境変数を読み込む
厳密に言えば、公開鍵についてはそのままコード上に記述していても問題ない
しかしながら、「鍵情報は外部に公開しないようにする」を癖付けるためにも、今回は公開鍵も環境変数として設定し、JavaScriptのファイルから読み込むようにする
JavaScriptから直接環境変数を読み込むことはできないため、以下の流れで参照できるようにする
Railsのコントローラーで環境変数を読み込む
Railsのコントローラーで、環境変数をJavaScriptに渡す
JavaScriptで渡された環境変数を読み込む
RailsからJavaScriptに変数を渡すために「gon」というGemを使用する
このGemは、本来は秘密情報を扱うためのものではない
なぜなら、ブラウザの開発者ツールでその内容を見ることができてしまうため
今回は「公開鍵」を扱うために使用するため採用
gonは、秘密鍵などの秘匿情報を決して扱わないよう注意
gonを追加
Gemfile 末尾に以下の記述を追加
（省略）
gem 'gon'
追加できたら、ターミナルで以下のコマンドを実行
% bundle install
ビューにgonを読み込む設定を追加
app/views/orders/index.html.erb
<%= include_gon %> ＃追加
<%= form_with model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
（省略）
複数のビューで使用する場合は全てに記述を行うかapplication.html.erbに記述する必要がある
コントローラーで公開鍵を代入
app/controllers/orders_controller.rb
class OrdersController < ApplicationController
def index
gon.public_key = ENV["PAYJP_PUBLIC_KEY"] ＃追加
@order = Order.new
end
（省略）
gon.（変数名） = （代入する値）と記述することで、JavaScriptで変数を使用できるようになる
JavaScriptで公開鍵を読み込む
const pay = () => {
const publicKey = gon.public_key ＃追加
const payjp = Payjp(publicKey) // PAY.JPテスト公開鍵 ＃書き換え
const elements = payjp.elements();
const numberElement = elements.create('cardNumber');
const expiryElement = elements.create('cardExpiry');
const cvcElement = elements.create('cardCvc');
（省略）
const publicKey = gon.public_keyという記述によって、先ほど設定したgon.public_keyを、変数publicKeyに代入
これで環境変数を使用できる
サーバーを再起動して問題なく動作するか確認
入力に不備があった場合の処理を追加
app/controllers/orders_controller.rb
def create
@order = Order.new(order_params)
if @order.valid?
pay_item
@order.save
return redirect_to root_path
else
render 'index', status: :unprocessable_entity
end
end
バリデーションに引っかかるとrenderメソッドによりindex.html.erbという流れになる
これらの処理に対して、JavaScriptのコードが正しく動作するためには、以下の2点対応が必要
gonを使用できるようにする
renderメソッドに対応したアクションを追加する
Ordersコントローラーを編集
app/controllers/orders_controller.rb
def create
@order = Order.new(order_params)
if @order.valid?
pay_item
@order.save
return redirect_to root_path
else
gon.public_key = ENV["PAYJP_PUBLIC_KEY"]
render 'index', status: :unprocessable_entity
end
end
バリデーションに引っかかった場合は、indexアクションが実行されることなくindex.html.erbがrenderされるため、別途gonの設定が必要
card.jsを編集
renderが実行された場合でもJavaScriptのコードが実行されるよう以下のように編集
app/javascript/card.js
（省略）
window.addEventListener("turbo:load", pay);
window.addEventListener("turbo:render", pay);
本番環境に環境変数を設定
Renderに環境変数を設定
RenderにサインインしてDashboardを開く
開けたら環境変数を設定したいアプリをクリックして詳細ページを開く
サイドバーにある Environment をクリックすると環境変数の設定欄が表示
Add Environment Variables をクリックして以下二つをそれぞれ入力
公開鍵(PAYJP_PUBLIC_KEY)
秘密鍵(PAYJP_SECRET_KEY)
入力し終えたら Save Changes で保存
これでRenderに環境変数を設定することができる
