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:
Consigue una URL de checkout llamando a nuestra API
Incluye un iframe en tu web usando esta URL (ver más detalles a continuación)
Espera hasta recibir nuestras notificaciones (ready)
Recibe el resultado de la transacción mediante tu webhook ya configurado
Cómo usar el iframe
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.
Notificaciones
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.
Last updated