Rails Stripe payment and form using 1 submit

Question

My question is very similar to Looking to Submit Rails Form Only After Successful Stripe Checkout Payment. I tried the solution accepted there but it did not work for me.

I am using Rails 4.2, Stripe integration is already implemented and I added a Survey form to the same page as the Stripe payment page. The Survey form displays correctly and saves if I use the submit button from the partial. But I am trying to submit the form (create and save) if the form and the credit card payment is valid using one submit button on the Stripe payment page.

It looks like the Stripe payment form is being submitted through js.

payments/partials/_ticket_payment_panel.html

<form action='/payments/pay_for/receive_payments' id="ticket-form" method="POST">
  // form fields 
</form>


<% content_for :scripts do %>

  <script type="text/javascript" charset="utf-8">
    $(function () {
        var $form = $('#ticket-form');
        //var $survey = $('#survey-form');
        $form.submit(function (event) {
            // Disable the submit button to prevent repeated clicks:
            $form.find('.submit').prop('disabled', true);
            // Request a token from Stripe:
            Stripe.card.createToken($form, stripeResponseHandler);
            // Prevent the form from being submitted:
            return false;
        });
    });

    function stripeResponseHandler(status, response) {
        var $form = $('#ticket-form');
        if (response.error) {
            // Show the errors on the form
            $('.submit').removeProp('disabled');
        } 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
            //execute this block only if plan exists -> helpers/payments/application_helper.rb

            $form.get(0).submit();
        }
    }
  </script>

<% end %>

The Stripe submit works but it does not submit the Survey form. I tried adding var $survey = $('#survey-form'); and submit in the js. But it either only submits the form and not the Stripe payment or vice versa depending on which comes first.

I also tried to add the save in the controller.

pay_for_controller

def receive_payments
  @survey = Survey.new
  @survey.userprofile_id = current_user.userprofile.id
  skills = params[:skills]
  work_type = params[:work_type]
  @survey.save

  //credit card attempts, delayed jobs code 
end

This is my survey form

<%= bootstrap_form_for(@survey, :html => { :id => "survey-form" } ) do |f| %>

  //form fields 
  <%= f.submit "Apply", class: 'action-btn btn-rounded btn-large' %>

<% end %>

Currently, individually they submit/save correctly so I think the link between the model and controller are fine. But I can't seem to alter the js code or controller to get both the Survey form and the Stripe payment to save.

Are these forms completely separate from each other or do you have one form inside of another? — Graham S.
The forms are completely separate from each other. But both forms are rendered in the same page partial. — teresa
You can't submit two different form from single request. You can solve this situation in two ways. 1. Combine both form into single form, 2. save the survey form data via AJAX call and submit stripe form upon response from your AJAX call. — Zico
1. If I combine both forms into a single form, then I would not be able to save certain fields to survey table and credit card info to Ticket table? 2. I will try this suggestion out, does this mean there are 2 buttons? One to submit survey form data via AJAX. Then show stripe form upon successful survey form submit and submit stripe form? — teresa

Zico Zico · Accepted Answer · 2017-06-15T05:56:11

Following rough logic explained solution by single submission

Assuming Stripe request will be called when two forms (stripe, survey) are ready. Then you need to make a AJAX request (post survey data) after successfully getting token from Stripe, then Stripe form submit

function stripeResponseHandler(status, response) {
        var $form = $('#ticket-form');
        if (response.error) {
            $('.submit').removeProp('disabled');
        } else {
            var token = response.id;
            //here is the ajax call to submit survey
            $.ajax({
              type: "POST",
              url: "url/of/your/survey/form/post",
              data: "{empid: " + empid + "}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(result){
                   //submit stripe form only if the survey data saved
                   $form.get(0).submit();
              },
              error: function(){
                   //handle error situation if post request failed
              }
            });
        }
    }

Rails Stripe payment and form using 1 submit

1 Answers