image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image

KR

Kennedy Rodrigues14/11/2023 15:18
Compartilhe

Gerador de QR Code Pix Automático

  • #JavaScript

image

Gerador de QR Code Pix Automático.

  • Gera QR Code Pix a partir dos dados que o usuário digitar.
  • Útil para ONGs que precisam de um sistema simples para doações.
  • Esse projeto pode ser usado em sites Wordpress também.

Biblioteca utilizada para gerar o Qr Code:

Documentações que li pra poder desenvolver o código:

Como adicionar meus dados?

  • Para adicionar seus dados basta alterar os dados das seguintes var: var pixkey, var cidade, var destinatario

História de como surgiu esse projeto:

Esse projeto surgiu a partir da dor que um cliente meu tinha em seu site, ele queria que os usuários do seu site pudesse fazer doações para ele via Pix gerando o Qr Code dentro do site. Porém geralmente esses Qr Code são gerados após um preenchimento de checkout, ou então após alguma compra, mas no caso ele precisava que o valor do Qr Code fosse gerado a partir de um input do valor que o usuário digitasse. Então foi ai que comecei a desenvolver esse projeto.

Principal Dificuldade:

Sem dúvidas a maior dificuldade foi todo o cálculo matemático por trás, pois era necessário que fosse feito um cálculo checksum do crc16 a partir do número de caracteres que há dentro da string payload. Com esse cálculo seria deslocado 8 bits dentro da cadeia de caracteres, e me retornaria um valor HEX a partir do polinomio que forneci, valor esse responsável para gerar as últimas 4 caracteres da string do payload, essas 4 caracteres são valores fundamentais para validar o Qr Code, então esse foi o resultado do cálculo que fiz no código:

image

Esse projeto amadureceu bastante meu conhecimento de DOM e desenvolvimento de códigos procedurais. Penso em fazer algum vídeo criando o código novamente do 0 e explicando o código, pois há pouquissimo material sobre isso em JS, praticamente nenhum.

Lembrando que não preocupei com o CSS do projeto, pois o mesmo é apenas uma parte de um projeto bem maior.

Compartilhe
Comentários (2)

KR

Kennedy Rodrigues - 16/11/2023 11:27

Booa! Não dei foco na estilização pois ela dependerá da id visual do site que irei implementar o script

Carlos Oliveira
Carlos Oliveira - 14/11/2023 21:41

Muito bom. Agora só precisa dar um tapa na aparência, para ficar mais atrativo para doações.