Rails 条纹形式：未捕获的引用错误阻止令牌生成

Question

我正在尝试为我的 rails 应用创建自定义付款表单。我只是想做一些简单的事情，所以我在我的视图中制作了最简单的形式，并将 Stripe custom-form page 中的 javascript 直接复制并粘贴到视图页面中。我知道，这不是最佳做法，但这只是为了测试一下。这是表单视图的样子：

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 时，它出现 "nil"。这让我觉得我从 Stripe 网站复制的 javascript 在我的页面上实现时无法正常工作。我认为这个问题与 JQUERY 的加载方式有关。我这么说是因为当我在 Chrome 中加载页面并调出控制台时，出现以下错误：

Uncaught ReferenceError: JQuery is not defined

这引用了我复制的代码中的 "JQuery(function($) {..."。

我将 'jquery-rails' gem 包含在我的 gem 文件中。我的 application.js

需要 javascript

//= 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($) {
    //....
}

Rails 条纹形式：未捕获的引用错误阻止令牌生成

Rails Stripe Form: Uncaught Reference Error preventing token generation

ruby

jquery

ruby-on-rails

jquery-rails