<!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>
    {% else %}
        <div id="sumup-card"></div>

        <script>
            SumUpCard.mount({
                checkoutId: "{{ checkout_id }}",
                onResponse: function (type, body) {
                    if (type === 'success') {
                        alert("Pago exitoso. ID de transacción: " + body.transaction_code);
                        console.log("Pago exitoso:", body);
                    } else if (type === 'error') {
                        alert("Error en el pago: " + body.message);
                        console.error("Error en el pago:", body);
                    }
                }
            });
        </script>
    {% endif %}
</body>
</html>
