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

10466 ワード
デプロイ Heroku 初心者 pay.jp Heroku テキストリンク

はじめに

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

herokuにデプロイ

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

% git push heroku master

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

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

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

Token can't be blank

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

結論

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

% heroku config

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

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

明日も頑張ります！！