Multiple popups appearing in prod (on Heroku) but not locally

Question

I had this issue once before (Button click causes multiple Stripe modals to pop up) but the reason previously was because I had two callbacks both triggering the same event (open the Stripe checkout modal).

However, here the issue is different. I only have one callback triggering it (the clicking of a button), and locally, it behaves as expected, and only one modal pops up. However, on Heroku, two popups appear one over the other. I cleared my assets and rebuilt from scratch but the issue persists.

Here is the code of the page:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

<div class="panel panel-default">
<div class="panel panel-header">
  <h1 style="text-align: center"> <%= current_user(@conn).name %> </h1>
</div>

<div class="panel panel-content">
<%= if current_user(@conn) do %>

<%= if current_user(@conn).instagram_token == nil do %>
<button onclick="location.href='<%= @url %>&current_user=<%= current_user(@conn).id %>'" type="button" class="btn btn-primary btn-md">
Login Instagram

</button> </br> </br>
<% end %>

  <p> <%= current_user(@conn).home %> </p>



<%= if current_user(@conn).instagram_token != nil do %>

  <button onclick="location.href='/instagram'" type="button" class="btn btn-primary btn-md">
    Instagram Feed
  </button>



<% end %>
<%= if current_user(@conn).customer_id do %>
<p> Stripe customer_id: <span class="keys"><%= current_user(@conn).customer_id %></span> </p>
<p> Stripe account_id: <span class="keys"><%= current_user(@conn).connect_id %></span> </p>
<p> Stripe pub_key: <span class="keys"><%= current_user(@conn).publishable_key %></span> </p>
<p> Stripe secret_key: <span class="keys"><%= current_user(@conn).secret_key %></span> </p>
<% else %>
            <button id="addcard" 
                    onclick="addCardFunction()"
                    title="Add payment information" 
                    data-name="<%= current_user(@conn).name %>" 
                    data-email="<%= current_user(@conn).email %>" 
                    class="btn btn-primary">
                  Add Card
            </button>

<% end %>
 <style>
  .keys {
    font-size: large;
    color: blue;
  }
  </style>

<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#profile_picture_modal">
  Add Profile Picture
</button>


<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#modal1">
  Add Bank Account
</button>

<script>

</script>
<!-- THEN HAVE OPTION FOR INSTAGRAM OR FILE UPLOAD-->



<% end %>


</div>

</div>


function addStripeInformation(data) {
  console.log("hey");
  var handler = StripeCheckout.configure({
    key: 'pk_test_k90DPHCGKmfYhYa5anVRrVKy',
    // key: 'pk_live_Q43jYi6k0EatjdmDkVYivYQY',
    token: function(token) {
      $.ajax({
        url: '/users/customer',
        type: "POST",
        beforeSend: function(xhr) {
          xhr.setRequestHeader('x-csrf-token', '<%= get_csrf_token() %>')
        },
        data: {
          "token" : token.id,
          "email" : data.email
        },
        success: function(data, e) {
          console.log(data);
        }
      });
    }
  });


  $(function(){
    // Open Checkout with further options
    handler.open({
      email: data.email,
      name: data.name,
      description: 'You\'ll be eating before you know it',
      zipCode: false,
      panelLabel: "Add Information",
      allowRememberMe: false
    });
  });

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


function addCardFunction() {
    var name = $('#addcard').attr('data-name');
    var email = $('#addcard').attr('data-email');
    addStripeInformation({'name' : name, 'email' : email});
    return false;
}

</script>

Answer 1

The problem was I was using multiple JQuerys, removing them and using bower/npm solved my problem