React QRcode PIX

Objetivo deste pacote é a de facilitar o recebimento de pagamentos com PIX em aplicações React. Gerando o Qrcode estático para pagamento.

O payload do qrcode foi desenvolvido seguindo os documentos oficiais do BACEN:

• ManualBRCode.pdf

• II_ManualdePadroesparaIniciacaodoPix.pdf

🚀 Instalação

Para instalar no seu projeto React com NPM utilize o comando abaixo:

npm install react-qrcode-pix

Ou instale com Yarn:

yarn add react-qrcode-pix

🛠️ Configuração

Propiedade do componente PIX:

• pixkey <string>: Chave PIX (obrigatório).
• merchant <string>: Nome do recebedor (obrigatório).
• city <string>: Cidade do recebedor (obrigatório).
• cep <string>: CEP do recebedor (opcional).
• code <string>: Código único para identificação do pagamento (opcional).
• amount <number>: Valor da transação (opcional).
• onLoad <function>: Callback para receber o payload (opcional).
• ignoreErrors <boolean>: Para não validar as informações (opcional).

Veja as propriedades relacionadas ao qrcode aqui.

Formatos válidos de chave PIX (pixkey):

• EMAIL: fulano_da_silva.recebedor@example.com
• CPF: 12345678900
• CNPJ: 00038166000105
• TELEFONE: +5561912345678
• ALEATORIA: 123e4567-e12b-12d1-a456-426655440000

🛠️ Exemplos de Uso

Você pode ver os exemplos em funcionamento clicando aqui ou veja em sandbox.

• Configuração mínima, sem valor definido:

    <PIX
        pixkey='guilhermeasn@yahoo.com.br'
        merchant='Guilherme Neves'
        city='Paraíba do Sul'
    />

• Configuração completa:

    <PIX
        pixkey='guilhermeasn@yahoo.com.br'
        merchant='Guilherme Neves'
        city='Paraíba do Sul'
        cep='25.850-000'
        code={ 'RQP' + now }
        amount={ 100 }

        onLoad={ payload => setViewPIX(payload) }
    />

Resultado

• QRcode:

• Payload:

00020126470014BR.GOV.BCB.PIX0125guilhermeasn@yahoo.com.br5204000053039865802BR5915Guilherme Neves6014Paraiba do Sul62070503***6304D1F3

✒️ Autor

• Guilherme Neves - repositórios github - website

📄 Licença

Este projeto está sob a licença MIT - veja o arquivo LICENSE para detalhes.