Javascript 自定义条带签出按钮在没有重复脚本的情况下无法工作

我在Rails应用程序（下面的第1部分）中有一个运行良好的条带签出按钮。我想自定义按钮样式，所以我按照指南添加了自定义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 -->

现在订阅
var handler=StripeCheckout.configure({
键：“”，
图像：'/img/documentation/checkout/marketplace.png'，
区域设置：“自动”，
令牌：函数（令牌）{
var-tokenInput=$（“”）.val（response.id）；
var emailInput=$（“”）.val（response.email）；
$（“表单”）.append（tokenInput）.append（emailInput）.submit（）；
}
});
$（“#订阅按钮”）。在（'click'，函数（e）{
handler.open({
名称：“”，
说明：'每月订阅'，
电子邮件：“”
数量：
});
e、 预防默认值（）；
});
//关闭页面导航上的签出
$（窗口）.on（'popstate'，function（））{
handler.close（）；
});

在执行类似操作时，我遇到了相同的问题

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

视图

charges/new.html.erb

如下所示：

捐赠
var handler=StripeCheckout.configure({
关键字：“pk\U测试\U iasdfkjasnflkajshdfa”，
图像：'/img/documentation/checkout/marketplace.png'，
区域设置：“自动”，
令牌：函数（令牌）{
//您可以使用“token.ID”访问令牌ID。
//获取服务器端代码的令牌ID以供使用。
}
});
$（'donateButton'）。在（'click'，函数（e）{
//使用其他选项打开签出：
handler.open({
名称：“演示站点”，
描述：“2个小部件”，
金额：2000
});
e、 预防默认值（）；
});
//关闭页面导航上的签出
$（窗口）.on（'popstate'，function（））{
handler.close（）；
});