未捕获的 ReferenceError：未定义条纹 - 条纹错误
[英]Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR
问题描述
I'm trying to implement Stripe elements into my rails app, but I can't seem to include the stripe.js correctly.
我正在尝试将 Stripe 元素实现到我的 rails 应用程序中，但我似乎无法正确包含 stripe.js。 Here is my application.html这是我的应用程序。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 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形式
<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>
Every time I load the page I get this error in the console Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR .每次加载页面时，我都会在控制台中收到此错误Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR 。 I think it has something the to do with the way I'm loading stripe.js but I'm not sure?我认为这与我加载 stripe.js 的方式有关，但我不确定？
6 个解决方案
解决方案1
20 已采纳 2017-05-14 20:46:52
I suspect what's happening is that Stripe.js is loading AFTER your own javascript.我怀疑正在发生的事情是 Stripe.js 在你自己的 javascript 之后加载。 Try moving Stripe.js above your own javascript in the header.尝试将 Stripe.js 移到标题中您自己的 javascript 上方。
解决方案2
4 2018-12-17 02:02:42
Might be late, but in case someone else have the same issue, just add the following in your可能会迟到，但如果其他人有同样的问题，只需在您的
<HEAD></HEAD>
<script src="https://js.stripe.com/v2/"></script>
Knowing that they recommend migrating to v3 asap.知道他们建议尽快迁移到 v3。
解决方案3
3 2020-04-28 02:48:14
Stripe.js is now loaded after all other scripts, which means it isn't available immediately anymore. Stripe.js 现在在所有其他脚本之后加载，这意味着它不再立即可用。 I have moved script from body tag to head tag.我已将脚本从 body 标签移动到 head 标签。
<head>
<script src="https://js.stripe.com/v3/"></script>
</head>
解决方案4
2 2020-04-28 18:43:04
你可能会使用这样的东西
<%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload' %>
解决方案5
0 2021-05-27 17:19:07
What tripped me off is that their documentation have tutorials where they skip the initialisation of the Stripe library.让我失望的是他们的文档有教程，他们跳过了 Stripe 库的初始化。 So if you start from one of these tutorials and try their sample code it just won't work.因此，如果您从这些教程之一开始并尝试他们的示例代码，它将无法正常工作。
Instead you need to add this line somewhere in your script:相反，您需要在脚本中的某处添加这一行：
var stripe = Stripe("your_stripe_publishable_key");
解决方案6
0 2022-08-02 08:36:56
Just init stripe just if function Stripe() is a function, and go retry with an interval every 500ms till the function is defined. Just init stripe just if function Stripe() is a function, and go retry with an interval every 500ms till the function is defined.
After that, clear the interval.之后，清除间隔。
So you can defer the stripe script and increase page load speed因此，您可以推迟条带脚本并提高页面加载速度
/// 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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.