PayJPを用いたクレジット決済機能実装のためにtoken_idを取得したい

Question

実現したいこと

ご覧頂きありがとうございます。
現在オリジナルアプリにてPayJPを用いたクレジットカード決済機能を実装しています。
ところが、クレジットカードに情報を記入し、登録しようとすると以下のエラーメッセージが表示されます。

ActiveRecord::NotNullViolation in CardsController#create
Mysql2::Error: Field 'token_id' doesn't have a default value

クレジットカードのトークンIDに値が入力されていない旨の内容です。

以下に記述した範囲外で、確認したい箇所がございましたらどうぞ遠慮なくお申し付けください。
どうかお力添えをよろしくお願い申し上げます。

発生しているエラー

テストカードを用いた挙動

該当のソースコード

#cards_controller
 def create
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] 
    customer = Payjp::Customer.create(
      description: 'test', 
      card: params[:token_id] 
    )
    card = Card.new(
      customer_id: customer.id,
      token_id: params[:token_id],
      user_id: current_user.id
    )

    if card.save
      redirect_to root_path
    else
      redirect_to new_card_path
    end 
  end

#マイグレーションファイル

 def change
    create_table :cards do |t|
      t.string :customer_id,  null: false
      t.string :token_id,     null: false
      t.references :user,     foreign_key: true
      t.timestamps
    end
  end

//app/javascript/card.js
const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 

  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();

    const formResult = document.getElementById("card-form");
    const formData = new FormData(formResult);

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

    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", pay);

# app/views/cards/new.html.erb

      <%= form_with  url: cards_path, id: 'card-form', class: 'card-form',local: true do |f| %>
        <div class="Cardpage">
          <h1>カード登録</h1>
        </div><br>
        <div class="field">
          <%= f.label :number, "【カード番号】" %>
          <%= f.text_field :number, class:"number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
        </div>

        <div class="field">
          <%= f.label :cvc ,"【ＣＶＣ】" %>
          <%= f.text_field :cvc, class:"cvc", placeholder:"カード背面にある3桁の番号", maxlength:"4" %>
        </div>
        <div class="field">
        <br>
          <p>【有効期限】</p>
          <div class='input-expiration-date-wrap'>
            <%= f.select :exp_month, 1..12, {include_blank: "---"}, class: "exp_month" %>
            <p>月</p>
            <%= f.select :exp_year, 20..25, {include_blank: "---"}, class: "exp_year" %>
            <p>年</p>
          </div>
        </div>
        <%= f.submit "登録する" , class:"button" %>
      <% end %>

# app/views/layouts/application.html.erb

#省略
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
    <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application'%>

#省略

# log
app/controllers/cards_controller.rb:19:in `create'
Started POST "/cards" for ::1 at 2021-06-19 18:52:26 +0900
   (0.9ms)  SET NAMES utf8,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483
Processing by CardsController#create as HTML
  Parameters: {"authenticity_token"=>"e04vwuk1AcQ2o1/LQUS/oCS0ExTNj89/BHX61QAaFzfAGx1ULeOx7YZyuZbH+n5y30agZ7x3oJCHgU0IXoMOzA==", "number"=>"4242424242424242", "cvc"=>"123", "exp_month"=>"4", "exp_year"=>"24", "commit"=>"登録する"}
  User Load (0.7ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/cards_controller.rb:16:in `create'
   (0.2ms)  BEGIN
  ↳ app/controllers/cards_controller.rb:19:in `create'
  User Load (0.3ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1
  ↳ app/controllers/cards_controller.rb:19:in `create'
  Card Create (0.8ms)  INSERT INTO `cards` (`customer_id`, `user_id`, `created_at`, `updated_at`) VALUES ('cus_5ca969407619bdc0991f102e3e00', 3, '2021-06-19 09:52:33.617374', '2021-06-19 09:52:33.617374')
  ↳ app/controllers/cards_controller.rb:19:in `create'
   (0.1ms)  ROLLBACK
  ↳ app/controllers/cards_controller.rb:19:in `create'
Completed 500 Internal Server Error in 7099ms (ActiveRecord: 2.1ms | Allocations: 409797)


  
ActiveRecord::NotNullViolation (Mysql2::Error: Field 'token_id' doesn't have a default value):
  
app/controllers/cards_controller.rb:19:in `create'

試したこと

createアクションにbinding,pryをかけ、デバックを行うが生成されたパラメーターにtoken_id自体確認できなかった。
マイグレーションファイルと実際のcard.jsのカラム名を照らし合わせるが、記述ミスは見受けられず。
フォームに入力したクレジットカード情報はパラメーターにあるので、カード情報は取得できている様子。

参考

【Rails】 PAYJPを使ってクレジットカード決済を導入しよう！
【Rails】PAYJPでトークン生成時のエラー解決
Mysql2::Error: Field '****' doesn't have a default valueに二回もハマった話

Answer 1

自己解決しました。
以下、将来の自分へ備忘録です。

①Javascriptの取得するID名が異なっていた。

const form = document.getElementById("card_form");

const form = document.getElementById("card-form");

②cardフォームの変数が異なっていた

 number: formData.get("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,

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

こんなシンプルでもいいのかと感心した。

あとはJavascriptのファイルが2つあり、使用していないWebpackerのほうで実装していた。

とりあえずは以上で正常に動作致しました。
この解決法がどなたかの問題解決になれば幸いです。

ご覧いただいた皆様に感謝申し上げます。