External javascript dependencies from online APIs

[parthradia]

Hi guys,

I would like to use the Stripe.js Checkout plugin to simplify payments in my Vue App. However, I'm having trouble figuring out where to place Stripe's provided script tag (that pulls the minified Stripe Checkout source from online) such that I can use its functionality throughout my Vue components.

Currently, I have it in my "index.html" file. I can access the Stripe's functionality from the "index.html" file directly, but I am unable to access its variables and functions from within any Vue component. Is Vue loader causing some kind of interference?

I'm a bit of a Vue newb, but I've researched mixins and plugins, and haven't found any support on how to use these when you have an online script dependency.

Any help would be greatly appreciated!

[yyx990803]

Make sure to include it before the bundled files?

[parthradia]

How can I be sure that it's being included before the bundled files? Does this mean just placing it at the very top of the "index.html" page?

Thanks again...

[parthradia]

Specifically, here is the variable that loads correctly on the index.html page.

var handler = StripeCheckout.configure({ key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', image: '', locale: 'auto', token: function(token) { // Use the token to create the charge with a server-side script. // You can access the token ID withtoken.id } })

But alas, I'm finding it difficult to access this variable handler from any loaded Vue component. I should point out that I'm using vue-loader in combination with vue-router and its router-view functionality.

Do I need to pass this variable into my loaded components in a special way? Is there even a method for me to do that?

[azamat-sharapov]

I once had an issue with <script> tags (not sure if it's related to your issue though). Basically if you have Vue component with <script> tag loading some remote script, when component is inserted to DOM, it won't load that remote script. That's how HTML works (or browsers do it for security), in my understanding. So I ended up loading script via JS, like following:

var el = document.createElement('script')
el.setAttribute('type', 'text/javascript')
el.setAttribute('src', 'script-url-here')
document.getElementsByTagName('head')[0].appendChild(el)

[parthradia]

Thanks for the reply azamat,

I'm able to get the script to load now, but I'm still not able to reference any of Stripe's API from within the script tags inside my separated Vue components. Is there a missing link I don't know about?

[parthradia]

Upon further inspection, it seems that I have the following (possibly problematic) pipeline:

In my main.js file, I register all my dependencies. In this case, I'm using vue-resource and vue-router. After registering the router I import all the components that I need to route too, and create a new vue-router instance that maps my URL's to the desired components. I then use the router to bootstrap the app to a primary div in my index.html page.

I think the problem lies in the fact that I've already begun importing Vue components before the index.html page has been loaded. Thus, any references to Stripe (or any other online library/API for that matter) within my imported components results in undefined errors and such.

Is there a way to get around this? Can I defer loading of the scripts within components until my index.html page has loaded?

[walkerstone]

I'm having exactly the same issue with Google Maps @pradia, exactly the same pipeline. Did you manage to find an elegant solution?

[anlek]

I'm also interested in figuring out a solution, I'm trying to use Orbit.js inside the app as a data loader but am unable to make it work.

[victordiaz]

Having the same problem using ace editor. I'm including a script tag in the main html template but I cannot reference it anymore.

The weird thing is that it used to work with old webpack configuration files generated using the vue cli. I updated the configuration to solve some problems and the reference of the ace editor variables stopped been accessible :/

[victordiaz]

I followed some suggestions from the gitter chat and worked perfecly. Just add the global variable to the .eslintrc.js file the following way and it will work like a charm :)

'globals': { "ace": true },

[anlek]

@victordiaz Thanks for sharing, I'll give it a try later today!

[hzuluaga]

Hello Pradia

Have you managed to make it work ? I am trying to implement Stripe Checkout with Vuejs but I am kind of lost ...Any help will be appreciated

[Upguard]

I'm having the same issue. I can't load it via the index.html and the npm version doesn't work, it gives a child_process error.. This sucks, puts my entire project on hold until I can figure it out.

[yyx990803]

Closing (outdated, question)

[egeersoz]

@yyx990803 I don't think your approach to this issue was helpful. Vue should provide a way to easily load external dependencies and make them available to the components.

[yyx990803]

@egeersoz The description was vague, it's impossible to figure out what really is wrong without going back and forth to extract more information on the exact setup, and that becomes equivalent to general technical support that isn't even directly related to vue-loader. I had given the only possible solution I could think of. If this is a bug, I'll fix it, but please don't expect a library author to fix all your problems.