Rails Stripe Form: Uncaught Reference Error verhindert Token-Generierung

Question

Ich versuche, ein benutzerdefiniertes Zahlungsformular für meine Rails-App zu erstellen. Ich versuche nur, etwas einfach zu machen, also habe ich aus meiner Sicht die einfachste Form gemacht und das Javascript von der Stripe custom-form page direkt in die Ansichtsseite kopiert und eingefügt. Nicht die beste Praxis, ich weiß, aber das ist nur um es zu testen. Dies ist, was die Formularansicht wie folgt aussieht:

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> 

Jedes Mal, wenn ich das Formular, das versteckte Eingabefeld, das den Token-Wert trägt nicht erzeugt wird. Ich weiß, weil auf der Seite, die es eingereicht wird, wenn ich auf params [: stripeToken] .inspect schaue, kommt es "Null". Das lässt mich glauben, dass das Javascript, das ich von der Stripe-Website kopiert habe, nicht richtig funktioniert, wenn es auf meiner Seite implementiert wird. Das Problem, das ich denke, hat damit zu tun, wie die JQUERY geladen wird. Ich sage das, weil wenn ich die Seite in Chrome laden und die Konsole bringen, ich die folgende Fehlermeldung erhalten:

Uncaught ReferenceError: JQuery is not defined 

diese Bezugnahme auf den „JQuery (function ($) {...“, die in dem Code ich kopierte.

ich bin einschließlich der ‚jquery-Schienen‘ Juwel in meinem gem Datei. Das Javascript

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

in meinem application.js benötigt wird, und ich es im Kopf meiner Anwendung bin erforderlich .html.erb Layout

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

Irgendwelche Ideen, warum das Javascript möglicherweise nicht richtig funktioniert.

Answer 1

Es ist ein Rechtschreibfehler. Es wäre jQuery nicht JQuery. j sollte klein sein.

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