<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Pago con SumUp</title>
    <script src="https://gateway.sumup.com/gateway/ecom/card/v2/sdk.js"></script>
</head>
<body>
    <h1>Pago con SumUp</h1>

    {% if error %}
        <p style="color: red;">Error: {{ error }}</p>
        <p><a href="battlepay">Volver a mis compras</a></p>
    {% else %}
        {% if product_name %}
        <p>Producto: <strong>{{ product_name }}</strong></p>
        <p>Importe: <strong>{{ price_eur }} €</strong></p>
        {% endif %}
        <div id="sumup-card"></div>

        <script>
            SumUpCard.mount({
                checkoutId: "{{ checkout_id }}",
                onResponse: function (type, body) {
                    if (type === 'success') {
                        alert("Pago exitoso. El producto se entregará en el juego en breve.");
                        window.location = "battlepay";
                    } else if (type === 'error') {
                        alert("Error en el pago: " + body.message);
                        console.error("Error en el pago:", body);
                    }
                }
            });
        </script>
        <p><a href="battlepay">Cancelar y volver</a></p>
    {% endif %}
</body>
</html>
