PaystationdocsPaystation
  1. Início
  2. Checkout
  3. Upsell na página de obrigado

Upsell na página de obrigado

Ofereça uma segunda compra logo depois da primeira, na sua página de obrigado, com o cartão que o comprador acabou de usar.

O upsell oferece outra oferta logo depois de uma compra aprovada. O comprador paga com um clique, com o cartão salvo na compra que acabou de fazer, sem digitar os dados de novo.

Compra aprovada
redirect com a assinatura
Sua página de obrigado
iframe com os parâmetros
Checkout do upsell
  1. Depois de um pagamento aprovado, o Paystation leva o comprador à URL de sucesso da oferta, com os parâmetros da compra e uma assinatura na query string.
  2. A sua página de obrigado lê esses parâmetros e cria um iframe com o checkout do upsell.
  3. O checkout confere a assinatura e mostra a oferta pronta para pagar com o cartão salvo.

Pré-requisitos ​

O quePor quê
A oferta principal tem URL de sucesso e upsell configuradosÉ o que faz o Paystation redirecionar com os parâmetros. Sem upsell, o redirect vai sem eles.
A origem da página de obrigado está em embed_originsO mesmo bloqueio do checkout embutido vale aqui.
O pagamento do upsell sai do mesmo endereço IP da compraProteção contra fraude: o pagamento de outro IP é recusado.

O pagamento com um clique usa o cartão salvo na compra original, se ele foi salvo há menos de 1 hora. Depois disso, ou numa compra por Pix ou boleto sem cartão salvo, o checkout do upsell pede os dados do cartão de novo.

O redirect ​

Paystation

Depois da compra aprovada, o comprador chega na sua URL de sucesso assim:

text
https://www.sualoja.com.br/obrigado?client_token=sualoja&upsell_ids=a7c1…&transaction_id=6f1c2b1e-…&transaction_type=card&signature=Jm9…
ParâmetroO que é
client_tokenO cliente. Vai no caminho do iframe.
upsell_idsAs ofertas de upsell configuradas, separadas por vírgula. Vai no caminho do iframe.
transaction_idA compra que acabou de ser aprovada.
transaction_typeO método dessa compra: card, pix ou boleto.
signatureHMAC dos parâmetros acima. Uma URL alterada é recusada.

Repasse os parâmetros exatamente como vieram: a assinatura cobre todos eles.

Montar o iframe ​

Sua página

Cole o script no fim do <body> da página de obrigado, depois do container:

obrigado.html
html
<div data-upsell-container></div>

<script>
  (function () {
    const BASE_URL = 'https://paystation-client.quero.space' // homologação: paystation-client-homolog
    const PARAMS = ['client_token', 'upsell_ids', 'transaction_id', 'transaction_type', 'signature']

    const query = new URLSearchParams(window.location.search)
    const clientToken = query.get('client_token')
    const upsellIds = query.get('upsell_ids')
    if (!clientToken || !upsellIds) return // sem upsell nesta compra

    const url = new URL(`${BASE_URL}/${encodeURIComponent(clientToken)}/${encodeURIComponent(upsellIds)}`)
    for (const name of PARAMS) {
      const value = query.get(name)
      if (value) url.searchParams.set(name, value)
    }

    const iframe = document.createElement('iframe')
    iframe.src = url.toString()
    iframe.title = 'Oferta especial'
    iframe.style.cssText = 'width:100%;height:640px;border:0'
    iframe.loading = 'lazy'
    document.querySelector('[data-upsell-container]').appendChild(iframe)
  })()
</script>

O iframe resultante:

text
https://paystation-client.quero.space/sualoja/a7c1…?client_token=sualoja&upsell_ids=a7c1…&transaction_id=6f1c2b1e-…&transaction_type=card&signature=Jm9…

Ajuste a altura do iframe ao seu layout: aqui ele não se redimensiona sozinho, ao contrário do elemento.

Sem dados do comprador na URL

O checkout não preenche o comprador pela URL. full_name, email, cpf e phone_number são ignorados: o upsell usa o comprador da compra original.

Pela API /v1 ​

Para desenhar a sua própria tela de upsell, use a API com a chave pública:

  1. GET /v1/upsell?offer_id=…&transaction_id=… diz se o upsell pode ser oferecido e se há cartão salvo (has_saved_card).
  2. GET /v1/offers/{id}/checkout traz o preço e as parcelas.
  3. POST /v1/charges com payment: { method: 'card', saved_from: '<transaction_id>' } cobra no cartão salvo, sem customer.

A primeira compra precisa ter salvo o cartão, com payment.save_card: true, ou ser uma assinatura. Veja a referência da API.

Problemas comuns ​

O iframe fica vazio

  • A origem da página de obrigado está em embed_origins?
  • A sua página tem CSP? Libere o checkout em frame-src.

O checkout mostra erro

  • A URL foi alterada ou um parâmetro se perdeu: a assinatura não confere.
  • O comprador tentou pagar de outra rede: o pagamento do upsell só é aceito do mesmo IP da compra.