Exibir QR Code e Pix copia e cola

Resposta rápida: Use o campo pixCopiaECola (ou payload location) retornado na cob: mostre o texto para copiar e gere um QR a partir dessa string no frontend ou com uma lib de QR.

Pré-requisitos

• Criar cobrança com resposta bem-sucedida

Passo a passo

1. Extraia pixCopiaECola do JSON da cob (nome exato conforme resposta real / OpenAPI).
2. Exiba botão Copiar código Pix com esse texto.
3. Gere QR Code 2D da mesma string (lib opcional: qrcode no Node, etc.).
4. Mostre valor e expiração se disponíveis em calendario / valor.
5. Não altere o payload EMV manualmente.

Código

Esta recipe não chama a API. Exemplo mínimo de exibição (conceitual):

<!-- demo UI — não é snippet canônico do pack -->
<pre id="pix">{{pixCopiaECola}}</pre>
<button type="button" onclick="navigator.clipboard.writeText(document.getElementById('pix').textContent)">
  Copiar Pix
</button>
<img alt="QR Pix" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=URLENCODED" />

Em produção, prefira gerar o QR no seu backend/frontend sem depender de serviço público de terceiros.

Snippets de criação/consulta: snippets/*/create-cob.* e get-cob.*.

Se der errado

Sintoma	Causa	Ação
QR não paga	String truncada	Copiar payload completo
Campo ausente	Cob incompleta	GET cob (recipe 05) e inspecionar

Checklist

• Copia e cola testa em app bancário de homologação (se disponível)
• QR escaneável
• UX mostra valor e prazo

Próximo passo

→ 05 — Consultar cobrança

FAQ

P: Preciso de endpoint extra para o QR?

R: Em geral não — o payload vem na própria cob.