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

> Abra o checkout oficial do provedor dentro do WhatsApp via WebView e continue o fluxo com base no resultado do pagamento.

O WebView incorporado integra o checkout oficial do provedor dentro do WhatsApp e expõe o status da transação ao fluxo.

É a experiência com maior compatibilidade de métodos de pagamento, pois delega completamente a autorização e validação ao provedor.

***

## Como o pagador vê a experiência

<div className="grid md:grid-cols-2 gap-8">
  <Frame caption="Pagamento com cartão">
    <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="Pagamento com carteira ou 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>

***

## Escopo desta experiência

* Abre o **checkout oficial do provedor** dentro do WhatsApp (WebView).
* Suporta **cartões e métodos locais** disponíveis naquele provedor.
* Retorna o **status real da transação** para o seu fluxo.
* Mantém a continuidade conversacional antes e depois do pagamento.

O pagamento é **processado e liquidado no provedor**. O Brain Studio usa apenas o resultado para continuar o fluxo.

***

## Pré-requisitos

Para usar o WebView incorporado você precisa de:

* Um provedor compatível instalado pelo **Marketplace** (**BYOK**).
* **Credenciais válidas** do provedor.
* **WhatsApp Business verificado**.

<Warning>
  Se sua conta não estiver verificada, o checkout abre no **navegador externo** do dispositivo (não dentro do WhatsApp).
</Warning>

***

## Provedores disponíveis com WebView

<CardGroup cols={3}>
  <Card
    title="Mercado Pago"
    href="/pt/guias/integracoes/pagamentos/provedores/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="/pt/guias/integracoes/pagamentos/provedores/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="/pt/guias/integracoes/pagamentos/provedores/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="/pt/guias/integracoes/pagamentos/provedores/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="/pt/guias/integracoes/pagamentos/provedores/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>
