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

# Levando ao checkout

> Redirecione, embute num iframe ou abra em popup — você escolhe.

A cobrança retorna uma `checkoutUrl`. A **mesma URL** funciona em três modos — escolha o que
melhor se encaixa no seu fluxo.

## Redirect (recomendado)

Mande o cliente para a `checkoutUrl`. Após o pagamento, ele é redirecionado para o `successUrl`
(ou `cancelUrl`) que você informou ao criar a cobrança.

```js theme={null}
window.location.href = charge.checkoutUrl;
```

## Embed (iframe)

Embuta o checkout na sua página. No fim do fluxo, enviamos um `postMessage` para a janela-pai:

<CodeGroup>
  ```html HTML theme={null}
  <iframe
    src="https://gravitypay.app/c/chg_2e59538f..."
    style="width: 100%; height: 720px; border: 0"
    allow="payment"
  ></iframe>
  ```

  ```js Listener theme={null}
  window.addEventListener("message", (event) => {
    if (event.data?.type === "gravitypay:completed") {
      // { type, chargeId, status: "paid" }
      console.log("Pago!", event.data.chargeId);
      // feche o modal, mostre o sucesso, etc.
    }
  });
  ```
</CodeGroup>

## Popup

Abra a `checkoutUrl` numa janela e escute o mesmo `postMessage`:

```js theme={null}
const popup = window.open(charge.checkoutUrl, "_blank", "width=460,height=720");
window.addEventListener("message", (e) => {
  if (e.data?.type === "gravitypay:completed") popup?.close();
});
```

<Info>
  **Não dependa só do `postMessage`.** Ele é ótimo para atualizar a UI na hora. Mas a **fonte da
  verdade** do pagamento é o [webhook](/webhooks) — é ele que você deve usar para liberar acesso ou
  dar baixa na fatura, porque chega mesmo que o cliente feche o navegador.
</Info>