> ## Documentation Index
> Fetch the complete documentation index at: https://devs.tapipay.la/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeber el portal

> Monta el portal de pagos completo dentro de tu sitio con un iframe.

Puedes mostrar el portal de pagos **dentro de tu propio sitio** con un iframe, en lugar de enviar al usuario a `app.tapipay.la`. El usuario ve sus deudas y paga sin salir de tu página.

## Iframe mínimo

```html theme={null}
<iframe
  src="https://app.tapipay.la/s/acme-corp/portal/CLI-00042"
  width="100%"
  height="700"
  style="border: none;"
  allow="payment"
  title="Portal de pagos"
></iframe>
```

Eso es todo lo que necesitas. El `src` sigue la misma estructura que una [liga de pago](/es/portal-de-pagos/liga-de-pago), así que también puedes identificar tu empresa por `companyCode`:

```html theme={null}
<iframe src="https://app.tapipay.la/c/MX-S-12345/portal/CLI-00042" ...></iframe>
```

### Los atributos que importan

<ResponseField name="allow" type="&#x22;payment&#x22;">
  Habilita la Payment Request API dentro del iframe, que es la que usan los medios tipo wallet. El SDK lo pone siempre, así que conviene ponerlo también en un iframe a mano para tener el mismo comportamiento.
</ResponseField>

<ResponseField name="height" type="number">
  El iframe **no** ajusta su alto solo. Elige un valor que acomode la lista de deudas más larga que esperas (700px es un punto de partida razonable) o resuelve el alto con el SDK, que sí lo ajusta de forma automática.
</ResponseField>

<ResponseField name="width" type="string" default="100%">
  Con `100%` el portal se adapta al ancho de su contenedor. El portal es responsive: verifica cómo se ve en móvil y en escritorio.
</ResponseField>

## Iframe o SDK

El iframe manual es la vía más simple, pero el [SDK](/es/portal-de-pagos/sdk-medios-de-pago) resuelve por ti cosas que a mano no tienes:

|                      | Iframe manual             | SDK                                                           |
| -------------------- | ------------------------- | ------------------------------------------------------------- |
| Alto del contenido   | Fijo, lo defines tú       | **Automático**, el widget informa su alto y el SDK lo aplica  |
| Estado de carga      | En blanco hasta que carga | **Skeleton** mientras carga, con transición                   |
| Eventos de pago      | No hay                    | `paymentWindowOpened`, `paymentSubmitted`, `paymentCancelled` |
| `allow="payment"`    | Lo pones tú               | Lo pone el SDK                                                |
| Desmontar en una SPA | Manual                    | `destroy()` limpia iframe y listeners                         |
| Alcance              | Portal completo           | Solo medios de pago, o solo domiciliación                     |

<Tip>
  Usa el **iframe manual** si quieres el portal completo (lista de deudas incluida) dentro de una página estática. Usa el **SDK** si necesitas reaccionar al pago desde tu código, si estás en una SPA, o si quieres mostrar solo el paso de medios de pago.
</Tip>

## Consideraciones

<Warning>
  Usa el dominio `app.tapipay.la` en el `src`. Los dominios `www.tapipay.la` y `tapipay.la` redirigen ahí, y una redirección dentro de un iframe agrega latencia al primer render.
</Warning>

* **Un iframe por usuario.** El `identifierValue` del `src` determina de quién son las deudas que se muestran. Ármalo en tu servidor con el identificador del usuario que tiene la sesión abierta.
* **Sin credenciales en el `src`.** La URL del portal no lleva tokens ni API keys. No agregues las tuyas: el portal es una pantalla pública que resuelve el acceso por el identificador.