按钮单击会弹出多个条纹模式

Question

这是我创建表单的JS函数，我验证了它的作用。

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();
  }); 
}

以下是触发上述功能的HTML。

  <% 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 %>

通常情况下，通常会依次弹出4个表单，其中一个表单会在下一个表单中弹出。我无法识别导致多个请求被触发的原因。