Landing pós-pagamento com parâmetros da encomenda

Quando o produto salta a página de sucesso integrada e redireciona para o seu URL, pode receber os detalhes da encomenda como parâmetros de query.

Nas definições do produto (criar ou editar), ative Include Order Parameters in Redirect URL juntamente com Redirect URL After Payment e Skip Success Page. O checkout acrescenta um conjunto fixo de nomes de parâmetros após o pagamento bem-sucedido.

Publique thank-you.html no seu site com HTTPS, defina esse endereço como Redirect URL e leia os parâmetros no browser com JavaScript.

Quando é que os parâmetros são adicionados?

São fundidos no URL de redirecionamento apenas quando se verificam todas as condições:

  • Redirect URL After Payment aponta para a sua página (por exemplo https://seusite.com/obrigado).
  • Skip Success Page (Redirect Immediately) está ativado.
  • Include Order Parameters in Redirect URL está ativado.

Nomes dos parâmetros de query

Estas chaves são adicionadas ou atualizadas no URL de redirecionamento. Valores em falta são enviados como strings vazias.

Parâmetro Significado
orderIdIdentificador da encomenda.
customerNameNome completo do cliente.
emailE-mail do cliente.
phoneNumberTelefone do cliente.
totalAmountValor total pago em texto decimal (ponto como separador decimal).
currencyCódigo da moeda da encomenda (por exemplo MZN, USD).
paymentGatewayIdentificador do gateway de pagamento (pode ficar vazio consoante o fluxo).
paymentReferenceReferência do pagamento no gateway (pode ficar vazio consoante o fluxo).
langCódigo de idioma desta encomenda (por exemplo en ou pt).

totalAmount usa formato invariante (independente de cultura), por isso o separador decimal é um ponto.

Opcional: {orderId} no Redirect URL

Pode incluir o texto {orderId} no Redirect URL; é substituído pelo id real da encomenda antes de aplicar os parâmetros. Query strings já presentes no seu URL são mantidas; os campos da encomenda são fundidos.

Exemplo de URL de redirecionamento (ilustrativo)

Os valores vêm codificados para URL; o seu URL real será diferente.

https://example.com/thank-you?orderId=674a1b2c3d4e5f6789012345&customerName=Jo%C3%A3o%20Silva&email=joao%40example.com&phoneNumber=%2B258841234567&totalAmount=1500.00&currency=MZN&paymentGateway=mpesa&paymentReference=ABC123XYZ&lang=pt

Exemplo: thank-you.html

Usa exatamente os nomes acima (orderId, customerName, email, phoneNumber, totalAmount, currency, paymentGateway, paymentReference, lang).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Thank you</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 560px; margin: 48px auto; padding: 0 16px; }
    h1 { color: #0f2755; }
    dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; }
    dt { font-weight: 600; color: #374151; }
  </style>
</head>
<body>
  <h1>Thank you for your purchase</h1>
  <p>Summary from the URL query string.</p>
  <dl>
    <dt>Order ID</dt><dd id="orderId"></dd>
    <dt>Customer</dt><dd id="customerName"></dd>
    <dt>Email</dt><dd id="email"></dd>
    <dt>Phone</dt><dd id="phoneNumber"></dd>
    <dt>Amount</dt><dd id="amount"></dd>
    <dt>Gateway</dt><dd id="paymentGateway"></dd>
    <dt>Reference</dt><dd id="paymentReference"></dd>
    <dt>Language</dt><dd id="lang"></dd>
  </dl>
  <script>
    const p = new URLSearchParams(window.location.search);
    const t = (k) => p.get(k) || '—';
    document.getElementById('orderId').textContent = t('orderId');
    document.getElementById('customerName').textContent = t('customerName');
    document.getElementById('email').textContent = t('email');
    document.getElementById('phoneNumber').textContent = t('phoneNumber');
    document.getElementById('amount').textContent =
      (p.get('totalAmount') || '') + ' ' + (p.get('currency') || '');
    document.getElementById('paymentGateway').textContent = t('paymentGateway');
    document.getElementById('paymentReference').textContent = t('paymentReference');
    document.getElementById('lang').textContent = t('lang');
  </script>
</body>
</html>

Em páginas renderizadas no servidor pode ler as mesmas chaves na query em vez de JavaScript — faça sempre sanitize antes de mostrar.

Todos os tutoriais