Checkout no seu site

O checkout.js abre a página de pagamento da SuyPay por cima do seu site, numa janela (no computador) ou numa folha que sobe da parte de baixo (no celular). O cliente escolhe a forma, paga e volta para a sua página, sem trocar de endereço.

Funciona com qualquer cobrança que tenha payment_url: crie a cobrança no seu servidor e passe o link para o navegador.

Sem código

<script src="https://www.suypay.com/checkout.js" defer></script>

<button data-suypay-checkout="https://checkout.SEU-DOMINIO/pay_3kXy...?t=Qm9...">Pagar R$ 49,90</button>

Qualquer elemento com data-suypay-checkout abre o pagamento ao ser clicado.

Com código

const pagamento = SuyPay.checkout({
  url: cobranca.payment_url,
  onSuccess: ({ id, status }) => {
    // o comprador viu "Pagamento confirmado". Libere o pedido quando o webhook chegar.
    location.href = '/obrigado?pedido=' + id
  },
  onStatus: ({ status }) => console.log('agora:', status),
  onClose: ({ status }) => { /* fechou: status é o último que a página mostrou */ },
})

// pagamento.close() fecha por código

Opção	Para quê
`url`	o `payment_url` da cobrança (obrigatório)
`onSuccess`	quando a cobrança é paga
`onStatus`	a cada mudança: `requires_method`, `processing`, `pending`, `succeeded`...
`onClose`	quando o cliente fecha (botão, tecla Esc ou clique fora)
`closeOnSuccess`	`false` mantém a janela aberta depois do pagamento. Por padrão ela fecha sozinha 2,6 s depois da confirmação

O que vale como pago

Os avisos do checkout.js vêm do navegador do cliente: use-os para a tela, nunca para liberar o produto. Quem confirma é o webhook payment.succeeded, assinado pela SuyPay, ou um GET /v1/payments/{id} no seu servidor.

UTMs

Com o utm.js no mesmo site, as UTMs da visita vão junto para o pagamento, como num link comum.