Rails Stripe Form: Uncaught Reference Ошибка, препятствующая генерации токена

Question

Я пытаюсь создать пользовательскую форму оплаты для моего приложения rails. Я просто пытаюсь сделать что-то простое, поэтому я сделал простую форму в своем представлении, скопировал и вставил javascript со страницы пользовательской формы Stripe прямо на страницу представления. Не самая лучшая практика, я знаю, но это просто для того, чтобы проверить это. Вот как выглядит форма:

Subtotal: <%= number_to_currency current_order.subtotal %> <br>
Tax: <%= number_to_currency current_order.tax_cost %> <br>
Shipping: <%= number_to_currency current_order.shipping_cost %> <br>
Total: <%= number_to_currency current_order.total %> <br>

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script type="text/javascript">
  // This identifies your website in the createToken call below
   Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

   function stripeResponseHandler(status, response) {
       var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
         $form.find('input[type="submit"]').prop('disabled', false);
      } else {
         // response contains id and card, which contains additional card details
         var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and submit
        $form.get(0).submit();
      }
    };
  // ...
  JQuery(function($) {
      $('#payment-form').submit(function(event) {
         var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('input[type="submit"]').prop('disabled', true);

        Stripe.card.createToken($form, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
      });
    });
</script>




<div class="container">
     <%= form_tag confirmation_path, id: 'payment-form' do %>
        <div class="row"><span class="payment-errors co col-md-12"></span></div>
        <div class="row">
            <div class="col col-md-12">
                <%= label_tag nil, 'Carnd Number' %>
                <%= text_field_tag nil, 'xxxx-xxxx-xxxx-xxxx', data: {stripe: 'number'}, size: '20', class: 'form-control col col-md-12' %>
            </div>
        </div>
        <div class="row">
            <div class="col col-md-6">
                <%= label_tag nil, 'CVC' %>
                <%= text_field_tag nil, 'xxx', data: {stripe: 'cvc'}, size: '20', class: 'form-control' %>
            </div>
            <div class="col col-md-2">
                <%= label_tag nil, "Exp. Month (MM)" %>
                <%= text_field_tag nil, 'MM', data: {stripe: 'exp-month'}, size: '2', class: 'form-control' %>
            </div>
            <div class="col col-md-4">
                <%= label_tag nil, 'Exp Year (YYYY)' %>
                <%= text_field_tag nil, 'YYYY', data: {stripe: 'exp-year'}, size: '4', class: 'form-control' %>
             </div>
        </div>

        <div class="row">
            <%= submit_tag 'Pay and Confirm Order', class: 'btn btn-default' %>
        </div>
    <% end %>
</div>

Всякий раз, когда я отправляю форму, скрытое поле ввода, содержащее значение токена, не создается. Я знаю, потому что на странице, на которую она отправляется, когда я смотрю на params[:stripeToken].inspect, она появляется "ноль". Это заставляет меня думать, что javascript, который я скопировал с веб-сайта Stripe, не работает должным образом при реализации на моей странице. Я думаю, что проблема связана с тем, как загружается JQUERY. Я говорю это потому, что когда я загружаю страницу в Chrome и поднимаю консоль, я получаю следующую ошибку:

Uncaught ReferenceError: JQuery is not defined

это ссылка на "JQuery(function($) {...") в коде, который я скопировал.

я включил драгоценный камень 'jquery-rails' в мой файл драгоценного камня. Javascript требуется в моем application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

И мне это нужно в голове моего макета application.html.erb

  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Любые идеи, почему JavaScript может работать неправильно.

Answer 1

Это орфографическая ошибка. Это было бы jQuery не JQuery, j должен быть маленький случай.

jQuery(function($) {
    //....
}