Pitch: Vos apresento: PixJS!! Uma biblioteca para gerar códigos pix copia e cola.
Olá, me chamo Tiago Laureano, tenho 21 anos e estou muito animado com meu novo projeto... O PixJS.
Depois de muito pesquisar sobre a documentação do funcionamento do PIX, eu achei um pdf de "Manual de Padrões para Iniciação do Pix". Bom, após quebrar a cabeça lendo o pdf, muitas aulas no youtube, de ver muitos projetos no Github... Finalmente nasceu meu primeiro projeto!!!
A Payload PIX é uma espécie de "pacote de informações" que desempenha um papel fundamental no sistema PIX, garantindo que as transações ocorram da maneira correta. Imagine a Payload como uma caixa que contém várias partes importantes:
-
Indicador de Formato da Payload: Imagine que isso seja como um sinal que diz qual a versão que estamos usando. Por exemplo, '01' para a versão atual.
-
Chave PIX do Beneficiário (32 caracteres alfanuméricos): Esta é a forma de identificar para quem a transação está sendo enviada. Pode ser uma Chave PIX, que pode ser um e-mail, CPF/CNPJ, número de telefone, ou até mesmo um código especial chamado EVP (Endpoint de Pagamento).
-
Valor da Transação (até 13 dígitos, com 2 casas decimais): Aqui é onde especificamos o valor que será transferido na transação, em reais. É como colocar o montante exato que você deseja enviar.
-
Informações Adicionais do Beneficiário (até 140 caracteres): Às vezes, você pode querer incluir detalhes adicionais na transação. Pode ser o nome do destinatário, a razão social da empresa ou informações específicas sobre o pagamento.
-
TXID (Identificador Único da Transação): Este é um código único, uma sequência de letras e números, criado para cada transação. Isso evita que duas transações sejam idênticas, garantindo que cada uma seja única.
-
CRC16 (Cyclic Redundancy Check): É um tipo de código de verificação que serve para verificar se os dados na Payload estão completos e corretos. É como uma camada extra de segurança para garantir que nada se perdeu no caminho.
Para explicar melhor, podemos olhar para cada pedaço separadamente. Por exemplo, se pegarmos "00 02 01", podemos dizer:
- "00" é o ID (Payload Format Indicator).
- "02" significa que o valor que vem a seguir tem 2 caracteres.
- "01" é o valor em si (possui apenas 2 caracteres).
Outro exemplo: "59 13 Fulano de Tal":
- "59" é o ID (Merchant Name).
- "13" diz que o valor a seguir tem 13 caracteres.
- "Fulano de Tal" é o valor, que possuí 13 caracteres, incluindo os espaços.
E por último: "01 36 123e4567-e12b-12d1-a456-426655440000"
- "01" é o identificador da chave pix
- "36" é o tamanho de caracteres que essa chave tem
- "123e4567-e12b-12d1-a456-426655440000" chave uuid, que possui 36 caracteres.
000201 2658 0014br.gov.bcb.pix 0136123e4567-e12b-12d1-a456-426655440000 52040000 5303986 5802BR 5913Fulano de Tal 6008BRASILIA 6207 0503*** 63041D3D
Nos exemplos acima foi usado a primeira, quarta e oitava linha, "000201", "0136123e4567-e12b-12d1-a456-426655440000" e "5913Fulano de Tal" respectivamente.
Então, a Payload PIX é como uma caixa com todos esses elementos dentro, garantindo que as transações PIX funcionem sem problemas e de forma segura.
O PIXJS!!
Bom, ele ainda está em fase de desenvolvimento, existe alguns bugs que quero que vocês contribuindo possam me ajudar!
A biblioteca tem 3 métodos até o momento:
- CopyAndPaste: Você gera códigos copia e cola de forma simples;
- QrCodeImage: Gera uma imagem qrcode em .png;
- QrCodeTerminal: Gera um qrcode diretamente no terminal;
const { CopyAndPaste } = require("pixjs");
const copyAndPaste = CopyAndPaste({
name: "Tiago Dias Laureano", // Receptor name
key: "e015b7ed-b6bd-4c5a-bcb3-28f67559d716", // The pix key
amount: 1.00, // Amount
city: "Rio De Janeiro", // String without special characters ex: Sao Paulo
id: "PAGAMENTO", // Payment identifier
type: "random", // "email" | "phone" | "cpf" | "cnpj" | "random"
});
console.log(copyAndPaste)
// Resultado: 00020126580014BR.GOV.BCB.PIX0136e015b7ed-b6bd-4c5a-bcb3-28f67559d71652040000530398654041.005802BR5919Tiago Dias Laureano6014Rio De Janeiro62130509PAGAMENTO63042F1D
const { QrCodeImage } = require("pixjs");
const copyAndPaste = QrCodeImage({
name: "Tiago Dias Laureano", // Receptor name
key: "e015b7ed-b6bd-4c5a-bcb3-28f67559d716", // The pix key
amount: 1.00, // Amount
city: "Rio De Janeiro", // String without special characters ex: Sao Paulo
id: "PAGAMENTO", // Payment identifier
type: "random", // "email" | "phone" | "cpf" | "cnpj" | "random",
path: "src/qr-images/" // path to save images
});
// Resultado: Your QRCode Image was been generated: e015b7ed-b6bd-4c5a-bcb3-28f67559d716.png
const { QrCodeTerminal } = require("pixjs");
const copyAndPaste = QrCodeTerminal({
name: "Tiago Dias Laureano", // Receptor name
key: "e015b7ed-b6bd-4c5a-bcb3-28f67559d716", // The pix key
amount: 1.00, // Amount
city: "Rio De Janeiro", // String without special characters ex: Sao Paulo
id: "PAGAMENTO", // Payment identifier
type: "random", // "email" | "phone" | "cpf" | "cnpj" | "random",
});
console.log(copyAndPaste)
// Resultado: Mostra no terminal um qrcode.
GITHUB: https://github.com/tiago-dias-laureano/PixJS NPM: https://www.npmjs.com/package/pixjs
OBS: Graças ao feedback de vocês hoje lancei uma nova versão do projeto com algumas novas validações.
- Caso o valor seja menor que zero: 0.0003 o código automaticamente força as casas decimais para 2, ou seja, ficaria: 0.00
- Caso você coloque o nome da cidade ou nome do receptor que ultrapasse o valor de 25 caracteres ele irá gerar um erro, pois o payload não aceita esses valores acima de 25 caracteres.
- Caso digite uma cidade com acentuação no caso de São Paulo, na payload o nome virá como: Sao Paulo, sem acentuações.
Espero de verdade ter a contribuição de vocês! Estou agora trabalhando para trazer na versão 2.0 funcoes onde se poder gerar códigos pix com base no seu psp e acompanhar o status de pagamento.
Muito obrigado por compartilhar esse projeto!
Estava há algum tempo procurando uma solução desse tipo.
Parabéns!
Olá, Tiago! Sou novo nessa área, não compreendi corretamente o intuito do seu projeto. Poderia explicar de outra maneira?
Muito massa seu projeto tiagodiastl
, tenho um projeto de site para uma ong, onde há uma página para doações e que possivelmente irei implementar sua biblioteca!
Poxa, estava atrás de um pacote pra aplicar no projeto de pizzaria de um cliente e vou aproveitar pra prestigiar o seu.
Aproveitando o tópico, eu fiz um teste aqui e ele gerou uma string onde o nome do receptor estava com espaços mesmo, enquanto o id foi tudo concatenado. N ão seria o caso de trocar os espaços por %0A ou algo assim?
Parabéns! Estava procurando uma dessas.
As que existem são muito ruins.
Tenho uma dúvida: essa valida o tamanho da cidade? Letras com acentos? Se eu digitar amount: 0.00003
ou amount: "12,52"
, ele irá me gerar um copia-e-cola com estes valores ou irá me disparar um erro?
Isso é importante. Minha cidade se chama "São José do Rio Preto", e nela já tem dois problemas pro Pix: o tamanho e os acentos. Eu sempre tenho que gerar como "SJRP" para evitar problemas.
São sugestões minhas.
Achei muito interessante, posso tentar aplicar em um projeto da faculdade que estou fazendo, caso não se importe
Muito bom! Isso facilita bastante na hora de fazer uma integração para gerar código pix, já que não é preciso acoplar toda a lógica de validação e de gerar payload, só é necessário usar o PixJs
!
Parabéns! 🚀
Sobre o pixjs-dynamic
, acho que pode ser uma boa ideia, principalmente se tiver destaque sobre os outros concorrentes (caso existam), pode se inspirar na lib da Resend, j á que eles também lidam com acompanhamento de status
Vai a contribuição de um Analista de sistemas... Gere o QRCode em JPG ou JPEG se for tem a disponibilidade de usra em smartphone. Pois, o PNG tem fundo invisível e se o smartphone estiver em modo dark as leitoras de QRCode não conseguem ler, pois veem tudo preto.
Não é uma contribuição de código, mas uma de melhoria já, baseada em caso de uso.
Super interessante e valido o projeto, mas tenho uma dúvida. O código gerado para o pix ele segue o formato, ele não precisa ser validado pela api oficial para ser válido na transação? é sempre válido? Como é isso?
Olá, eu sou novo na área, achei muito interessante seu projeto, irei acompanhar e desejo sucesso!.