Pix QRCode dinâmico usando ReactJS

3 min readJan 27, 2023

Você já precisou gerar um PIX dinâmico usando ReactJS? Esse processo é mais simples do que parece.

Eu utilizei a lib qrcode-pix para gerar esse QRCode dinâmico. Para começar, vamos criar nossa aplicação usando vite.

npm create vite@latest

Rode o comando acima no terminal, em seguida será solicitado o nome do nosso projeto, eu usei o nome pix-dinamico e como framework usei o React com Typescript.

Agora vamos instalar nossa lib rodando o comando abaixo

yarn add qrcode-pix

Em seguida abra o arquivo App.tsx. Substitua todo o conteúdo por este abaixo:

import {useEffect, useState} from 'react'
import {QrCodePix} from "qrcode-pix";
import './App.css'

function App(): JSX.Element {
    const [qrCode, setQrCode] = useState<string>('');
    const [rawPix, setRawPix] = useState<string>('');

    useEffect(() => {
        async function generateDynamicPix() {
            /*
                version: '01' //versão do pix (não altere)
                key: chave pix
                name: seu nome/empresa
                city: sua cidade
                transactionId: é o identificador que aparecerá no momento do pix (max: 25 caracteres)
                message: mensagem que aparecerá no momento do pix (opcional)
                value: valor que você quer cobrar (opcional)
            */
            const qrCodePix = QrCodePix({
                version: '01',
                key: 'a23b8801-3c9c-4a1a-8a03-a75dc62d8365',
                name: 'Abner Rodrigues',
                city: 'São Paulo',
                transactionId: 'rodriguesabner_',
                message: 'Recebidos da semana??? 😂',
                value: 1500.00,
            })

            const rawPixStr = qrCodePix.payload()
            const qrCodeBase64 = await qrCodePix.base64()

            setRawPix(rawPixStr)
            setQrCode(qrCodeBase64)
        }

        void generateDynamicPix();
    }, [])

    return (
        <div className="App">
            <div style={{
                maxWidth: '400px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                margin: '0 auto',
            }}>
                <h1
                    style={{
                        fontSize: '24px',
                        marginBottom: '5px'
                    }}
                >
                    Pague o que deve com PIX
                </h1>
                <small
                    style={{
                        lineHeight: '1',
                        marginBottom: '5px'
                    }}
                >
                    Sr. Caloteiro, para você pagar o que deve, basta escanear o QR Code abaixo ou copiar o código e
                    enviar para o meu PIX.
                </small>
            </div>

            <div
                style={{marginTop: 20}}
            >
                <img src={qrCode} alt={'QR Code PIX'}/>
                <p
                    style={{
                        maxWidth: '480px',
                        margin: '0 auto',
                        whiteSpace: 'nowrap',
                        overflow: 'auto'
                    }}
                >
                    {rawPix}
                </p>
            </div>
        </div>
    )
}

export default App

Pronto, se você salvar e olhar o navegador, verá que apareceu tudo, menos o que a gente queria (qrcode e o raw do qrcode).

E se der uma olhadinha no console, vai ver que estourou uns erros sacanas lá.

Pra resolver é beeeeeeeeem simples! Instala essa lib:

yarn add buffer

E após isso, abra o seu arquivo main.tsx e cole este conteúdo lá:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Buffer } from 'buffer'
import "./index.css"

// @ts-expect-error
window.Buffer = window.Buffer ?? Buffer

ReactDOM
    .createRoot(document.getElementById('root') as HTMLElement)
    .render(
        <App/>
    )

Se não der certo de primeira, basta reiniciar o React (pressione a tecla ‘r’ no terminal que o React está rodando) ou feche o terminal e rode o projeto novamente (yarn dev).