circle-info
Ask something in the search bar to get a quick answer from our AI model
search
API Doc

Checkout Iframe

Integra fácilmente nuestra pasarela segura en tu web

Integrar una pasarela en tu web nunca fue tan fácil. Consta de los siguientes pasos:

  1. Consigue una URL de checkout llamando a nuestra API

  2. Incluye un iframe en tu web usando esta URL (ver más detalles a continuación)

  3. Espera hasta recibir nuestras notificaciones (ready)

  4. Recibe el resultado de la transacción mediante tu webhook ya configurado

hashtag
Cómo usar el iframe

triangle-exclamation

IMPORTANTE: verifica que el origen de los eventos es desde el dominio seguro 'https://user-area.wipay.es'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="overflow:hidden;">
        <iframe 
            src="http://user_area.wipay.es/merchant/980016141/checkout/980016141-25-0-BNtO7dEx9_yb7nnFf3ihPZrv" 
            width="450" 
            height="1200" 
            scrolling="no" 
            style="border:none;"
            sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation allow-forms allow-modals"
        >
        </iframe>
    </div>
    <script>
        window.addEventListener('message', (event) => {
                if (event.origin !== 'https://user-area.wipay.es') return; // IMPORTANT: Other origins must not be trusted
                console.log('Messaged received', event);
                if (event.data?.type === 'checkout-ready') {
                    console.log('Unshow loading component and show iframe checkout');
                }
            });
    </script>
</body>
</html>

En el modo iframe, se deshabilitan las siguientes funcionalidades:

  • Skeleton como elementos de cargas

  • Notificaciones como toasts

Para poder implementar en tu web estas funcionalidades, el iframe enviará notificaciones a tu web para que puedas gestionarlas a tu gusto.

hashtag
Notificaciones

hashtag
ready

circle-info

El 'type' es 'checkout-ready'

Se envía esta notificación cuando todos los elementos y métodos de la pasarela están listos para usarse. Puedes usar un elemento de carga o un skeleton mientras tanto.

PreviousCheckouts (Pasarelas)NextTokenizar tarjeta

Last updated