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 つのフォームが次々とポップアップします。複数のリクエストがトリガーされる原因を特定できません。