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

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

在Nuxt中未定义条纹

1 个答案: