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

# WebView embebido

> Abre el checkout oficial del proveedor dentro de WhatsApp mediante WebView y continúa el flujo según el resultado del pago.

WebView embebido integra el checkout oficial del proveedor dentro de WhatsApp y expone el estado de la transacción al flujo.

Es la experiencia con mayor compatibilidad de medios de pago, al delegar completamente la autorización y validación al proveedor.

***

## Cómo se ve para el pagador

<div className="grid md:grid-cols-2 gap-8">
  <Frame caption="Pago con Tarjeta">
    <video className="mx-auto rounded-xl" style={{ width: '320px' }} controls src="https://mintcdn.com/jelouai/c4aHWk5mWPCIlk-Z/assets/videos/integraciones/pagos/experiencias/webview-tarjeta.mp4?fit=max&auto=format&n=c4aHWk5mWPCIlk-Z&q=85&s=a34259317944acf42b49a45f37a2f4d5" data-path="assets/videos/integraciones/pagos/experiencias/webview-tarjeta.mp4" />
  </Frame>

  <Frame caption="Pago con Wallet o método local">
    <video className="mx-auto rounded-xl" style={{ width: '320px' }} controls src="https://mintcdn.com/jelouai/c4aHWk5mWPCIlk-Z/assets/videos/integraciones/pagos/experiencias/webview-wallet.mp4?fit=max&auto=format&n=c4aHWk5mWPCIlk-Z&q=85&s=823cbc1a4a644801d678d175da857e3c" data-path="assets/videos/integraciones/pagos/experiencias/webview-wallet.mp4" />
  </Frame>
</div>

***

## Alcance de esta experiencia

* Abre el **checkout oficial del proveedor** dentro de WhatsApp (WebView).
* Soporta **tarjetas y métodos locales** disponibles en ese proveedor.
* Devuelve el **estado real de la transacción** a tu flujo.
* Mantiene continuidad conversacional antes y después del pago.

El pago se **procesa y liquida en el proveedor**. Brain Studio solo usa el resultado para continuar el flujo.

***

## Requisitos previos

Para usar WebView embebido necesitas:

* Un proveedor compatible instalado desde **Marketplace** (**BYOK**).
* **Credenciales válidas** del proveedor.
* **WhatsApp Business verificada**.

<Warning>
  Si tu cuenta no está verificada, el checkout se abre en el **navegador externo** del dispositivo (no dentro de WhatsApp).
</Warning>

***

## Proveedores disponibles con WebView

<CardGroup cols={3}>
  <Card
    title="Mercado Pago"
    href="/guides/integraciones/pagos/proveedores/mercado-pago/como-funciona"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/mercado-pago.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="Stripe"
    href="/guides/integraciones/pagos/proveedores/stripe/como-funciona"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/stripe.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="PayPal"
    href="/guides/integraciones/pagos/proveedores/paypal/como-funciona"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/paypal.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="PayPhone"
    href="/guides/integraciones/pagos/proveedores/payphone/como-funciona"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/payphone.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="Wompi"
    href="/guides/integraciones/pagos/proveedores/wompi/como-funciona"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/wompi.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="Placetopay"
    href="/guides/integraciones/pagos/proveedores/placetopay"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/placetopay.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />

  <Card
    title="Niubiz"
    href="/guides/integraciones/pagos/proveedores/niubiz"
    icon={
  <svg className="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <image xlinkHref="/assets/images/providers/niubiz.svg" width="24" height="24" x="0" y="0" preserveAspectRatio="xMidYMid meet" />
  </svg>
}
  />
</CardGroup>
