Uncaught ReferenceError: Stripe not defined - STRIPE ERROR

Question

I am trying to implement Stripe elements in my rails application, but I cannot properly enable stripe.js. 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 a page, I get this error in the Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR console Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR . I think this is due to the way I load stripe.js, but am I not sure?

Answer 1

I suspect that it happens that Stripe.js loads AFTER your own javascript. Try moving Stripe.js over your own javascript in the header.