我在结帐表单中使用Vue组件。
条带js(v3)文件包含在标题部分中。
表单在Component
中这个组件有两个部分。一种是从用户处获取付款详细信息,另一种是提交卡详细信息。
<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(在此版本之后不推荐在自己的表单上获取输入)。
答案 0 :(得分:0)
在mounted
。将setTimeout
回调更改为箭头功能,否则this
将指向Window
而不是Vue
。
mounted() {
setTimeout(() => {
this.showStripeForm = false
}, 2000)
}
此外,您访问DOM的方式不是Vue-ish。您可以在要在代码中使用的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.
*/