【Rails】PAYJPのクレジット決済で、Invalid expiration yearが出てしまう

Question

前提・実現したいこと

最終的に実現したいのは、クレジットカード登録と同時にユーザー情報を紐付けることです。

#発生している問題・エラーメッセージ
入力フォームにテストカードの情報を入れて送信をすると、以下のエラーメッセージが返ってきます。
使用したテストカード：番号「4242424242424242(16桁)」、cvc「123」、月「3」、年「33」
エラーメッセージ確認場所：検証ツールのResponseより

"error": {
    "code": "invalid_expiry_year",
    "message": "Invalid expiration year",
    "param": "card[exp_year]",
    "status": 402,
    "type": "card_error"
  }

#該当のソースコード
カード登録画面のビュー

<%= form_with url: cards_path, id: 'charge-form', class: 'card-form', local: true do |f| %>

<div class="Cardpage">
  <h1>カード登録</h1><br>
</div>
<div class="form-wrap">
  <%= f.label :number, "【カード番号】" %>
  <%= f.text_field :number, class:"number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
</div>
<div class="form-wrap">
  <%= f.label :cvc, "【CVC】" %>
  <%= f.text_field :cvc, class:"cvc", placeholder:"カード背面にある3桁の番号", maxlength:"4" %>
</div>
<div class="form-wrap">
  <br>
  <p>【有効期限】</p>
  <div class="input-expiration-date-wrap">
    <%= f.text_field :exp_month, class: "exp-month", placeholder:"例）3" %>
    <p>月</p>
    <%= f.text_field :exp_year, class: "exp-year", placeholder:"例）24" %>
    <p>年</p>
  </div>
</div>
<%= f.submit "登録する", class:"button", id:"button" %>

<% end %>

JavaScript

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("number"),
      cvc: formData.get("cvc"),
      exp_month: formData.get("exp-month"),
      exp_year: `20${formData.get("exp-year")}`
    };
    Payjp.createToken(card, (status, response) => {
      if (status === 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value="${token}" name="card_token" type="hidden">`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }

      document.getElementById("number").removeAttribute("name");
      document.getElementById("cvc").removeAttribute("name");
      document.getElementById("exp_month").removeAttribute("name");
      document.getElementById("exp_year").removeAttribute("name");

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

window.addEventListener('load', pay);

Cardモデル

class Card < ApplicationRecord
  belongs_to :user
  attr_accessor :card_token
  validates :card_token, presence: true
end

cardsコントローラー

class CardsController < ApplicationController
  def new
  end

  def create
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    customer = Payjp::Customer.create(
      description: 'test',
      card: params[:card_token]
    )
    card = Card.new(
      card_token: params[:card_token],
      customer_token: customer.id,
      user_id: current_user.id
    )
    if card.save
      redirect_to root_path
    else
      redirect_to new_card_path
    end
  end
ned

#試したこと
・以前(10日ほど前)は正常にカード登録ができていました。その間コードに触れた記憶はありませんが、JavaScript関連ではチャットの非同期処理を実装しました(関係あるかわかりませんが…)
・ターボリンクスが悪さすることがあると聞いたのでコメントアウトなどを試みましたが、変化はありませんでした。
・「Invalid expiration year」というエラー文からyear回りの記述名や要素名を確認しましたが解決に至りませんでした。
・かれこれ1日程考えましたが、自分でエラー解消することができませんでした…。どうか皆様のお力添えを頂ければと存じます。

Answer 1

JavaScriptのコードが間違っていました。

＜解決方法＞

誤ったコード

exp_month: formData.get("exp-month"),
exp_year: `20${formData.get("exp-year")}`

正しいコード

exp_month: formData.get("exp_month"),
exp_year: `20${formData.get("exp_year")}`

誤ったコードでは、フォームのクラス名を指定していました。
入力された値をcardオブジェクトにまとめるため、:exp_month、exp_yearを指定する必要がありました。

解決への道筋
cardオブジェクトを作成するコードの後にconsole.log(card);を記述することで、
cardのハッシュの中身を確認しました。
そこで確認すると「month」「year」の2つの値がnilとなっていることが分かりました。
もう一度jsファイルを見直し、2つの共通して誤っている部分を探した結果、上記の解決に至りました。