Question

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

在这个网站上，它说我们需要在index.html文件中导入带有script标签的文件，但是我注意到我遇到了js错误。

仅当我直接将脚本导入组件内部时，错误“未定义'条带'”消失了。

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

我不想直接将其导入组件内部，因为它不干净，我该怎么办？

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

Answer 1

晚了聚会，但这是一个对我有用的解决方案

您的index.html文件看起来不错：

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

然后在要使用它的组件中，可以使用window对象访问stripe，并设置可发布键。可以在方法中本地完成，也可以在组件中全局完成，就像这样：

<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@example.com',
      })
      console.log('paymentResult:', paymentResult)
    },
  },
}
</script>

Answer 2

我认为您应该将Stripe的脚本标签移到其余JavaScript代码之前。该代码可能正在尝试在Stripe对象加载之前访问它。

将Stripe导入Vue.js组件

2 个答案: