秘密鍵と公開鍵を環境変数に設定したら環境変数が設定されていませんというエラーが出てしまった時

card.js

const pay = () => {
  const payjp = Payjp(process.env.PAYJP_PUBLIC_KEY);　//この部分の記述
  const elements = payjp.elements();
  const numberElement = elements.create('cardNumber');
  const expiryElement = elements.create('cardExpiry');
  const cvcElement = elements.create('cardCvc');
  
  //省略

window.addEventListener("load", pay);

上記のコードのように、Payjpにカード情報を送ってトークンを生成するようにJAVAの記述をしたら今まで公開鍵を直接コードに組み込んでいた時はうまくいっていた決済機能が、”環境変数が設定されていません”というエラーが出るようになってしまった。

結論

ブラウザに古いJavaScriptのコード情報が保持されていたため、正しく設定したはずのコードが読み込まれていないだけだった。 javascriptの該当のファイルに改行や

console.log("test")
等を入れてファイルを編集すると、新しいファイルを読み込んでくれる。

環境変数への設定方法

ターミナルにて
vim ~/.zshrc　
iを押してインサートモードに移行し、下記を追記する。既存の記述は消去しない。

export PAYJP_SECRET_KEY='sk_test_*************'
export PAYJP_PUBLIC_KEY='pk_test_*************'

編集が終わったらescキーを押してから:wqと入力して保存して終了

ターミナルにて source ~/.zshrc を実行し、.zshrcを読み込み直して、追加した環境変数を使えるようにする。

環境変数が正しく設定できているかを rails c　でコンソールを起動して確認する。


ENV["PAYJP_SECRET_KEY"]
=>"sk_test_*********************"
ENV["PAYJP_PUBLIC_KEY"]
=>"pk_test_*********************"

設定した通り返り値が返ってきていたらOK

環境変数を設定したターミナルにて、 rails s でサーバーを起動して確認する。

サーバーサイド（コントローラー）から環境変数を呼び出せるようにコードを編集する。

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ファイルの公開鍵を環境変数から読み込むように設定する。
webpackerを用いることで呼び出せる。ターミナルにて下記のコードを実行


% touch config/initializers/webpacker.rb

VScodeにて下記のファイルの記述を変更

config/initializers/webpacker.rb

Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]

app/javascript/card.js

const pay = () => {
const payjp = Payjp(process.env.PAYJP_PUBLIC_KEY);
  // 省略

これで、環境変数を呼び出せるようになった。サーバーを再起動して動作確認を実行する。

今回はこの作業の最終段階の確認でエラーが起きて2日ほど悩んだ。
メンターに相談して、 console.log('test') を追記しただけでエラーが解決したので目から鱗でした。