Copiar Linha Digitável - Boleto e Bolepix

[cedran]

O que mudou

• Inserção de um botão “Copiar” abaixo da linha digitável nos boletos padrão e BoletoPix.
• Implementação de lógica JavaScript que utiliza a Clipboard API para copiar toda a string da linha digitável ao clicar.
• Exibição de notificação toast/snackbar com “Linha digitável copiada!” por 3 s.
• Adição de aria-label="Copiar linha digitável" para compatibilidade com leitores de tela.
• Ajustes de CSS para garantir alinhamento, responsividade e contraste conforme WCAG AA.

---

Motivação

Melhorar a experiência de pagamento via boleto, eliminando a necessidade de seleção manual do código e reduzindo erros de digitação. Espera-se, assim, agilizar o fluxo de pagamento em apps de internet banking e diminuir chamados de suporte relacionados.

---

Solução proposta

Front-end

• Atualizar templates de confirmação de pedido (.phtml) para incluir o botão “Copiar” após a linha digitável.
• Criar módulo JS (copy-barcode.js) que:
  1. Captura o texto da linha digitável
  2. Executa navigator.clipboard.writeText(...)
  3. Dispara o toast de confirmação
• Ajustar estilos CSS para manter consistência visual e atender requisitos de contraste.

Acessibilidade

• Incluir aria-label="Copiar linha digitável" no <button>.
• Garantir marcação semântica adequada para leitores de tela.

---

Requisitos

• Acesso ao repositório do módulo de boleto/BoletoPix.
• Permissão para publicar alterações em arquivos .phtml, .js e .css.
• Ambiente de staging Magento 2 com boleto e BoletoPix habilitados.

---

Loja

https://qa-vindi.loja.biz/painel