Rails NameErrorの原因が特定するできない

Error内容

NameError in OrdersController#create
uninitialized constant OrdersController::Payjp

現状

PAY.JPでクレジットカード処理をできるように実装しています。
しかし、送信をしようとボタンを押すと、上記のエラーが出てしまいます。
コードは以下のコードです。

controller
1class OrdersController < ApplicationController
2    def index 
3        @order_form = OrderForm.new
4        @items = Item.all
5    end
6
7    def create  
8        # binding.pry
9        @items = Item.all
10        @order_form = OrderForm.new(order_params)
11        if @order_form.valid?
12            pay_item
13            @order_form.save
14            redirect_to root_path
15        else
16            render action: :index
17        end
18    end
19    
20    private
21    def order_params
22        params.require(:order_form).permit(:post_num, :prefecture_id, :city, :street_num, :building_num, :tell_num).merge(user_id: current_user.id, item_id: @items,token: params[:token])
23    end
24
25    def pay_item
26        Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
27        Payjp::Charge.create(
28          amount: @items.item_price,
29          card: order_params[:token],
30          currency: 'jpy'
31        )
32    end
33    
34end
35

view
1<%= form_with(model: @order_form, url: item_orders_path, method: :post, id: 'charge-form', class: 'card-form',local: true) do |f| %>
2
3<%= render 'shared/error_messages', model: @order_form %>
4<%= render "shared/second-header"%>
5
6<div class='transaction-contents'>
7  <div class='transaction-main'>
8    <h1 class='transaction-title-text'>
9      購入内容の確認
10    </h1>
11    <% @items.each do |item| %>
12    <div class='buy-item-info'>
13      <%= image_tag item.image, class: 'buy-item-img' %>
14      <div class='buy-item-right-content'>
15        <h2 class='buy-item-text'>
16          <%= item.title %>
17        </h2>
18        <div class='buy-item-price'>
19          <p class='item-price-text'>¥<%= item.item_price %></p>
20          <p class='item-price-sub-text'><%= item.shipping_fee.name %></p>
21        </div>
22      </div>
23    </div>
24    
25    <div class='item-payment'>
26      <h1 class='item-payment-title'>
27        支払金額
28      </h1>
29      <p class='item-payment-price'>
30        ¥<%= item.item_price %>
31      </p>
32    </div>
33    <%end%>
34
35    <%# カード情報の入力 %>
36    <div class='credit-card-form'>
37      <h1 class='info-input-haedline'>
38        クレジットカード情報入力
39      </h1>
40      <div class="form-group">
41        <div class='form-text-wrap'>
42          <label class="form-text">カード情報</label>
43          <span class="indispensable">必須</span>
44        </div>
45        <%= f.text_field :number, class:"input-default", id:"card-number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
46        <div class='available-card'>
47          <%= image_tag 'card-visa.gif', class: 'card-logo'%>
48          <%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
49          <%= image_tag 'card-jcb.gif', class: 'card-logo'%>
50          <%= image_tag 'card-amex.gif', class: 'card-logo'%>
51        </div>
52      </div>
53      <div class="form-group">
54        <div class='form-text-wrap'>
55          <label class="fo-text">有効期限</label>
56          <span class="indispensable">必須</span>
57        </div>
58        <div class='input-expiration-date-wrap'>
59          <%= f.text_area :exp_month, class:"input-expiration-date", id:"card-exp-month", placeholder:"例)3" %>
60          <p>月</p>
61          <%= f.text_area :exp_year, class:"input-expiration-date", id:"card-exp-year", placeholder:"例)23" %>
62          <p>年</p>
63        </div>
64      </div>
65      <div class="form-group">
66        <div class='form-text-wrap'>
67          <label class="form-text">セキュリティコード</label>
68          <span class="indispensable">必須</span>
69        </div>
70        <%= f.text_field :cvc,class:"input-default", id:"card-cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4" %>
71      </div>
72    </div>
73    <%# /カード情報の入力 %>
74    
75    <%# 配送先の入力 %>
76    <div class='shipping-address-form'>
77      <h1 class='info-input-haedline'>
78        配送先入力
79      </h1>
80      <div class="form-group">
81        <div class='form-text-wrap'>
82          <label class="form-text">郵便番号</label>
83          <span class="indispensable">必須</span>
84        </div>
85        <%= f.text_field :post_num, class:"input-default", id:"postal-code", placeholder:"例）123-4567", maxlength:"8" %>
86      </div>
87      <div class="form-group">
88        <div class='form-text-wrap'>
89          <label class="form-text">都道府県</label>
90          <span class="indispensable">必須</span>
91        </div>
92        <%= f.collection_select(:prefecture_id, Prefecture.all, :id, :name, {}, {class:"select-box", id:"prefecture"}) %>
93      </div>
94      <div class="form-group">
95        <div class='form-text-wrap'>
96          <label class="form-text">市区町村</label>
97          <span class="indispensable">必須</span>
98        </div>
99        <%= f.text_field :city, class:"input-default", id:"city", placeholder:"例）横浜市緑区"%>
100      </div>
101      <div class="form-group">
102        <div class='form-text-wrap'>
103          <label class="form-text">番地</label>
104          <span class="indispensable">必須</span>
105        </div>
106        <%= f.text_field :street_num, class:"input-default", id:"addresses", placeholder:"例）青山1-1-1"%>
107      </div>
108      <div class="form-group">
109        <div class='form-text-wrap'>
110          <label class="form-text">建物名</label>
111          <span class="form-any">任意</span>
112        </div>
113        <%= f.text_field :building_num, class:"input-default", id:"building", placeholder:"例）柳ビル103"%>
114      </div>
115      <div class="form-group">
116        <div class='form-text-wrap'>
117          <label class="form-text">電話番号</label>
118          <span class="indispensable">必須</span>
119        </div>
120        <%= f.text_field :tell_num, class:"input-default", id:"phone-number", placeholder:"例）09012345678",maxlength:"11"%>
121      </div>
122    </div>
123    <%# /配送先の入力 %>
124    <div class='buy-btn'>
125      <%= f.submit "購入" ,class:"buy-red-btn" %>
126    </div>
127  </div>
128</div>
129<%= render "shared/second-footer"%>
130<% end %>

javascript
1const pay = () => {
2    Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
3
4    const form = document.getElementById("charge-form");
5    form.addEventListener("submit", (e) => {
6        e.preventDefault();
7
8        const formResult = document.getElementById("charge-form");
9        const formData = new FormData(formResult);
10        
11        const card = {
12            number: formData.get("order_form[number]"),
13            cvc: formData.get("order_form[cvc]"),
14            exp_month: formData.get("order_form[exp_month]"),
15            exp_year: `20${formData.get("order_form[exp_year]")}`,
16        };
17
18        Payjp.createToken(card, (status, response) => {
19            if (status == 200) {
20              const token = response.id;
21              const renderDom = document.getElementById("charge-form");
22              const tokenObj = `<input value=${token} name='token' type="hidden"> `;
23              renderDom.insertAdjacentHTML("beforeend", tokenObj);
24              debugger;
25            }
26
27            document.getElementById("card-number").removeAttribute("name");
28            document.getElementById("card-cvc").removeAttribute("name");
29            document.getElementById("card-exp-month").removeAttribute("name");
30            document.getElementById("card-exp-year").removeAttribute("name");
31
32            document.getElementById("charge-form").submit();
33        });
34    });
35};
36
37window.addEventListener("load", pay);
38

実現したいこと

Formメソッドを使用して、クレジットカードの情報と配送先の住所を保存することができる。

間違っているところ、ヒントをいただけると幸いです。宜しくお願い致します。

追加エラー表示の追加

Some messages have been moved to the Issues panel.

error: {code: "incorrect_card_data", message: "The card information you entered is incorrect.", status: 402,…}
code: "incorrect_card_data"
message: "The card information you entered is incorrect."
status: 402
type: "card_error"

gouf

2021/01/19 11:36

「Payjp.api_key」のように記述していますが「::Payjp.api_key」のように「::」を付与した場合、何か変化は見られますか?

hatopopo21

2021/01/19 11:45

回答ありがとうございます！トライしてみましたが変化がありませんでした。検証を開いて見ると、 error: {code: "incorrect_card_data", message: "The card information you entered is incorrect.", status: 402,…} code: "incorrect_card_data" message: "The card information you entered is incorrect." status: 402 type: "card_error" このようなエラーも出ていました。

gouf

2021/01/20 01:40

「uninitialized constant OrdersController::Payjp」は解消されたのですか? 変化が無い、というのは処理結果の部分ですよね...? (現象をもう少し細分化して見てみると良いと思います) Payjp へのリクエスト結果に対するエラーメッセージに注目してくださいテスト用のカードを利用した場合、何か変化は見られますか? : https://pay.jp/docs/testcard

hatopopo21

2021/01/20 03:10

「uninitialized constant OrdersController::Payjp」はgemがインストールできていなかったことが原因にあったみたいです。迷惑おかけして申し訳ございません。アドバイスありがとうございます！！