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.
It's a spelling mistake. It would be jQuery
not JQuery
. j
should be small case.
jQuery(function($) {
//....
}