KSA-ORACLE/resources/js/pages/Checkout.vue

<template>
    <div class="wise-payment-form">
        <form @submit.prevent="submitTransfer">
            <div class="form-group">
                <label for="amount">Amount</label>
                <input type="number" id="amount" v-model="formData.amount" step="0.01" min="0.01" required />
            </div>

            <div class="form-group">
                <label for="source_currency">Source Currency</label>
                <select id="source_currency" v-model="formData.source_currency" required>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                    <!-- Add more currencies as needed -->
                </select>
            </div>

            <div class="form-group">
                <label for="target_currency">Target Currency</label>
                <select id="target_currency" v-model="formData.target_currency" required>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                    <!-- Add more currencies as needed -->
                </select>
            </div>

            <div class="form-group">
                <label for="recipient_name">Recipient Name</label>
                <input type="text" id="recipient_name" v-model="formData.recipient_name" required />
            </div>

            <div class="form-group">
                <label for="recipient_email">Recipient Email</label>
                <input type="email" id="recipient_email" v-model="formData.recipient_email" required />
            </div>

            <div class="form-group">
                <label for="recipient_account_number">Account Number</label>
                <input type="text" id="recipient_account_number" v-model="formData.recipient_account_number" required />
            </div>

            <div class="form-group">
                <label for="reason">Payment Reason</label>
                <input type="text" id="reason" v-model="formData.reason" />
            </div>

            <button type="submit" :disabled="loading">
                {{ loading ? 'Processing...' : 'Create Transfer' }}
            </button>

            <div v-if="error" class="error-message">
                {{ error }}
            </div>

            <div v-if="success" class="success-message">Transfer initiated successfully! Transfer ID: {{ transferId }}</div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            error: null,
            success: false,
            transferId: null,
            formData: {
                amount: '',
                source_currency: 'USD',
                target_currency: 'EUR',
                recipient_name: '',
                recipient_email: '',
                recipient_account_number: '',
                reason: 'Payment for services',
            },
        };
    },
    methods: {
        async submitTransfer() {
            this.loading = true;
            this.error = null;
            this.success = false;

            try {
                const response = await axios.post('/api/wise/transfer', this.formData);

                if (response.data.success) {
                    this.success = true;
                    this.transferId = response.data.transfer_id;
                    // You might want to redirect or show additional info
                } else {
                    this.error = response.data.message || 'An error occurred';
                }
            } catch (error) {
                if (error.response && error.response.data) {
                    this.error = error.response.data.message || 'An error occurred';

                    // Display detailed errors if available
                    if (error.response.data.error) {
                        if (Array.isArray(error.response.data.error)) {
                            this.error += ': ' + error.response.data.error.map((e) => e.message).join(', ');
                        } else if (typeof error.response.data.error === 'object') {
                            this.error += ': ' + JSON.stringify(error.response.data.error);
                        } else {
                            this.error += ': ' + error.response.data.error;
                        }
                    }
                } else {
                    this.error = 'Network error or server unavailable';
                }
            } finally {
                this.loading = false;
            }
        },
    },
};
</script>

<style scoped>
.wise-payment-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input,
select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.error-message {
    color: #d9534f;
    margin-top: 15px;
}

.success-message {
    color: #5cb85c;
    margin-top: 15px;
}
</style>