时间戳

首页 > 解决方案 > 将条带导入 Vue.js 组件

vue.js - 将条带导入 Vue.js 组件

问题描述

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

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

只有当我直接在组件内导入脚本时，错误“'Stripe' is not defined”才消失。

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

标签： vue.js

解决方案

派对迟到了，但这里有一个适合我的解决方案

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

推荐阅读