Utilizing external JavaScript objects within Vue.js methods

Question

Utilizing external JavaScript objects within Vue.js methods

I am currently working on integrating Stripe with my Vue.js 2 application. To comply with PCI-DSS requirements, Stripe mandates that their Javascript must always be loaded from js.stripe.com. I have followed the guidelines provided in:

How to add external JS scripts to VueJS Components
How to include a CDN to VueJS CLI without NPM or Webpack?

However, upon implementation, I encounter an error stating 'Stripe' is not defined when trying to use the library. It seems like these solutions are focused on merely inserting a <script> tag into the output HTML (e.g., for analytics) rather than actually utilizing the functions and objects within that script.

This is how my component's JavaScript code looks:

<script>
    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);
        }
    }
</script>

Even attempting to insert the script tag into my public/index.html file results in the same issue. Ideally, this would be my preferred method as Stripe recommends developers to import their script on all pages on the site.

<!DOCTYPE html>
<html lang="en">
  <head>
    // ...
    <script src="https://js.stripe.com/v3/"></script>
  </head>

Is there a way to fetch a script from an external CDN and effectively incorporate it into my component's JavaScript?

Although I am aware of some libraries that facilitate the integration of Vue.js with Stripe (such as matfish2/vue-stripe and jofftiquez/vue-stripe-checkout), I have encountered difficulties with them - matfish2/vue-stripe does not import correctly due to issue #24, while jofftiquez/vue-stripe-checkout is designed for the older Stripe API, with the new version still in beta.

javascript vue.js vuejs2 stripe-payments vue-component

Answer 1

Answer №1

Before checking if Stripe is available, ensure the script has enough time to load. Adjust your code to look like this:

<script>
    export default {
        name: "PaymentPage",
        mounted() {
            let stripeScript = document.createElement('script');
            stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
            stripeScript.onload = () => {
              let s = Stripe('pk_test_Fooo');
              console.log(s);
            };

            document.head.appendChild(stripeScript);
        }
    }
</script>

Answer 2

Before checking if Stripe is available, ensure the script has enough time to load. Adjust your code to look like this:

<script>
    export default {
        name: "PaymentPage",
        mounted() {
            let stripeScript = document.createElement('script');
            stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
            stripeScript.onload = () => {
              let s = Stripe('pk_test_Fooo');
              console.log(s);
            };

            document.head.appendChild(stripeScript);
        }
    }
</script>

Answer 3

Answer №2

After reading a helpful comment from yuriy636, I came to the realization that the errors I was encountering were related to the linter and its inability to fully understand my code.

To address this issue, I made the decision to move the script to my index.html file and effectively removed any linter errors by including the following line:

// eslint-disable-next-line no-undef
let s = Stripe('pk_test_Fooo');

Answer 4

After reading a helpful comment from yuriy636, I came to the realization that the errors I was encountering were related to the linter and its inability to fully understand my code.

To address this issue, I made the decision to move the script to my index.html file and effectively removed any linter errors by including the following line:

// eslint-disable-next-line no-undef
let s = Stripe('pk_test_Fooo');

Answer 5

Answer №3

When I encountered issues calling functions from a specific script, I found that specifying the ¨window¨ scope was necessary. Additionally, when needing to access Vue elements within the ¨onload¨ function, creating a new variable for the ¨this¨ instance proved to be helpful.

<script>
export default {
    name: "PaymentPage",
    mounted() {
        let stripeScript = document.createElement('script');
        // Creating a new variable for Vue elements.
        let self = this;

        stripeScript.onload = () => {
          // Calling a script function using the 'window' scope.
          window.Stripe('pk_test_Fooo');
          // Accessing other Vue elements
          self.otherVueMethod();
          
        };
        stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
        document.head.appendChild(stripeScript);
    }
}

I implemented this solution while working with Vue 2.6.

Answer 6

When I encountered issues calling functions from a specific script, I found that specifying the ¨window¨ scope was necessary. Additionally, when needing to access Vue elements within the ¨onload¨ function, creating a new variable for the ¨this¨ instance proved to be helpful.

<script>
export default {
    name: "PaymentPage",
    mounted() {
        let stripeScript = document.createElement('script');
        // Creating a new variable for Vue elements.
        let self = this;

        stripeScript.onload = () => {
          // Calling a script function using the 'window' scope.
          window.Stripe('pk_test_Fooo');
          // Accessing other Vue elements
          self.otherVueMethod();
          
        };
        stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
        document.head.appendChild(stripeScript);
    }
}

I implemented this solution while working with Vue 2.6.

Answer 7

Answer №4

To start using the features of Stripe, all you need to do is install the npm package with this command: npm install @stripe/stripe-js. After that, you can simply import it like any other library.

import { loadStripe } from "@stripe/stripe-js";

export default {
  async mounted() {
    // Initialize stripe
    const stripe = await loadStripe('your_stripe_key_here');
    this.stripe = stripe; // Save the instance of stripe for later use
    // You can now access the stripe instance in your methods or wherever needed
  },
}

This information was confirmed as accurate on January 6th, 2022.

Answer 8

To start using the features of Stripe, all you need to do is install the npm package with this command: npm install @stripe/stripe-js. After that, you can simply import it like any other library.

import { loadStripe } from "@stripe/stripe-js";

export default {
  async mounted() {
    // Initialize stripe
    const stripe = await loadStripe('your_stripe_key_here');
    this.stripe = stripe; // Save the instance of stripe for later use
    // You can now access the stripe instance in your methods or wherever needed
  },
}

This information was confirmed as accurate on January 6th, 2022.

Utilizing external JavaScript objects within Vue.js methods

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize the passed value within the $scope.$on function

What is the best way to open just a single detail in a b-table?

The pop-up menu is obstructed by the dialog box

Can wildcard paths be imported in React using Typescript?

Can you explain the distinction between using router.METHOD() versus router.route() in Express?

What is the best way to retrieve ViewBag data using jQuery?

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

Having trouble choosing an option from the dropdown menu in bootstrap

Prevent identical values from being added repeatedly to a table while updating in real-time

The scrolling experience in Next js is not as smooth as expected due to laggy MOMENTUM

Implementing long-lasting login functionality in React using JSON Web Tokens

How can jQuery be referenced?

Angular JS Array with N-level hierarchy

Navigating the AngularJS Directive Controller

Enhance the "content switcher" code

Utilizing both react useState and useLoaderData simultaneously can lead to an infinite loop error

Echo input and refresh on the current page upon submission

The try/catch block proves ineffective at handling a socket connection exception

Tips for accessing QInput element after mounting in Quasar 2

There was an error trying to read properties of undefined, specifically the 'prototype', in a code using Next.Js and Express