# Formas de interação de pagamento

Como o cliente paga no FaciPay hoje (popup) e o fluxo passo a passo do overlay web.

A forma como o cliente interage com o pagamento — onde acontece, se sai do site, quanto
controla o visual — define a experiência da sua loja.

## Disponível hoje na FaciPay

<CardGroup cols={2}>
  <Card title="Popup / overlay (web)" icon="clone">
    Uma janela **sobreposta** à sua página. O cliente fica no contexto do
    seu site e o pagamento corre numa janela isolada. É o que a
    [FaciPay JS SDK](/pt/sdk/overview) faz hoje.
  </Card>
  <Card title="Checkout hospedado em WebView (mobile)" icon="mobile">
    Nas SDKs [Android](/pt/android/overview) e [iOS](/pt/ios/overview), o checkout é
    apresentado num **WebView** nativo (modal/bottom-sheet).
  </Card>
</CardGroup>

<Info>
Por agora, **só o popup/overlay** (web) e o **WebView hospedado** (mobile) estão disponíveis.
</Info>

### O fluxo do popup, passo a passo

É assim que o cliente paga hoje no overlay web, do botão à confirmação no telemóvel.

<Steps>
  <Step title="O botão na sua loja">
    `generateButton()` renderiza o botão de pagamento com o selo **Powered by FaciConnect**.
    Os ícones à direita mostram as formas de pagamento disponíveis (FaciPay, MCX Express, Referência).
    <Frame>
      <img src="/images/faciconnect_btn_with_powered_by.png" alt="Botão Pagar Agora com selo Powered by FaciConnect" />
    </Frame>
  </Step>
  <Step title="O popup abre">
    Ao clicar, abre-se o overlay com a **origem do pedido**, os **detalhes do pagamento**, a
    escolha da **forma de pagamento** e o campo de **telefone**.
    <Frame>
      <img src="/images/faciconnect_modal.png" alt="Popup FaciConnect com detalhes do pagamento e formas de pagamento" />
    </Frame>
  </Step>
  <Step title="Confirmação — via FaciPay">
    Com a **FaciPay**, é enviado um pedido de pagamento para a conta do cliente. Ele confirma
    diretamente no telemóvel, na app FaciPay.
    <Frame>
      <img src="/images/faciconnect_facipay_payment.png" alt="Pedido de pagamento enviado para confirmar na app FaciPay" />
    </Frame>
  </Step>
  <Step title="Confirmação — via MCX Express">
    Com o **MCX Express**, o cliente recebe uma notificação Multicaixa Express e tem um tempo
    limitado para autorizar a operação. O popup aguarda a confirmação.
    <Frame>
      <img src="/images/faciconnect_mcx_express.png" alt="Ecrã a aguardar confirmação MCX Express com contador" />
    </Frame>
  </Step>
</Steps>

## Como mapeia ao fluxo FaciPay

O fluxo de backend da FaciPay (criar ordem → `referenceNumber` → confirmar por webhook) é
**independente** da forma de UX. O popup atual usa `generateButton()` + `.render()` para abrir
a janela de checkout, reutilizando o mesmo `createPaymentOrder` e o mesmo webhook.