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 |
|---|---|
orderId | Identificador da encomenda. |
customerName | Nome completo do cliente. |
email | E-mail do cliente. |
phoneNumber | Telefone do cliente. |
totalAmount | Valor total pago em texto decimal (ponto como separador decimal). |
currency | Código da moeda da encomenda (por exemplo MZN, USD). |
paymentGateway | Identificador do gateway de pagamento (pode ficar vazio consoante o fluxo). |
paymentReference | Referência do pagamento no gateway (pode ficar vazio consoante o fluxo). |
lang | Có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¤cy=MZN&paymentGateway=mpesa&paymentReference=ABC123XYZ&lang=pt
Estes parâmetros podem incluir dados pessoais. Use sempre HTTPS na sua landing. Query strings podem aparecer no histórico do browser, logs e analytics — trate os valores como entrada não confiável e faça escape antes de mostrar HTML.
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