Полоса не определена в Nuxt

Я хочу добавить элементы полосы на мою страницу nuxt js, однако, я получил ошибку

Полоса не определена

Я вставил <script src="https://js.stripe.com/v3/"></script> на мой nuxt.config.js

Вот этот код

 head: {
    title: process.env.npm_package_name || "",
    script: [{ src: "https://js.stripe.com/v3/" }],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
    ]
  },

Моя страница оплаты

<template>
  <div>
    <div ref="card"></div>
    <button v-on:click="purchase">Purchase</button>
  </div>
</template>

<script>
let stripe = Stripe("Key"),
  elements = stripe.elements(),
  card = undefined;
export default {
  mounted: function() {
    card = elements.create("card");
    card.mount(this.$refs.card);
  },
  methods: {
    async purchase() {
      let result = await stripe.createToken(card);
    }
  }
};
</script>

Я следовал этому учебнику и до сих пор не могу это исправить

https://alligator.io/vuejs/stripe-elements-vue-integration/