没有重复的脚本，自定义条纹结帐按钮不起作用答案

【问题标题】：Custom Stripe checkout button not working without duplicate script没有重复的脚本，自定义条纹结帐按钮不起作用
【发布时间】：2016-03-26 20:24:34
【问题描述】：

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

当这两个部分都包含在内时，第二个按钮（第 2 部分）效果很好。当我删除第 1 部分时，第二个按钮不会弹出 Checkout 对话框 - 相反，它只是提交没有 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 -->

【问题讨论】：

标签： javascript ruby-on-rails stripe-payments

【解决方案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）。

【讨论】：