Vue.js &引用；接收到未知参数“；在Nuxt/Vue中使用条带元素和SetupIntent

好的，我正在尝试确认一个设置意图，这样我可以保存一张卡，以便以后付款。我的后端是Laravel，前端是Nuxt。我只是想让Vue保存我的卡。我的系统设置为在创建新帐户时将clientSecret保存在数据库中。然后，当我尝试将卡添加到客户的帐户时，我使用axios检索clientSecret并在confirmCardSetup方法中使用它，如所述。当我试图实际保存卡时，它返回了一个错误。我想可能是我把Vue代码写错了。我就是这样做的：

import {mapGetters} from 'vuex'
import Message from '~/components/Message'

export default {
    middleware: 'auth',
    name: 'account',
    data(){
        return {
            userData: {},
            error: null,
            success: null,
            intent: '',
            clientSecret: '',
            elements: null,
            card: null,
        };
    },
    components: {
        Message,
    },
    computed: {
        ...mapGetters(['loggedInUser'])
    },
    mounted(){
        this.elements = this.$stripe.import().elements()
        this.card = this.elements.create('card', {})
        this.card.mount(this.$refs.card)
        console.log(this.elements)
        console.log(this.card)

        this.getIntent()
    },   
    methods: {
        paymentIntent(){
            //evt.preventDefault()

            self.$stripe.import().confirmCardSetup(
                this.intent,
                {
                    payment_method: {
                        card: this.elements,
                        billing_details: {
                            name: this.$auth.$state.user.name,
                        },
                    },
                }
            )
            .then(
                res => {
                    if (res.error){
                        console.log(res.error)
                    }
                    else {
                        console.log(res)
                    }
                }
            )
        },
        async getIntent(){
            self = this
            self.$axios.get(`account/setup-intent/${self.$auth.$state.user.id}`,
                {
                    header: {
                        'Authorization': self.$auth.getToken('local')
                    }
                }
            )
            .then(
                res => {
                    self.intent = res.data.intent
                }
            )
            .catch(error => console.log(error))
        },...

这就是我得到的东西：

code: "parameter_unknown"
doc_url: "https://stripe.com/docs/error-codes/parameter-unknown"
message: "Received unknown parameters: _elements, _id, _timings, _controller, _pendingFonts, _commonOptions"
param: "payment_method_data[card][_elements]"
setup_intent: {id: "seti_1HlLvp2sfYHW6zV6gKlH4wRg", object: "setup_intent", cancellation_reason: null, client_secret: "seti_1HlLvp2sfYHW6zV6gKlH4wRg_secret_IM43ctpYc92lw7x7qgXIehrMVNOjML8", created: 1604872817, …}
type: "invalid_request_error"
__proto__: Object

最后，这是我的名片：

<!-- card -->
<p class="mt-4 mb-4 text-gray-800 border-b border-black font-medium">Payment information</p>
<div ref="card"></div>
<button 
    type="submit" 
    id="card-button"
    @click="paymentIntent"
    >Add Card
</button>

支付信息

添加卡

---

我做错了什么？

您应该使用

此.card

而不是

此.elements

此处：

        self.$stripe.import().confirmCardSetup(
            this.intent,
            {
                payment_method: {
                    card: this.elements,
                    billing_details: {
                        name: this.$auth.$state.user.name,
                    },
                },
            }
        )

---

我在使用WilliamDaSilva的nuxt stripe库。我确信这是一个很棒的库，但显然条带更新导致了很多东西被破坏。在头文件（nuxt.config.js文件）中添加条带，然后按照setupIntent文档很快解决了这个问题。应该先用第一方的解决方案

import {mapGetters} from 'vuex'
import Message from '~/components/Message'

export default {
    middleware: 'auth',
    name: 'account',
    data(){
        return {
            userData: {},
            error: null,
            success: null,
            clientSecret: '',
            card: null,
            stripe: Stripe(process.env.PUB_KEY),
        };
    },
    components: {
        Message,
    },
    computed: {
        ...mapGetters(['loggedInUser'])
    },
    
    mounted(){
        var elements = this.stripe.elements()
        this.card = elements.create('card')
        this.card.mount(this.$refs.cardelement)
        this.getIntent()
    },
    methods: {
        setupIntent(){
            this.stripe.confirmCardSetup(
                this.clientSecret,
                {
                    payment_method: {
                        card: this.card,
                        billing_details: {
                            name: this.$auth.$state.user.name,
                        },
                    },
                }
            )
            .then(
                res => {
                    if (res.error){
                        console.log(res.error)
                    }
                    else {
                        console.log(res)
                    }
                }
            )
        },
...

---

谢谢我这样做了，但现在我得到了“IntegrationError:请使用您用来创建此元素的

条带的同一实例来创建源或令牌。”知道为什么吗？您可能创建了多个条带实例，并且它们在不同的位置使用；确保只创建一个并缓存/检索它，而不是创建多个。好的，谢谢，我解决了它。我使用的是WilliamDaSilva的nuxt stripe软件包，但从未意识到stripe的更新破坏了该库中的许多内容。我只是在标题中添加了条带，然后按照文档进行操作。不知道为什么我以前没这么做。我只用了10分钟就搞定了。又是Thnx tho。