带有 Stripe JS v3 的 Vue 组件

Posted 2023-02-23

【中文标题】带有 Stripe JS v3 的 Vue 组件

【英文标题】：Vue Component with Stripe JS v3

【发布时间】：2017-12-27 02:58:58

【问题描述】：

我在结帐表单中使用 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（在此版本之后不推荐在您自己的表单上获取输入）。

【参考方案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.
*/