payjp v2移行できない

payjpとのやり取りのURL？がv1のまま

POST https://api.pay.jp/v1/tokens 402 (Payment Required)

onst pay = () => {
  //環境変数をもとに公開鍵を復号
  const payjp = Payjp('pk_test_780024df40684f31dd0da85d')
  //elementsインスタンスを生成
  const elements = payjp.elements();
  //入力欄ごとにelementインスタンスを生成
  const numberElement = elements.create('cardNumber')
  const cvcElement = elements.create('cardCvc')
  const expiryElement = elements.create('cardExpiry')
  //入力欄をDOM上に表示
  numberElement.mount('#number-form')
  cvcElement.mount('#cvc-form') 
  expiryElement.mount('#expiry-form')
  //フォームの要素を取得
  const form = document.getElementById("charge-form");
  //PAY.JPと通信が成功した場合のみトークンをフォームに埋め込む
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    payjp.createToken(expiryElement).then((response) => {
      if (response.error) {
      } else {
        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("charge-form").submit();
    });
  });
};

window.addEventListener("load", pay);

class OrdersController < ApplicationController

  before_action :set_item, only: [:index, :create]
  def index
   
    @order_payment = OrderPayment.new
   
  end

  def create  
binding.pry
      @order_payment= OrderPayment.new(order_params)
  
    if @order_payment.valid?
      Payjp.api_key = "sk_testここは投稿時に消しました"  # 自身のPAY.JPテスト秘密鍵を記述しましょう
      Payjp::Charge.create(
        amount: order_params[:price],  # 商品の値段
        card: order_params[:token],    # カードトークン
        currency: 'jpy'                 # 通貨の種類（日本円）
      )
      @order_payment.save
      redirect_to root_path
    else
      render :index
    end
  end
  


  private

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

  def order_params
    params.require(:order_payment).permit(:post_code, :prefecture_id, :city, :block, 
                               :building, :phone_number)
                           .merge(user_id: current_user.id, item_id: @item_id, token: params[:token]) 
end

<%= form_with model: @order_payment, url: item_orders_path, id: 'charge-form', class: 'transaction-form-wrap',local: true do |f| %>
<%# カード情報の入力 %>
<div class='credit-card-form'>
  <h1 class='info-input-haedline'>
    クレジットカード情報入力
  </h1>
  <div class="form-group">
    <div class='form-text-wrap'>
      <label class="form-text">カード情報</label>
      <span class="indispensable">必須</span>
    </div>
    <div id="number-form" class="input-default"></div>
     <%# ここにフォームが生成されます %>
     
    <div class='available-card'>
      <%= image_tag 'card-visa.gif', class: 'card-logo'%>
      <%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
      <%= image_tag 'card-jcb.gif', class: 'card-logo'%>
      <%= image_tag 'card-amex.gif', class: 'card-logo'%>
    </div>
  </div>
  <div class="form-group">
    <div class='form-text-wrap'>
      <label class="form-text">有効期限</label>
      <span class="indispensable">必須</span>
    </div>
    <div class='input-expiration-date-wrap'>
      <div id="expiry-form" class="input-default"></div>

v2の移行のため
viewのヘルパーメゾットを削除し、id
を要素として記述

card.jsも同様記述を変更しました

他に考えられる箇所が思いつかないので
質問させてもらいました。

補足
paramsの返り値がfalse
#<ActionController::Parameters {"authenticity_token"=>"LZGyiS6HF8KI6bheeU0HcJnlxIgIeVd3UYj_wxQHcAw8IpUee6j9z06fzLhtoSAJwa4-Mywl1MyiCrH41GtDOg", "order_payment"=>{"post_code"=>"3130021", "prefecture_id"=>"2", "city"=>"日立", "block"=>"1-1-1", "building"=>"", "phone_number"=>"09012345678"}, "controller"=>"orders", "action"=>"create", "item_id"=>"5"} permitted: false>

order_paramsの返り値がtrue
 #<ActionController::Parameters {"post_code"=>"3130021", "prefecture_id"=>"2", "city"=>"日立", "block"=>"1-1-1", "building"=>"", "phone_number"=>"09012345678", "user_id"=>2, "item_id"=>nil, "token"=>nil} permitted: true>