example-code/javascript-vue/js/panel/transaction-endpoint.vue

<template>
<div v-once id="main">

<div v-if="active == '#transaction-complete' && user.paying" class="status-dialog">
	<img class="icon" src="../../images/checked2.svg" alt=""/>
	<h3>Purchase complete.</h3>
</div>

<div v-if="active == '#transaction-failed' && user.paying" class="status-dialog">
	<img class="icon" src="../../images/warning-colored.svg" alt=""/>
	<h3>Purchase failed.</h3>
</div>

</div>
</template>

<script>
export default {
	props: ['token', 'user', 'active'],
	emits: ['purchaseComplete'],

	//Should check that user is actualling in the paying state. If so, send get
	//request to panel/transaction-end. It's then() should emit a payment
	//complete to panel for a user state refresh.
	mounted() {
	fetch('/panel/clear-paying', {
		method: 'GET',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token}}).then(() => this.$emit('purchaseComplete'))
	}
}
</script>