5

When I tried to include the stripe dependency only for the template where I need it (in laravel blade):

@push ('head_scripts')
    <script src="https://js.stripe.com/v3/"></script>
@endpush

..I got the error 'ReferenceError: Stripe is not defined'. So I included it in my main "head" partial, so it was included everywhere. Then I ran into the same error when going into the admin section, because it's not included in that template.

But does it really need to be included everywhere?

It is only used in one vue component like this:

<script>
    let stripe = Stripe(`pk_test_zzzzzzzzzzzzzzz`);
    let elements = stripe.elements();
    let card = undefined;

This component seems to be evaluated even when it isn't rendered. Can I get around this issue in some way?

Galivan
  • 4,842
  • 9
  • 44
  • 76
  • It's probably not the solution you want, but I use dynamic embedding of the stripe script. – Daniel May 13 '19 at 17:18
  • Do you mean that you have the code locally and import it in the component using "import"? – Galivan May 13 '19 at 19:34
  • no, I have the component check if the script is loaded, and if not, it embeds the `script` tag to load it – Daniel May 13 '19 at 20:38
  • It's simple, Stripe need to be included anywhere that you use. If you use it on a page, load it on the page like you've done on page head. If you use it in a component, just include before your open ` – Noogen May 14 '19 at 03:37
  • 1
    Noogen: I just tried it (added the script in the component) but I still get the error - that is when I'm on a completely different place in the admin panel. – Galivan May 14 '19 at 08:37

2 Answers2

14

I was having this problem in a Vue app not using Laravel.

But to fix it i put the script <script src="https://js.stripe.com/v3/"></script> in my index.html

Then when referencing Stripe in a component i used window.Stripe That pointed to the script and fixed the ReferenceError: Stripe is not defined error.

Floyd Watson
  • 378
  • 3
  • 11
  • 1
    This worked for me, thanks a lot! Stripe docs are lacking in quite many ways imo. My implementation is like you said to add the script to index.html, then in the component where I want to call it just add `const stripe = window.Stripe('pk_live_asdfghjklzxcvbnm...')` or better yet to use environmental variables of course: `window.Stripe(process.env.VUE_APP_STRIPE_PK_LIVE)` – Christoffer Oct 07 '20 at 08:17
  • 1
    `windows.Stripe` was the trick that got me working. For anyone who can't control their `index.html`, then include external libraries (like Stripe) using methods described here: https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components – Ralph Bolton May 15 '21 at 07:50
  • Thanks winodw.Stripe worked for me as well – Daniya Niazi Oct 07 '21 at 18:02
1

Putting script in my index.html worked, but gave me performance issues when I published because it loads the script on every single page, instead of just where it's needed.

So instead I used import {loadStripe} from '@stripe/stripe-js/pure';. It delays loading Stripe until loadStripe is called.

This article helped me use the import: Importing Stripe.js as an ES Module into Vue

Eglise
  • 11
  • 1