デプロイ後にクレジットカード機能が使えないエラー

# はじめに
本記事では、本日失敗してしまった
herokuへデプロイ後にクレジットカード機能が使えなかった状況を記述しました。

# herokuにデプロイ
今回実装したアプリケーションは、
商品を`出品`し、また`購入`できるアプリケーションとなっております。
購入時には、クレジットカードを使用するものとし、
`Payjpを導入`しています。


```
% git push heroku master
```
このコマンドで、
herokuへプッシュし、完成したアプリケーションの動作確認を実施しました。

アプリケーション自体を確認することができ、
商品を出品することもできました。

その後、購入機能を確認したところ
ブラウザ上で以下のようなエラーが発生しました。

```
Token can't be blank
```

慌ててローカルサーバーで商品を出品し、購入できるか試したところ、
全てうまくいきました。

# 結論
herokuの方で、環境設定がされておりませんでした。

```
% heroku config
```

```terminal
AWS_ACCESS_KEY_ID:        省略
AWS_SECRET_ACCESS_KEY:    省略
BASIC_AUTH_PASSWORD:      省略
BASIC_AUTH_USER:          省略
CLEARDB_DATABASE_URL:     省略
DATABASE_URL:             省略
LANG:                     en_US.UTF-8
PAYJP_PUBLIC_KEY:         省略    ←ここが抜けていた
PAYJP_SECRET_KEY:         省略　　　　　　　　←ここが抜けていた
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_LOG_TO_STDOUT:      enabled
RAILS_MASTER_KEY:         省略
RAILS_SERVE_STATIC_FILES: enabled
SECRET_KEY_BASE:          省略
```

Payjpを導入する際、`公開鍵(PUBLIC_KEY)`と`秘密鍵(SECRET_KEY)`が必要になります。

```
秘密鍵
% heroku config:set PAYJP_SECRET_KEY='sk_test_******************'

公開鍵
% heroku config:set PAYJP_PUBLIC_KEY='pk_test_******************'
```

ローカルサーバーでJavaScriptファイルでコードを記述するだけでなく、
このようにして、heroku上で設定してあげることが必要になります。

このタイミングで、
INSERTで公開鍵と秘密鍵が設定されているか、確認してみても良いかもしれません。

```
macOSがCatalina以降
% vim ~/.zshrc
```

```
macOSがMojave以前
$ vim ~/.bash_profile
```

```
これが抜けていないか確認！！
export PAYJP_SECRET_KEY='sk_test_************************'
export PAYJP_PUBLIC_KEY='pk_test_************************'

終わったら、escキー→「:wq」→enterしましょう
```


```card.js
const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  const submit = document.getElementById("button");
  submit.addEventListener("click", (e) => {
    e.preventDefault();
    
    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      number: formData.get("order_form[number]"),
      exp_month: formData.get("order_form[exp_month]"),
      exp_year: `20${formData.get("order_form[exp_year]")}`,
      cvc: formData.get("order_form[cvc]"),
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token' type="hidden">`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }

      document.getElementById("card-number").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");
      document.getElementById("card-cvc").removeAttribute("name");

      document.getElementById("charge-form").submit();
    });
  });
};

window.addEventListener("load", pay);
```

# 終わりに
次回以降のアクションプラン：`Payjp導入の再確認`

自分の中では、ローカルサーバーで設定したものは、
heroku上で反映は自動的にされると勘違いしていたことから起こったエラーになります。
heroku上にアップする際、`herokuでの設定も必要`になることがあるということですね。

herokuへデプロイする際に、エラーが起きたらなかなか焦ってしまい、
コードをグチャグチャにしてしまったり、ターミナル上で操作をミスしてしまう可能性があることを身をもって知りました。

デプロイするということは、`本番で`無事に`アプリケーションが使用できるか`というところになるので、
慎重に落ち着いて実行していきたいと思います。

明日も頑張ります！！