trendplays/resources/js/panel/credits.vue

<template>
<section class="select-credits">
<div class="credits-pane"><h2>10 Credits</h2>
<h3>$10.99</h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits10" type="number"></div>
</div>

<div class="credits-pane"><div><h2>50 Credits</h2><span>+5 Free Credits</span></div>
<h3>$54.99 </h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits50" type="number"></div>
</div>

<div class="credits-pane"><div><h2>100 Credits</h2><span>+10 Free Credits</span></div>
<h3>$109.99</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits100" type="number"></div>
</div>

<div class="credits-pane"><div><h2>1000 Credits</h2><span>+150 Free Credits</span></div>
<h3>$1010.00</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits1000" type="number"></div>
</div>
	<h3>Total: ${{total.toLocaleString('en')}}</h3>
	<div id="credits-errors"></div>
</section>

<section id="payment-section">
	<h4>Payment Method</h4>
	<form id="payment-form" action="">

	<label for="name">Name on Card</label>
	<input id="billing-name" type="name">
	<div id="card-element"></div>
	<div id="card-errors"></div>
	<div id=save-card>
	<input name="save-card" value="Save card" type="checkbox">
	<label for="">Save Card</label>
	</div>

	</form>
	<div id="payment-error"></div>
</section>

<section class="credits-confirm">
	<button @click="pay" :disabled="total == 0 || loading" class="brand-btn">Pay</button>
</section>
</template>

<script>
function total() {
	return this.packs.credits10*10.99 + this.packs.credits50*54.99
	+ this.packs.credits100*109.99 + this.packs.credits1000*1010
}

//Gets the secret key specific to chosen payment amount and user
function getSecret() {
	this.loading = true
	return fetch('/panel/secret', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'packs': this.packs})
	}).then((response) => {
		if (response.ok) {
			return response.text()
		} else {
			document.getElementById('credits-errors').textContent =
			`${response.status}: ${response.statusText}`
		}
	}).then(secret => {
		this.loading = false
		return secret
	})
}

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 = '';
	}
	});
}

//Gets key from the server then sends it with stripe
function pay() {
	this.getSecret().then(secret => {
		if (!secret) {return}
		return this.stripe.confirmCardPayment(secret, {
			payment_method: {
				card: this.card,
				billing_details: {name:
				document.getElementById('billing-name').value}
			}
		})
	}).then(result => {
		if (result.error) {
			document.getElementById('payment-error').textContent =
			result.error.message
		} else if (result.paymentIntent.status === 'succeeded') {
			document.getElementById('payment-error').textContent =
			'Purchase completed'
		} else {
			document.getElementById('payment-error').textContent =
			'An unknown error occured'
		}
	})
}

export default {
	data() {
		return {packs: {credits10: 0, credits50: 0,
		credits100: 0, credits1000: 0}, loading: false, stripe:
		Stripe(process.env.VUE_APP_STRIPE_KEY), card:
		null}
	},
	computed: {total},
	methods: {getSecret, mountPaymentForm, pay},
	props: ['token'],
	mounted() {
		this.mountPaymentForm()	
	}
}
</script>