条纹未被调用

Question

我正在尝试使用 Vue.js 作为我的前端来调用 Stripe 并创建一个令牌，然后将其发送到我的后端。我已经使用纯 HTML/JS 测试了所有内容，并且一切正常，我的问题在于尝试使用 Vue.js 我认为我的问题可能在于我如何绑定条带公钥。下面是我的代码，我的输出为零，我只是被重定向到同一页面，但在 URL 的末尾有?。没有别的，控制台什么也没有显示，也没有错误消息或任何东西发送到我的后端。

模板代码

还有更多但不相关

<div class="col-md-8">
    <card class='stripe-card col-md-8'
        :class='{ complete }'
        :stripe='stripeKey'
        :options='stripeOptions'
        @change='complete = $event.complete'
    />
    <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Submit Payment Details</button>
   <br>
</div>

添加了相关的脚本部分

import { Card, createToken } from 'vue-stripe-elements-plus'
import axios from 'axios';

export default {
    components: { Card },
    data() {
        return {
            errorMessage: null,
            successMessage: null,
            complete: false,
            stripeKey: process.env.VUE_APP_STRIPE_PUB_KEY,
            stripeOptions: {
                // see https://stripe.com/docs/stripe.js#element-options for details
                hidePostalCode: true
            },
            current: {
                stripe: {
                    plan: null,
                    last4: null
                }
            },
        }
    },
    methods: {
        pay () {
            createToken().then(result =>  {
                axios.post('/billing/updateCard', {
                token: result.token,
                })
                .then(res => {
                if(res.data.success == true) {
                    this.successMessage = res.data.message
                    console.log(res.data.message)
                }
                if(res.data.success == false) {
                    this.errorMessage = res.data.message // Display error message from server if an error exists
                }
                })
                .catch((err) => {
                if(err) console.log(err)
                if(err) this.$router.push('/company/settings?success=false')
                })
            }); 
        }
    }
}
</script>

我通过执行<p>{{ stripeKey }}</p> 并看到值显示来检查 API 密钥实际上是否在数据值中。所以是的，密钥在那里并且密钥有效（测试复制/粘贴到我的 HTML/JS 测试中）

Answer 1

created(){
   this.key=process.env.VUE_APP_STRIPE_KEY;
}

试试这个，我在我的项目中使用了这段代码并且它工作了......问题可能是当我们渲染 idk 时你的密钥尚未初始化。也许关键根本不是问题。试试这个，让我知道是否可行，我们将一起调试它。