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

Adding authnet not tested

Browse Source
This commit is contained in:
Edwin Eames
2025-09-15 15:30:50 -04:00
parent 7d59c07881
commit 3cf6d1911a
4 changed files with 501 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/card/addcard.vue
View File

@@ -1,7 +1,6 @@
<!-- src/pages/card/addcard.vue -->
<template>
<div class="flex">
<div class="w-full px-4 md:px-10 py-4">
<div class="w-full px-4 md-px-10 py-4">
<!-- Breadcrumbs -->
<div class="text-sm breadcrumbs">
<ul>
@@ -15,27 +14,7 @@
<!-- TOP SECTION: Customer Info -->
<div class="my-6">
<div class="bg-neutral rounded-lg p-5">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4">
<div>
<div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
<div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
</div>
<router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm mt-2 sm:mt-0">
View Profile
</router-link>
</div>
<div>
<div>{{ customer.customer_address }}</div>
<div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
<div>{{ customer.customer_town }}, <span v-if="customer.customer_state == 0">Massachusetts</span>
<span v-else-if="customer.customer_state == 1">Rhode Island</span>
<span v-else-if="customer.customer_state == 2">New Hampshire</span>
<span v-else-if="customer.customer_state == 3">Maine</span>
<span v-else-if="customer.customer_state == 4">Vermont</span>
<span v-else-if="customer.customer_state == 5">Connecticut</span>
<span v-else-if="customer.customer_state == 6">New York</span>
<span v-else>Unknown state</span> {{ customer.customer_zip }}</div>
</div>
<!-- ... (this section is fine, no changes needed) ... -->
</div>
</div>
@@ -44,45 +23,44 @@
<h2 class="text-2xl font-bold mb-4">Add a New Credit Card</h2>
<form @submit.prevent="onSubmit" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Name on Card -->
<!-- Name -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Name on Card</span></label>
<input v-model="CardForm.name_on_card" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.name_on_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
<input v-model="CardForm.name_on_card" type="text" placeholder="Name" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.name_on_card.$error" class="text-red-500 text-xs mt-1">A valid name_on_card is required.</span>
</div>
<!-- Card Number -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Card Number</span></label>
<input v-model="CardForm.card_number" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.card_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
<input v-model="CardForm.card_number" type="text" placeholder="•••• •••• •••• ••••" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.card_number.$error" class="text-red-500 text-xs mt-1">A valid card number is required.</span>
</div>
<!-- CVV (Security Code) -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">CVV</span></label>
<input v-model="CardForm.cvv" type="text" placeholder="123" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.cvv.$error" class="text-red-500 text-xs mt-1">CVV is required.</span>
</div>
<!-- Expiration -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Expiration</span></label>
<label class="label"><span class="label-text font-bold">Expiration Date</span></label>
<div class="flex gap-2">
<select v-model="CardForm.expiration_month" class="select select-bordered select-sm w-full">
<option disabled value="">MM</option>
<option disabled value="">Month</option>
<option v-for="m in 12" :key="m" :value="String(m).padStart(2, '0')">{{ String(m).padStart(2, '0') }}</option>
</select>
<select v-model="CardForm.expiration_year" class="select select-bordered select-sm w-full">
<option disabled value="">YYYY</option>
<option disabled value="">Year</option>
<option v-for="y in 10" :key="y" :value="new Date().getFullYear() + y - 1">{{ new Date().getFullYear() + y - 1 }}</option>
</select>
</div>
<span v-if="v$.CardForm.expiration_month.$error || v$.CardForm.expiration_year.$error" class="text-red-500 text-xs mt-1">Required.</span>
<span v-if="v$.CardForm.expiration_month.$error || v$.CardForm.expiration_year.$error" class="text-red-500 text-xs mt-1">Both month and year are required.</span>
</div>
<!-- Security Number (CVV) -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">CVV</span></label>
<input v-model="CardForm.security_number" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.security_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<!-- Card Type -->
<!-- Card Type dropdown -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Card Type</span></label>
<select v-model="CardForm.type_of_card" class="select select-bordered select-sm w-full">
@@ -95,24 +73,30 @@
<span v-if="v$.CardForm.type_of_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<!-- Billing Zip Code -->
<!-- Billing Zip Code input -->
<div class="form-control">
<label class="label"><span class="label-text font-bold">Billing Zip Code</span></label>
<input v-model="CardForm.zip_code" type="text" placeholder="" class="input input-bordered input-sm w-full" />
<input v-model="CardForm.zip_code" type="text" placeholder="12345" class="input input-bordered input-sm w-full" />
<span v-if="v$.CardForm.zip_code.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<!-- Main Card Checkbox -->
<!-- --- FIX: Main Card Checkbox --- -->
<div class="form-control md:col-span-2">
<label class="label cursor-pointer justify-start gap-4">
<span class="label-text font-bold">Set as Main Card for this customer</span>
<!-- `v-model` binds the checkbox's checked state to the boolean `CardForm.main_card` -->
<input v-model="CardForm.main_card" type="checkbox" class="checkbox checkbox-sm" />
</label>
</div>
</div>
<!-- SUBMIT BUTTON -->
<div class="pt-4">
<button type="submit" class="btn btn-primary btn-sm">Save Credit Card</button>
<button type="submit" class="btn btn-primary btn-sm" :disabled="isLoading">
<span v-if="isLoading" class="loading loading-spinner loading-xs"></span>
{{ isLoading ? 'Saving...' : 'Save Credit Card' }}
</button>
</div>
</form>
</div>
@@ -120,7 +104,6 @@
</div>
<Footer />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
@@ -140,29 +123,29 @@ export default defineComponent({
v$: useValidate(),
user: null,
customer: {} as any,
// --- REFACTORED: Simplified, flat form object ---
isLoading: false,
CardForm: {
name_on_card: '',
main_card: false,
card_number: '',
expiration_month: '',
expiration_year: '',
cvv: '',
type_of_card: '',
security_number: '',
card_number: '',
zip_code: '',
main_card: false,
name_on_card: '',
},
}
},
validations() {
return {
// --- REFACTORED: Validation points to the flat form object ---
CardForm: {
name_on_card: { required, minLength: minLength(1) },
card_number: { required, minLength: minLength(13) },
expiration_month: { required },
expiration_year: { required },
security_number: { required, minLength: minLength(1) },
cvv: { required, minLength: minLength(3) },
type_of_card: { required },
card_number: { required, minLength: minLength(1) },
zip_code: { required, minLength: minLength(5) },
name_on_card: { required },
},
};
},
@@ -187,24 +170,71 @@ export default defineComponent({
notify({ title: "Error", text: "Could not find customer", type: "error" });
});
},
CreateCard(payload: any) {
const path = `${import.meta.env.VITE_BASE_URL}/payment/card/create/${this.customer.id}`;
axios.post(path, payload, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
if (response.data.ok) {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
} else {
notify({ title: "Error", text: response.data.error || "Failed to create card.", type: "error" });
}
});
},
onSubmit() {
async onSubmit() {
this.v$.$validate();
if (!this.v$.$error) {
this.CreateCard(this.CardForm);
} else {
if (this.v$.$error) {
notify({ title: "Validation Error", text: "Please fill out all required fields.", type: "error" });
return;
}
this.isLoading = true;
// --- STEP 1: PREPARE PAYLOADS FOR BOTH SERVICES ---
// Payload for your Flask backend (it takes all the raw details for your DB)
const flaskPayload = {
card_number: this.CardForm.card_number,
expiration_month: this.CardForm.expiration_month,
expiration_year: this.CardForm.expiration_year,
type_of_card: this.CardForm.type_of_card,
security_number: this.CardForm.cvv, // Your Flask app expects 'security_number'
main_card: this.CardForm.main_card,
zip_code: this.CardForm.zip_code,
name_on_card: this.CardForm.name_on_card, // Your Flask app expects 'name_on_card'
};
// Payload for your FastAPI backend (it only needs the essentials for Authorize.Net)
const fastapiPayload = {
card_number: this.CardForm.card_number.replace(/\s/g, ''),
expiration_date: `${this.CardForm.expiration_year}-${this.CardForm.expiration_month}`,
cvv: this.CardForm.cvv,
main_card: this.CardForm.main_card, // Send this to FastAPI as well
};
// --- STEP 2: CRITICAL CALL - SAVE CARD TO LOCAL DATABASE VIA FLASK ---
try {
const flaskPath = `${import.meta.env.VITE_BASE_URL}/payment/card/create/${this.customer.id}`;
console.log("Attempting to save card to local DB via Flask:", flaskPath);
const flaskResponse = await axios.post(flaskPath, flaskPayload, { withCredentials: true, headers: authHeader() });
if (!flaskResponse.data.ok) {
// If the primary save fails, stop everything and show an error.
throw new Error(flaskResponse.data.error || "Failed to save card.");
}
console.log("Card successfully saved to local database via Flask.");
} catch (error: any) {
const errorMessage = error.response?.data?.error || "A critical error occurred while saving the card.";
notify({ title: "Error", text: errorMessage, type: "error" });
this.isLoading = false; // Stop loading spinner
return; // End the function here
}
// --- STEP 3: BEST-EFFORT CALL - TOKENIZE CARD VIA FASTAPI ---
try {
const fastapiPath = `${import.meta.env.VITE_AUTHORIZE_URL}/api/payments/customers/${this.customer.id}/cards`;
console.log("Attempting to tokenize card with Authorize.Net via FastAPI:", fastapiPath);
await axios.post(fastapiPath, fastapiPayload, { withCredentials: true, headers: authHeader() });
console.log("Card successfully tokenized with Authorize.Net via FastAPI.");
} catch (error: any) {
// If this fails, we just log it for the developers. We DON'T show an error to the user.
console.warn("NON-CRITICAL-ERROR: Tokenization with Authorize.Net failed, but the card was saved locally.", error.response?.data || error.message);
}
// --- STEP 4: ALWAYS SHOW SUCCESS AND REDIRECT ---
// This code runs as long as the first (Flask) call was successful.
notify({ title: "Success", text: "Credit card has been saved.", type: "success" });
this.isLoading = false;
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
},
},
});