Nuxt 中没有定义 Stripe

Question

我想将条纹元素添加到我的 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/

Answer 1

您正在将 stripe for 包含到脚本中，因此它将被加载到浏览器中。但是nuxt是SSR。您的脚本部分中的代码也将在服务器上执行。在服务器上没有条纹，所以它不会工作。您需要在挂载钩子中执行所有创建 Stripe 的代码，该代码仅在客户端上执行