Полоса не определена в Nuxt - PullRequest
Новая
       4

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

0 голосов
/ 21 октября 2019

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

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

Я вставил <script src="https://js.stripe.com/v3/"></script> вmy 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/

1 Ответ

2 голосов
/ 21 октября 2019

Вы включаете полосу для в скрипты, поэтому она будет загружена в браузер. Но нукст это ССР. И код в вашем разделе сценария также будет выполняться на сервере. И на сервере нет полосы, так что он не будет работать. Вам необходимо выполнить весь ваш код, который создает Stripe в монтируемом хуке, который выполняется только на клиенте

...