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>

	<div class="sliding-menu">
	<a @click="selectSaved = true" :class="{selected: selectSaved}">Saved Card</a>
	<a @click="selectSaved = false" :class="{selected: !selectSaved}">New Card</a>
	<div :class="{right: !selectSaved}" class="menu-slider"><div></div></div>
	</div>

	<payment-card @set-card="(c) => {card = c}" @card-valid="(val) => {cardValid = val}"
	@update-billing-name="billingName = $event.target.value" :stripe="stripe"
	v-if="!selectSaved"></payment-card>

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

<section class="credits-confirm">
	<button @click="pay" :disabled="total == 0 || loading || !cardValid || !billingName"
	class="brand-btn">Buy<loading v-if="loading"></loading></button>
</section>
</template>

<script>
import Loading from '../icons/loading.vue'
import PaymentCard from './payment-card.vue'

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() {
	document.getElementById('credits-errors').textContent = ''
	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
	})
}

//Gets key from the server then sends it with stripe
function pay() {
	console.log()
	this.getSecret().then(secret => {
		if (!secret) {return}
		this.loading = true
		return this.stripe.confirmCardPayment(secret, {
			payment_method: {
				card: this.card,
				billing_details: {name:
				document.getElementById('billing-name').value},
			},
			setup_future_usage: document.querySelector(
			"#save-card input").value == 'on' ? 'off_session' : null
		})
	}).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'
		}
		this.loading = false
	})
}

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