StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStripe token in a modal form is always an empty string
text
Body
copied!<p><strong>EDIT:</strong> Everything works when I use my transactions.js.coffee on a non-modal version of the form. Something about handling the form as <code>xhr</code> is preventing <code>Stripe.createToken</code> from accessing the <code>f.hidden_field :stripe_card_token</code>. or maybe the <code>jQuery</code> object is being created before the modal exists, so <code>setupForm()</code> fails silently because it can't find <code>$("#new_transaction_button")</code> because that element is in the modal, and thus hidden when the script runs? Maybe <code>:attr_accessor :stripe_card_token</code> doesn't work in the modal?</p> <p>I'm trying to allow users to enter credit card details in a modal window. I have combed through this and cannot figure out why Stripe keeps setting the token as an empty string <code>Stripe error while creating customer: Empty string given for card.</code></p> <p>I suspect this is an issue with the way the form is getting passed around by jquery.</p> <p>Here is my <code>transactions.js.coffee</code> file:</p> <pre><code>jQuery -> Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')) transaction.setupForm() transaction = setupForm: -> $("#new_transaction_button").click -> $('input[type=submit]').attr('disabled', true) transaction.processCard() valuesToSubmit = $("#new_transaction").serialize() $("#new_transaction_modal").modal "hide" .ajax( url: "/posts" data: valuesToSubmit type: "POST" ).success (data, status) -> false processCard: -> card = number: $('#card_number').val() cvc: $('#card_code').val() exp_month: $('#card_month').val() exp_year: $('#card_year').val() Stripe.createToken(card, transaction.handleStripeResponse) handleStripeResponse: (status, response) -> if status == 200 $('#transaction_stripe_card_token').val("test") $('#new_transaction')[0].submit() else alert(response.error.message) </code></pre> <p>in the <code>handleStripeResponse</code> function above, I've set the <code>#transaction_stripe_card_token.val()</code> as "test" to demonstrate that it seems to me the function <code>handleStripeResponse</code> is not even being called, because otherwise the console would output <code>Stripe error while creating customer: string "test" given for card.</code>. Is this correct? If it is, why isn't <code>handleStripeResponse</code> getting called? Is it because of the way a modal form is handled by my controller?</p> <p><strong>transactions_controller.rb</strong></p> <pre><code> def create if @post = Post.where(:id => flash[:the_post_id]).first #@price = @post.price @tier_id = @post.tier_id @amount = @tier_id*100 else @amount = 1000 end respond_to do |format| #non-user encountered form and entered credit details AND password- signing up and paying if !current_user && params[:password].present? @user = User.new(:email => params[:transaction][:email], :password => params[:password]) @transaction = @user.transactions.new(params[:transaction].merge(:price => @amount)) @transaction.save_customer(@user) if @transaction.save && @user.save @user.charge_as_customer(@amount) #sign_in @user format.js { render } format.html { redirect_to @transaction, notice: 'Transaction was successfully created.' } format.json { render json: @transaction, status: :created, location: @transaction } else format.html { render action: "new" } format.json { render json: @transaction.errors, status: :unprocessable_entity } end </code></pre> <p><strong>The Modal Credit Card Form: (whitespace/indentation is correct in production. having trouble copy/pasting)</strong></p> <pre><code>= simple_form_for @transaction, :validate => true, :remote => true, :form => { "data-type" => "json" } do |f| %div.modal-header %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} × - if @transaction.errors.any? #error_explanation %h2= "#{pluralize(@transaction.errors.count, "error")} prohibited this transaction from being saved:" %ul - @transaction.errors.full_messages.each do |msg| %li= msg %div.modal-body =hidden_field_tag :post_id = f.hidden_field :stripe_card_token %div.row-fluid %div = label_tag :credit_card_number, nil, :id => "credit_label" = text_field_tag :credit_card_number,nil, :class=>"credit-number span12", :id => "card_number" %div.row-fluid %div.span4 = label_tag :card_month, "Card Expiration" = select_month nil, {:add_month_numbers => true}, {:name => nil, :id => "card_month"} = select_year nil, {:start_year => Date.today.year, :end_year => Date.today.year+15}, {:name => nil, :id => "card_year"} %div.span3 %div.span2.credit-cvv = label_tag :cvv, "CVV" = text_field_tag :cvv, nil, :class=>"credit-cvv input-block-level", :id => "card_code" %div.row-fluid =f.label :email =f.text_field :email, :validate => true -unless current_user %div.row-fluid =label_tag :password =text_field_tag :password, params[:password] %div.modal-footer = f.button :submit, name: 'Get It', class: "btn-primary", id: "new_transaction_button" </code></pre> <p>And, to be thorough, here is my <code>save_customer</code> method for transactions:</p> <pre><code> attr_accessor :stripe_card_token def save_customer(user) if valid? customer = Stripe::Customer.create( :description => email, :card => stripe_card_token) user.stripe_customer_id = customer.id save! end rescue Stripe::InvalidRequestError => e logger.error "Egads, Stripe error while creating customer: #{e.message}" errors.add :base, "There was a problem with your credit card." false end </code></pre> <p>Can't for the life of me figure out what the issue is. Any help would be greatly appreciated. Thanks amigos. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload