如果没有重复脚本，自定义 Stripe 结帐按钮将无法正常工作

Question

我在 Rails 应用程序（下面的第 1 部分）中有一个 Stripe Checkout 按钮，效果很好。我想自定义按钮样式，所以我按照指南 here 添加了自定义 Javascript 和按钮（第 2 部分）。

当包含这两个部分时，第二个按钮（第 2 部分）效果很好。当我删除第 1 部分时，第二个按钮不会弹出结帐对话框 - 相反，它只是提交没有 stripeToken 和 stripeEmail 的表单，从而导致错误。

有人可以阐明正在发生的事情以及如何解决这个问题吗？

<!-- Part 1 -->
<div class="hidden">
<script src="https://checkout.stripe.com/checkout.js"
              class="stripe-button"
              data-label="Subscribe"
              data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
              data-name="<%= @site.title %>"
              data-description="Monthly Subscription"
              data-amount="<%= @site.price %>"
              data-email="<%= current_user.email %>"></script>
</div>
<!-- End Part 1 -->

<!-- Part 2 -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<button class="btn btn-primary btn-large" id="subscription-button">Subscribe Now</button>

<script>
  var handler = StripeCheckout.configure({
    key: '<%= Rails.configuration.stripe[:publishable_key] %>',
    image: '/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
      var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id);
      var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email);
      $("form").append(tokenInput).append(emailInput).submit();
    }
  });

  $('#subscription-button').on('click', function(e) {
    handler.open({
      name: '<%= @site.title %>',
      description: 'Monthly Subscription',
      email: '<%= current_user.email %>'
      amount: <%= @site.price %>
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  });
</script>
<!-- End Part 2 -->

Answer 1

我运行在遵循类似的 tutorial 时遇到了同样的问题。

在视图的布局文件中包含 javascript include 标签解决了这个问题。

视图 charges/new.html.erb 就像：

<%=form_tag charges_path do %>
  <div id="error_explanation">
    <% if flash[:error].present? %>
        <p><%=flash[:error] %></p>
    <% end %>
  </div>    
  <article>
    <%=label_tag(:amount, 'Donation Amount:') %>
    <%=text_field_tag(:amount) %>
  </article>
  <article>
    <%=hidden_field_tag(:stripeToken) %>
  </article>
  <button id='donateButton'>Donate</button>
<% end %>

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_iasdfkjasnflkajshdfa',
    image: '/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
      // You can access the token ID with `token.id`.
      // Get the token ID to your server-side code for use.
    }
  });
  
  $('#donateButton').on('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: 2000
    });
    e.preventDefault();
  });
  
  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  });
</script>

每次我们的自定义按钮被按下时，checkout.js 脚本加载失败，后续代码开始执行。

要解决问题，只需包含

<%= javascript_include_tag "https://checkout.stripe.com/checkout/", "application" %>

在 <head> 标签内的支持布局文件（即本例中的 layouts/charges.html.erb）中。

如果没有重复脚本，自定义 Stripe 结帐按钮将无法正常工作

Custom Stripe checkout button not working without duplicate script

javascript

ruby-on-rails

stripe-payments