CODEWITHSUNDEEP
vue.jsstripe-payments
Galivan
Galivan

Reputation: 5328

Vue: Stripe is not defined - does stripe need to be included everywhere?

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?

Upvotes: 6

Views: 7252

Answers (2)

Eglise
Eglise

Reputation: 11

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

Upvotes: 1

Floyd Watson
Floyd Watson

Reputation: 408

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.

Upvotes: 15

Related Questions