Menu
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>
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>
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?
419
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.
151
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>
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.
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
