Raylar Şerit Form: Dikkat Çekilmemiş Referans belirteci belirleme hatası

Question

Raylarım uygulaması için özel bir ödeme formu oluşturmaya çalışıyorum. Sadece basit bir şey yapmaya çalışıyorum, bu yüzden görüşümdeki en bariz formu oluşturdum ve javascript'i Stripe custom-form page'dan doğrudan görünüm sayfasına kopyaladım. En iyi uygulama değil, biliyorum, ama bu sadece test etmek.

Ben formu göndermek zaman

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> 

, jeton değerini taşıyan gizli giriş alanı oluşturulmaz: Bu gibi form görünümü görüntüsü. Biliyorum çünkü sayfada, params [: stripeToken] .inspect'e baktığımda, "nil" yazıyor. Bu bana Stripe'in web sitesinden kopyaladığım javascript'in sayfamda uygulandığında düzgün çalışmadığını düşünmeme neden oluyor. Sanırım sorun JQUERY'nin nasıl yüklendiği ile ilgili. Ben Chrome'da sayfayı yüklemek ve konsolu çıkardığım zaman, çünkü aşağıdaki hatayı alıyorum demek:

Uncaught ReferenceError: JQuery is not defined 

kodunda olan "JQuery (function ($) {..." başvuran bu Ben kopyalandı.

benim mücevher dosyasında 'jquery-raylar' taş dahil ediyorum. javascript benim application.js

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

gerekliliği ortadır Ve ben uygulama kafasına bunu gerektiren am .html.erb düzeni

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

javascript düzgün çalışmıyor olabileceğini niçin herhangi bir fikir.

Answer 1

Bu yazım hatasıdır. JQuery değil jQuery olur. j küçük bir durum olmalıdır.

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