hello i've trying to use stripe to make payment but each time i reload the page it gives me

Error in mounted hook: "ReferenceError: Stripe is not defined"

error in my console https://imagizer.imageshack.com/img923/1484/YKpP7X.jpg

my index.html file

 <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

this my script function for payment

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      error: "",
      stripe: null,
      card: null
    };
  },

  computed: {
    ...mapGetters([
      "getCart",
      "getCartTotalPriceWithShipping",
      "getEstimatedDelivery"
    ])
  },
  mounted() {
     this.stripe = Stripe("pk_test_51KGqWkHCcyZvTrDrTmAbtZkngRWbP0FCvV3bgZnz8GXuleqD1foNZ");
    let elements = this.stripe.elements();
    this.card = elements.create("card");
    this.card.mount(this.$refs.card);
  },
  methods: {
    submit() {
     
      let token = window.stripe.createToken(this.card);
      return axios({
        method: "post",
        token: token,
        totalPrice: this.getCartTotalPriceWithShipping,
        cart: this.getCart,
        estimatedDelivery: this.getEstimatedDelivery,
        url: "http://localhost:5000/api/payment",

        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer" + token,
          "x-access-token": token
        }
      })
        .then(response => {
          console.log(response);
          if (response.success) {
            // Do something like redirecting to the home page
            this.$store.commit("clearCart");
            this.$router.push("/");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    formatPrice(value) {
      let val = (value / 1).toFixed(2).replace(".", ",");
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    },
    clear() {}
  }
};
</script>

don't seem to know what's wrong, please someone help me out