title: Submit Braintree Sale via Ajax Rails
body: <p>This may not be possible and I may be misunderstanding the api but i was looking to submit my Braintree payment via Ajax in Rails 4.</p>
  
  <p>I've got a simple form setup (omitted fields to keep it small) and it is setup to fail in this instance so that i can show an error message</p>
  
  <pre><code>&lt;%= form_tag transactions_path, id: 'braintree-transaction-form', remote: true do %&gt;
    &lt;%= text_field_tag :first_name, "", placeholder: 'First Name', required: false %&gt;
    &lt;%= text_field_tag :last_name, "", placeholder: 'Last Name', required: false %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Drop in form JS</p>
  
  <pre><code>braintree.setup(gon.client_token, 'dropin', {
    container: 'dropin'
  });
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>def new
    gon.client_token = generate_client_token
  end
  
  def create
    @result = Braintree::Transaction.sale(
              amount: 2500,
              payment_method_nonce: params[:payment_method_nonce],
              customer: {
                first_name: params[:first_name],
                last_name: params[:last_name],
              options: {
                submit_for_settlement: true
              }
            )
    if @result.success?
      redirect_to thank_you_path
    else
      respond_to do |format|
        @error_message = BraintreeErrors::Errors.new.error_message(@result)
        format.js { flash.now[:error] = @error_message }
      end
    end
  end
  </code></pre>
  
  <p>When I submit the form I get this in the console</p>
  
  <pre><code>Processing by TransactionsController#create as JS
  Parameters: {"utf8"=&gt;"✓", "first_name"=&gt;"", "last_name"=&gt;"", "payment_method_nonce"=&gt;"", "commit"=&gt;"Pay £2500"}
  </code></pre>
  
  <p>and the response</p>
  
  <pre><code>#&lt;Braintree::Errors transaction:[(91508) Cannot determine payment method.], transaction/credit_card:[(81706) CVV is required.], &gt;
  </code></pre>
  
  <p>So the card details are not even being submitted to the Braintree servers.</p>
  
  <p>Can I not submit my form via Ajax in this way or do i have to construct the Ajax call using jQuery, adding to the existing <code>braintree.setup</code> ?</p>
  
  <h2>Update</h2>
  
  <p>So on page load the nonce is not set</p>
  
  <pre><code>&lt;input type="hidden" name="payment_method_nonce" value&gt;
  </code></pre>
  
  <p>So I remove the data remote: true option and submitted the form and noticed that the nonce is generated on form submission</p>
  
  <pre><code>&lt;input type="hidden" name="payment_method_nonce" value="nonce-value-here"&gt;
  </code></pre>
  
  <p>I then set the form back to remote: true and watched the nonce value be generated again but this time same issue where card details not set.</p>
  
  <p>Some further reading and I have come across <a href="https://stackoverflow.com/questions/32837760/braintree-payments-wont-work-with-ajax-submit">this post</a>; it seems like I need to modify my setup script to </p>
  
  <pre><code>braintree.setup(gon.client_token, 'dropin', {
    container: 'dropin',
    onPaymentMethodReceived: function (paymentMethod) {
      $('#braintree-transaction-form').append("&lt;input type='hidden' name='payment_method_nonce' value='" + paymentMethod.nonce + "'&gt;&lt;/input&gt;");
      $('#braintree-transaction-form').submit();
    }
  });
  </code></pre>
  
  <p>I notice the docs also state</p>
  
  <blockquote>
    <p>Note: If <code>onPaymentMethodReceived</code> is defined, braintree.js will not add a hidden input to your form, inject the nonce into that hidden input, or submit the form. Upon receiving a nonce, it is up to you to send data to your server as you see fit.</p>
  </blockquote>
  
  <p>So I've appended the nonce to the form but the form gets submitted twice, once by the first click and then again within the <code>onPaymentMethodReceived</code> function.</p>
  
  <p>How can I only submit the form through the callback?</p>