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?

I had a similar error. Mine was because I was calling stripe inside another function. If you remove "var" from in front of "var stripe", it means that stripe is now GLOBAL and not LOCAL, which solved the issue for me. I also waited until page load until performing any actions. — Jayden Lawson
– Jayden Lawson, Commented Dec 20, 2019 at 23:55

Juanse Cora · Accepted Answer · 2017-05-14 20:46:52Z

35

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.

answered May 14, 2017 at 20:46

Juanse Cora

93510 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Altimus Prime Over a year ago

Could you explain more about why that matters?

mani gujjula · Accepted Answer · 2020-04-29 04:10:16Z

8

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>

edited Apr 29, 2020 at 4:10

answered Apr 28, 2020 at 2:48

mani gujjula

991 silver badge4 bronze badges

1 Comment

Borja Over a year ago

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn, and apply that knowledge to their own code. You are also likely to have positive feedback from users in the form of upvotes, when the code is explained.

laurent · Accepted Answer · 2021-05-27 17:19:07Z

7

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

answered May 27, 2021 at 17:19

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Comments

Rene Chan · Accepted Answer · 2018-12-17 02:02:42Z

5

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.

answered Dec 17, 2018 at 2:02

Rene Chan

1,0031 gold badge15 silver badges30 bronze badges

Comments

Ganesh Raju · Accepted Answer · 2020-04-28 18:43:04Z

4

You might use something like this

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

answered Apr 28, 2020 at 18:43

Ganesh Raju

1051 silver badge15 bronze badges

Comments

Daniele Rugginenti · Accepted Answer · 2022-08-02 08:36:56Z

0

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

answered Aug 2, 2022 at 8:36

Daniele Rugginenti

7348 silver badges9 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR

JS

FORM

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JS

FORM

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related