<!DOCTYPE html>
<html lang="es">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta charset="utf8"/>
    <title>PoC de Integración</title>
    <!-- Payment Wall hoja de estilos -->
    <link href="https://sandbox.sipay.es/pwall_app/css/app.css" rel=stylesheet>
    <!-- Payment Wall JavaScript para gestión de eventos -->
    <script src="https://sandbox.sipay.es/pwall_sdk/pwall_sdk.bundle.js"></script>
</head>
<body>
<div id="app">
<!-- Payment Wall será renderizado dentro de esta etiqueta HTML -->
</div>


<!-- Payment Wall renderizador, se pueden customizar los parámetros data-*
Parámetros como importe, moneda solo sirven para el efecto visual. Tendrás que repetir
el valor de dichos parámetros cuando realices peticiones a nuestro API desde su backend. -->
<script data-url="https://enksdcjzlgfcu6f.m.pipedream.net"
    data-amount="0"
    data-currency="EUR"
    data-placeholder="#app"
 src="https://sandbox.sipay.es/pwall_app/js/app.js">
</script>

    <!-- Payment Wall evento personalizado para renderizar el payment wall -->
    <script>
        // Manage redirect with notify.result
        const urlParams = new URLSearchParams(window.location.search);
        const error = urlParams.get('error');
        const method = urlParams.get('method');
        const request_id = urlParams.get('request_id');
        if (request_id) {
            window.PaymentWall.listenTo(document, "payment_wall_setup", function () {
                var placeholder = document.getElementById('app');
                window.PaymentWall.listenTo(placeholder, 'payment_wall_drawn', function () {
                    window.pwall.dispatch('process_redirect', {
                        detail: {
                            "error": error || null,
                            "method": method,
                            "request_id": request_id
                        }
                    });
                });
            });
        } 
        window.PaymentWall.start()
    </script>
</body>
</html>


#app {
  width: 100vw;
}

#app header {
  display: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.