0

I want to add stripe elements to my nuxt js page However, I got an error

Stripe is not defined

I have inserted the <script src="https://js.stripe.com/v3/"></script> on my nuxt.config.js

Here's the code 

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

My payment page

<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>

I followed this tutorial and still can't fix it

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

Phil
  • 157,677
  • 23
  • 242
  • 245
airsoftFreak
  • 1,450
  • 5
  • 34
  • 64
  • Where **exactly** do you see this error? Does it happen to include something like `[no-undef]`? – Phil Oct 20 '19 at 22:45
  • Possible duplicate of [ESLint's "no-undef" rule is calling my use of Underscore an undefined variable](https://stackoverflow.com/questions/34820817/eslints-no-undef-rule-is-calling-my-use-of-underscore-an-undefined-variable) – Phil Oct 20 '19 at 23:20

1 Answers1

5

You are including stripe for into scripts, so it will be loaded in browser. But nuxt is SSR. And the code in your script section will be also executed on server. And on server there no stripe, so it wont work. You need to execute all your code that create Stripe in mounted hook, which is only executed on client

Aldarund
  • 17,312
  • 5
  • 73
  • 104