Stripe not referenced in Vue app

Posted on May 14, 2020

Getting the following error when initializing the card element…

"'Stripe' is not defined"

I have even imported the script tag for the stripe CDN in the index.html of my vue app so that its definitely rendered first but still to no avail.

No matter where I put the line

"let stripe = Stripe(process.env.STRIPE_PUBLIC_KEY),"

whether it be in the mounted function or as you have it in the script section, it still isn’t referencing anything.

Please help!

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

alexdo

June 30, 2023

Heya,

Just came across this answer and decided to write some general guidelines for anyone who comes across this in the future despite the old question.

Stripe might not be defined at the time your code is trying to access it. Here are some steps to troubleshoot:

Verify the Stripe API key is being correctly loaded from your environment variables. If you’re using VUE, make sure the key is added into your .env file and accessed as process.env.VUE_APP_STRIPE_PUBLIC_KEY.
Try moving the Stripe script tag in your HTML file to make sure that it’s loaded before your component is initialized. You should place it in the <head> tag and use the defer attribute.
Use window object e.g., let stripe = window.Stripe(‘YOUR_PUBLIC_KEY’); window provides access to the Stripe Class and you should be able to initialize the variable.