pix-react
QRCode para pagamento PIX / QRCode for Brazilian PIX payment
Instalação
npm install pix-react
Uso
var React = require('react');
var { PixQRCode } = require('pix-react');
React.render(
<PixQRCode
pixParams={{
chave: 'recebedor@email.com',
recebedor: 'Nome do reebedor',
cidade: 'Nome da Cidade',
identificador: '123',
valor: 123.45,
mensagem: 'minha mensagem'
}}
renderAs="svg"
includeMargin={true}
size={256}
/>,
mountNode
);
demonstração
Clique aqui para ver uma demonstração online
Parâmetros PIX
A propriedade pixParams concentra os parâmetros necessários para gerar o PIX
parametro | tipo | Observações |
---|
chave | string | Informe aqui a Chave PIX, use apenas números para CPF ou CNPJ, se for telefone use o padrão internacional. |
recebedor | string | Nome do(a) recebedor(a) |
cidade | string | Nome da Cidade do(a) recebedor(a) ou do(a) pagador(a) |
identificador | string | Identificador do pagamento |
valor | number | Valor do PIX |
mensagem | string | Mensagem adicioinal no PIX (não obrigatória) |
Propriedades herdadas de qrcode.react
prop | type | default value |
---|
renderAs | string ('canvas' 'svg' ) | 'canvas' |
size | number | 128 |
bgColor | string (CSS color) | "#FFFFFF" |
fgColor | string (CSS color) | "#000000" |
level | string ('L' 'M' 'Q' 'H' ) | 'L' |
includeMargin | boolean | false |
imageSettings | object (see below) | |
imageSettings
field | type | default value |
---|
src | string | |
x | number | none, will center |
y | number | none, will center |
height | number | 10% of size |
width | number | 10% of size |
excavate | boolean | false |
Mais informações sobre qrcode.react
Referência
Este projeto foi escrito tendo como base o projeto: https://github.com/joseviniciusnunes/qrcode-pix/