Stripe javascript not retrieving the token I need to create a charge - ruby-on-rails

Question

I am trying to process a payment using a simple stripe charge, the user must pay a quantity in the website through a form and, basically, I don´t know why i am not getting the token back, I think my javascript is not being executed actually. Here is the code:
This is the form placed in order#new (the form view)
:javascript
Stripe.setPublishableKey("<%= ENV['STRIPE_TEST_PUBLISHABLE_KEY] %>");
.container.body-content
%h2
Complete order:
= #cart.name
%table.table.table-items
%tr
%th Design name
%th Quantity
%th Price
- #cart.cart_items.each do |c|
%tr
%td= c.design.name
%td= c.quantity
%td= c.design.price
%tr
%th Total price
%th
%th= #total_price
= simple_form_for(#order, html: { role: "form", class: "cc_form" }) do |f|
= f.simple_fields_for( :payment ) do |p|
.row.col-md-12
.form-group.col-md-4.no-left-padding
= p.input :card_number,
label: "Card Number",
label_html: { data: { stripe: "label" } },
input_html: { required: "true", data: { stripe: "number" }, class: "form-control" }
.form-group.col-md-2
= p.input :card_cvv,
label: "Card CVV",
label_html: { data: { stripe: 'label' } },
input_html: { required: "true", data: { stripe: "cvv" }, class: "form-control" }
.form-group.col-md-6
.col-md-12
= p.label :card_expires, "Card expires", data: { stripe: 'label' }
.col-md-3
= p.select :card_expires_month, options_for_select(Payment.month_options), { include_blank: 'Month' }, data: { stripe: "exp-month" }, class: "form-control", required: true
.col-md-3
= p.select :card_expires_year, options_for_select(Payment.year_options.push), { include_blank: 'Year' }, data: { stripe: "exp-year" }, class: "form-control", required: true
= f.hidden_field :cart_id, :value => #cart.id
= f.hidden_field_tag 'cart', #cart.id
= f.hidden_field_tag 'total_price', #total_price
= f.button :submit, "Pay and finish order", class: "btn btn-login"
This is orders_controller.rb:
class OrdersController < ApplicationController
include ApplicationHelper
def index
end
def new
#order = current_user.orders.build
#cart = Cart.find(params[:format])
#payment = #order.build_payment
#total_price = get_total_price_for_navigation_bar
end
def create
#order = current_user.orders.build(order_params)
#cart = Cart.find(params[:cart])
#payment = #order.build_payment
#payment.user_id = current_user.id
process_payment(params[:total_price])
if payment.save
if #order.save
#cart.purchased = true
#cart.total_price = params[:total_price]
#cart.save
flash[:success] = "Order created"
redirect_to orders_path
else
flash[:danger] = "Order couldn´t be saved, please try again"
render :new
end
else
flash[:danger] = "There was a problem processing your payment, please try again"
render :new
end
end
private
def order_params
params.require(:order).permit(:cart_id)
end
def process_payment(amount)
#byebug
token = params[:stripeToken]
byebug
# Create a charge: this will charge the user's card
begin
charge = Stripe::Charge.create( :amount => amount * 100, :currency => "eur", :source => token, :description => "Example charge")
rescue Stripe::CardError => e
# The card has been declined
end
end
end
and to process the payment I have created credit_card_form.js (of course under assets -> javascripts (I have also removed the turbolinks from application.js )
$(document).ready(function(){
var show_error, stripeResponseHandler, submitHandler;
submitHandler = function(event){
var $form = $(event.target);
$form.find("input[type=submit]").prop("disabled", true);
//If stripe was correctly initialized this will create a token using the credit card info
if(Stripe){
Stripe.card.createToken($form, stripeResponseHandler);
} else {
show_error("Failed to load credit card processing functionality. Please reload this page in your browser.")
}
return false;
};
$(".cc_form").on('submit', submitHandler);
stripeResponseHandler = function(status, response){
var token, $form;
$form = $('.cc_form');
if (response.error) {
console.log(response.error.message);
show_error(response.error.message);
$form.find("input[type=submit]").prop("disabled", false);
} else {
token = response.id;
$form.append($('<input type="hidden" name="stripeToken">').val(token));
$form.get(0).submit();
}
return false;
};
show_error = function(message){
if($("#flash-messages").size() < 1){
$('div.container.main div:first').prepend("<div id='flash-messages'></div>")
}
$("#flash-messages").html('<div class="alert alert-warning"><a class="close" data-dismiss="alert">x</a><div id="flash_alert">' + message + '</div></div>');
$('.alert').delay(5000).fadeOut(3000);
return false;
};
});
When I try to process a payment I never receive the token in the order#create method, so I think that the javascript is not executing
When I inspect variables in terminal I see that the token is not added to the form as a param, as I am suppose to append in stripeResponseHandler in credit_card_form.js this is the output I see when I inspect variables:
(byebug) token
nil
(byebug) params
{"utf8"=>"✓", "authenticity_token"=>"ps963bnlJwbayybIgXVAu8xQI3L6BneUK6qg5k9U9BV7XL+3M+Bl+OVJqJGNrcMHLAjhjvxOkOlhyig9Sh5Cdw==", "order"=>{"payment_attributes"=>{"card_number"=>"4012888888881881", "card_cvv"=>"123", "card_expires_month"=>"3", "card_expires_year"=>"2017"}, "cart_id"=>"9"}, "cart"=>"9", "total_price"=>"390.0", "controller"=>"orders", "action"=>"create"}
(byebug)
Well, I don´t know if I am not seing something stupid or I am completely wrong in my approach, any suggestion will be appreciated.
Thanks in advance
Antonio

Answer 1

[Update: Problem solved]
After several hours, I found what was the problem, wasn´t the code itself, the problem was HAML actually, precisely the way haml interpretes the form id or the class, I don´t know exactly why but I have changed from haml to .erb file and both the customer creation and the stripe charge are processed correctly. For what i´ve seen, using that haml version of the form stripeResponseHandler wasn´t correctly executed (don´t ask me why, I am not so sure, I just know the form wasn´t updated correctly and the token was not included as a param as I wanted in order to process the charge) that is why the charge wasn´t created successfully.
Hope it helps to someone else.
Regards and thanks to u all.