logo标签列表

未捕获的引用错误：Stripe未定义 - Stripe错误

javascriptruby-on-railsstripe-payments
20

我正在尝试将Stripe元素集成到我的Rails应用程序中，但似乎无法正确地包含stripe.js。这是我的application.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>

JavaScript

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>
每次加载页面时，控制台都会出现此错误：未捕获的参考错误：Stripe未定义 - STRIPE ERROR。我认为这与我加载stripe.js的方式有关，但我不确定？
2
第一个 script 标签格式不正确。 - artin
我曾经遇到过类似的错误。我的问题是因为我在另一个函数中调用了stripe。如果你从"var stripe"前面移除"var"，这意味着stripe现在是全局的而不是局部的，这解决了我的问题。我还等待页面加载完成后再执行任何操作。 - Jayden Lawson
6个回答
33
我猜测发生的情况是Stripe.js在您自己的javascript之后加载。请尝试将Stripe.js放置在header中自己的javascript之前。
8

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

 <head>
   <script src="https://js.stripe.com/v3/"></script>
 </head>
3
虽然这段代码可能提供了问题的解决方案，但最好添加上为什么/如何运作的上下文。这可以帮助未来的用户学习，并将这些知识应用到他们自己的代码中。当代码被解释时，您还可能会得到用户的积极反馈，例如点赞。 - borchvm
5
可能有点晚，但如果其他人遇到相同的问题，只需在您的代码中添加以下内容即可：

。

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

他们建议尽快迁移到v3。

4

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

相反，您需要在脚本的某个位置添加以下行：

var stripe = Stripe("your_stripe_publishable_key");
3

你可能会使用类似这样的东西

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

如果函数Stripe()是一个函数，那么只需初始化条纹并在每500毫秒的间隔内重试，直到该函数被定义。

之后，清除间隔。

这样，您就可以推迟条纹脚本并提高页面加载速度。

/// init stripe var
var stripe; var stripeElements;
var setStripe = setInterval(function(){
    if (typeof Stripe === "function"){
        stripe = Stripe('YOUR PUBLIC KEY');
        stripeElements = stripe.elements();
        clearInterval(setStripe);
    } 
},500);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接