javascript - 按钮单击导致多个 Stripe 模态弹出

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 个表单，一个接一个。我无法确定导致多个请求被触发的原因。