feat: implement new payment system with Stripe Elements and PayPal JS SDK
Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/09bd2b8f-753c-4431-816f-eba20606d5a0 Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
committed by
GitHub
GitHub
parent
7ff014a951
commit
233e42c14e
@@ -4,45 +4,33 @@
|
||||
|
||||
{% block head %}
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<script src="{% static 'js/checkout.js' %}"></script>
|
||||
<script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
|
||||
<script src="https://www.paypal.com/sdk/js?client-id={{ paypal_client_id }}¤cy=EUR" defer></script>
|
||||
<style>
|
||||
.payment-methods {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
#card-element {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem;
|
||||
padding: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.payment-btn {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
#card-element.StripeElement--focus {
|
||||
border-color: #86b7fe;
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
|
||||
}
|
||||
|
||||
.payment-section {
|
||||
background-color: #f8f9fa;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.payment-section h3 {
|
||||
margin-bottom: 20px;
|
||||
color: #212529;
|
||||
#card-element.StripeElement--invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
#card-errors { color: #dc3545; font-size: 0.875rem; margin-top: 4px; }
|
||||
.payment-tab-content { display: none; }
|
||||
.payment-tab-content.active { display: block; }
|
||||
#paypal-button-container { min-height: 50px; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-2">
|
||||
<div class="col-md-12">
|
||||
<!-- Token CSRF para requests AJAX -->
|
||||
{% csrf_token %}
|
||||
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1>Checkout</h1>
|
||||
<a href="{% url 'view_cart' %}" class="btn btn-outline-secondary">← Volver al carrito</a>
|
||||
@@ -66,6 +54,7 @@
|
||||
Si el pago no se completa en ese tiempo, la reserva se cancelará automáticamente.
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Dirección de envío -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">1) Selecciona la dirección de envío</h5>
|
||||
@@ -90,6 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen del pedido -->
|
||||
<div class="table-responsive mb-4">
|
||||
<table class="table table-striped align-middle">
|
||||
<thead>
|
||||
@@ -116,40 +106,111 @@
|
||||
<tr>
|
||||
<th colspan="2" class="text-end">Subtotal:</th>
|
||||
<th colspan="2" class="text-end">{{ cart.get_total|format_price }}€</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2" class="text-end">IVA (21%):</th>
|
||||
<th colspan="2" class="text-end text-success">+{{ cart.get_vat_amount|format_price }}€</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="background-color: #f8f9fa;">
|
||||
<th colspan="2" class="text-end" style="font-size: 1.1rem;">Total:</th>
|
||||
<th colspan="2" class="text-end" style="font-size: 1.1rem;">{{ cart.get_total_with_vat|format_price }}€</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="payment-section">
|
||||
<h3>2) Selecciona tu método de pago</h3>
|
||||
<div class="payment-methods">
|
||||
<button
|
||||
id="checkout-button"
|
||||
class="btn btn-primary payment-btn"
|
||||
data-config-url="/tienda/config/"
|
||||
data-session-url="/tienda/create-checkout-session/"
|
||||
{% if not addresses or stock_issues %}disabled{% endif %}>
|
||||
💳 Pagar con Stripe
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="paypal-button"
|
||||
class="btn btn-warning payment-btn"
|
||||
data-payment-url="{% url 'create_paypal_payment' %}"
|
||||
{% if not addresses or stock_issues %}disabled{% endif %}>
|
||||
🅿️ Pagar con PayPal
|
||||
</button>
|
||||
<!-- Step 2: Método de pago -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">2) Selecciona tu método de pago</h5>
|
||||
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-tabs mb-3" id="paymentTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="tab-card" data-tab="pane-card" type="button" role="tab">
|
||||
💳 Tarjeta
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="tab-paypal" data-tab="pane-paypal" type="button" role="tab">
|
||||
🅿️ PayPal
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tarjeta tab -->
|
||||
<div id="pane-card" class="payment-tab-content active">
|
||||
{% if saved_cards %}
|
||||
<div class="mb-3">
|
||||
<p class="fw-semibold">Tarjetas guardadas:</p>
|
||||
{% for card in saved_cards %}
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="radio" name="saved_card_choice" id="card-{{ card.id }}" value="{{ card.id }}" data-pm-id="{{ card.stripe_payment_method_id }}" {% if card.is_default %}checked{% endif %}>
|
||||
<label class="form-check-label" for="card-{{ card.id }}">
|
||||
{{ card.label }}
|
||||
{% if card.is_default %}<span class="badge bg-secondary ms-1">Predeterminada</span>{% endif %}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="radio" name="saved_card_choice" id="card-new" value="new">
|
||||
<label class="form-check-label" for="card-new">Usar nueva tarjeta</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="new-card-section" {% if saved_cards %}style="display:none;"{% endif %}>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Número de tarjeta</label>
|
||||
<div id="card-element"></div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="save-card-checkbox">
|
||||
<label class="form-check-label" for="save-card-checkbox">
|
||||
Guardar esta tarjeta para futuras compras
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="pay-card-btn"
|
||||
class="btn btn-primary"
|
||||
{% if not addresses or stock_issues %}disabled{% endif %}>
|
||||
💳 Pagar con tarjeta
|
||||
</button>
|
||||
<div id="card-spinner" class="spinner-border spinner-border-sm ms-2 text-primary d-none" role="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- PayPal tab -->
|
||||
<div id="pane-paypal" class="payment-tab-content">
|
||||
{% if saved_paypal %}
|
||||
<div class="alert alert-light border mb-3">
|
||||
<small class="text-muted">Cuenta PayPal guardada:</small>
|
||||
<strong class="d-block">{{ saved_paypal.paypal_email }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="save-paypal-checkbox">
|
||||
<label class="form-check-label" for="save-paypal-checkbox">
|
||||
Guardar esta cuenta de PayPal para futuras compras
|
||||
</label>
|
||||
</div>
|
||||
<div id="paypal-button-container"></div>
|
||||
{% if not addresses or stock_issues %}
|
||||
<div class="alert alert-warning mt-2">Selecciona una dirección de envío válida para activar el pago.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resultado inline -->
|
||||
<div id="payment-result" class="d-none"></div>
|
||||
|
||||
{% else %}
|
||||
<div class="alert alert-info">Tu carrito está vacío.</div>
|
||||
{% endif %}
|
||||
@@ -157,72 +218,169 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Manejo del botón de PayPal
|
||||
const paypalButton = document.getElementById('paypal-button');
|
||||
if (paypalButton) {
|
||||
paypalButton.addEventListener('click', async function(e) {
|
||||
e.preventDefault();
|
||||
const CSRF_TOKEN = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
||||
const STRIPE_KEY = '{{ stripe_publishable_key }}';
|
||||
const HAS_STOCK_ISSUES = {{ stock_issues|yesno:"true,false" }};
|
||||
const HAS_ADDRESS = {{ addresses|yesno:"true,false" }};
|
||||
|
||||
const shippingAddressSelect = document.getElementById('shipping-address');
|
||||
const selectedShippingAddress = shippingAddressSelect ? shippingAddressSelect.value : '';
|
||||
if (!selectedShippingAddress) {
|
||||
alert('Selecciona una dirección de envío para continuar.');
|
||||
return;
|
||||
}
|
||||
|
||||
const button = this;
|
||||
const originalText = button.innerHTML;
|
||||
button.disabled = true;
|
||||
button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Procesando...';
|
||||
|
||||
try {
|
||||
// Obtener CSRF token de múltiples formas
|
||||
let csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
|
||||
if (!csrfToken) {
|
||||
csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]')?.value;
|
||||
}
|
||||
if (!csrfToken) {
|
||||
csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];
|
||||
}
|
||||
|
||||
console.log('CSRF Token encontrado:', csrfToken ? 'Sí' : 'No');
|
||||
|
||||
const response = await fetch(button.dataset.paymentUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken || '',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ shipping_address_id: selectedShippingAddress })
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response data:', data);
|
||||
|
||||
if (response.ok && data.redirect) {
|
||||
// Redirigir a PayPal
|
||||
console.log('Redirigiendo a:', data.redirect);
|
||||
window.location.href = data.redirect;
|
||||
} else if (data.error) {
|
||||
console.error('Error en respuesta:', data.error);
|
||||
alert('Error: ' + data.error);
|
||||
button.disabled = false;
|
||||
button.innerHTML = originalText;
|
||||
} else {
|
||||
console.error('Respuesta inesperada:', data);
|
||||
alert('Error inesperado al procesar el pago');
|
||||
button.disabled = false;
|
||||
button.innerHTML = originalText;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error en fetch:', error);
|
||||
alert('Error al procesar el pago con PayPal: ' + error.message);
|
||||
button.disabled = false;
|
||||
button.innerHTML = originalText;
|
||||
// ---- Tab switching ----
|
||||
document.querySelectorAll('#paymentTabs .nav-link').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('#paymentTabs .nav-link').forEach(b => b.classList.remove('active'));
|
||||
document.querySelectorAll('.payment-tab-content').forEach(p => p.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.getElementById(btn.dataset.tab).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Saved card / new card toggle ----
|
||||
document.querySelectorAll('input[name="saved_card_choice"]').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
const newSection = document.getElementById('new-card-section');
|
||||
if (newSection) {
|
||||
newSection.style.display = radio.value === 'new' ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Stripe ----
|
||||
const stripe = Stripe(STRIPE_KEY);
|
||||
const elements = stripe.elements();
|
||||
const cardElement = elements.create('card', { hidePostalCode: true });
|
||||
cardElement.mount('#card-element');
|
||||
cardElement.on('change', e => {
|
||||
document.getElementById('card-errors').textContent = e.error ? e.error.message : '';
|
||||
});
|
||||
|
||||
document.getElementById('pay-card-btn').addEventListener('click', async () => {
|
||||
if (HAS_STOCK_ISSUES || !HAS_ADDRESS) return;
|
||||
|
||||
const addressId = document.getElementById('shipping-address').value;
|
||||
if (!addressId) {
|
||||
alert('Selecciona una dirección de envío para continuar.');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('pay-card-btn');
|
||||
const spinner = document.getElementById('card-spinner');
|
||||
btn.disabled = true;
|
||||
spinner.classList.remove('d-none');
|
||||
|
||||
// Determine if using saved card or new card
|
||||
const savedCardRadio = document.querySelector('input[name="saved_card_choice"]:checked');
|
||||
const usingSavedCard = savedCardRadio && savedCardRadio.value !== 'new';
|
||||
const savedPmId = usingSavedCard ? savedCardRadio.dataset.pmId : null;
|
||||
const saveCard = !usingSavedCard && document.getElementById('save-card-checkbox')?.checked;
|
||||
|
||||
try {
|
||||
// 1. Create PaymentIntent
|
||||
const piResp = await fetch('{% url "crear_payment_intent" %}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
|
||||
body: JSON.stringify({
|
||||
shipping_address_id: addressId,
|
||||
saved_payment_method_id: usingSavedCard ? savedCardRadio.value : null,
|
||||
save_card: saveCard,
|
||||
}),
|
||||
});
|
||||
const piData = await piResp.json();
|
||||
if (!piResp.ok) { throw new Error(piData.error || 'Error al crear el pago'); }
|
||||
|
||||
const clientSecret = piData.client_secret;
|
||||
|
||||
// 2. Confirm payment
|
||||
let confirmResult;
|
||||
if (usingSavedCard) {
|
||||
confirmResult = await stripe.confirmCardPayment(clientSecret, {
|
||||
payment_method: savedPmId,
|
||||
});
|
||||
} else {
|
||||
confirmResult = await stripe.confirmCardPayment(clientSecret, {
|
||||
payment_method: { card: cardElement },
|
||||
});
|
||||
}
|
||||
|
||||
if (confirmResult.error) {
|
||||
throw new Error(confirmResult.error.message);
|
||||
}
|
||||
|
||||
const pi = confirmResult.paymentIntent;
|
||||
if (pi.status !== 'succeeded') {
|
||||
throw new Error('El pago no fue completado.');
|
||||
}
|
||||
|
||||
// 3. Confirm on server
|
||||
const confirmPayload = { payment_intent_id: pi.id };
|
||||
if (!usingSavedCard && saveCard) {
|
||||
confirmPayload.payment_method_id = pi.payment_method;
|
||||
}
|
||||
const confirmResp = await fetch('{% url "confirmar_pago_tarjeta" %}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
|
||||
body: JSON.stringify(confirmPayload),
|
||||
});
|
||||
const confirmData = await confirmResp.json();
|
||||
if (!confirmResp.ok) { throw new Error(confirmData.error || 'Error al confirmar el pedido'); }
|
||||
|
||||
// 4. Show success
|
||||
showSuccess(confirmData.transaction_code);
|
||||
|
||||
} catch (err) {
|
||||
document.getElementById('card-errors').textContent = err.message;
|
||||
btn.disabled = false;
|
||||
spinner.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// ---- PayPal ----
|
||||
{% if not stock_issues and addresses %}
|
||||
paypal.Buttons({
|
||||
createOrder: async () => {
|
||||
const addressId = document.getElementById('shipping-address').value;
|
||||
if (!addressId) {
|
||||
alert('Selecciona una dirección de envío para continuar.');
|
||||
return Promise.reject(new Error('Sin dirección'));
|
||||
}
|
||||
const resp = await fetch('{% url "crear_orden_paypal" %}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
|
||||
body: JSON.stringify({ shipping_address_id: addressId }),
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) { throw new Error(data.error || 'Error al crear la orden'); }
|
||||
return data.id;
|
||||
},
|
||||
onApprove: async (data) => {
|
||||
const savePaypal = document.getElementById('save-paypal-checkbox')?.checked || false;
|
||||
const resp = await fetch('{% url "capturar_orden_paypal" %}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
|
||||
body: JSON.stringify({ orderID: data.orderID, save_paypal: savePaypal }),
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) { throw new Error(result.error || 'Error al capturar el pago'); }
|
||||
showSuccess(result.transaction_code);
|
||||
},
|
||||
onError: (err) => {
|
||||
alert('Error en el pago con PayPal: ' + err);
|
||||
},
|
||||
}).render('#paypal-button-container');
|
||||
{% endif %}
|
||||
|
||||
// ---- Success helper ----
|
||||
function showSuccess(transactionCode) {
|
||||
const resultDiv = document.getElementById('payment-result');
|
||||
resultDiv.classList.remove('d-none');
|
||||
resultDiv.innerHTML = `
|
||||
<div class="alert alert-success p-4 text-center">
|
||||
<h4>¡Pago completado!</h4>
|
||||
<p>Tu pedido ha sido procesado correctamente.</p>
|
||||
${transactionCode ? `<p><strong>Código de transacción:</strong> ${transactionCode}</p>` : ''}
|
||||
<a href="{% url 'index' %}" class="btn btn-primary mt-2">Volver a la tienda</a>
|
||||
<a href="{% url 'mis_compras' %}" class="btn btn-outline-primary mt-2 ms-2">Ver mis compras</a>
|
||||
</div>
|
||||
`;
|
||||
window.scrollTo({ top: resultDiv.offsetTop - 20, behavior: 'smooth' });
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user