example-code/javascript-vue/js/panel/payment-card.vue

<template>
	<form id="payment-form" action="">
	<label for="name">Name on Card</label>
	<input @input="$emit('updateBillingName', $event)" id="billing-name" type="name">
	<div id="card-element"></div>
	<div id="card-errors"></div>
	<div id=save-card>
	<input name="save-card" type="checkbox" checked="true">
	<label for="">Save Card</label>
	</div>
	</form>
</template>

<script>
function mountPaymentForm() {
	let card = this.stripe.elements().create('card')
	card.mount('#card-element')
	this.$emit('setCard', card)

	card.on('change', function(event) {
	let displayError = document.getElementById('card-errors');
	if (event.error) {
		displayError.textContent = event.error.message;
		displayError.textContent = '';
		this.$emit('cardValid', true)
	} else {
		displayError.textContent = '';
		this.$emit('cardValid', true)
	}
	}.bind(this));
}

export default {
	data() {
		return {billingName: null}
	},
	methods: {mountPaymentForm},
	props: ['stripe'],
	mounted: mountPaymentForm,
	emits: ['updateBillingName', 'cardValid', 'setCard']
}
</script>