CODEWITHSUNDEEP
javascriptruby-on-railsstripe-payments
Bitwise
Bitwise

Reputation: 8461

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. 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?

Upvotes: 23

Views: 41804

Answers (6)

Daniele Rugginenti
Daniele Rugginenti

Reputation: 734

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);

Upvotes: 0

laurent
laurent

Reputation: 90776

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");

Upvotes: 6

mani gujjula
mani gujjula

Reputation: 99

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>

Upvotes: 8

Ganesh Raju
Ganesh Raju

Reputation: 105

You might use something like this

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

Upvotes: 4

Rene Chan
Rene Chan

Reputation: 985

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.

Upvotes: 5

Juanse Cora
Juanse Cora

Reputation: 935

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.

Upvotes: 35

Related Questions