CODEWITHSUNDEEP
vue.js
user11092881
user11092881

Reputation:

Importing stripe to a Vue.js component

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

On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.

It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared. 

<template>
    <div>

    </div>

</template>
<script src="https://js.stripe.com/v3/"></script> 
<script>


export default {
  name: 'component',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

I don't want to import it directly inside my component, because it's not clean, what can I do?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://js.stripe.com/v3/"></script>
    <title>vue-app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Upvotes: 0

Views: 1926

Answers (2)

Christoffer
Christoffer

Reputation: 495

Late to the party, but here is a solution that works for me

Your index.html file looks fine:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://js.stripe.com/v3/"></script>
    <title>vue-app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:

<script>    
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)

export default {
  data() {
    return {
      // ...
    }
  },
  methods: {
    async confirmPayment() {
      const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
        receipt_email: '[email protected]',
      })
      console.log('paymentResult:', paymentResult)
    },
  },
}
</script>

Upvotes: 3

sebasaenz
sebasaenz

Reputation: 1956

I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.

Upvotes: 1

Related Questions