【问题标题】：Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR未捕获的 ReferenceError：未定义条纹 - 条纹错误
【发布时间】：2017-08-27 14:58:27
【问题描述】：

我正在尝试在我的 rails 应用程序中实现 Stripe 元素，但我似乎无法正确包含 stripe.js。这是我的应用程序.html

<%= tag :meta, name: "stripe-key", content: Figaro.env.stripe_publishable_key %>
<script type="text/javascript" src="https://js.stripe.com/v3/"</script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

JS

var stripe = Stripe($("meta[name='stripe-key']").attr("content"))
var elements = stripe.elements();

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#999',
      color: '#505652',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica Neue',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
// Add an instance of the card UI component into the `card-element` <div>
card.mount('#card-element');

表格

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
    </div>
    <div id="card-errors"></div>
  </div>

  <button>Submit Payment</button>
</form>

每次加载页面时，我都会在控制台Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR 中收到此错误。我认为这与我加载 stripe.js 的方式有关，但我不确定？

【问题讨论】：

第一个 script 标记格式不正确。
我遇到了类似的错误。我的是因为我在另一个函数中调用了条带。如果您从“var stripe”前面删除“var”，则表示该条带现在是 GLOBAL 而不是 LOCAL，这为我解决了这个问题。我也一直等到页面加载，直到执行任何操作。

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

【解决方案1】：

我怀疑发生的事情是 Stripe.js 在您自己的 javascript 之后加载。尝试在标题中将 Stripe.js 移动到您自己的 javascript 之上。

【讨论】：

【解决方案2】：

可能会迟到，但如果其他人有同样的问题，只需在您的

中添加以下内容

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

知道他们建议尽快迁移到 v3。

【讨论】：

【解决方案3】：

Stripe.js 现在在所有其他脚本之后加载，这意味着它不再立即可用。我已将脚本从 body 标签移动到 head 标签。

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

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。在解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。

【解决方案4】：

你可能会使用这样的东西

<%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload' %>

【讨论】：

【解决方案5】：

让我失望的是他们的文档有教程，他们跳过了 Stripe 库的初始化。因此，如果您从这些教程之一开始并尝试他们的示例代码，它将无法正常工作。

相反，您需要在脚本中的某处添加这一行：

var stripe = Stripe("your_stripe_publishable_key");

【讨论】：