PAY.JPによるカード登録機能　Uncaught ReferenceError: Payjp is not definedの解決方法

前提・実現したいこと

RailsでPAY.JPを使ったクレジットカードの登録を実装しています。

おそらく、app/views/layouts/application.html.hamlへのscriptタグの記述に問題があるのかなと思っていますが解決しません。

様々なサイトを参照して行っていたのですが、解決に至ることできませんでしたので、お力添えをいただければと思います。

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

PAY.JPが提供しているテストデータを入力して登録ボタンを押しても、カード登録画面にリダイレクトされる

log
1#cards/new　ログのエラー文
2GET http://localhost:3000/cards/https//js.pay.jp/ net::ERR_ABORTED 404 (Not Found) new:5
3
4Uncaught ReferenceError: Payjp is not defined.          payjp.self-5f2dd...fbf.js?body=1:4 
5    at HTMLDocument.<anonymous> (payjp.self-5f2dd...fbf.js?body=1:4)
6(anonymous) @ payjp.self-5f2dd...fbf.js?body=1:4

該当のソースコード

Ruby
1#application.html.haml
2
3!!!
4%html
5  %head
6    %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
7    = javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js'
8    %script{src: "https//js.pay.jp/", type: "text/javascript"}
9    = csrf_meta_tags
10    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
11    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
12  %body
13
14    =render partial: "layouts/notifications", locals:{flash: flash}
15
16    = yield

Ruby
1#cards/new.html.haml
2
3  .card-form
4    = form_tag(pay_cards_path, method: :post, id: "charge-form", name: "inputForm") do
5      .card-number
6        %label.number-label
7          カード番号
8      .number-field
9        = text_field_tag "number", "", class: "number-input", placeholder: "半角数字のみ", id: "card_number", maxlength: "16", type: "text"
10      .card-image
11        = image_tag(image_path('cards/icon_visa.png'), class: 'visa')
12        = image_tag(image_path('cards/icon_mastercard.png'), class: 'master')
13        = image_tag(image_path('cards/icon_jcb.png'), class: 'jcb')
14        = image_tag(image_path('cards/icon_amex.png'), class: 'amex')
15        = image_tag(image_path('cards/icon_diners.png'), class: 'diners')
16        = image_tag(image_path('cards/icon_discover.png'), class: 'discover')
17      .card-exp
18        .exp-details
19          %label
20            有効期限
21          %br
22        .exp-choice
23          .exp-month
24            %select{name: "exp_month", type: "text", id:"exp_month"}
25              %option{value: ""} --
26              %option{value: "1"}01
27              %option{value: "2"}02
28              %option{value: "3"}03
29              %option{value: "4"}04
30              %option{value: "5"}05
31              %option{value: "6"}06
32              %option{value: "7"}07
33              %option{value: "8"}08
34              %option{value: "9"}09
35              %option{value: "10"}10
36              %option{value: "11"}11
37              %option{value: "12"}12
38            %span 月
39            %span.slash /
40          .exp-year
41            %select{name: "exp_year", type: "text", id: "exp_year"}
42              %option{value: ""} --
43              %option{value: "2020"}20
44              %option{value: "2021"}21
45              %option{value: "2022"}22
46              %option{value: "2023"}23
47              %option{value: "2024"}24
48              %option{value: "2025"}25
49              %option{value: "2026"}26
50              %option{value: "2027"}27
51              %option{value: "2028"}28
52              %option{value: "2029"}29
53            %span 年
54            %br
55        .security-code
56          .code-details
57            %label
58              セキュリティコード
59          .code-field
60            = text_field_tag "cvc", "", class: "cvc", placeholder: "カード背面3~4桁の番号", maxlength: "4", id: "cvc"
61        #card-token
62          = submit_tag "登録する", id: "token_submit", class: "card-btn"

Ruby
1#payjp.js
2
3document.addEventListener(
4  "DOMContentLoaded", e => {
5    if (document.getElementById("token_submit") != null) { 
6      Payjp.setPublicKey("pk_test_1111111111111111");
7      let btn = document.getElementById("token_submit"); 
8      btn.addEventListener("click", e => { 
9        e.preventDefault();
10        let card = {
11          number: document.getElementById("card_number").value,
12          cvc: document.getElementById("cvc").value,
13          exp_month: document.getElementById("exp_month").value,
14          exp_year: document.getElementById("exp_year").value
15        };
16        Payjp.createToken(card, (status, response) => {
17          if (status === 200) { 
18            $("#card_number").removeAttr("name");
19            $("#cvc").removeAttr("name");
20            $("#exp_month").removeAttr("name");
21            $("#exp_year").removeAttr("name"); 
22            $("#card_token").append(
23              $('<input type="hidden" name="payjpToken">').val(response.id)
24            ); 
25            document.inputForm.submit();
26            alert("登録が完了しました");
27          } else {
28            alert("カード情報が正しくありません。");
29          }
30        });
31      });
32    }
33  },
34  false
35);

Ruby
1#cards_controller.rb
2
3  require "payjp"
4
5  def new
6    card = Card.where(user_id: current_user.id)
7    redirect_to action: "show" if card.exists?
8  end
9
10  def pay
11    Payjp.api_key = Rails.application.secrets.payjp_access_key
12    if params['payjpToken'].blank?
13      flash[:notice] = "カードの情報を確認してください"
14      redirect_to action: "new"
15    else
16      customer = Payjp::Customer.create(
17      description: '登録テスト',
18      card: params['payjpToken'],
19      metadata: {user_id: current_user.id}
20      )
21      @card = Card.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
22      if @card.save
23        redirect_to action: "show"
24        flash[:notice] = 'クレジットカードの登録が完了しました'
25      else
26        redirect_to action: "pay"
27        flash[:notice] = 'クレジットカードの登録に失敗しました'
28      end
29    end
30  end