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:

🚀 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:

QrCodePIX

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.

guilhermeasn / react-qrcode-pix

readme