解決したいこと

クレジットカード決済の購入機能実装で、環境変数を設定するとtokenが発行されなくなってしまう。

発生している問題・エラー

 「　Token can't be blank　」と表示される

自分で試したこと

仮説1・そもそもトークンが生成されていない

トークンが生成されるまでの流れとしては、

①ブラウザで入力したカード情報を取得する→
②取得したカード情報と公開鍵をもとにPAY.JP側（API）へアクセスする→
③PAY.JP側でトークンが発行される

この中のどこかがうまくいっていないのではないか？

まずは①で、JavaScriptのファイルがきちんと読み込めているか確認。



const pay = () => {
  console.log("OK")       //⬅️検証ツールでブラウザに「OK」と表示されるか確認

//以下略

確認できたので次はカード番号が取得できているか確認。



const pay = ()=> {
  Payjp.setPublicKey("pk_test_XXXXXXXXXX");　// PAY.JPテスト公開鍵
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);
    const card = {
      number: formData.get("number"),
      cvc: formData.get("cvc"),
      exp_month: formData.get("exp_month"),
      exp_year: `20${formData.get("exp_year")}`,
    };
    console.log(card);            //⬅️card情報がコンソールで表示されるか確認

//以下略

// document.getElementById("charge-form").submit();
//⬆️⬆️⬆️コンソールの出力が消えないようにするためコメントアウト
//これをしないとブラウザに一瞬だけ表示されて確認できないので注意。気付かずに3回ぐらいやってイライラした笑
    })
  })
}

window.addEventListener("load", pay);

これも問題なくきちんと取得できていた。
ということは環境変数か？ということでターミナルで確認。


% env | grep PAYJP

確認するときちんと入っている。うーん？
一度リセットしてみるか大作戦で環境変数を一度削除して、ターミナルも⌘Qで終了して再起動。
その後、再度環境変数を再設定して実行。

すると、成功。
原因は一体なんだったんだろう？
PAY.JPの公式HPからコピペして貼り付けたので間違っていたとは思えない。
ビビってなかなかできなかったですが、削除する勇気も大切ですね。
いい勉強になりました。