Stripe javascript submits form as HTML, when it should be JS

Question

I've created a form that has remote: true set on, and the create action responds to JS. Now when I added Stripe:

<script>
$(function() {
  var $form = $('#payment-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) {
  // Grab the form:
  var $form = $('#payment-form');

  if (response.error) { // Problem!

    // Show the errors on the form:
    $form.find('.card-payment-errors').text(response.error.message);
    $form.find('.submit').prop('disabled', false); // Re-enable submission

  } else { // Token was created!

    // Get the token ID:
    var token = response.id;

    // Insert the token ID into the form so it gets submitted to the server:
    $form.append($('<input type="hidden" name="stripeToken">').val(token));

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

even though my form has been set as remote, it submits it as an HTML. So I get redirected and the controller returns ActionController::UnknownFormat because it doesn't know how to respond to HTML.

How can I make Stripe work the way it's supposed to, but have it not trigger the form as HTML. In console it also confirms: Processing by OrdersController#create as HTML

Ywain · Accepted Answer · 2016-06-09 08:36:17Z

1

In the stripeResponseHandler callback, you're submitting the form:

// Submit the form:
$form.get(0).submit();

This bypasses Rails' remote: true mechanism. Since you want to send the token in an AJAX request, you need to do this explicitly in the handler, by calling $.ajax(...) rather than $form.get(0).submit.

I found this blog post that explains how to do exactly that!

answered Jun 9, 2016 at 8:36

Ywain

17.6k4 gold badges57 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Stripe javascript submits form as HTML, when it should be JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related