[Payjp]トークンは発行できてるはずなのに呼び出せません

前提・実現したいこと

Payjpのクレジットカード登録と、登録と同時にサブスクライブを開始する

発生している問題・エラーメッセージ

payjs.jsでは処理が上手く行っているはずなのに
createメソッドの条件分岐でparams['payjp_token']がtrueの処理に進まない

該当のソースコード

登録フォームのview

erb
1<%= form_with model: @card, url: cards_path, local: true, id: 'charge-form', html: { name: 'inputForm' } do |f| %>
2  <div class='card-number-form'>
3    <div class='card-number-form-wrapper'>
4      <%= f.label :'カード番号(必須)', class: 'label' %>
5      <%= f.text_field :card_number, id: "card_number", type: 'text', class: 'input', placeholder: '半角数字のみ', maxlength: "16" %>
6    </div>
7   </div>
8   <div class='cards-expire-form'>
9     <div class='cards-expire-form-wrapper'>
10       <%= f.label :'有効期限(必須)', class: 'label' %>
11       <div class='cards-expire-type form-group'>
12         <div class='cards-expire__wrap'>
13           <%= f.select :exp_month, [["1月",1],["2月",2],["3月",3],["4月",4],["5月",5],["6月",6],["7月",7],["8月",8],["9月",9],["10月",10],["11月",11],["12月",12]],{} ,id: "exp_month" , class: 'input' %>
14         </div>
15         <div class='cards-expire__wrap'>
16           <%= f.select :exp_year, [["2019年",2019],["2020年",2020],["2021年",2021],["2022年",2022],["2023年",2023],["2024年",2024],["2025年",2025],["2026年",2026],["2027年",2027],["2028年",2028],["2029年",2029]],{} ,id: "exp_year", class: 'input'%>
17         </div>
18       </div>
19      </div>
20    </div>
21    <div class='security-code-form'>
22      <div class='security-code-form-wrapper'>
23        <%= f.label :'セキュリティコード(必須)', class: 'label' %>
24        <%= f.password_field :cvc, id: 'cvc',class: "input" ,maxlength: '4',autocomplete: "on",placeholder: 'カード背面4桁もしくは3桁の番号' %>
25      </div>
26    </div>
27    <div class="card-btn" id="card_token"></div>
28    <%= f.submit '追加する', class: 'button is-success', id: 'token_submit' %>
29<% end %>

コントローラー

class CardsController < ApplicationController

  require 'payjp'

  before_action :set_api_key

  def plan
    Payjp::Plan.create(
      :amount => 11000,
      :interval => 'month',
      :billing_day => 27,
      :currency => 'jpy',
    )
  end

  def index
    if current_user.card.present?
      @cards = Card.where(user_id: current_user.id)
    end
  end

  def create
    if params[:payjp_token]
      user_id = current_user.id
      customer = Payjp::Customer.create(
      card: params[:payjp_token]
      )
      @card = Card.new(user_id: user_id, customer_id: customer.id, card_id: customer.default_card)
      if @card.save
        pay
      else
        flash[:alert] = 'カード情報を登録できませんでした'
        redirect_to action: "new"
      end
    else
      redirect_to action: "new"
      flash[:alert] = 'onemoretime'
      # ここでおそらく問題が起きてる
    end
  end

  def pay
    card = Card.where(user_id: current_user.id).first
    Payjp.api_key = 'sk_test*************'
    subscription = Payjp::Subscription.create( 
    :customer => card.customer_id,
    :plan => plan, 
    metadata: {user_id: current_user.id}
    )
    current_user.update(subscription_id: subscription.id, premium: true)
    flash[:alert] = '定期課金に登録できました'
    redirect_to root_path
  end

  def cancel
    Payjp.api_key = 'sk_test*************'
    subscription = Payjp::Subscription.retrieve(current_user.subscription_id)
    subscription.cancel
    current_user.update(premium: false)
    flash[:alert] = '定期課金を解除できました'
    redirect_to root_path
  end

  def set_api_key
    Payjp.api_key = 'sk_test*************'
  end

end

payjp.js

document.addEventListener(
  "DOMContentLoaded", e => {
    if (document.getElementById("token_submit") != null) {
      Payjp.setPublicKey("pk_test****************");
      let btn = document.getElementById("token_submit");
      btn.addEventListener("click", e => {
        e.preventDefault();
        let card = {
          number: document.getElementById("card_number").value,
          cvc: document.getElementById("cvc").value,
          exp_month: document.getElementById("exp_month").value,
          exp_year: document.getElementById("exp_year").value
        };
        Payjp.createToken(card, (status, response) => {
          if (status === 200) { 
            $("#card_number").removeAttr("name");
            $("#cvc").removeAttr("name");
            $("#exp_month").removeAttr("name");
            $("#exp_year").removeAttr("name");
            $("#card_token").append(
              $('<input type="hidden" name="payjp-token">').val(response.id)
            );
            document.inputForm.submit();
            alert("登録が完了しました");
          } else {
            alert("カード情報が正しくありません。");
          }
        });
      });
    }
  },
  false
);

試したこと

https://qiita.com/joruju2248/items/a7b0fc7c2a1fdea45860
こちらの方のコードを参考に書いています！
https://qiita.com/KONTA2019/items/cdf232d67e81a6761d32
https://teratail.com/questions/249609
これらのサイトの解決策を試してみましたがうまく動きません

補足情報（FW/ツールのバージョンなど）

Rails 5.2.5
ruby 2.5.1

gouf

2021/04/16 12:55

params[:payjp_token] の中身は確認されましたか?

Kosukeeee

2021/04/17 00:40

ご質問いただきありがとうございます！確認したところ、こちらが返ってきました <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"muciSVbmykgJvCDiFQbP6xvcHuAr8fLtxahOpN0oS_oZYhLxuj1OcjJeriT_ykfHgPZJyGxcs2dA9dBCI7rv1w", "card_number"=>"4242424242424242", "exp_month"=>"1", "exp_year"=>"2022", "cvc"=>"123", "commit"=>"追加する", "controller"=>"cards", "action"=>"create"} permitted: false>