Button click causes multiple Stripe modals to pop up

问题

This is my JS function that creates the form, which I verified works.

function addStripeInformation(data) {
  var handler = StripeCheckout.configure({
    key: 'KEY_EDITED_OUT',
    token: function(token) {
      $.ajax({
        url: '/charges/create',
        type: "POST",
        data: {
          "token" : token.id,
          "email" : data.email
        }
      });
    }
  });

  $('#customButton').on('click', function(e) {
    // Open Checkout with further options
    handler.open({
      email: data.email,
      name: data.name,
      description: 'Adding payment information',
      zipCode: false,
      panelLabel: "Add Information"
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  }); 
}

And the following is my HTML that triggers the above function.

  <% if current_user.stripe_id.nil? %>
  <li>
    <button class="button btn btn-default navbar-btn" id="customButton" 
    onclick="addStripeInformation({name: '<%= current_user.name %>', email: '<%= current_user.email %>'}); return false;">Add Payment Information</button>
  </li>          
  <% end %>

What happens is that usually 4 forms pop up sequentially, one over the next. I can't identify what is causing the multiple requests to be triggered.

来源：https://stackoverflow.com/questions/30472903/button-click-causes-multiple-stripe-modals-to-pop-up