> ## 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.

# Embedded WebView

> Open the provider's official checkout inside WhatsApp via WebView and continue the flow based on the payment result.

Embedded WebView integrates the provider's official checkout inside WhatsApp and exposes the transaction status to the flow.

It is the experience with the broadest payment method compatibility, by fully delegating authorization and validation to the provider.

***

## What it looks like for the payer

<div className="grid md:grid-cols-2 gap-8">
  <Frame caption="Card payment">
    <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="Wallet or local method payment">
    <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>

***

## Scope of this experience

* Opens the **provider's official checkout** inside WhatsApp (WebView).
* Supports **cards and local methods** available in that provider.
* Returns the **actual transaction status** to your flow.
* Maintains conversational continuity before and after the payment.

The payment is **processed and settled at the provider**. Brain Studio only uses the result to continue the flow.

***

## Prerequisites

To use Embedded WebView you need:

* A compatible provider installed from **Marketplace** (**BYOK**).
* **Valid credentials** from the provider.
* **Verified WhatsApp Business**.

<Warning>
  If your account is not verified, the checkout opens in the device's **external browser** (not inside WhatsApp).
</Warning>

***

## Providers available with 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="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="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>
