AWSでのpayjpのトークンが取得できない

Question

現在、オリジナルアプリをAWSとherokuにデプロイしている状態です。
何か足りない記述があれば追記いたしますので、ご指示ください。

AWSとherokuの本番環境でトークン決済ができない

ローカルでは問題なく動作しております。
ひとつ前に作成したアプリケーションに、同じようにトークン決済機能をつけておりましたが
そのアプリはherokuでは問題なく決済処理ができていました。
今回のアプリではheroku、AWS共に同じようなエラーが出ています。
前回herokuで処理できていたので、記述は問題ないと自分では思っているのですが
もしその辺りも何か不自然に感じられるコードがありましたら教えていただきたいです…。

payjpの秘密鍵と公開鍵は前回のアプリの時と同じものを同じように環境変数に設定しております。

エラー

herokuでのエラー

AWSでのエラー

本来の（ローカルでの）パラメーター

rails側のコード

# 取引のコントローラー
class TransactionsController < ApplicationController

  before_action :set_item, only:[:index, :create, :pay_item, :edit, :update]


  def index
    if buyer_signed_in?
      @transaction = DealTransaction.new
    else
      redirect_to new_buyer_registration_path
    end
  end

  def create
    @transaction = DealTransaction.new(transaction_params)
    if @transaction.valid?
      pay_item
      @transaction.save
      @buyer = current_buyer
      redirect_to buyer_path(@buyer)

    else
      render :index
    end
  end


  private

  def set_item
    @item = Item.find(params[:item_id])
  end

  def transaction_params
    params.require(:deal_transaction).permit(:postal_code, :shipping_area_id, :city, :house_number, :building_name, :phone_number).merge(item_id: @item.id,seller_id: @item.seller_id, buyer_id: current_buyer.id, token: params[:token])
  end

  def pay_item
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    Payjp::Charge.create(
      amount: @item.price,
      card: params[:token],
      currency: 'jpy'
    )
  end


end

DealTransactionはformオブジェクトを使っております

class DealTransaction

  include ActiveModel::Model
  attr_accessor :buyer_id, :seller_id, :item_id, :postal_code, :shipping_area_id, :city, :house_number, :building_name, :phone_number, :token

  VALID_POSTAL_REGIX = /\A\d{3}[-]\d{4}\z/
  VALID_PHONE_REGIX = /\A\d{,11}\z/


  with_options presence: true do
    validates :postal_code, format: { with: VALID_POSTAL_REGIX, message: "Input correctly"}
    validates :shipping_area_id
    validates :city
    validates :house_number
    validates :token
    validates :phone_number, format: { with: VALID_PHONE_REGIX, message: "can't be blank"}
  end

  def save
    deal = Deal.create(buyer_id: buyer_id,seller_id: seller_id, item_id: item_id)
    
    Transaction.create(deal_id: deal.id, postal_code: postal_code, shipping_area_id: shipping_area_id, city: city, house_number: house_number,
    building_name: building_name, phone_number: phone_number)
  end


end

javascriptの記述がこちらです

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  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("deal_transaction[number]"),
      exp_month: formData.get("deal_transaction[exp_month]"),
      exp_year: `20${formData.get("deal_transaction[exp_year]")}`,
      cvc: formData.get("deal_transaction[cvc]"),
    };

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

window.addEventListener("load", pay);

これは反映させられている環境変数が反映していないために起こっているのでしょうか？
長々と恐れ入りますが、どなたか問題箇所・直すべき記述等お分かりになる方がいらっしゃいましたら
ご教示いただけましたら幸いです。
何卒よろしくお願いいたします。

Comments

[hatsu]

> ローカルでは問題なく動作しております
とのことなので、環境変数あたりが正しく設定されているかが気になっています。
例えばAWSサーバーに入って、(問題なければ) rails consoleでENV["PAYJP_SECRET_KEY"] と打ったときに正しく値が入っているかなどわかりますでしょうか。

[miki623]

有り難うございます！
https://gyazo.com/43078d505425b7ac3a3e67aaad1b4224
このようなかたちで検索すれば出てくることは出てきます…
これは反映していると思っておいて良いのでしょうか？
rails console コマンドはエラーが出てしまいました。
原因は調べております…
ご確認のほどお願いいたします。

[hatsu]

ちなみに環境変数は.envで管理されているか、credentials.ymlで管理されているかはわかりますでしょうか？

[miki623]

お返事が遅くなり、申し訳ございません。
環境変数はenvで管理しております！

Answer 1

ステータスは200で帰ってきてるので、環境変数の設定は問題ないのかと思います。

paramsを見るとtokenの中身がhiddenの文字列になっていそうなので、javascriptが原因かなーと思います。。。

tokenを作成するところで、hiddenだけダブルクォーテーションなので、シングルにするとどうなりますかね？

うまくいかなければ、フォームを作成する記述と、valueを入れる記述を分けるとかしてみるとどうでしょう？