example-code/javascript-vue/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>Select a payment method</h4>

	<div class="sliding-menu">
	<a @click="method = 'payeer'" :class="{selected: method == 'payeer'}">Payeer</a>
	<a @click="method = 'pm'" :class="{selected: method == 'pm'}">Perfect Money</a>
	<div :class="{right: (method == 'pm')}" class="menu-slider"><div></div></div>
	</div>

	<div v-if="method == 'payeer'" class="payment-window">
	<img src="../../images/payeer.png" alt="">
	<p>Payeer allows you to pay securely by transfering your choice of cryptocurrency
	to a temporary address.
	</p>
	</div>

	<div v-if="method == 'pm'" class="payment-window">
	<img src="../../images/perfect_money.svg" alt="">
	<p>Pay by transfering USD from your Perfect Money wallet.</p>
	</div>

	<div id="agreement-check">
	<input v-model="agreed" type="checkbox"><label>I have read and agree to the <a
	href="/terms-and-policy">Terms and Policy</a> and will not pursue a dispute or chargeback.</label>
	<div id="payment-error"></div>
	</div>
</section>

<section class="credits-confirm">
	<button @click="pay" :disabled="!ready"
	class="brand-btn">Buy<loading v-if="loading"></loading></button>
</section>

</template>

<script>
import Loading from '../icons/loading.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
	})
}

function pay() {
	if (this.method == 'payeer') {
		this.payPayeer()
	} else if (this.method == 'pm') {
		this.payPm()
	}
}

function makeInput(name, value) {
	let input = document.createElement('input')
	input.type = 'hidden'
	input.name = name
	input.value = value
	return input
}

function payPayeer() {
	fetch('/panel/payeer', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'packs': this.packs})
		}).then(response => {return response.json()}).then(data => {
			let form = document.createElement('form')
			document.body.appendChild(form)
			form.method = 'POST'
			form.action = 'https://payeer.com/merchant/'
			form.appendChild(this.makeInput('m_shop', data.shop))
			form.appendChild(this.makeInput('m_orderid', data.transaction))
			form.appendChild(this.makeInput('m_amount', data.amount))
			form.appendChild(this.makeInput('m_curr', 'USD'))
			form.appendChild(this.makeInput('m_desc', data.description))
			form.appendChild(this.makeInput('m_sign', data.signature))
			form.appendChild(this.makeInput('m_params', data.params))
			form.appendChild(this.makeInput('m_cipher_method', 'AES-256-CBC'))
			form.submit()
			/* console.log(data.signature) */
		})

}

function payPm() {
	fetch('/panel/pm', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'packs': this.packs})
		}).then(response => {return response.json()}).then(data => {
			let form = document.createElement('form')
			document.body.appendChild(form)
			form.method = 'POST'
			form.action = 'https://perfectmoney.is/api/step1.asp'
			form.appendChild(this.makeInput('PAYEE_ACCOUNT', data.account))
			form.appendChild(this.makeInput('PAYEE_NAME', 'Trendplays Network'))
			form.appendChild(this.makeInput('PAYMENT_AMOUNT', data.amount))
			form.appendChild(this.makeInput('PAYMENT_UNITS', 'USD'))
			form.appendChild(this.makeInput('PAYMENT_ID', data.transaction))
			form.appendChild(this.makeInput('STATUS_URL',
			'https://trendplays.com/hooks/pm-transaction'))
			form.appendChild(this.makeInput('PAYMENT_URL',
			'https://trendplays.com/panel/transaction-complete'))
			form.appendChild(this.makeInput('PAYMENT_URL_METHOD', 'POST'))
			form.appendChild(this.makeInput('NOPAYMENT_URL',
			'https://trendplays.com/panel/transaction-failed'))
			form.appendChild(this.makeInput('NOPAYMENT_URL_METHOD', 'GET'))
			form.appendChild(this.makeInput('SUGGESTED_MEMO', data.description))
			form.appendChild(this.makeInput('SUGGESTED_MEMO_NOCHANGE', true))
			form.submit()
		})
}

function ready() {
	if (this.packs.credis10 < 0) {
		return false
	} else if (this.packs.credis50 < 0) {
		return false	
	} else if (this.packs.credis100 < 0) {
		return false
	} else if (this.packs.credis1000 < 0) {
		return false
	}

	return this.total > 0 && !this.loading && this.agreed
}

export default {
	components:{Loading},
	data() {
		return {packs: {credits10: 0, credits50: 0,
		credits100: 0, credits1000: 0}, loading: false, method: 'payeer',
		agreed: false
		}
	},
	computed: {total, ready},
	methods: {getSecret, pay, payPm, payPayeer, makeInput},
	props: ['preferred', 'token'],
	emits: ['purchaseComplete'],
}
</script>