title: How to use external JavaScript objects in Vue.js methods
body: <p>I'm trying to get Stripe working with my Vue.js 2 application. For PCI-DSS reasons, Stripe requires that their Javascript is <a href="https://stripe.com/docs/web/setup#setup" rel="nofollow noreferrer">always loaded from <code>js.stripe.com</code></a>. I've followed the instructions in:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components">How to add external JS scripts to VueJS Components</a></li>
  <li><a href="https://stackoverflow.com/questions/49330055/how-to-include-a-cdn-to-vuejs-cli-without-npm-or-webpack">How to include a CDN to VueJS CLI without NPM or Webpack?</a></li>
  </ul>
  
  <p>but I get a <code>'Stripe' is not defined</code> error when I try to use the library. These solutions seemed to be aimed at merely getting a <code>&lt;script&gt;</code> tag into the output HTML (e.g. for analytics), not actually consuming the functions and objects in that script. </p>
  
  <p>Here's what my component Javascript looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      export default {
          name: "PaymentPage",
          mounted() {
              let stripeScript = document.createElement('script');
              stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
              document.head.appendChild(stripeScript);
  
              let s = Stripe('pk_test_Fooo');
              console.log(s);
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried adding the script tag to my <code>public/index.html</code> file instead, but I get the same outcome. This would probably be my preferred route, since Stripe encourages developers to <a href="https://stripe.com/docs/web/setup#setup" rel="nofollow noreferrer">import their script on all pages on the site</a>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      // ...
      &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
    &lt;/head&gt;
  </code></pre>
  
  <p>How can I pull a script from an external CDN and use it within my component's Javascript?</p>
  
  <p>I'm aware of some libraries to integrate Vue.js with Stripe (e.g. <a href="https://github.com/matfish2/vue-stripe" rel="nofollow noreferrer">matfish2/vue-stripe</a> and <a href="https://github.com/jofftiquez/vue-stripe-checkout" rel="nofollow noreferrer">jofftiquez/vue-stripe-checkout</a>), but the former doesn't import properly for me (I'm hitting <a href="https://github.com/matfish2/vue-stripe/issues/24" rel="nofollow noreferrer">issue #24</a>) and the latter is built against the older Stripe API and the new version is still in beta.</p>