Question

之前我遇到过这个问题（Button click causes multiple Stripe modals to pop up），但之前的原因是因为我有两个回调都触发了同一个事件（打开Stripe checkout模式）。

但是，这里的问题不同了。我只有一个回调触发它（点击一个按钮），在本地，它的行为符合预期，只弹出一个模态。然而，在Heroku上，两个弹出窗口一个出现在另一个上面。我清理了资产并从头开始重建，但问题仍然存在。

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

问题是我使用多个JQuery，删除它们并使用bower / npm解决了我的问题

多个弹出窗口出现在prod（在Heroku上）但不在本地出现

1 个答案: