Levando ao checkout

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.

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:

<iframe
  src="https://gravitypay.app/c/chg_2e59538f..."
  style="width: 100%; height: 720px; border: 0"
  allow="payment"
></iframe>

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.
  }
});

Popup

Abra a checkoutUrl numa janela e escute o mesmo postMessage:

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