Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tons fixes

Browse Source
This commit is contained in:
Edwin Eames
2025-08-25 17:58:30 -04:00
parent 4bcff598e6
commit adc1606312
15 changed files with 800 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/pages/authorize/PaymentForm.vue Normal file
View File

@@ -0,0 +1,174 @@
<!-- <template>
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h2 class="text-xl font-semibold mb-2">Direct Charge</h2>
<form @submit.prevent="submitDirectCharge">
<div class="form-control">
<label class="label">
<span class="label-text">Card Number</span>
</label>
<input type="text" v-model="directCharge.cardNumber" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Expiration Date (MM/YY)</span>
</label>
<input type="text" v-model="directCharge.expirationDate" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">CVV</span>
</label>
<input type="text" v-model="directCharge.cvv" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Amount</span>
</label>
<input type="number" v-model="directCharge.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-primary">Charge</button>
</div>
</form>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">Authorize and Capture</h2>
<form @submit.prevent="submitAuthorization">
<div class="form-control">
<label class="label">
<span class="label-text">Card Number</span>
</label>
<input type="text" v-model="authorization.cardNumber" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Expiration Date (MM/YY)</span>
</label>
<input type="text" v-model="authorization.expirationDate" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">CVV</span>
</label>
<input type="text" v-model="authorization.cvv" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Amount</span>
</label>
<input type="number" v-model="authorization.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-secondary">Authorize</button>
</div>
</form>
<div v-if="authorizedTransactionId" class="mt-8">
<h3 class="text-lg font-semibold mb-2">Capture Authorized Amount</h3>
<p>Authorized Transaction ID: {{ authorizedTransactionId }}</p>
<form @submit.prevent="submitCapture">
<div class="form-control">
<label class="label">
<span class="label-text">Capture Amount</span>
</label>
<input type="number" v-model="capture.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-accent">Capture</button>
</div>
</form>
</div>
</div>
</div>
<div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 'approved' || transactionResult.status === 'authorized' || transactionResult.status === 'captured' ? 'bg-green-200' : 'bg-red-200'">
<h3 class="font-bold">Transaction Result</h3>
<p>Status: {{ transactionResult.status }}</p>
<p v-if="transactionResult.auth_net_transaction_id">Transaction ID: {{ transactionResult.auth_net_transaction_id }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
const API_URL = 'http://localhost:8000/api'; // Your FastAPI backend URL
export default {
data() {
return {
directCharge: {
cardNumber: '',
expirationDate: '',
cvv: '',
amount: 0,
},
authorization: {
cardNumber: '',
expirationDate: '',
cvv: '',
amount: 0,
},
capture: {
amount: 0,
},
authorizedTransactionId: null,
transactionResult: null,
customerId: 1 // Assuming a customer with ID 1 exists for this example
};
},
methods: {
async submitDirectCharge() {
try {
const response = await axios.post(`${API_URL}/charge/?customer_id=${this.customerId}`, {
card_number: this.directCharge.cardNumber,
expiration_date: this.directCharge.expirationDate,
cvv: this.directCharge.cvv,
amount: this.directCharge.amount,
transaction_type: 'charge'
});
this.transactionResult = response.data;
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing transaction' };
}
},
async submitAuthorization() {
try {
const response = await axios.post(`${API_URL}/authorize/?customer_id=${this.customerId}`, {
card_number: this.authorization.cardNumber,
expiration_date: this.authorization.expirationDate,
cvv: this.authorization.cvv,
amount: this.authorization.amount,
transaction_type: 'auth'
});
this.transactionResult = response.data;
if (response.data.status === 'authorized') {
this.authorizedTransactionId = response.data.auth_net_transaction_id;
this.capture.amount = this.authorization.amount; // Pre-fill capture amount
}
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing authorization' };
}
},
async submitCapture() {
try {
const response = await axios.post(`${API_URL}/capture/`, {
amount: this.capture.amount,
auth_net_transaction_id: this.authorizedTransactionId
});
this.transactionResult = response.data;
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing capture' };
}
},
},
};
</script> -->