jqueryruby-on-railsrubyjquery-rails

Rails Stripe Form: Uncaught Reference Error preventing token generation


I am trying to create a custom payment form for my rails app. I am just trying to make something simple, so I made the barest form in my view and copied and pasted the javascript from the Stripe custom-form page directly into the view page. Not the best practice, I know, but this is just to test it out. This is what the form view looks like:

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>

Whenever I submit the form, the hidden input field that carries the token value is not generated. I know because on the page it is submitted to, when I look at params[:stripeToken].inspect, it comes up "nil". This makes me think the javascript I copied from Stripe's website is not working properly when implemented on my page. The issue I think has to do with how the JQUERY is being loaded. I say that because when I load the page in Chrome and bring up the console, I get the following error:

Uncaught ReferenceError: JQuery is not defined

this referencing the "JQuery(function($) {..." that is in the code I copied.

i am including the 'jquery-rails' gem in my gem file. The javascript is being required in my application.js

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

And I am requiring it in the head of my application.html.erb layout

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

Any ideas why the javascript might not be working correctly.


Solution

  • It's a spelling mistake. It would be jQuery not JQuery. j should be small case.

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