<template>
	<form id="payment-form" action="">
	<label for="name">Name on Card</label>
	<input v-model="billingName" 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() {
	this.card = this.stripe.elements().create('card')
	this.card.mount('#card-element')

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

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