Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR
Question
I'm trying to implement Stripe elements into my rails app, but I can't seem to include the stripe.js correctly. Here is my 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>
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 . I think it has something the to do with the way I'm loading stripe.js but I'm not sure?
6 answers
solution1
20 ACCPTED 2017-05-14 20:46:52
I suspect what's happening is that Stripe.js is loading AFTER your own javascript. Try moving Stripe.js above your own javascript in the header.
solution2
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.
solution3
3 2020-04-28 02:48:14
Stripe.js is now loaded after all other scripts, which means it isn't available immediately anymore. I have moved script from body tag to head tag.
<head>
<script src="https://js.stripe.com/v3/"></script>
</head>
solution4
2 2020-04-28 18:43:04
你可能会使用这样的东西
<%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload' %>
solution5
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. 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");
solution6
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.
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.