带有 Stripe JS v3 的 Vue 组件

Question

我在结帐表单中使用 Vue 组件。

stripe js (v3) 文件包含在标题部分中。

表单在组件中

这个组件有两个部分。一种是从用户那里获取付款明细，另一种是提交卡明细。

<template>

    <div class="payment_form">
       <div id="payment_details" v-if="showPaymentDetails">
        <!-- User input goes here. Like username phone email -->
       </div>
        <div id="stripe-form" v-if="showStripeForm">
            <form action="/charge" method="post" id="payment-form" @submit.prevent="createStripeToken()">
               <div class="form-row">
                    <label for="card-element">
                        Credit or debit card
                    </label>
                    <div id="card-element">
                        <!-- a Stripe Element will be inserted here. -->
                    </div>

                    <!-- Used to display Element errors -->
                    <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
            </form>
        </div>
    </div>

</template>
<script>
     import { Validator } from 'vee-validate';
        export default {

        data() {
            return {
                stripeToken: '',
                showPaymentDetails: true,
                showStripeForm: true,
            }
        },
        created() {
        },
        methods: {
            validateForm() {
                self = this;
                this.$validator.validateAll().then(result => {
                    if (result) {
                        // eslint-disable-next-line
                        alert('From Submitted!');
                        console.log(this.$data);
                        axios.post('/data',{
                            name:this.name,
                        })
                        .then(function (response) {
                            self.showStripeForm = true;
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        return;
                    }

                });
            },

            createStripeToken(){
                var form = document.getElementById('payment-form');
                form.addEventListener('submit', function(event) {
                    event.preventDefault();

                    window.stripe.createToken(card).then(function(result) {
                        if (result.error) {
                            // Inform the user if there was an error
                            var errorElement = document.getElementById('card-errors');
                            errorElement.textContent = result.error.message;
                        } else {
                            // Send the token to your server
                            console.log(result.token);
                        }
                    });
                });
            },
            initStripe(){
                window.stripe = Stripe('stripe_test_key_here');
                var elements = stripe.elements();
                var style = {
                    base: {
                        // Add your base input styles here. For example:
                        fontSize: '16px',
                        lineHeight: '24px'
                    }
                };

                // Create an instance of the card Element
                window.card = elements.create('card', {style: style});

                // Add an instance of the card Element into the `card-element` <div>
                window.card.mount('#card-element');

            }

        },
        mounted() {
            this.initStripe();
            setTimeout(function () {

                this.showStripeForm = false;
            },2000);
        }
    }
</script>

我尝试在页面加载时加载条带表单并尝试通过 showStripeForm 禁用该元素。

但是 vue 从条带服务器取消设置加载的条带卡表单并将 dom 保存到其原始状态。

所以我无法在 axios 回调上触发条带表单。

我不想用户条带结帐和条带 js v1（在此版本之后不推荐在您自己的表单上获取输入）。

Answer 1

在mounted。将setTimeout回调改为箭头函数，否则this将指向Window而不是Vue。

mounted() {
  setTimeout(() => {
     this.showStripeForm = false
  }, 2000)
}

此外，您访问 DOM 的方式也不是 Vue 风格的。您可以在要在代码中使用的 DOM 元素上使用 ref。例如：

<form action="/charge" method="post" ref="payment-form" @submit.prevent="createStripeToken()">

然后像这样从$refs 访问它：

var form = this.$refs['payment-form']
/* 
  Same result as document.getElementById('payment-form')
  but without using an id attribute.
*/