How do I send the params from the form to the ajax and then to controller?

new.haml

= form_tag donations_path, id: "payment-form", remote: true do
  %h5.uppercase.mt-5
    %strong Credit Card information
  %hr
  .row
    .col-md-4
      %label
        Card number
      #card-number-element.field.form-control
    .col-md-4
      %label
        Expiry date
      #card-expiry-element.field.form-control
    .col-md-4
      %label
        CVC
      #card-cvc-element.field.form-control
  .row.mt-3
    .col-md-4
      %label
        Name
      %input#name.field.form-control{:name => "name", :placeholder => "Your name", required: true}
    .col-md-4
      %label
        Phone
      %input#phone.field.form-control{:name => "phone", :placeholder => "Contact number"}
    .col-md-4
      %label
        Email
      %input#email.field.form-control{:name => "email", :placeholder => "Your Email", required: true}
  %h5.uppercase.mt-5
    %strong
      Mailing address
  %hr
  .row
    .col-sm-12
      %label
        Address
      %input#address-line1.field.form-control{:name => "address_line1", :placeholder => "Your mailing address", required: true}
  .row
    .col-sm-3
      %label
        City
      %input#address-city.field.form-control{:name => "address_city", :placeholder => "Your City", required: true}
    .col-sm-3
      %label
        State
      %input#address-state.field.form-control{:name => "address_state", :placeholder => "Your State", required: true}
    .col-sm-3
      %label
        Zipcode
      %input#address-zip.field.form-control{:name => "address_zip", :placeholder => "Your Zipcode or Postal Code", required: true}
    .col-sm-3
      %label
        Country
      %input#address-country.field.form-control{:name => "address_country", :placeholder => "Your Country"}
  %h5.uppercase.mt-5
    %strong
      Dedication
  %hr
  .group
    %label
      Dedicate this donation to
    %input#address-line1.field.form-control{:name => "dedication", :placeholder => "Name, Family, or Event"}

    = hidden_field_tag(:amount)
    = hidden_field_tag(:cc)
    = hidden_field_tag(:subscription)
    = hidden_field_tag(:custom)
    = hidden_field_tag(:plan)
    = hidden_field_tag(:charge_type, "donation")

  %button.mb-4#poker_button{:type => "submit"} Donate
:javascript
  var stripe = Stripe("#{Rails.application.secrets.publishable_key}");
  var elements = stripe.elements();

  var style = {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      fontWeight: 700,
      fontFamily: 'Helvetica Neue',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  };

  var cardNumberElement = elements.create('cardNumber', {
    style: style,
    placeholder: 'Enter Credit Card here',
  });
  cardNumberElement.mount('#card-number-element');

  var cardExpiryElement = elements.create('cardExpiry', {
    style: style,
  });
  cardExpiryElement.mount('#card-expiry-element');

  var cardCvcElement = elements.create('cardCvc', {
    style: style,
  });
  cardCvcElement.mount('#card-cvc-element');
  cardNumberElement.on('change', function(event) {
  });

  $('#other_amount').keyup(function(){
    foo = $(this).data("amount")
    bar = $(this).val();
    foo = bar
    $("#amount").val(foo)
    $("#custom").val("yes")
  })

  $('.donation-button').on('click', function(){
    $('.donation-button').next().hide();
    $('.donation-button').css("background-color", '#FD7E3C').css("border-color", "#FD7E3C");
    $(this).next().show();
    $(this).css("background-color", "#293B57").css("border-color", "#293B57");

  })

  $(".donation-amount").click(function(e){
      e.preventDefault();
      da = $(this).data("amount")
      $("#amount").val(da)
      cs = $(this).data("plan")
      $("#plan").val(cs)
      $("#other_amount").val("")
    })

    $("input[type=radio][name=subscription]").on('change', function() {
      $("#subscription").val($(this).val())
    })

  var form = document.getElementById('payment-form');
  var amount = $("#amount").val()
  form.addEventListener('submit', function(event) {
  event.preventDefault();
    if ($('#amount').not(':empty')){
      $("#poker_button").attr("disabled", true);
      $("#poker_button").html('We are processing your donation, please wait');
      $("#poker_button").css('background-color', '#28a745');
    }

  stripe
    .createPaymentMethod({
      type: 'card',
      card: cardNumberElement,
      billing_details: {
        name: $('#name').val(),
      },
    })
    .then(function(result) {
      if(result.error) {
        console.log(result.error)
      } else {
        console.log(result.paymentMethod.id)
        console.log("winning")
        $("#cc").val(result.paymentMethod.id)

        Rails.ajax({
          url: "/donations",
          type: "post",
          data: "#{params}",
          success: function(data) {
            console.log("foo")
          },
          error: function(data) {}
        })
      }
      // Handle result.error or result.paymentMethod
    });
  });

1. Indentation is all messed up starting on line 113 here. You should fix that up so it's easier to follow the code here. Maybe because of the indentation you didn't notice 👇

2. stripe.createPaymentMethod is called even if the amount input is empty. I assume you'll display an error in this case eventually.

3. You would be calling the donations controller using $.ajax, right? I don't see any code that attempts to make that call to the controller with the param you mentioned.

4. the stripe.createPaymentMethod is created (after) the button is clicked

   Right. Were you expecting or wanting something different? I'm not sure I see the problem.

1. Fixed

2. correct that will be fixed

3. Wouldn't I be calling it with Rails.ajax? I don't know how to make that call.

4. So the problem I am having now is that when I click the button stripe.createPaymentMethod runs and gets the payment method but I cant get it passed to the controller when that happens.